Tools

Tools are expressed as the editor's active mode. The mode dictates how a pointer-down is interpreted — select an element, pan, or draw a new shape of a given kind.

Modes

Mode is a string union, and DEFAULT_MODE is "select". The built-in modes and their toolbar hotkeys:

Mode	Hotkey	Behaviour
select	V	Click selects, drag on empty lassos, drag on selection moves.
hand	H	Dedicated pan mode.
draw-rect	R	Rubber-band rectangle creation.
draw-ellipse	O	Rubber-band ellipse creation.
draw-text	T	Click places a text shape and opens its inline editor.
draw-edge	L	Edge creation from press-down shape to release shape.
draw-frame	F	Rubber-band frame creation.
brush	B	Pressure-sensitive freehand stroke.
erase	E	Drag to sweep shapes into a pending set (previewed dimmed); release deletes in one undo step. Brush strokes are erased partially — the swept arc is removed and the survivors become fragments.
laser	K	Ephemeral presentation pointer; the fading trail never touches the scene or history.
crop	—	Image crop, entered by double-clicking an image. Enter commits, Escape cancels.

Colour sampling is not a mode: the colour picker arms a one-shot pipette via editor.beginEyedropperPick(onPick), and the next canvas click samples the colour under the cursor without leaving the current tool.

Pan and zoom remain available as gestures (middle-mouse, Space+drag, wheel) regardless of the active mode. In read-only mode only select, hand and laser mode switches are allowed.

The activeTool object

editor.activeTool is the single source of truth for the current tool — a value object { type, locked, lastActiveTool } (ActiveTool). editor.setActiveTool(type) is the only way to switch; toolbar buttons and hotkeys reach it through the action registry.

import { Editor, DEFAULT_MODE, type ActiveTool, type Mode } from "@oh-just-another/state";

editor.setActiveTool("draw-rect");
const tool: ActiveTool = editor.activeTool;
tool.type; // "draw-rect"
tool.lastActiveTool; // "select" — the tool active before the switch

The object reference is stable between changes, so it is safe in React dependency arrays.

With the React component, the tool is on the EditorAPI handle:

import { useRef } from "react";
import { Editor, type EditorAPI } from "@oh-just-another/editor";

function Host() {
  const ref = useRef<EditorAPI>(null);
  const drawRect = () => ref.current?.setActiveTool("draw-rect");
  return <Editor ref={ref} initialTool="select" />;
}

Sticky tools (tool lock)

By default a draw tool auto-reverts to select after one successful create. Toggle tool-lock (activeTool.locked) to keep the tool active so the user can draw many shapes in a row.

editor.setToolLocked(true);
const locked = editor.activeTool.locked;

Reacting to tool changes

Listen to the typed tool event to keep a toolbar in sync. It fires on a type switch and on a lock flip.

editor.on("tool", (tool) => highlightToolButton(tool.type));