vyuhDiagram

Transform modifiers ​

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

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

Try it ​

The left rectangle enables ShapeTransformBehavior(showRotationHandle: 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, rotation and centered resize commands.

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

Source ​

dart
actions: {
  'Select handle example': (s) => s.selectElements(['target']),
  'Select corner example': (s) => s.selectElements(['standard']),
  'Move 40': (s) => s
      .moveElements(transformSelection(s), const DiagramPoint(40, 0))
      .requireAllowed(),
  'Rotate 15°': (s) => s
      .rotateElements(
        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
      .resizeElements(
        transformSelection(s),
        const DiagramSize(360, 240),
        fromCenter: true,
        preserveAspectRatio: true,
      )
      .requireAllowed(),
},