vyuhDiagram
Core

Transform modifiers ​

Transform gestures and API verbs share the same canonical geometry and history.

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

Try it ​

The left rectangle enables ShapeBehavior(rotationHandle: true). Select the right rectangle to compare the default corner rotation without a separate handle. Hold Shift to preserve aspect ratio while resizing or Alt to resize around the center. Rotate either shape, then undo. The buttons transform the current selection using move, rotate and centered resize verbs.

Source: apps/demo/lib/examples/basics/transforms.dart. See Controller for transform arguments and minimum-size behavior.

Source ​

dart
actions: {
  'Select handle example': (s) => s.select(['target']),
  'Select corner example': (s) => s.select(['standard']),
  'Move 40': (s) => s.edits
      .move(const DiagramPoint(40, 0), ids: transformSelection(s))
      .requireAllowed(),
  'Rotate 15°': (s) => s.edits
      .rotate(
        ids: transformSelection(s),
        pivot: DiagramRect.union([
          for (final id in transformSelection(s))
            DiagramControlHandleResolver.selectionBoundsFor(
              s.scene.elementById(id)!,
            ),
        ]).center,
        radians: 0.2617993877991494,
      )
      .requireAllowed(),
  'Resize from center': (s) => s.edits
      .resize(
        const DiagramSize(360, 240),
        ids: transformSelection(s),
        fromCenter: true,
        preserveAspectRatio: true,
      )
      .requireAllowed(),
},