vyuhDiagram
Core

Navigation and camera animation ​

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

Jump to idea calls controller.view.show(ViewTarget.element(...)) without motion. Animate to result and Animate overview pass motion: Motion(duration: Duration(seconds: 2)) for an element and for ViewTarget.all(); the long duration makes interruption easy to observe. Stop camera calls controller.view.stop(); Normal scale shows ViewTarget.point with zoom: 1.

Camera operations are presentation state. They require a mounted canvas, do not edit the document, and do not create undo entries. The example awaits the returned futures. Reset disposes its old controller and ignores late action feedback from it.

See Navigation and motion for targets, return values, coordinate spaces and interruption.

Source ​

dart
actions: {
  'Jump to idea': (controller) {
    controller.view.show(const ViewTarget.element('card-0'));
  },
  'Animate to result': (controller) async {
    await controller.view.show(
      const ViewTarget.element('card-1'),
      motion: const Motion(duration: Duration(seconds: 2)),
    );
  },
  'Animate overview': (controller) async {
    await controller.view.show(
      const ViewTarget.all(padding: 80),
      motion: const Motion(duration: Duration(seconds: 2)),
    );
  },
  'Normal scale': (controller) => controller.view.show(
    ViewTarget.point(controller.scene.bounds.center, zoom: 1),
  ),
  'Stop camera': (controller) => controller.view.stop(),
},