Diagram - Commands

#Usage

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

<Diagram.Root :store="store" page-id="page">
    <Diagram.CommandButton command-id="undo" v-slot="{ getButtonProps }">
        <button v-bind="getButtonProps({ type: 'button' })">Undo</button>
    </Diagram.CommandButton>
    <Diagram.CommandButton command-id="fit" v-slot="{ getButtonProps }">
        <button v-bind="getButtonProps({ type: 'button' })">Fit</button>
    </Diagram.CommandButton>
    <Diagram.Viewport label="Workflow editor" style="height: 24rem" />
</Diagram.Root>

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

Commands give buttons, keyboard shortcuts and overlays one policy-aware action contract. They resolve against current selection and route through the existing editor; they do not need a parallel store-mutation implementation.

#Use built-in actions and current availability

Select Review request, duplicate it, then Undo. Turn read-only on: editing commands disable while Fit stays available. The copied command group supplies Undo and Redo beside individual Diagram.CommandButton controls.

Use Diagram.CommandButton with its getButtonProps slot getter bound to a native button; copied DiagramCommandGroupUI comes from your local Diagram UI path. Each button uses the required ID, native disabled state and current reason title. For example, inside the root:

<Diagram.CommandButton command-id="undo" v-slot="{ getButtonProps }">
    <button v-bind="getButtonProps({ type: 'button' })">Undo</button>
</Diagram.CommandButton>

The group accepts commandIds (default Undo, Redo, Fit) and label (default “Diagram commands”). It needs an ancestor root.

Query session.commands.state(id) or list(ids?) for availability, diagnostics and a display reason. Execution resolves and checks again, so stale availability is not permission to commit. Rejected actions leave the model unchanged; valid no-change edits return noop. View commands also return noop because they do not create a model transaction.

#Resolve a useful custom action

Choose a move distance, select Review request and focus the canvas. Use the button or Alt+M. Block the host move rule, then Try current action to see the current rejection without bypassing availability.

The definition has an ID, label, description and shortcut. Its resolve(context) filters the current selection to nodes and returns a node move action using the current distance. Empty selection resolves to null. The additional availability callback can restrict that result, but cannot grant permission rejected by the node editor.

Root commands replaces matching registry IDs for that root only. In this example its stable definition array adds move-selected; it does not override a built-in. For imperative registration, session.commands.register(definition, replace?) defaults replace to false. Retain and call its disposer; it removes that registration, including out-of-order replacement cleanup. Root-owned definitions are registered/reconciled and disposed by the wrapper.

DiagramAuthoringAction routes to node, structure, swimlane, connection, drawing, history, view or clipboard owners. Connection approval and controlled acknowledgement remain with those owners. Direct host store transactions have a different authority; do not use them to impersonate a resolved editor action.

#Choose shortcut ownership

Default mappings include Delete/Backspace, Command/Ctrl+D for Duplicate, Command/Ctrl+Z for Undo, Command/Ctrl+Shift+Z or Y for Redo, and Alt+R for Rotate. Replacing a built-in definition such as Delete also affects its registry shortcut. Canvas navigation keys are separately handled; clearing authoring shortcuts does not disable every canvas key.

Native fields and composing input retain their keyboard events. Focus the canvas to invoke the example's Alt+M; native selects/numeric fields keep their own keys. Reset creates a new model/session, restores the move distance and host rule, and removes the previous root's registrations.

#Related Docs

• Arrange
• Permissions
• Overlays
• Toolbar and actions