@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/editor/linkWrite.ts

@@ -0,0 +1,77 @@
+import { linkInfoOf, linkKey, linkName } from '../model/links';
+import { onSessionReset } from '../model/session';
+import { dimMeasurement } from '../model/measurement';
+import { store } from '../model/store';
+import type { Constraint, LinkTarget } from '../model/types';
+import { fmtAng, fmtLen } from '../units';
+import { askConfirm } from './confirm';
+import { linksHost } from './links';
+
+/*
+  A dimension linked to a measurement of the job is that measurement: giving it a new value — typed, from a laser
+  reading, dropped from the tray — changes the job's too, so the person is asked first. Change both writes it to the
+  job (through the host); Only this drawing keeps the new value here and lets go of the link; Cancel leaves both.
+
+  What the editor writes comes back from the job a moment later, and an answer from before it may arrive first: for a
+  few seconds after a write, the job saying anything else about that measurement is taken to be the old news it is.
+*/
+
+/** Writes to the job's measurements not yet heard back: by linkKey, the value written and when. */
+const wrote = new Map<string, { value: number; at: number }>();
+const ECHO_MS = 8000;
+onSessionReset(() => wrote.clear());
+
+/**
+ * Whether what the job says of `t` (its value `value`) is older than what was just written to it — to be ignored.
+ * Hearing the written value back, it's settled.
+ */
+export function staleEcho(t: LinkTarget, value: number): boolean {
+  const k = linkKey(t), w = wrote.get(k);
+  if (!w) return false;
+  if (w.value === value || Date.now() - w.at > ECHO_MS) { wrote.delete(k); return false; }
+  return true;
+}
+
+/** Whether a new value for `c` would change it (a linked one is asked about only then). */
+export const changesValue = (c: Constraint, v: number): boolean => c.value == null || Math.abs(c.value - v) > 1e-9;
+
+/**
+ * Ask before giving linked dimension `c` value `v` (inches, or degrees). `apply(unlink)` sets it — letting go of the
+ * link with `unlink` — and says whether it took; `capture` (a laser reading's) goes to the job with it.
+ */
+export function askLinkedChange(c: Constraint, v: number, apply: (unlink: boolean) => boolean, capture?: unknown): void {
+  const t = c.measurementRef;
+  if (!t) return;
+  const info = linkInfoOf(t), host = linksHost(), m = dimMeasurement(c, v);
+  const name = linkName(t), group = info?.groupName ?? t.groupName, gone = info?.exists === false;
+  const canWrite = !!host?.update && !!m && !gone && info?.canEdit !== false;
+  const pageId = store.curPageId, still = () => store.curPageId === pageId && linksHost() === host;
+  const what = c.type === 'angle' ? fmtAng(v) : fmtLen(c.rad ? v / 2 : v);
+  if (canWrite) {
+    askConfirm({
+      title: 'Change ' + name + (group ? ' in ' + group : '') + ' to ' + what + '?',
+      msg: 'This dimension is linked to it. Only this drawing keeps ' + what + ' here and unlinks them.',
+      choices: [
+        { label: 'Change both', run: () => {
+          if (!still()) return;
+          // (before it's set: the drawing hearing the job's old value meanwhile mustn't put it back)
+          const k = linkKey(t), was = wrote.get(k);
+          wrote.set(k, { value: m!.value, at: Date.now() });
+          if (apply(false)) host!.update!(t, m!.value, capture);
+          else if (was) wrote.set(k, was); else wrote.delete(k);
+        } },
+        { label: 'Only this drawing', run: () => { if (still()) apply(true); } },
+        { label: 'Cancel', run: () => {} },
+      ],
+    });
+    return;
+  }
+  askConfirm({
+    title: gone ? name + ' was removed from the job' : name + ' can’t be changed from here',
+    msg: 'Keep ' + what + ' in this drawing (it unlinks from ' + name + '), or cancel.',
+    choices: [
+      { label: 'Keep in this drawing', run: () => { if (still()) apply(true); } },
+      { label: 'Cancel', run: () => {} },
+    ],
+  });
+}

package/src/editor/links.ts

