Add text labels to both drawing surfaces

Merged
ET
16h ago
+1707-14

Allow candidates to label diagrams with typed multiline text instead of handwriting annotations with a mouse. Keep adjustments in an uncommitted draft and store each confirmed label as one structured drawing operation so the shared history, image export and replay can retain its content.

Closes #487

Motivation

Candidates currently have to write diagram labels freehand on the whiteboard and example drawing panel. Add a shared Text tool for readable multiline annotations such as node names and complexity notes.

Changes

Add a Text tool to the whiteboard interview and example drawing panel. Click or drag to create a draft, enter text, and choose a color. Draft borders move the label and handles adjust its dimensions independently; height determines font size without stretching glyphs. The box grows with input and shrinks back to its manually selected size when text is removed. Enter inserts a newline, Ctrl+Enter or Confirm commits, and Escape or Cancel discards the draft. Empty confirmation also leaves the drawing unchanged. The initial text color is black, and each surface remembers its last text color for the lifetime of that mounted board.

Committed labels cannot be edited, moved or resized. Each label becomes one undoable operation in the existing history. Erasing paints over text using the existing background-colored strokes, and Clear and available Undo/Redo controls retain their existing semantics. Both surfaces use web/board-text.js for draft input and web/whiteboard.js for the drawing model, history and rendering; confirmation uses each surface's existing recording and publishing paths.

Text operations store the text, color, coordinates and font size in the fixed 1600 x 1000 board coordinate space. The renderer uses sans-serif text, a top-left origin and a line height of 1.25 times the font size, with explicit newlines and no viewport-dependent wrapping. Input is limited to 500 UTF-16 code units and 20 lines, with font sizes from 12 to 128 board pixels. The recording contract documents the new operation and older-viewer limitations.

螢幕擷取畫面 2026-10-27 151129
  • create text box and enter text in whiteboard interview
螢幕擷取畫面 2026-10-27 151158
  • resizing, changing color, multiline input in whiteboard interview
螢幕擷取畫面 2026-10-27 151214
  • using eraser on committed label in whiteboard interview
螢幕擷取畫面 2026-10-27 151940
  • create text box and enter text in example drawing
螢幕擷取畫面 2026-10-27 152002
  • resizing, changing color, multiline input in example drawing
螢幕擷取畫面 2026-10-27 152013
  • using eraser on committed label in example drawing

Validation

The following results were obtained locally on Windows after rebasing onto the latest upstream main:

  • node --test tests/browser/whiteboard.test.js tests/browser/whiteboard-shortcuts.test.js tests/browser/example-board-ui.test.js: 56 passed, 0 failed, 0 skipped.
  • node --test tests/browser/replay-render.test.js: 12 passed, 0 failed, 0 skipped.
  • bash scripts/indent.sh --check: reported Formatting clean

The focused tests cover both production drawing surfaces, multiline input, empty confirmation, cancellation, remembered color, automatic growth and shrinkage, independent corner resizing, viewport resizing, an IME confirmation guard, history and shared image output. Model tests check explicit text coordinates and line spacing, serialization, invalid input preserving redo, and mixed text/stroke/eraser/Clear/Undo/Redo sequences.