Diagram - Edit connectors

#Usage

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

<Diagram.Root :store="store" page-id="page">
    <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.

Endpoint handles change attachments. Waypoint, segment and control handles change manual geometry.

#Reconnect an endpoint

Choose Archive input, then Reconnect target. The saved connector now ends at Archive request without creating another connector. Undo restores Approve request. Choose Free point (480, 260) to see the dangling-endpoint rejection, then allow free endpoints and retry.

The button alternative sends { kind: 'reconnect', id, end, endpoint }. end is 'source' or 'target'; a node endpoint can include portId, while a free endpoint carries a parent-local point. The example has no parent, so its free point is also in world coordinates.

For a pointer edit, select the line and drag its source or target handle to a compatible node/port. For a keyboard edit, focus an endpoint handle and press Enter or Space. Activate the destination's port button, or focus its node and press Enter to complete the reconnection. Start target preview begins the same reconnection without dragging; Cancel preview or Escape discards it. Reconnection excludes the old connector from capacity and cycle counts before checking the replacement. See Rules.

#Move waypoints and orthogonal segments

Select the connector, choose Waypoint 1, then Move chosen handle down. The distance is in world units. Choose First horizontal segment to move a whole leg while reusing neighboring corners. Choose First polyline insertion with Polyline geometry to insert one bend. Remove first bend removes only that bend, joining its neighbors. Drag or arrow keys provide the equivalent handle interaction. Undo restores the saved path.

The local path chooser switches Polyline/Orthogonal while retaining saved bends. A square waypoint moves freely. A plus inserts one polyline vertex and becomes that vertex, retaining focus. Tab to a plus and press Enter/Space for insertion; arrows then adjust the same point. Delete/Backspace on a focused square removes that bend, never the connector. Click-only does not insert. An orthogonal segment constrains movement perpendicular to its world axis: a horizontal segment moves up/down, a vertical segment moves left/right. Movement aligns with adjacent anchors within six screen pixels; keyboard nudges remain exact (one world unit, ten with Shift). Short-leg affordances are dimmed, but remain in the Tab order and become fully visible on focus. Cleanup runs at completion and only removes redundant points touched/generated by that edit; intentional keyboard insertions, reversals and unaffected saved anchors remain. Wrong-axis or zero-motion segment actions make no transaction. The resulting points are stored in the connector parent's local space.

Turn on External route owns path, then try a numeric move. The example gives sceneOptions.routes an exact world-space copy of the currently displayed path. It now owns the route; the connection editor rejects manual path edits with a reason. Turn the switch off to release that authority and retry. This route preference is transient and is not an Undo step. Reset restores the fixture if moving attached nodes makes the captured external endpoints invalid.

sceneOptions.connectorKinds can also own a path's geometry kind. A supplied route must be continuous and agree with resolved endpoints; reconnection cannot silently detach it from its owner. Built-in obstacle routing is a separate derived route owner that retains manual anchors, explained in Routing.

#Reshape a Bézier control

Select the curve to see its start/end controls and tangent guides. Drag a control or choose one and Raise control. The numeric alternative sends the current world handle point through the public handleCommand adapter.

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

const editor = session.value.connections;
const control = editor.handles('link').find((handle) => handle.kind === 'control1');
if (control) {
    const command = editor.handleCommand('link', control, {
        x: control.point.x,
        y: control.point.y - 20
    });
    editor.execute(command);
}

Focus a waypoint, segment or control handle and use arrows for one world unit; Shift+arrows moves ten. Each keyboard action finishes its own edit. Arrow keys on endpoint handles do not nudge their attachments: Enter/Space starts reconnection. Native fields keep their own keyboard events.

Explicit controls require one cubic span and no waypoints. The control edit does not change source/target identities. For path conversion and its geometry retention rules, see Connector paths.

#Preview, history and recovery

The portable connection editor supplies availability, begin, update, finish, execute, cancel, getSnapshot, subscribe, handles and handleCommand, beginHandleEdit, updateHandleEdit, executeHandle, removeHandleCommand and removeHandle. Check current availability for a custom control, then inspect the execution result again. Availability can change between checking and committing.

#Related Docs

• Create connections
• Connector paths
• Ports
• Labels
• Rules