Diagram - Connection rules and approval

#Usage

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

<Diagram.Root :store="store" page-id="page" :connection-options="{ allowDangling: false, allowSelfLoops: false, allowCycles: false }">
    <Diagram.Viewport label="Workflow editor" style="height: 24rem" />
</Diagram.Root>

Set creation and editing rules on the root. Port policies, application approval and controlled-store acknowledgement remain separate checks.

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

Connection rules apply when an editor creates or reconnects a connector. The saved model describes endpoints; runtime connectionOptions supplies the application's current topology and approval policy. Start with Create connections for the gesture itself.

#Check ports and attachment capacity

Connect Request received to Review input twice. The first attachment can commit; the second rejects because that input's capacity is one. Connect to Review body next: the body bypasses the port count, but Review permits only two attachments across all its endpoints. Another body connection rejects.

Try Archive data input to see incompatible tags: the source has connectionType: 'flow', Archive has 'data'. Try input as source for a direction rejection. Undo removes a committed connector and releases its capacity; Reset restores the empty graph.

A same-port self-loop consumes two attachments. Reconnection excludes the old edge while checking the candidate's counts. Port compatibility tags differ from root connectionType, which chooses a geometric path type. Read Ports for position modes, measurement and port replacement/removal policies.

#Restrict types, loops, cycles and free endpoints

The initial graph has Request received → Approve request. Choose a case and Try connection: a valid parallel edge, a reverse cycle, a self-loop, a forbidden request-to-archive type pair or a free target. The status explains rejection and the saved count stays unchanged.

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

const connectionOptions: DiagramConnectionOptions = {
    allowDangling: false,
    allowSelfLoops: false,
    allowCycles: false,
    nodeTypes: new Map([['request', ['approval', 'request']]])
};

nodeTypes maps a source node type to permitted target types. A missing source entry is unrestricted; an empty target list disallows all node targets for that source type. Direction matters. A cycle check follows outgoing node attachments from the candidate target back to its source, excluding the replaced connector.

Free endpoints require allowDangling: true; it defaults to false. Self-loops and directed cycles are allowed unless their option is explicitly false. The example sets both false. Endpoint nodes must exist on the connector's page; saved layer and parent ownership must also be valid. Body connections do not bypass node-type or topology rules.

Read-only, hidden/locked owners and operation constraints remain separate editor permissions. A host's direct store transaction has a different authority from an editor request. Model validation still rejects invalid references and geometry, but a host must enforce its own application policy for its direct edits.

#Ask the application before committing

Choose Request connection. It enters pending-approval and invokes the configured onApprovalRequest. No connector or history entry is saved yet. Accept, reject or cancel that request, then compare the saved count and current request ID.

Use requireApproval: true with a runtime callback that carries the exact DiagramConnectionRequest: id, model revision, and the immutable candidate command. Call session.value.connections.resolve(request.id, true) to accept, or false to reject. Resolve through the editor that owns that request. Cancellation uses the session's current pointer/candidate cancellation path. The same approval policy covers reconnection and manual path or decorator edits submitted through this connection editor, as well as new connections.

To inspect stale replies:

1. Request a connection, then choose Host rename invalidates request.
2. Choose Try previous reply. The old ID cannot commit.
3. Request a new connection and try the previous reply again. The new request stays pending until its own exact ID is resolved.

External commits, geometry changes, policy changes, cancellation and disposal can invalidate pending requests. Acceptance checks the candidate again against current geometry and policy. Do not resolve whichever request happens to be current when an older network response arrives.

#Approval and store acknowledgement are separate

This example uses a managed store, so approved transactions commit without a controlled acknowledgement screen. Controlled store proposal/acknowledgement is an independent host workflow; see Controlled State and Data Binding. Approving a connection request does not acknowledge a controlled transaction.

The connection editor's availability(command) reports current permission and diagnostics. execute validates again. Undo/Redo replay accepted history under current rules without requesting the original approval again. Structural graph duplication with mandatory connector approval must not use another editor to bypass the approval lane.

#Related Docs

• Create connections
• Edit connectors
• Ports
• Permissions