Diagram - Keyboard and input

#Usage

Give Diagram.Viewport a meaningful label and focus it for graph keys. Native controls and composing text retain their own input ownership. Import Diagram from @primeui/vue-diagram and start with the first diagram.

The viewport is a focusable region. Graph focus and graph selection are separate session values. Keyboard handling yields to native controls, composing text and events already handled by application content. Tab retains normal browser focus traversal.

#Viewport graph keys

These mappings apply while graph input owns the event, with no command/Alt modifier unless shown. A command shortcut is checked before graph navigation.

Navigation defaults to zoom limits 0.1 and 4. fit(ids?, padding = 32) uses CSS-pixel padding. zoomAt(zoom, anchor?) defaults its anchor to the viewport center. scrollBounds, when supplied, is a finite positive world rectangle. See Pan and zoom.

#Registry shortcuts

command means Control or Meta. Matching is case-insensitive and compares command, Shift and Alt flags exactly.

Root commandShortcuts defaults to undefined, which keeps registry mappings, definition shortcuts and built-in nudges. Supplying an array replaces those registry mappings; [] disables them. editingOptions.shortcuts is a separate editor shortcut configuration. Check both when customizing authoring input. Unavailable commands remain policy-gated when invoked by shortcut.

Copy/cut/paste use browser clipboard events at the viewport. Native text fields retain their own clipboard behavior. The async clipboard controller reports availability and pending/failure state; an event does not guarantee system clipboard permission. See Clipboard.

#Labels and transform handles

Tab to an editable label and press Enter, Space or F2 to edit it. In the text field, Enter commits, Shift+Enter inserts a line break and Escape discards the draft. Text selection, clipboard keys and composing text belong to the field.

Tab also reaches the selected nodes' resize and rotation handles. Enter or Space grows the selection by 10% from the chosen resize anchor, or rotates it by 15° from a rotation handle. Use the inspector for exact dimensions or angles. The handle's accessible name describes its action.

#Connections, handles and menus

Connection endpoint controls accept Enter/Space and Escape cancellation. Keyboard connection workflows use named ports or body endpoints and current direction/type/capacity rules. On a selected connector, Tab reaches each handle, including dimmed short-leg controls. Enter/Space on a plus inserts one polyline bend and keeps focus on the new square. Arrow keys move a bend/control by one world unit; Shift+Arrow moves ten. Orthogonal segment arrows move only perpendicular to their world axis; wrong-axis keys make no edit. Delete/Backspace on a focused bend removes only that bend; selection deletion applies when the viewport owns the event. Escape on a handle cancels unfinished pointer input and keeps that handle focused so the adjustment can be retried. Tab continues normal traversal; Escape with graph focus returns to the viewport. Numeric demo controls provide another non-drag path; Reset manual path in connector properties clears bends/controls while retaining endpoints and path type. Resize/rotate actions can be applied through command or inspector controls.

The default context menu uses menu items with ArrowUp/ArrowDown/Home/End navigation. Escape closes it and restores its anchor; Tab closes it and continues focus traversal. A custom context-menu template must retain those roles and reachable controls. See Overlays.

#Native controls and pointer input

Viewport handling recognizes input, textarea, select, buttons, links, editable content, common interactive roles and [data-diagram-interactive]. Mark custom controls with that attribute when they own their events. IME composition is allowed to finish before accepting a model-backed field edit. Diagram.Field reconciles saved values after acceptance/rejection and remount; local unsaved component drafts need application ownership.

Session pointer inputs have id, type: 'mouse' | 'touch' | 'pen' and a viewport-local CSS-pixel point, with optional button/additive/pan flags. The viewport owns pointer capture for graph gestures and cancels on capture loss, pointer cancellation, blur and teardown. Interactive descendants retain pointer, wheel and keyboard ownership. See the separate move, resize, rotation, connection and palette guides for click/numeric alternatives.

Physical touch/pen and real IME input have not been verified. Test them in your application. Browser-emulated input and keyboard tests do not establish that device coverage. See Accessibility.

#Related Docs

• Architecture
• Imports
• API

Read-only or restricted labels have no edit tab stop. Clicking their text still follows permitted owner selection. A displayed label uses the Diagram context menu; its active textarea keeps native text selection and its text-editing menu. Keyboard commit or cancel returns focus to the invoking label; clicking another control keeps focus on that destination.