Skip to content
D
Documentation

Interaction — types

reference
2 min readUpdated

Types

Import these from @grafloria/renderer.

Types

AnnouncementListener

ts
type 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.)

ts
type 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-live region.

Framework-agnostic: it emits state + {@link Command}s, and never renders.

ts
type FocusTargetType = 'node' | 'link';

HaloAction

Also has every member of String, listed on its own entry.

Halo (context toolbar) actions, JointJS+-style.

ts
type 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.

ts
type HighlighterKind = 'hover' | 'selection' | 'validation' | 'connect-target';

Also has every member of String, listed on its own entry.

ts
type 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.

ts
type 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.

ts
type TextEditTargetType = 'node' | 'link-label';

ToolKind

Also has every member of String, listed on its own entry.

ts
type ToolKind =
  | 'resize'
  | 'rotate'
  | 'remove'
  | 'halo'
  | 'link-endpoint'
  | 'vertex-add'
  | 'vertex-remove';

Was this page helpful?

Interaction — types — Grafloria