vyuhDiagram
Core

Fitted and infinite canvas ​

Loading interactive example…Open in new tab ↗
Opening the live canvas…

Choose Fit to content, then Far away. The canvas is the extent of the cards plus 64 viewport pixels on every side, so the room around the content looks the same at every zoom, and the camera stays within it. Move a card outward and the canvas grows with it; move it back and the canvas shrinks. Switch to Infinite and repeat: the camera can leave the drawing behind. Fit returns to the cards.

A fit canvas constrains camera navigation only; it is not a parent frame and does not rewrite, clip or delete document elements. An empty document gets a viewport-sized canvas around the origin.

The bounds are core configuration: start with DiagramConfiguration(bounds: CanvasBounds.fit(padding: 64)), read the observable controller.bounds and change them with controller.edits.setBounds(CanvasBounds.infinite) or controller.edits.setBounds(CanvasBounds.fit(padding: 32)). Bounds changes and camera changes do not enter document undo history. Use an owning frame's clipping grammar when the document itself needs clipped content.

See Canvas API and Navigation and motion.

Source ​

dart
actions: {
  'Fit to content': (controller) => controller.edits.setBounds(
    const CanvasBounds.fit(padding: exampleCanvasPadding),
  ),
  'Infinite': (controller) =>
      controller.edits.setBounds(CanvasBounds.infinite),
  'Far away': (controller) => controller.view.show(
    const ViewTarget.point(DiagramPoint(4000, 4000), zoom: 1),
  ),
},