Diagram - Permissions

Control editing with read-only mode, record constraints and inherited locks, and explain rejected actions.

#Usage

import { Diagram } from '@primeui/vue-diagram';
<Diagram.Root :store="store" page-id="page" :editing-options="{ readOnly: true }">
    <Diagram.Viewport label="Workflow editor" style="height: 24rem" />
</Diagram.Root>

Set editingOptions.readOnly to block session edits while retaining selection and navigation. Application-owned store writes remain application authority.

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

Editing policies control what the Diagram session may change. They can restrict the whole canvas, individual operations on a record, or an owning container or layer. Selection and navigation remain available while ordinary editing is blocked.

#Make the canvas read-only

Change Read-only, then select and try moving the first card. The same policy applies to the pointer gesture and the public editing command. Host rename shows a separate application-owned store transaction.

Loading Demo...
import type { DiagramEditingOptions } from '@primeui/vue-diagram';

const options: DiagramEditingOptions = { readOnly: true };

Bind this object to the root's editingOptions. The default is {} with readOnly off. Read-only is an editor policy, not an authorization boundary: your application still owns store transactions, data loading and controlled-state acceptance. Enforce business authorization at those application boundaries.

#Restrict one record

Choose Fixed position and compare Try moving 40 with Try rotating 15°. The card denies movement and resizing while allowing rotation. Locked card denies all editing. Change Fixed movement to change its policy without saving that choice into the model.

Loading Demo...
import type { DiagramEditingOptions } from '@primeui/vue-diagram';

const options: DiagramEditingOptions = {
    constraints: new Map([
        ['fixed', { move: false, resize: false }],
        ['sealed', { locked: true }]
    ])
};

Constraints are keyed by record ID. An omitted operation flag permits the operation subject to other policies and geometry rules; false denies it. locked: true blocks editing more broadly. The same constraint record can restrict labels, content, structure, connections, ports, deletion and other supported operations; their owning guides explain those workflows. Size limits and aspect preservation belong in Resize.

#Respect owning locks

Try both cards while their owners are locked, then unlock and retry. The Container lock control changes local constraints. The Layer lock control uses a structural command, so its saved lock state participates in history.

Loading Demo...

A locked layer blocks edits to its records. A locked ancestor blocks edits to its descendants. Operation-specific flags such as move: false are checked on their record; they do not become an inherited lock. A transform also checks affected descendants, so one constrained member can reject the whole operation. Geometry owned by a lane, notation or attachment may require its owning API even when all editing flags permit a transform.

#Availability, rejection and policy changes

Ask the session before presenting an unavailable action, and inspect the result when executing it. Availability is a current assessment; execution remains authoritative if state changes between the two calls.

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();

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

const command: DiagramEditCommand = { kind: 'move', delta: { x: 40, y: 0 } };
const availability = session.value.availability(command, ['card']);
const result = session.value.edit(command, ['card']);
// availability.available and availability.diagnostics explain the current policy.
// result.status and result.diagnostics describe the attempted operation.

These examples leave the attempt buttons enabled so you can observe rejection. Production controls can use the returned availability and reason directly instead of maintaining a second permission engine. Rejected edits leave committed geometry unchanged. Pending controlled proposals or another preview owner can also block an action; a disabled handle alone does not identify the reason.

Replace the bound options or constraints map when policy changes. The root forwards the current options to its session, cancelling an unfinished pointer gesture. Local editing options are not model records and have no model Undo entry. Undo and Redo are checked against the current policy, so a later lock can block history replay. Reset in these examples restores both model and local policy.