5. Show properties and connections

123456789

The built-in inspector is included in Diagram Kit. It uses the same DrawingSession 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:

Expanded(
  child: Row(children: [
    Expanded(child: DrawingCanvas(session: session)),
    SizedBox(width: 280, child: DrawingInspector(session: session)),
  ]),
),

The inspector observes the same session and shows properties applicable to the selection. It writes through the same commands, admission and undo history. On a narrow screen, put it in a drawer instead of reserving 280 pixels.

Connect our flowchart

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

session.connect(startId, processId);
session.connect(processId, decisionId);

Connections retain endpoint identities. Moving a node causes the shared resolver to update the route; 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/command/observe loop. Add this method to the State:

Widget buildSelectionTools() {
  final selection = session.selection;
  final ids = selection is ElementSelection
      ? selection.elementIds : <String>{};
  return TextButton(
    onPressed: ids.length == 1
        ? () => showDecision(session.moveElements(ids, const DiagramPoint(20, 0)))
        : 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 session.document.shapeById(id) and submit setShapeStyle; for registered domain fields use updateValues. Do not mutate the returned element. See shape properties for those command 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.