@@ -0,0 +1,181 @@
+import { linkInfo, linkKey, linkTargets } from '../model/links';
+import { onSessionReset } from '../model/session';
+import { store } from '../model/store';
+import type { LinkInfo, LinkTarget } from '../model/types';
+import { requestDraw } from '../render/view';
+import { updateCtx } from './ports';
+
+/*
+  The job's files and measurements, as the host has them (CadEditorProps.links). The editor asks it to pick files
+  (Annotate's +), to list the job's measurements or pick one itself (a line's length keypad and a dimension's angle
+  keypad in Draft offer them: the only way a measurement comes into a drawing), to say what each linked one is now —
+  its name, its picture, its value, and whether it's still there (model/links.ts's linkInfo, which the tiles draw) —
+  to open one, and, once the person has said so, to change one or to save a dimension to the drawing's group. A host
+  without it shows none of this.
+
+  The editor asks about everything the drawing links to at once, on every page, and asks again only when that
+  changes (after an edit, pages taken in from elsewhere, a new session).
+*/
+
+/** What a keypad takes from the job's measurements: a line's length, or a dimension's angle. */
+export type MeasurementKind = 'length' | 'angle';
+
+/** What the editor asks the host to pick from (Annotate's +). */
+export interface CadLinkPick {
+  /**
+   * 'files': the job's files and objects to pick. Never its measurements: those come into a drawing only through a
+   * line's length keypad in Draft (CadLinks.lengths), as the dimensions they drive. A host may still show them, greyed
+   * out, saying so when one's tapped (BOLDR's do); one it hands back anyway is dropped.
+   */
+  want: 'files';
+  /** what the drawing links to already */
+  linked: LinkTarget[];
+}
+
+/** A dimension of the drawing, saved to the drawing's group as a measurement of the job. */
+export interface CadSaveMeasurement {
+  kind: 'length' | 'angle';
+  /** micrometres for a length, degrees for an angle */
+  value: number;
+  /** the dimension's label, if it has one */
+  label?: string;
+  /** the host's record of the laser reading that set it (as laserReading was given it), if one did */
+  capture?: unknown;
+}
+
+/** The host's side of links (CadEditorProps.links). Pass one object for as long as the editor's open (memoized). */
+export interface CadLinks {
+  /** Let the person pick from the job's files; resolves with what they picked ([] for nothing). */
+  pick(req: CadLinkPick): Promise<LinkTarget[]>;
+  /**
+   * The job's measurements, lengths and angles, for a keypad's own list (a page swiped to on a touch screen): call
+   * `cb` with them, in the order to show them, as targets with what they are now (name, group, `mkind`, value, text)
+   * — and again as they change, but not until the whole job's been heard from (never none while it's loading). The
+   * keypad greys out those that aren't its kind. Returns how to stop.
+   */
+  measurements?(cb: (list: LinkTarget[]) => void): () => void;
+  /**
+   * Let the person pick one of the job's measurements for a keypad from the host's own list (Select From List, on a
+   * desktop: its side drawer), those of `kind` pickable and the rest greyed out. Resolves with the one picked (null:
+   * none). Absent: the keypad's own list (`measurements`) is shown instead.
+   */
+  pickMeasurement?(req: { kind: MeasurementKind }): Promise<LinkTarget | null>;
+  /**
+   * Say what each of `targets` is now, by linkKey, and again whenever that changes — one that's gone with
+   * `exists: false`, but never while it's still loading. Returns how to stop.
+   */
+  subscribe(targets: LinkTarget[], cb: (info: Record<string, LinkInfo>) => void): () => void;
+  /** Open what `target` is for (another screen, or a sheet over the drawing). */
+  open(target: LinkTarget): void;
+  /** Change a linked measurement (micrometres, or degrees), the person having said to; `capture` as saveMeasurement's. */
+  update?(target: LinkTarget, value: number, capture?: unknown): void;
+  /** Save a dimension as a new measurement in the drawing's own group; resolves with it (null: not saved). */
+  saveMeasurement?(m: CadSaveMeasurement): Promise<LinkTarget | null>;
+  /** whether saveMeasurement can be used here (not in a group whose measurements need a column, for one) */
+  canSave?: boolean;
+}
+
+let host: CadLinks | null = null;
+/** The host's answers for what's linked now, as asked (keys: what was asked about). */
+let sub: { keys: string; stop: () => void } | null = null;
+/** Bumped when the host or the session changes: an answer to an older question is dropped. */
+let epoch = 0;
+/** The picker's open: a second + meanwhile (a double press) asks nothing more of the host. */
+let picking = false;
+/** Told of each answer (editor/linkFollow.ts: linked dimensions follow their measurements). */
+const heard: ((info: Record<string, LinkInfo>) => void)[] = [];
+
+export const linksHost = (): CadLinks | null => host;
+export const linksEpoch = (): number => epoch;
+/** Whether the host can link things (Annotate's + shows). */
+export const canLink = (): boolean => !!host;
+
+/** The host's links from now on (CadEditor), or null for none. */
+export function setLinksHost(h: CadLinks | null): void {
+  if (h === host) return;
+  stop();
+  host = h;
+  epoch++;
+  picking = false;
+  refreshLinks();
+}
+
+function stop(): void {
+  const s = sub;
+  sub = null;
+  s?.stop();
+}
+onSessionReset(() => { stop(); host = null; epoch++; picking = false; });
+
+/** Call `fn` with each answer about what's linked (after it's been taken in). */
+export function onLinkInfo(fn: (info: Record<string, LinkInfo>) => void): void { heard.push(fn); }
+
+/** Ask the host about what the drawing links to now — if that's changed since it was last asked. */
+export function refreshLinks(): void {
+  const p = store.project;
+  if (!host || !p) { stop(); return; }
+  const targets = linkTargets(p), keys = targets.map(linkKey).sort().join('\n');
+  if (sub && sub.keys === keys) return;
+  stop();
+  if (!targets.length) return;
+  const s = { keys, stop: () => {} };
+  // (before asking: the host may answer at once)
+  sub = s;
+  const unsub = host.subscribe(targets, info => {
+    if (sub !== s) return;
+    // (what's been heard of stays: another question about it, as the links change, needn't wait for the answer)
+    Object.assign(linkInfo.byKey, info);
+    for (const fn of heard) fn(info);
+    requestDraw();
+    updateCtx();
+  });
+  if (sub === s) s.stop = unsub;
+  else unsub();
+}
+
+/** Have the person pick from the job's files: what they picked, or [] if nothing (or the editor moved on meanwhile). */
+export async function pickLinks(): Promise<LinkTarget[]> {
+  const h = host, p = store.project;
+  if (!h || !p || picking) return [];
+  const mine = epoch;
+  picking = true;
+  let out: LinkTarget[];
+  try { out = await h.pick({ want: 'files', linked: linkTargets(p) }); } catch { return []; } finally { if (mine === epoch) picking = false; }
+  // (its files: a measurement isn't put on the plan as a tile)
+  return mine === epoch && h === host ? (out ?? []).filter(t => t.kind === 'file') : [];
+}
+
+/** Whether the host offers the job's measurements to a keypad: listing them, or picking one itself. */
+export const offersJobMeasurements = (): boolean => !!host?.measurements || !!host?.pickMeasurement;
+/** Whether the host picks a measurement itself (Select From List opens its own list). */
+export const hostPicksMeasurements = (): boolean => !!host?.pickMeasurement;
+
+/** Whether a measurement of the job's can go in a keypad of `kind`: one of that kind, more than nothing. */
+export const measurementFits = (t: LinkTarget, kind: MeasurementKind): boolean =>
+  t.kind === 'measurement' && (t.mkind ?? 'length') === kind && (t.value ?? 0) > 0;
+
+/** Hear the job's measurements from the host, and again as they change, until the returned stop — or the host changes. */
+export function watchJobMeasurements(cb: (list: LinkTarget[]) => void): () => void {
+  const h = host;
+  if (!h?.measurements) return () => {};
+  let live = true;
+  const stop = h.measurements(list => { if (live && h === host) cb(list.filter(t => t.kind === 'measurement' && typeof t.value === 'number')); });
+  return () => { live = false; stop(); };
+}
+
+/**
+ * Have the host's own list pick a measurement of `kind` (Select From List): the one picked, or null — none picked, one
+ * that isn't of `kind`, or the editor moved on meanwhile. Asks once at a time, as the picker's +.
+ */
+export async function pickJobMeasurement(kind: MeasurementKind): Promise<LinkTarget | null> {
+  const h = host;
+  if (!h?.pickMeasurement || picking) return null;
+  const mine = epoch;
+  picking = true;
+  let t: LinkTarget | null;
+  try { t = await h.pickMeasurement({ kind }); } catch { return null; } finally { if (mine === epoch) picking = false; }
+  return mine === epoch && h === host && t && measurementFits(t, kind) ? t : null;
+}
+
+/** Open what a link is for. */
+export function openLink(t: LinkTarget): void { host?.open(t); }

