vyuhDiagram

Navigation and camera animation ​

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

Jump to idea uses navigateToElement. Animate to result and Animate overview use animateToElement and animateToRectangle. Their two-second duration makes interruption easy to observe. Stop camera calls stopViewportAnimation; Normal scale uses navigateToPoint 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 animation futures. Reset disposes its old session and ignores late action feedback from it.

See Navigation API for return values and coordinate spaces, and Animation API for interruption and lifecycle behavior.

Source ​

dart
actions: {
  'Jump to idea': (session) {
    session.navigateToElement('card-0');
  },
  'Animate to result': (session) async {
    await session.animateToElement(
      'card-1',
      duration: const Duration(seconds: 2),
    );
  },
  'Animate overview': (session) async {
    await session.animateToRectangle(
      session.scene.bounds,
      padding: 80,
      duration: const Duration(seconds: 2),
    );
  },
  'Normal scale': (session) =>
      session.navigateToPoint(session.scene.bounds.center, zoom: 1),
  'Stop camera': (session) => session.stopViewportAnimation(),
},