Camera
The camera is the viewport โ the zoom and pan that map world coordinates onto the screen. Camera state lives in the scene's viewport but is editor-local: it is never recorded in undo history.
Click Detection
Click detection answers "what is under this point?" โ the hit-test that turns a world-space coordinate into the thing the user pressed: an element, a resize handle, a link, a link endpoint, an annotation pin, or empty canvas.
Clipboard
Copy, cut, and paste move the current selection through an in-editor buffer. The engine exposes them as verbs; the corresponding actions (actionCopy, actionCut, actionPaste) wire them to standard hotkeys.
Drag And Drop
Dropping a file onto the canvas is dispatched through a host-extensible registry. Built-in handlers cover images, videos and โ in the Editor component โ every importable diagram format (native JSON, Excalidraw, Mermaid, JSON Canvas, Graphviz DOT, draw.io: diagramFileDropHandler from @oh-just-another/importers, which parses the file and inserts it at the drop point via editor.insertScene). Hosts add their own for custom payloads (CSV, โฆ).
Edge Scrolling
Edge scrolling would automatically pan the viewport when a drag (moving a shape, drawing a selection box) reaches the edge of the canvas, so you can drag content beyond what is currently visible.
Eraser
The eraser is the erase mode (hotkey E, actionModeErase). Press-and-drag sweeps shapes under the cursor into a pending set โ previewed dimmed โ and releasing deletes them all in one undo step, dropping their attached links exactly like a Delete-key delete. A plain click erases the shape under it.
Focus
Focus handling keeps canvas keyboard shortcuts from stealing keystrokes meant for a text field. Whenever the user is typing into an `, , , or any contenteditable` host, global handlers must stand down.
Handles
Handles are the eight resize grips (plus rotation anchor) drawn around a
Highlighting
There is no general-purpose "highlight this shape" API (a setter that paints an arbitrary accent ring around any element on demand). What the editor does have is a set of contextual hover highlights, drawn by the overlay during specific interactions:
History
Undo / redo is backed by @oh-just-another/history โ a transactional, invertible patch stack. The engine drives it for you; you can also use the kernel directly for headless replay or server-side audit.
Indicators
Selection indicators are the on-canvas chrome that surrounds the current
Input Handling
The engine never touches the DOM directly. Hosts translate raw browser events into normalized, CSS-pixel domain events and feed them in. This keeps the core framework-agnostic and testable, and lets non-browser hosts drive the same engine.
Pen Mode
Freehand drawing is available through the editor's brush mode, which produces pressure-sensitive strokes (BrushElement). It is the pen-like tool today.
Readonly
Read-only (view) mode is a single engine-level flag that gates all editing while leaving pan, zoom, and selection alive. Toggle it with โฅR (actionToggleReadOnly) or programmatically:
Selection
Selection is the set of elements the user is currently acting on. The engine owns it as immutable state and exposes verbs to read and mutate it; links (connectors) are first-class members of the selection and coexist with selected elements.