Multi-selection and arrangement

Loading interactive example…Open in new tab ↗

Opening the live canvas…

Start with three differently sized objects selected. Align top aligns their upper edges, then Space evenly equalizes the horizontal gaps while keeping the outer span. Overlap aligns their horizontal centers. Moon to front selects the moon and raises it above the other objects.

Each content operation is a separate undo unit. Selection changes do not add to history. After selecting only the moon, distribution is denied: select all three again before retrying. Reset restores the original positions and empty history.

Session commands

Call	Behavior
selectAll()	Select eligible document elements without modifying content.
align(DiagramAlignment.top)	Align the current movable selection to its aggregate top edge. Requires at least two objects.
distribute(DiagramDistribution.horizontal)	Equalize gaps between the selected objects. Requires at least three.
align(DiagramAlignment.horizontalCenter)	Align object centers along the horizontal axis; their vertical positions are retained.
reorder(DiagramLayerOrder.front)	Bring selected objects in front of their siblings.

Commands return DiagramPolicyDecision; this example uses requireAllowed() so the shared shell displays denials. Hosts can use canAlign, canDistribute and canReorder to enable controls, while execution still goes through admission. The example uses no app-specific geometry or ordering algorithm.

session.selectElements(['moon', 'cloud', 'comet']);
session.align(DiagramAlignment.top).requireAllowed();
session.distribute(DiagramDistribution.horizontal).requireAllowed();
session.undo().requireAllowed(); // Revert distribution; retain alignment.

Source: apps/demo/lib/examples/basics/arrangement.dart. For ownership and nested selections, see frames and ownership. This fixture does not qualify large-document gesture performance.