package/src/editor/markup.ts

@@ -1,16 +1,100 @@
 import { afterEdit } from '../app/edit';
 import { ed } from '../app/state';
 import { pushHistory } from '../model/history';
+import { DEFAULT_NOTE_WIDTH, hasEnds, NOTE_TEXT_IN, noteLook, noteTextIn, type NoteStyle } from '../model/markup';
 import { SK } from '../model/store';
-import { updateCtx, updateRail } from './ports';
+import type { Note, NoteCap } from '../model/types';
+import { mainT, noteTextBox } from '../render/view';
+import { showNoteInput, updateCtx, updateRail } from './ports';
 
-/** The markup colors. */
-export const NOTE_COLORS = ['#F070EE', '#E83D2F', '#FFAD00', '#0066FF', '#00E920', '#181A1C'];
+export { NOTE_CAPS, NOTE_COLORS, NOTE_STYLES, NOTE_TEXT_SIZES, NOTE_WIDTHS } from '../model/markup';
 
-/** Pick the markup color: new markup uses it, and selected markup changes to it (one undo step). */
-export function setNoteColor(c: string): void {
-  ed.noteColor = c;
-  const ids = ed.sel.filter(s => s.type === 'note').map(s => s.id);
-  if (ids.length) { pushHistory(); SK().notes.forEach(n => { if (ids.includes(n.id)) n.color = c; }); afterEdit(); }
+/*
+  The stroke panel (the rail's color dot): BOLDR's annotation set — color, width, solid / dashed /
+  dotted, and the two ends of a pen stroke or arrow. With markup selected it changes that markup (one undo step); with
+  nothing selected it sets the look of the next markup drawn.
+*/
+
+const selectedNotes = (): Note[] => {
+  const ids = new Set(ed.sel.filter(s => s.type === 'note').map(s => s.id));
+  return ids.size ? SK().notes.filter(n => ids.has(n.id)) : [];
+};
+
+export interface MarkupTarget {
+  /** the selected markup's look (the first of them), or new markup's */
+  color: string; width: number; style: NoteStyle; startCap?: NoteCap; endCap?: NoteCap;
+  /** what applies: width (not for notes alone), the ends (pen strokes and arrows only) */
+  widthApplies: boolean; ends: boolean;
+  /** text size (inches on the drawing): for selected text notes, or new ones while the Note tool is on */
+  textIn?: number;
+}
+
+/** What the panel shows and edits. */
+export function markupTarget(): MarkupTarget {
+  const notes = selectedNotes();
+  if (!notes.length) return { color: ed.noteColor, width: ed.noteWidth, style: ed.noteStyle, widthApplies: true, ends: false, textIn: ed.tool === 'text' ? ed.noteTextIn : undefined };
+  const look = noteLook(notes.find(n => n.type !== 'text') ?? notes[0]);
+  const ends = notes.every(hasEnds);
+  return {
+    color: notes[0].color, width: look.width, style: look.style,
+    startCap: ends ? look.startCap : undefined, endCap: ends ? look.endCap : undefined,
+    widthApplies: notes.some(n => n.type !== 'text'), ends,
+    textIn: notes.find(n => n.type === 'text') ? noteTextIn(notes.find(n => n.type === 'text')!) : undefined,
+  };
+}
+
+/** Change the selected markup (one undo step), or remember it for new markup. */
+function apply(onNote: (n: Note) => void, onDefault?: () => void): void {
+  const notes = selectedNotes();
+  if (notes.length) { pushHistory(); notes.forEach(onNote); afterEdit(); }
+  else onDefault?.();
   updateRail(); updateCtx();
 }
+
+/** Pick the markup color: selected markup changes to it, or (nothing selected) new markup uses it. */
+export function setNoteColor(c: string): void {
+  // (recolouring one thing isn't choosing the colour to draw with next: a blue leader left the pen blue)
+  apply(n => { n.color = c; }, () => { ed.noteColor = c; });
+}
+
+/** The stroke width (not for notes, which have no stroke of their own). */
+export function setNoteWidth(w: number): void {
+  apply(n => { if (n.type === 'text') return; if (w === (n.type === 'cloud' ? 2.5 : DEFAULT_NOTE_WIDTH)) delete n.width; else n.width = w; },
+    () => { ed.noteWidth = w; });
+}
+
+/** A text note's size on the drawing (inches): selected notes change to it, and new ones use it. */
+export function setNoteTextSize(inches: number): void {
+  apply(n => { if (n.type !== 'text') return; delete n.size; if (inches === NOTE_TEXT_IN) delete n.ts; else n.ts = inches; },
+    () => { ed.noteTextIn = inches; });
+}
+
+/** Solid, dashed or dotted. */
+export function setNoteStyle(st: NoteStyle): void {
+  apply(n => { if (st === 'solid') delete n.style; else n.style = st; }, () => { ed.noteStyle = st; });
+}
+
+/** How a pen stroke's, arrow's or leader's start or end finishes (its kind's own way is left unset). */
+export function setNoteCap(which: 'start' | 'end', cap: NoteCap): void {
+  apply(n => {
+    if (!hasEnds(n)) return;
+    const own = noteLook({ ...n, startCap: undefined, cap: undefined });
+    if (which === 'start') { if (cap === own.startCap) delete n.startCap; else n.startCap = cap; }
+    else if (cap === own.endCap) delete n.cap;
+    else n.cap = cap;
+  });
+}
+
+/** Edit a note's text: the text field opens over it with its text (Enter or leaving the field keeps it, Esc cancels). */
+export function editNoteText(id: string): void {
+  const n = SK().notes.find(x => x.id === id);
+  if (!n || n.type !== 'text') return;
+  const b = noteTextBox(mainT(), n);
+  showNoteInput(b.x, b.mid, txt => {
+    const cur = SK().notes.find(x => x.id === id);
+    if (!cur || !txt || txt === cur.text) return;
+    pushHistory();
+    cur.text = txt;
+    afterEdit();
+  }, n.text);
+}

package/src/editor/mode.ts

@@ -1,6 +1,7 @@
 import { ed, type Mode } from '../app/state';
 import { requestDraw } from '../render/view';
 import { cancelTool } from '../tools/registry';
+import { elevOpen, WALL_ICON, WALL_RAIL } from './elevation';
 import { refreshModes, updateCtx, updateHint, updateRail } from './ports';
 
 /** Switch between Draft and Annotate: each has its own tools, and the selection starts empty. */
@@ -17,23 +18,98 @@ export function setMode(m: Mode): void {
 /** New lines become construction lines (guides that never make spaces), or regular lines again. */
 export function toggleConstr(): void {
   ed.drawConstr = !ed.drawConstr;
-  updateRail();
+  // (a wall is never a guide)
+  if (ed.drawConstr) ed.drawWalls = false;
+  toggled();
 }
 
-/** A tool rail entry: [tool or action id, label, shortcut, kind], or '|' for a divider. */
-export type RailItem = '|' | [id: string, label: string, key: string, kind?: 'toggle' | 'act'];
+/** What's drawn — lines, rectangles, circles, arcs, Draw to shape — becomes walls, or lines again. */
+export function toggleWalls(): void {
+  ed.drawWalls = !ed.drawWalls;
+  if (ed.drawWalls) ed.drawConstr = false;
+  toggled();
+}
+
+/** A toggle flipped: the rail shows it, and a shape being drawn (and the hint) shows what it'll now make. */
+function toggled(): void {
+  updateRail(); updateHint(); requestDraw();
+}
+
+/** Whether what's drawn now is walls: the Walls toggle, except in the wall view (what's drawn on a wall's face never is). */
+export const drawsWalls = (): boolean => ed.drawWalls && !elevOpen();
+
+/** The rail's toggles: whether each is on, and flipping it. */
+export const TOGGLES: Record<string, { on: () => boolean; flip: () => void }> = {
+  wall: { on: () => ed.drawWalls, flip: toggleWalls },
+  constr: { on: () => ed.drawConstr, flip: toggleConstr },
+};
+
+/**
+ * A tool rail entry: [tool or action id, label, shortcut, kind], or '|' for a divider. A 'group' holds several tools in
+ * one place (see SHAPE_TOOLS).
+ */
+export type RailItem = '|' | [id: string, label: string, key: string, kind?: 'toggle' | 'act' | 'group'];
+
+/** The tool rail now: the wall view's while a wall is open, otherwise the current mode's (the 3D tab has none). */
+export const railItems = (): RailItem[] => (elevOpen() ? WALL_RAIL : RAIL[ed.mode]);
+/** The icon for a rail item. */
+export const railIcon = (id: string): string => WALL_ICON[id] ?? id;
 
 /** The tool rail for each mode. 'toggle' items switch something on and off; 'act' items run an action. */
 export const RAIL: Record<Mode, RailItem[]> = {
   draft: [
-    ['select', 'Select', 'V'], ['line', 'Line', 'L'], ['freehand', 'Draw to shape', 'S'], ['wall', 'Wall', 'W'], ['rect', 'Rectangle', 'R'], ['circle', 'Circle', 'C'], ['arc', 'Arc', 'A'], '|',
-    // Trim (T) and Offset (O) stay on the keyboard; Offset is also in the bar for a selected line
-    ['dim', 'Dimension', 'D'], ['door', 'Door', 'B'], ['window', 'Window', 'N'], ['room', 'Space', 'M'], ['constr', 'Construction lines', 'X', 'toggle'], '|',
+    // drawing; then the building (walls, what goes in them, spaces); then measuring and guides
+    ['select', 'Select', 'V'], ['line', 'Line', 'L'], ['freehand', 'Draw to shape', 'S'], ['rect', 'Rectangle', 'R'], ['circle', 'Circle', 'C'], ['arc', 'Arc', 'A'], '|',
+    ['door', 'Door', 'B'], ['window', 'Window', 'N'], ['room', 'Space', 'M'], '|',
+    // Trim (T) and Offset (O) stay on the keyboard; Offset is also in the bar for a selected line.
+    // The toggles together: what's drawn is walls, or guides (one or the other, never both)
+    ['dim', 'Dimension', 'D'], ['wall', 'Walls', 'W', 'toggle'], ['constr', 'Construction lines', 'X', 'toggle'], '|',
     ['undo', 'Undo', '⌘Z', 'act'], ['redo', 'Redo', '⇧⌘Z', 'act'],
   ],
   annotate: [
-    ['aselect', 'Select markup', 'V'], ['arrow', 'Arrow', 'K'], ['pen', 'Pen', 'P'], ['image', 'Add photo or plan', '', 'act'], ['text', 'Note', 'N'], ['cloud', 'Revision cloud', 'Q'], ['calib', 'Set image scale', 'J'], '|',
+    // the markup shapes, Arrow first (on a phone they share Arrow's place: MARKS_GROUP)
+    ['aselect', 'Select markup', 'V'], ['arrow', 'Arrow', 'K'], ['mline', 'Line', 'L'], ['mrect', 'Rectangle', 'R'], ['mtri', 'Triangle', ''],
+    ['mcircle', 'Circle', 'C'], ['pen', 'Pen', 'P'], ['cloud', 'Revision cloud', 'Q'], ['text', 'Note', 'N'], ['image', 'Add photo or plan', '', 'act'], '|',
     ['color', 'Markup color', '', 'act'], '|',
     ['undo', 'Undo', '⌘Z', 'act'], ['redo', 'Redo', '⇧⌘Z', 'act'],
   ],
 };
+
+/**
+ * Tools that share one place on a phone's rail, which has no room for each: a tap draws with the one used last (the
+ * place shows it), and a long press opens a menu of them all (react/ShapeMenu.tsx) — Draft's Line, Rectangle, Circle
+ * and Arc, and Annotate's markup shapes. A tablet's or a browser's rail shows every one in its own place.
+ */
+export const SHAPE_TOOLS = ['line', 'rect', 'circle', 'arc'];
+export const SHAPES_GROUP = 'shapes';
+export const MARK_TOOLS = ['arrow', 'mline', 'mrect', 'mtri', 'mcircle'];
+export const MARKS_GROUP = 'marks';
+
+export interface ToolGroup { tools: string[]; label: string; mode: Mode; phoneOnly: boolean }
+export const TOOL_GROUPS: Record<string, ToolGroup> = {
+  [SHAPES_GROUP]: { tools: SHAPE_TOOLS, label: 'Shapes', mode: 'draft', phoneOnly: true },
+  [MARKS_GROUP]: { tools: MARK_TOOLS, label: 'Markup shapes', mode: 'annotate', phoneOnly: true },
+};
+
+/** The group a tool shares its place with on this rail, if any. */
+export const groupOf = (tool: string, phone: boolean): string | null =>
+  Object.keys(TOOL_GROUPS).find(g => TOOL_GROUPS[g].tools.includes(tool) && (phone || !TOOL_GROUPS[g].phoneOnly)) ?? null;
+
+/** A rail with each group's tools folded into one place, where the first of them was; the rest as it was. */
+export function groupTools(items: RailItem[], phone: boolean): RailItem[] {
+  if (!items.some(it => it !== '|' && groupOf(it[0], phone))) return items;
+  const out: RailItem[] = [];
+  for (const it of items) {
+    const g = it === '|' ? null : groupOf(it[0], phone);
+    if (!g) out.push(it);
+    else if (!out.some(o => o !== '|' && o[0] === g)) out.push([g, TOOL_GROUPS[g].label, '', 'group']);
+  }
+  return out;
+}
+
+/** A tool's name on the rail ('Line', 'Rectangle'…). */
+export const toolLabel = (id: string): string => {
+  const it = [...RAIL.draft, ...RAIL.annotate].find(r => r !== '|' && r[0] === id);
+  return it && it !== '|' ? it[1] : id;
+};
+

package/src/editor/ports.ts

@@ -1,4 +1,5 @@
-import type { Constraint } from '../model/types';
+import type { Constraint, LinkTarget } from '../model/types';
+import type { MeasurementKind } from './links';
 
 /*
   The editor's ports: everything the drawing logic (edits, tools, view) asks of the user interface. The logic calls
@@ -33,9 +34,18 @@ export interface KeypadSpec {
   laser?: boolean;
   /** extra buttons, read again after each press so their state can change */
   extras?: () => KeypadExtra[];
-  onDone?: (v: number) => void;
+  /** the value; `capture`, a laser reading's record (laserReading's), when it's that reading applied as it came in */
+  onDone?: (v: number, capture?: unknown) => void;
+  /**
+   * A line's length, or a dimension's angle: the job's measurements are offered with the keys (a page swiped to on a
+   * touch screen, Select From List on a desktop), those of `kind` pickable — the one picked handed to `pick` (the
+   * keypad's for closing, and the value for setting from it, linked to it).
+   */
+  measurements?: { kind: MeasurementKind; pick: (t: LinkTarget) => void };
   /** called whenever the keypad closes (applied or cancelled), e.g. to clear a preview */
   onClose?: () => void;
+  /** no backdrop: the drawing stays live behind it (a tool can take the next tap, and close it) */
+  modeless?: boolean;
 }
 
 export interface ConflictSpec {
@@ -50,14 +60,14 @@ export interface ConflictSpec {
   onResolved?: (() => void) | null;
 }
 
-export type DrawerTab = 'pages' | 'layers' | 'rooms';
+export type DrawerTab = 'pages' | 'rooms';
 
 /**
  * Parts of the interface that show editor state and must re-read it after a change:
  * the contextual bar, the hint, the definition-state pill, the tool rail, the mode tabs (and the rail's tool set),
  * the project drawer, the wall elevation view, the top bar's view toggles, the keypad's display, and the laser tray.
  */
-export type ChromePart = 'ctx' | 'hint' | 'status' | 'rail' | 'mode' | 'drawer' | 'elevation' | 'topbar' | 'keypad' | 'tray';
+export type ChromePart = 'ctx' | 'hint' | 'status' | 'rail' | 'mode' | 'drawer' | 'elevation' | 'topbar' | 'keypad' | 'tray' | 'confirm';
 
 export interface EditorPorts {
   refresh(part: ChromePart): void;
@@ -68,16 +78,28 @@ export interface EditorPorts {
   keypadTyped(): number | null;
   showConflict(spec: ConflictSpec): void;
   openDrawer(tab?: DrawerTab): void;
-  showNoteInput(sx: number, sy: number, cb: (text: string) => void): void;
+  /** the text field for a note at a screen point; `initial`: the text it starts with (editing a note) */
+  showNoteInput(sx: number, sy: number, cb: (text: string) => void, initial?: string): void;
   hideNoteInput(): void;
   /** the markup color picker, next to `anchor` (the button that asked for it, if any) */
   openPalette(anchor?: unknown): void;
+  /** the selected image's opacity slider, above the bar (its button again closes it) */
+  toggleImageOpacity(anchor?: unknown): void;
+  /** the selected image's rotation slider, above the bar (its button again closes it) */
+  toggleImageRotation(anchor?: unknown): void;
+  /** the link tiles' size slider, above the bar (its button again closes it) */
+  toggleTileSize(anchor?: unknown): void;
   /** let the user type a new name for a space */
   editRoomName(roomId: string): void;
   /** the mouse cursor over the plan (or the wall elevation), as a CSS cursor name ('' = the default); ignored without a mouse */
   setCursor(cursor: string, where?: 'plan' | 'elevation'): void;
   /** close any open popover (the settings menu, the color palette); true if one was open */
   dismissPopovers(): boolean;
+  /**
+   * a gesture on the drawing started moving — a stroke, a drag, a pan or a pinch (never a tap) — or its last pointer
+   * lifted: the interface can step out of the way meanwhile
+   */
+  interacting(on: boolean): void;
   /** close the conflict sheet; true if it was open */
   dismissConflict(): boolean;
   /** save now (⌘S) */
@@ -98,9 +120,13 @@ export const basePorts = (): EditorPorts => ({
   showNoteInput() {},
   hideNoteInput() {},
   openPalette() {},
+  toggleImageOpacity() {},
+  toggleImageRotation() {},
+  toggleTileSize() {},
   editRoomName() {},
   setCursor() {},
   dismissPopovers: () => false,
+  interacting() {},
   dismissConflict: () => false,
   save() {},
   saveFile() {},
@@ -120,12 +146,16 @@ export const closeKeypad = (): void => ports.closeKeypad();
 export const kpTyped = (): number | null => ports.keypadTyped();
 export const showConflict = (spec: ConflictSpec): void => ports.showConflict(spec);
 export const openDrawer = (tab?: DrawerTab): void => ports.openDrawer(tab);
-export const showNoteInput = (sx: number, sy: number, cb: (text: string) => void): void => ports.showNoteInput(sx, sy, cb);
+export const showNoteInput = (sx: number, sy: number, cb: (text: string) => void, initial?: string): void => ports.showNoteInput(sx, sy, cb, initial);
 export const hideNoteInput = (): void => ports.hideNoteInput();
 export const openPalette = (anchor?: unknown): void => ports.openPalette(anchor);
+export const toggleImageOpacity = (anchor?: unknown): void => ports.toggleImageOpacity(anchor);
+export const toggleImageRotation = (anchor?: unknown): void => ports.toggleImageRotation(anchor);
+export const toggleTileSize = (anchor?: unknown): void => ports.toggleTileSize(anchor);
 export const editRoomName = (roomId: string): void => ports.editRoomName(roomId);
 export const setCursor = (cursor: string, where: 'plan' | 'elevation' = 'plan'): void => ports.setCursor(cursor, where);
 export const dismissPopovers = (): boolean => ports.dismissPopovers();
+export const interacting = (on: boolean): void => ports.interacting(on);
 export const dismissConflict = (): boolean => ports.dismissConflict();
 export const saveNowPort = (): void => ports.save();
 export const saveFile = (name: string, mime: string, data: string): void => ports.saveFile(name, mime, data);
@@ -140,3 +170,4 @@ export const renderElevation = (): void => ports.refresh('elevation');
 export const updateTopBar = (): void => ports.refresh('topbar');
 export const refreshKeypad = (): void => ports.refresh('keypad');
 export const refreshTray = (): void => ports.refresh('tray');
+export const refreshConfirm = (): void => ports.refresh('confirm');