Property inspector

DiagramInspector(controller: controller) displays the properties supported by the current selection. Import it from package:vyuh_diagram_extension_editor/vyuh_diagram_extension_editor.dart. The canvas and inspector share the same controller and registry.

Everything the inspector shows is a property of the property grammar: built-in element, shape, connector, text and canvas properties, shape value fields, properties contributed by installed extensions and the host's own. An element property names the verb that sets it, and each change performs that verb as one undoable edit. Canvas options, such as the grid, are not part of the document: the extension that owns them contributes their properties, they change through controller.setOptions and are not undoable.

Shared properties

Section	Controls
Transform	Paired X/Y fields; Width, Height and Rotation in one row; aspect-ratio lock.
Alignment	Left, horizontal center, right, top, vertical center and bottom; available for eligible multi-selections.
Appearance	Whole-element opacity, independently of fill and stroke alpha.
Shape properties	Fill, stroke, corner radius, geometry, declared values, image, text and extension sections such as tables.
Connector properties	Registered route choices, port spacing and route options, independent start/end arrowhead sizes, and stroke.
Text	Direction, font, color and size; marks, headings and lists when rich text is installed; paragraph alignment.
Canvas	Finite canvas, grid visibility and type, snapping, grid resolution and rotation snapping.

Movement, resizing and rotation fields follow the element's behavior; fill, stroke, corner radius, text and value fields follow its anatomy. Locked elements expose their lock state instead of editing controls. Multi-selection exposes alignment, opacity and compatible kind-owned style, value and connector properties. Each selected kind must declare the field. Ranges and choices intersect; disjoint constraints show a reason and differing values display Mixed, without marking the first choice as selected.

Opacity slider drags preview continuously and commit one undo entry. Cancelling or unmounting an unfinished control restores its baseline. Numeric inputs allow exact values without dragging.

Customize the inspector

Parameter	Effect
properties	A DiagramProperties whose sources contribute your own properties.
editors	DiagramPropertyEditor.of<T> editors that render custom properties of value type T, ahead of the built-in ones.
icons	Resolves the DiagramIcon names of your properties and options; declarations without a match draw their svg glyph.
searchable	Offers a filter by property label.

Every field shows the denial of its last change under its control. See properties and the inspector for a worked example.

Whole-element opacity

controller.setOpacity(0.6, ids: ['warehouse', 'delivery-route']);

setOpacity(double opacity, {Iterable<String>? ids}) accepts finite values from 0 to 1. It applies one atomic, undoable edit; a missing or locked target rejects the selection edit. Fill and stroke colors retain their own alpha values.

All canonical elements have an opacity property, including shapes, Plain Text, Rich Text, tables and connectors. It survives copying, duplication and JSON serialization; JSON requires it on every element. Flutter and SVG apply it to the element's rendered content. Transparent elements retain their hit geometry; selection handles and the text caret remain visible.

On a focused editor canvas with selected elements, 1–9 set 10–90% and 0 sets 100%. Focused text fields and active text editing keep their normal typing behavior. Set 0% using the inspector or API.

Opacity targets element IDs. Composed text/image slots and table cells do not have independent element opacity. Child elements owned by a frame retain their own opacity; changing the frame does not rewrite them. This is a durable appearance setting, not a playback or blinking API.

Standard controls for editors

Custom editors can use the same controls as the built-in ones. They, the DiagramPropertyInspector panel and the other DiagramInspector* building blocks are in the editor's controls library:

import 'package:vyuh_diagram_extension_editor/controls.dart';

A custom editor itself, DiagramPropertyEditor, is in package:vyuh_diagram_flutter/extension_api.dart.

Control	Purpose
DiagramNumericProperty	Compact labeled number with bounds, step and unit.
DiagramPropertyStepper	Horizontal label/value numeric control.
DiagramPercentageProperty	Slider and exact percentage input; nullable value displays Mixed.
DiagramVisualChoiceField<T>	Visual alternatives supplied by the caller.
DiagramInspectorControl	Shared theme-derived control height.
DiagramInspectorSectionLabel / DiagramInspectorGap	Consistent section hierarchy and spacing.

The percentage control separates drag preview (onChanged), drag completion (onChangeEnd) and exact-value submission (onSubmitted). Connect preview and completion to field.begin(), whose gesture previews the property's verb on an interaction lease so a drag remains one undo entry, and submission to field.set, which performs the verb once.

The inspector reads connector routes and arrowheads from the installed registry; it does not maintain a second list of supported types.