Types
Import these from @grafloria/renderer.
Types
AnnouncementListener
tstype AnnouncementListener = (announcement: Announcement) => void;
AnnouncementUnsubscribe
Remove an announcement listener. (Named to avoid clashing with the
viewport module's Unsubscribe, which is re-exported from the same barrel.)
tstype AnnouncementUnsubscribe = () => void;
FocusTargetType
Also has every member of String, listed on its own entry.
KeyboardNavigationController — a fully keyboard-operable, screen-reader- announced canvas.
No diagramming competitor does this: Mermaid is read-only, and React Flow / JointJS+ / GoJS are pointer-first with, at best, arrow-key nudging. This class owns the whole keyboard model:
- a FOCUS ring that walks nodes and links (Tab / Shift+Tab, arrow keys for spatial movement) — focus is distinct from selection, as in every native UI;
- arrow-key NUDGE of the selection (Shift = coarse step), committed as ONE undoable command per key press;
- Enter to edit the focused node's label (the host opens the editor);
- keyboard CONNECT: pick a source port, then a target node/port, commit;
- ARIA ANNOUNCEMENTS for selection and structure changes, which the host pipes
into an
aria-liveregion.
Framework-agnostic: it emits state + {@link Command}s, and never renders.
tstype FocusTargetType = 'node' | 'link';
HaloAction
Also has every member of String, listed on its own entry.
Halo (context toolbar) actions, JointJS+-style.
tstype HaloAction = 'connect' | 'clone' | 'fork' | 'delete';
HighlighterKind
Also has every member of String, listed on its own entry.
HighlighterController — hover / selection / validation / drop-target decorations.
JointJS calls these "highlighters": decorations layered OVER an element rather than baked into it. Keeping them out of the shape lets several stack (a node can be selected AND invalid) and lets a host restyle them without touching the node renderer.
Like the rest of the interaction layer this class only produces geometry — it never renders and never mutates the model.
tstype HighlighterKind = 'hover' | 'selection' | 'validation' | 'connect-target';
NavDirection
Also has every member of String, listed on its own entry.
tstype NavDirection = 'up' | 'down' | 'left' | 'right';
ResizeHandleId
Also has every member of String, listed on its own entry.
The 8 resize handles, named by compass direction.
tstype ResizeHandleId = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w';
TextEditTargetType
Also has every member of String, listed on its own entry.
A host cannot avoid owning the actual text widget (an <input>, a
contenteditable, a native text field), but everything AROUND it is
framework-agnostic and belongs here:
- WHAT is being edited (node label / link label) and its current text;
- WHERE the editor goes, in world coordinates (the host maps to screen with its viewport, so the editor lands exactly over the text at any zoom);
- the ONE undoable {@link Command} that commits the new value.
The commit path is the point: before this, in-place edits wrote straight to the model and could not be undone.
tstype TextEditTargetType = 'node' | 'link-label';
ToolKind
Also has every member of String, listed on its own entry.
tstype ToolKind =
| 'resize'
| 'rotate'
| 'remove'
| 'halo'
| 'link-endpoint'
| 'vertex-add'
| 'vertex-remove';
Was this page helpful?