vyuhDiagram

5. Show properties and connections ​

Commercial extension tutorial · Built on the free Core + Flutter foundations. Start with the free Hello World example.

The optional inspector is supplied by vyuh_diagram_extension_editor. It uses the same DiagramController as the canvas. You can also build your own properties panel using the custom control pattern below.

Keep the toolbar above the canvas. Replace its Expanded canvas child with a bounded row:

dart
Expanded(
  child: Row(children: [
    Expanded(child: DiagramCanvas(controller: controller)),
    SizedBox(width: 280, child: DiagramInspector(controller: controller)),
  ]),
),

The inspector observes the same controller and shows properties applicable to the selection. Each change is one edit through the same admission and undo history. On a narrow screen, put it in a drawer instead of reserving 280 pixels. To add, replace or hide properties, see properties and the inspector.

Connect our flowchart ​

Append these calls to initState after creating all three nodes and before subscribing:

dart
controller.edits.connect(startId, processId);
controller.edits.connect(processId, decisionId);

Connections retain endpoint identities. Moving a node updates its connectors automatically; the toolbar does not recalculate connector coordinates. Connection mode and port policy come from registered definitions. Port names alone do not enforce workflow direction or business rules.

Write a custom property control ​

A custom panel follows the same read/perform/observe loop. Add this method to the State:

dart
Widget buildSelectionTools() {
  final selection = controller.selection;
  final ids = selection is ElementSelection
      ? selection.elementIds : <String>{};
  return TextButton(
    onPressed: ids.length == 1
        ? () => showDecision(controller.edits.move(const DiagramPoint(20, 0), ids: ids))
        : null,
    child: const Text('Move selected right'),
  );
}

Add buildSelectionTools() to the toolbar children. Its existing reactive builder refreshes this control when selection changes. For an appearance field, read controller.document.shapeById(id) and call setStyle([id], fill: ...), which changes only the parts you pass; for registered domain fields use setValues(id, patch). Do not mutate the returned element. See shape properties and verbs for those signatures.

Selection can represent text or a connector label as well as objects, so handle the selection variant before treating it as a set of node IDs. A disabled button is a usability hint; admission checks still run at execution.

Checkpoint: select a node, edit it in the inspector, drag it and undo. Its connections remain attached, and your custom selection button follows the selection.

Import package:vyuh_diagram_extension_editor/vyuh_diagram_extension_editor.dart to use DiagramInspector; add the UI package as a direct dependency. The canvas itself does not depend on UI.