vyuhDiagram

9. Control the canvas and grid ​

Finish with view controls. These change presentation and interaction settings without rewriting the saved flowchart.

Add a grid toggle to the reactive toolbar:

dart
FilterChip(
  label: const Text('Grid'),
  selected: session.canvasConfiguration.grid.visible,
  onSelected: (visible) => session.setConfiguration(
    session.canvasConfiguration.copyWith(
      grid: session.canvasConfiguration.grid.copyWith(visible: visible, snap: visible),
    ),
  ),
),

This UI deliberately toggles visibility and snapping together. They are independent SDK options. When visible, direct manipulation snaps to displayed grid spacing; when hidden with snapping enabled, it uses the configured base interval. Zooming out can reduce grid density.

Add two more toolbar controls:

dart
TextButton(
  onPressed: () => session.navigateToSelection(),
  child: const Text('Fit selection'),
),
TextButton(
  onPressed: () => session.navigateToPoint(DiagramPoint.zero, zoom: 1),
  child: const Text('Reset view'),
),

Navigation needs a mounted, laid-out canvas. These callbacks run after mounting. For initial navigation, use a post-frame callback and verify that the State is still mounted and the session attached.

For a zoom percentage, register addPresentationListener, read session.cameraState?.zoom, and update a small host notifier. Remove the same listener during cleanup. Document listeners will not update a zoom label.

The default canvas is infinite. Set canvasPolicy to FiniteCanvasPolicy with world bounds if your editor needs a bounded workspace. Configuration updates preserve document and history; use copyWith so installed actions and hooks survive your grid toggle.

Checkpoint: select nodes and fit the selection, change the grid, pan and zoom. Saving still captures authored world coordinates; camera movement creates no document Undo entry.

Where to go next ​

You now have a flowchart canvas, a registry, reactive host controls, an inspector, connections, a JSON boundary, a custom node and a shared keyboard action. Your application supplies storage, authorization and domain semantics around those boundaries.

Try the interactive flowchart example, then use Common tasks for focused recipes or Build a library to package your domain shapes. Navigation and Grids cover the remaining view controls.