Diagram - Arrange

#Usage

import { Diagram } from '@primeui/vue-diagram';

<Diagram.Root :store="store" page-id="page">
    <Diagram.CommandButton command-id="align-y" v-slot="{ getButtonProps }">
        <button v-bind="getButtonProps({ type: 'button' })">Align selection</button>
    </Diagram.CommandButton>
    <Diagram.CommandButton command-id="front" v-slot="{ getButtonProps }">
        <button v-bind="getButtonProps({ type: 'button' })">Bring to front</button>
    </Diagram.CommandButton>
    <Diagram.Viewport label="Workflow editor" style="height: 24rem" />
</Diagram.Root>

Command buttons derive availability from the selected items and recheck policy when activated.

This skeleton assumes an initialized store with page page. Use First Diagram for model creation, style imports and store disposal.

Arrange uses the existing node editor and command registry. Select the records to change; each accepted operation is one atomic history step. Start with Selection if you need pointer or programmatic selection patterns.

#Align and distribute several nodes

Select three cards, choose Align vertical centers, then Distribute horizontally. The first action makes a row; the second spaces their world bodies with equal gaps. Use Undo after each action to compare the positions.

The copied DiagramArrangeUI reads the root's selection inspector model and uses policy-aware editing callbacks. Its center-alignment and distribution controls share the same authority as public edit commands; no separate arrange engine is needed. It also offers front/back controls for the same selection.

edge is required and accepts start, center or end. Alignment uses the corresponding edge of the selected roots' union, not the first clicked node. It needs at least two independent node roots. Distribution needs at least three; first and last extents define the available span, so crowded selections can produce negative gaps. Rotated nodes use world bounding bodies, and deltas are rebased into each parent's local coordinates.

The following action reads the current session in a child component rendered inside Diagram.Root. In setup, context refs require .value.

import { useDiagramContext } from '@primeui/vue-diagram';

const { session } = useDiagramContext();

session.value.select(['review', 'approve', 'archive']);
session.value.edit({ kind: 'align', axis: 'y', edge: 'center' });
session.value.edit({ kind: 'distribute', axis: 'x' });

Omitted IDs use the current selection. Selected descendants of selected owners do not receive a second independent transform. Connectors follow node geometry; they are not additional alignable bodies. Move restrictions, descendants and owning locks can reject the whole operation. Explicit arrange commands do not run the pointer snapping workflow.

#Change stacking, duplicate or delete

Select Review request and compare front/back or one-step order changes. Then select the linked pair and choose Duplicate or Delete. The status shows saved record counts and order; Undo reverses the complete graph change.

Order does not transfer a record to another layer. Node and connector collections are reordered independently within each layer. Duplicate preserves supported ownership and internal connections; external links are not an independent graph copy promise. See the Clipboard for fragments, remapping and specialized ownership.

The example's action selector delegates to Diagram.CommandButton using built-in IDs front, back, forward, backward, duplicate and delete. It shows current availability and reason, and execution checks again. A valid operation that would change nothing returns noop without a new history step; rejection leaves the saved graph unchanged.

Current policy governs Undo as well as the initial action. Use the owning container, swimlane or notation API when it controls the selected geometry. Reset restores the fixture, selection, history, action selector and initial fitted view.

#Related Docs

• Commands
• Snapping
• Permissions
• Events and commands