View-only diagrams

Loading interactive example…Open in new tab ↗

Opening the live canvas…

Select shapes and connections, drag to pan, scroll to navigate, or pinch to zoom. Ctrl/Command-scroll zooms around the pointer. Arrow keys pan; Escape clears the selection. None of these operations modifies diagram content.

Use DrawingCanvas(session: session, viewOnly: true) in either Kit edition. It mounts a separate lightweight renderer without the editor's tools, transform handles, text-input connection, IME or editing shortcuts. The canonical engine, resolved geometry, image/text painting and retained paint caches are shared. The canvas uses the session’s attribution configuration.

The view listens to scene, selection, settings and camera changes, so application code can still load or update the diagram through the session. View-only describes canvas interaction, not a restriction on your application's session commands. Custom widget shapes use their portable painted representation in this mode. Editor extensions and editing toolbars are not mounted by the view.

Source

Widget buildExample() => ExampleCanvas(
  title: 'View only',
  instructions: 'Select a card or connection. Drag or scroll to pan; pinch or Ctrl/Command-scroll to zoom. Shapes and text cannot be edited.',
  viewOnly: true,
  createSession: () => DrawingSession(
    document: connectedCardsDocument(),
    configuration: DrawingConfiguration(),
  ),
);