vyuhDiagram
Core

Element motion ​

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

Move with motion calls controller.edits.move(delta, ids: ['hub'], motion: Motion.smooth). Resize with motion calls setElementBounds with Motion.slow. Lay out as a tree and Lay out in a circle call controller.edits.layout(layout, motion: Motion.slow).

The document takes each result at once and records one undo step; the canvas animates the elements and their attached connectors to it. Selection and hit testing use the final geometry while the motion plays, and reduced motion presents the change at once.

See animated geometry and Live data.

Source ​

dart
actions: {
  // The hub travels right, or back left, with its connectors.
  'Move with motion': (controller) => controller.edits
      .move(
        DiagramPoint(_hub(controller).left < 300 ? 160 : -160, 0),
        ids: ['hub'],
        motion: Motion.smooth,
      )
      .requireAllowed(),
  // The hub grows about its center, or shrinks back.
  'Resize with motion': (controller) => controller.edits
      .setElementBounds(
        'hub',
        DiagramRect.fromCenter(
          center: _hub(controller).center,
          size: _hub(controller).width < 200
              ? const DiagramSize(240, 150)
              : const DiagramSize(160, 100),
        ),
        motion: Motion.slow,
      )
      .requireAllowed(),
  'Lay out as a tree': (controller) async => (await controller.edits.layout(
    Layout.tree(gap: 48, levelGap: 90),
    motion: Motion.slow,
  )).requireAllowed(),
  'Lay out in a circle': (controller) async => (await controller.edits.layout(
    Layout.circular(gap: 48),
    motion: Motion.slow,
  )).requireAllowed(),
},