@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/model/facesolve.ts

@@ -0,0 +1,322 @@
+import { solver, type SolveResult } from '../solver';
+import { elevFrame, elevOpenings, roomSideOf, toU, type ElevFrame, type ElevOpening } from './elevation';
+import { applySlide, openingSpan, slideGroup } from './openings';
+import { onSessionReset } from './session';
+import { CEILING, cornerAnchor, emptyFace, endEdge, faceKey, faceKeyParts, faceOf, FLOOR, openingAnchor, openingEdge, openingOfPoint } from './faces';
+import { uid } from './ids';
+import { gc, restorePos, snapshotPos } from './sketch';
+import type { Constraint, Pt, Sketch, WallFace } from './types';
+
+/*
+  Keeping wall faces in step with the plan. A face holds the plan's corners, floor, ceiling and the doors' and
+  windows' outlines as anchors (named points and edges); after any change they're moved to where the plan has them
+  and the face is solved again, so what's drawn on a wall follows its corners and openings. A door or window that's
+  gone lets go of what hung on it (its corners become free points there).
+
+  The wall's corners, floor and ceiling are fixed. A door or window is fixed only where the plan locks it (along the
+  wall by a dimension, up and down by its sill — a door sits on the floor); otherwise its corners are free points
+  held to its size and shape, like a cabinet's, so a constraint or a join on the wall can move it — and where the
+  face moves it, the plan follows.
+*/
+
+/** Where each face's door/window corners were last put (face key → point → [x, y]): which side moved one since. */
+const placed = new Map<string, Record<string, [number, number]>>();
+onSessionReset(() => placed.clear());
+
+/** Where each face's anchors were when it was last brought up to date (face key → their places): unchanged, it needn't be again. */
+const synced = new Map<string, string>();
+onSessionReset(() => synced.clear());
+const anchorsAt = (sk: Sketch, f: ElevFrame): string => JSON.stringify(anchorSpec(sk, f).points) + '|' + f.H;
+/** Forget which faces are up to date (they were put back as they were): the next sync does them all. */
+export const forgetSynced = (): void => synced.clear();
+
+/** A copy of where the faces' door/window corners were last put, and putting it back (an edit tried and taken back). */
+export const placedMarks = (): string => JSON.stringify([...placed]);
+export function setPlacedMarks(m: string): void {
+  placed.clear();
+  for (const [k, v] of JSON.parse(m) as [string, Record<string, [number, number]>][]) placed.set(k, v);
+}
+
+/** How a door or window on a face is held: fixed outright, or free along the wall and/or up and down. */
+function holds(sk: Sketch, o: ElevOpening): { along: boolean; up: boolean } {
+  const op = sk.openings[o.id];
+  return { along: !!slideGroup(sk, o.id), up: o.type === 'window' && !op?.sillLocked };
+}
+
+/** The frame of wall `lid` seen from `side` (whichever side the room is on). Null for anything but a straight wall. */
+export function faceFrame(sk: Sketch, lid: string, side: 1 | -1): ElevFrame | null {
+  if (!sk.lines[lid]) return null;
+  return elevFrame(sk, lid, side !== (roomSideOf(sk, lid) || 1));
+}
+
+/** Where the plan puts a face's anchors (x across the wall as seen, y up), and the edges between them. */
+export function anchorSpec(sk: Sketch, f: ElevFrame): { points: Record<string, [number, number]>; lines: Record<string, [string, string]> } {
+  const other = f.leftEnd === 'a' ? 'b' : 'a', at: Record<'a' | 'b', number> = { [f.leftEnd]: f.face[0], [other]: f.face[1] } as Record<'a' | 'b', number>;
+  const points: Record<string, [number, number]> = {}, lines: Record<string, [string, string]> = {};
+  for (const end of ['a', 'b'] as const) {
+    points[cornerAnchor(end)] = [at[end], 0];
+    points[cornerAnchor(end, true)] = [at[end], f.H];
+    lines[endEdge(end)] = [cornerAnchor(end), cornerAnchor(end, true)];
+  }
+  lines[FLOOR] = [cornerAnchor(f.leftEnd), cornerAnchor(other)];
+  lines[CEILING] = [cornerAnchor(f.leftEnd, true), cornerAnchor(other, true)];
+  for (const o of elevOpenings(sk, f)) {
+    const p = (e: 's0' | 's1', top: boolean) => openingAnchor(o.id, e, top);
+    points[p(o.e0, false)] = [o.u0, o.sill]; points[p(o.e0, true)] = [o.u0, o.head];
+    points[p(o.e1, false)] = [o.u1, o.sill]; points[p(o.e1, true)] = [o.u1, o.head];
+    lines[openingEdge(o.id, 'head')] = [p(o.e0, true), p(o.e1, true)];
+    lines[openingEdge(o.id, 's0')] = [p('s0', false), p('s0', true)];
+    lines[openingEdge(o.id, 's1')] = [p('s1', false), p('s1', true)];
+    if (o.type === 'window') lines[openingEdge(o.id, 'sill')] = [p(o.e0, false), p(o.e1, false)]; // a door's sill is the floor
+  }
+  return { points, lines };
+}
+
+/**
+ * Bring a face up to date from earlier versions: lines drawn on elevations (Sketch.elev) and faces that kept points
+ * along the wall from its start (no curves yet) become this format, across the wall as seen.
+ */
+function upgrade(sk: Sketch, key: string, f: ElevFrame): void {
+  type Old = { points: Record<string, { x: number; y: number }>; lines: Record<string, { a: string; b: string; guide?: boolean; cab?: string }>; cons: Record<string, Constraint>; cabs?: Record<string, { bl: string; br: string; tr: string; tl: string; w?: string; h?: string; depth: number; label?: string }> };
+  const cur = sk.faces?.[key] as unknown as Old & { circles?: unknown } | undefined;
+  if (cur && !cur.circles) {
+    const face = emptyFace();
+    for (const [id, p] of Object.entries(cur.points)) face.points[id] = { x: toU(f, p.x), y: p.y };
+    for (const [id, l] of Object.entries(cur.lines)) face.lines[id] = { a: l.a, b: l.b, kind: 'line', constr: !!l.guide, thick: 0, ...(l.cab ? { cab: l.cab } : {}) };
+    face.cons = cur.cons;
+    for (const [id, cb] of Object.entries(cur.cabs ?? {})) {
+      // corners as seen: bottom-left was the one at the smaller s
+      const sw = f.mirror, { w, h, depth, label } = cb;
+      face.cabs[id] = { bl: sw ? cb.br : cb.bl, br: sw ? cb.bl : cb.br, tr: sw ? cb.tl : cb.tr, tl: sw ? cb.tr : cb.tl, depth, ...(w ? { w } : {}), ...(h ? { h } : {}), ...(label ? { label } : {}) };
+    }
+    // directions along the wall flip in a mirrored view
+    if (f.mirror) for (const c of Object.values(face.cons)) if (c.type === 'dist' && c.kind === 'h' && c.sign) c.sign = -c.sign as 1 | -1;
+    sk.faces![key] = face;
+  }
+  const old = sk.elev?.[key];
+  if (old?.length) {
+    const face = faceOf(sk, key, true);
+    for (const ln of old) {
+      const a = uid('p'), b = uid('p');
+      face.points[a] = { x: toU(f, ln.a[0]), y: ln.a[1] };
+      face.points[b] = { x: toU(f, ln.b[0]), y: ln.b[1] };
+      face.lines[ln.id || uid('l')] = { a, b, kind: 'line', constr: !!ln.guide, thick: 0 };
+    }
+  }
+  if (sk.elev) { delete sk.elev[key]; if (!Object.keys(sk.elev).length) delete sk.elev; }
+}
+
+/** Move a face's anchors to where the plan has them; anchors the plan no longer has let go (free points), and their edges go. */
+export function placeAnchors(sk: Sketch, face: WallFace, f: ElevFrame): boolean {
+  let gone = false;
+  const spec = anchorSpec(sk, f), ops = elevOpenings(sk, f);
+  // a door's or window's corners are fixed only when the plan holds it both ways
+  const free = new Set<string>();
+  for (const o of ops) { const h = holds(sk, o); if (h.along || h.up) for (const e of ['s0', 's1'] as const) for (const t of [false, true]) free.add(openingAnchor(o.id, e, t)); }
+  for (const [id, [x, y]] of Object.entries(spec.points)) {
+    const p = face.points[id], fixed = !free.has(id);
+    if (p && p.anchor) { p.x = x; p.y = y; if (fixed) p.fixed = true; else delete p.fixed; }
+    else if (p) Object.assign(p, { x, y, anchor: true }, fixed ? { fixed: true } : {}); // a copy that came along with a split wall
+    else face.points[id] = { x, y, anchor: true, ...(fixed ? { fixed: true } : {}) };
+    if (!fixed) delete face.points[id].fixed;
+  }
+  // the shape of each free one (and where the plan does lock it), as the plan's own constraints on the face
+  const keep = new Set<string>();
+  const put = (id: string, c: Constraint) => { keep.add(id); face.cons[id] = { ...c, driving: c.type === 'dist' ? true : undefined, auto: true, elev: true, anchor: true }; if (c.type !== 'dist') delete face.cons[id].driving; };
+  for (const o of ops) {
+    const h = holds(sk, o);
+    if (!h.along && !h.up) continue;
+    const p = (e: 's0' | 's1', top: boolean) => openingAnchor(o.id, e, top), k = (n: string) => '@k:' + o.id + ':' + n;
+    const corner = cornerAnchor(f.leftEnd);
+    put(k('l'), { type: 'v', a: p(o.e0, false), b: p(o.e0, true) });
+    put(k('r'), { type: 'v', a: p(o.e1, false), b: p(o.e1, true) });
+    put(k('b'), { type: 'h', a: p(o.e0, false), b: p(o.e1, false) });
+    put(k('t'), { type: 'h', a: p(o.e0, true), b: p(o.e1, true) });
+    put(k('w'), { type: 'dist', kind: 'h', a: p(o.e0, false), b: p(o.e1, false), value: o.u1 - o.u0 });
+    put(k('h'), { type: 'dist', kind: 'v', a: p(o.e0, false), b: p(o.e0, true), value: o.head - o.sill });
+    if (!h.along) put(k('at'), { type: 'dist', kind: 'h', a: corner, b: p(o.e0, false), value: o.u0 - f.face[0] });
+    if (!h.up) put(k('z'), { type: 'dist', kind: 'v', a: corner, b: p(o.e0, false), value: o.sill });
+  }
+  for (const id in face.cons) if (face.cons[id].anchor && !keep.has(id)) delete face.cons[id];
+  for (const [id, [a, b]] of Object.entries(spec.lines)) {
+    const l = face.lines[id];
+    if (l && l.anchor && l.a === a && l.b === b) continue;
+    face.lines[id] = { a, b, kind: 'line', constr: false, thick: 0, anchor: true };
+  }
+  for (const id in face.lines) if (face.lines[id].anchor && !spec.lines[id]) delete face.lines[id];
+  for (const id in face.points) {
+    const p: Pt = face.points[id];
+    if (p.anchor && !spec.points[id]) { delete p.anchor; delete p.fixed; gone = true; }
+  }
+  return gone;
+}
+
+/** Update one face from the plan and solve it. Positions stay as they were where it can't be solved. Null: not a wall now. */
+export function syncFace(sk: Sketch, key: string): SolveResult | null {
+  const { lid, side } = faceKeyParts(key), f = faceFrame(sk, lid, side);
+  if (!f) return null;
+  upgrade(sk, key, f);
+  const face = faceOf(sk, key);
+  if (!face) return null;
+  // the face moved a door or window since it was last put there (a constraint, a join, a drag on the wall) and the
+  // plan didn't: the plan follows it first
+  const last = placed.get(key), moved = new Set<string>();
+  if (last) {
+    const spec = anchorSpec(sk, f).points;
+    for (const o of elevOpenings(sk, f)) {
+      const id = openingAnchor(o.id, o.e0, false), q = face.points[id], was = last[id], now = spec[id];
+      if (!q || !was || !now) continue;
+      const faceMoved = Math.abs(q.x - was[0]) > 1e-6 || Math.abs(q.y - was[1]) > 1e-6;
+      const planMoved = Math.abs(now[0] - was[0]) > 1e-6 || Math.abs(now[1] - was[1]) > 1e-6;
+      if (faceMoved && !planMoved) { followFace(sk, f, face, o); moved.add(o.id); }
+      else if (planMoved) moved.add(o.id);
+    }
+  }
+  stayInPlace(face, f);
+  // a door or window gone: its corners let go — and go, unless something still uses them
+  if (placeAnchors(sk, face, f)) gc(face);
+  let r: SolveResult = { ok: true, res: 0, bad: [] };
+  if (Object.values(face.cons).some(c => !c.anchor)) {
+    // what just moved stays put; what's tied to it follows
+    const heavy = [...moved].flatMap(op => (['s0', 's1'] as const).flatMap(e => [openingAnchor(op, e), openingAnchor(op, e, true)]));
+    // (and nothing else drifts as they're put in line: see solveHolding)
+    const snap = snapshotPos(face);
+    r = solver.solveHolding(face, heavy);
+    if (!r.ok) restorePos(face, snap);
+    else for (const o of elevOpenings(sk, f)) followFace(sk, f, face, o);
+  }
+  const at: Record<string, [number, number]> = {};
+  for (const [id, p] of Object.entries(face.points)) if (p.anchor && openingOfPoint(id)) at[id] = [p.x, p.y];
+  placed.set(key, at);
+  synced.set(key, anchorsAt(sk, f));
+  return r;
+}
+
+/**
+ * One end of the wall moved (a corner dragged, a length entered): what's drawn on the face stays where it is, so it
+ * keeps its distance from the end that moved less — the whole wall moved, it goes along. (Across a face, x counts
+ * from one of the wall's ends, so without this it would ride along with that end.) What's tied to a corner by a
+ * dimension follows it again when the face is solved.
+ */
+function stayInPlace(face: WallFace, f: ElevFrame): void {
+  const at = (u: number): [number, number] => { const s = toU(f, u); return [f.A.x + f.ux * s, f.A.y + f.uy * s]; };
+  const now: NonNullable<WallFace['wall']> = { u: [f.face[0], f.face[1]], ends: [at(f.face[0]), at(f.face[1])] }, was = face.wall;
+  face.wall = now;
+  if (!was) return;
+  const moved = (i: 0 | 1) => Math.hypot(now.ends[i][0] - was.ends[i][0], now.ends[i][1] - was.ends[i][1]);
+  const i = moved(0) <= moved(1) ? 0 : 1, du = now.u[i] - was.u[i];
+  if (Math.abs(du) < 1e-9) return;
+  for (const p of Object.values(face.points)) if (!p.anchor) p.x += du;
+}
+
+/** Where the face has door or window `o` (its bottom-left corner as seen), the plan puts it: slid along the wall, its sill. */
+function followFace(sk: Sketch, f: ElevFrame, face: WallFace, o: ElevOpening): void {
+  const q = face.points[openingAnchor(o.id, o.e0, false)], op = sk.openings[o.id];
+  if (!q || !op) return;
+  const h = holds(sk, o), du = q.x - o.u0, g = h.along ? slideGroup(sk, o.id) : null;
+  if (g && Math.abs(du) > 1e-6) applySlide(sk, g, f.mirror ? -du : du);
+  if (h.up && Math.abs(q.y - o.sill) > 1e-6) op.sill = Math.max(0, q.y);
+}
+
+/**
+ * Update every wall face from the plan (after any edit). Returns the face constraints that can't be met. `moved`: only
+ * the faces whose wall has moved since they were last brought up to date (while a wall is dragged, the rest can't have
+ * changed).
+ */
+export function syncFaces(sk: Sketch, moved = false): Set<string> {
+  const keys = new Set([...Object.keys(sk.faces ?? {}), ...Object.keys(sk.elev ?? {})]), bad = new Set<string>();
+  for (const key of keys) {
+    if (moved && synced.has(key)) {
+      const { lid, side } = faceKeyParts(key), f = faceFrame(sk, lid, side);
+      if (f && synced.get(key) === anchorsAt(sk, f)) continue;
+    }
+    const r = syncFace(sk, key);
+    if (r && !r.ok) for (const id of r.bad) bad.add(id);
+  }
+  return bad;
+}
+
+/** The face of wall `lid` seen from `side`, made if there's none, up to date with the plan. Null for anything but a straight wall. */
+export function openFace(sk: Sketch, lid: string, side: 1 | -1): WallFace | null {
+  const key = faceKey(lid, side);
+  if (!faceFrame(sk, lid, side)) return null;
+  faceOf(sk, key, true);
+  syncFace(sk, key);
+  return faceOf(sk, key);
+}
+
+/** A cabinet as the plan shows it: its footprint against its wall (read-only, from the wall's view). */
+export interface CabFootprint { key: string; id: string; lid: string; pts: { x: number; y: number }[]; upper: boolean }
+
+/** Cabinets hung this far off the floor or more are wall (upper) cabinets: dashed in the plan. */
+export const UPPER_Z = 12;
+
+/**
+ * Every cabinet's footprint in the plan: along its wall where it sits on the face, out from that face of the wall by
+ * its depth. Worked out from each wall's view each time, so it follows the wall and the cabinet; never stored.
+ */
+export function cabinetFootprints(sk: Sketch): CabFootprint[] {
+  const out: CabFootprint[] = [];
+  for (const [key, face] of Object.entries(sk.faces ?? {})) {
+    if (!face.cabs || !Object.keys(face.cabs).length) continue;
+    const { lid, side } = faceKeyParts(key), f = faceFrame(sk, lid, side);
+    if (!f) continue;
+    const nx = -f.uy * f.side, ny = f.ux * f.side;
+    const P = (s: number, k: number) => ({ x: f.A.x + f.ux * s + nx * k, y: f.A.y + f.uy * s + ny * k });
+    for (const [id, cb] of Object.entries(face.cabs)) {
+      const ps = [cb.bl, cb.br, cb.tr, cb.tl].map(p => face.points[p]);
+      if (ps.some(p => !p)) continue;
+      const s0 = toU(f, Math.min(...ps.map(p => p.x))), s1 = toU(f, Math.max(...ps.map(p => p.x))), z0 = Math.min(...ps.map(p => p.y));
+      const k0 = f.t / 2, k1 = f.t / 2 + cb.depth;
+      out.push({ key, id, lid, pts: [P(s0, k0), P(s1, k0), P(s1, k1), P(s0, k1)], upper: z0 >= UPPER_Z });
+    }
+  }
+  return out;
+}
+
+/** A wall face's edges: across from corner to corner, up from the floor to the ceiling. */
+export interface FaceBounds { x0: number; x1: number; y0: number; y1: number }
+
+/**
+ * How far each thing on the plan's walls reaches past them, inches — only what does (an empty record: it all fits).
+ * Kept per thing, not as one total, so a change can be held to "nothing goes further out than it was": as a total,
+ * one thing coming back in hid another being pushed out (a window sliding back inside the wall on one side of it
+ * while a cabinet tied to it went off the other end).
+ */
+export type Overflow = Record<string, number>;
+
+/**
+ * What's on a face past its edges: each point, each circle's reach — and the doors' and windows' corners too (a
+ * cabinet tied to a window could otherwise push the window through the ceiling, and dragging it back down then drove
+ * the cabinet through the floor). Keys start with `prefix`.
+ */
+export function faceOverflow(face: Sketch, b: FaceBounds, prefix = '', out: Overflow = {}): Overflow {
+  const past = (x: number, y: number, r = 0) => Math.max(0, b.x0 - (x - r)) + Math.max(0, x + r - b.x1) + Math.max(0, b.y0 - (y - r)) + Math.max(0, y + r - b.y1);
+  const put = (k: string, n: number) => { if (n > 1e-9) out[prefix + k] = n; };
+  for (const [id, p] of Object.entries(face.points)) if (!p.anchor || openingOfPoint(id)) put(id, past(p.x, p.y));
+  for (const [id, c] of Object.entries(face.circles)) { const o = face.points[c.c]; if (o) put('c:' + id, past(o.x, o.y, c.r)); }
+  return out;
+}
+
+/**
+ * What runs past the plan's walls: each door and window past its wall's ends, and what's drawn on each wall face
+ * (cabinets and all) past that face's corners, floor and ceiling.
+ */
+export function planOverflow(sk: Sketch): Overflow {
+  const out: Overflow = {};
+  for (const [id, o] of Object.entries(sk.openings)) {
+    const g = openingSpan(sk, o), n = g ? Math.max(0, o.w / 2 - o.at) + Math.max(0, o.at + o.w / 2 - g.L) : 0;
+    if (n > 1e-9) out['op:' + id] = n;
+  }
+  for (const [key, face] of Object.entries(sk.faces ?? {})) {
+    const { lid, side } = faceKeyParts(key), f = faceFrame(sk, lid, side);
+    if (f) faceOverflow(face, { x0: f.face[0], x1: f.face[1], y0: 0, y1: f.H }, key + '|', out);
+  }
+  return out;
+}
+
+/** Whether anything is further past its wall in `now` than it was in `was` (what was already past it may stay, or come back in). */
+export function pushedOut(was: Overflow, now: Overflow): boolean {
+  for (const k in now) if (now[k] > (was[k] ?? 0) + 1e-6) return true;
+  return false;
+}

package/src/model/history.ts

@@ -1,14 +1,14 @@
-import { page, SK, store } from './store';
+import { page, store } from './store';
 import type { Underlay } from './types';
 import { onSessionReset } from './session';
 
 /* Undo/redo as JSON snapshots per page, as in the prototype.
    (An operation log is a later roadmap item for sync.)
-   Each snapshot also records the image underlay's placement (not its pixels), so moving,
-   resizing and locking an image undo like everything else. */
+   Each snapshot also records the page's images — which there are, and where — so adding, replacing, moving,
+   scaling, locking and removing them undo like everything else. Their pictures aren't copied: a snapshot keeps the
+   same reference (a data URL or a stored image's address) the page has. */
 
-type ImgXf = Omit<Underlay, 'src'> | null;
-interface Snap { sk: string; img: ImgXf }
+interface Snap { sk: string; imgs: Underlay[] }
 
 const hist: Record<string, { u: Snap[]; r: Snap[] }> = {};
 onSessionReset(() => { for (const k in hist) delete hist[k]; });
@@ -16,17 +16,25 @@ onSessionReset(() => { for (const k in hist) delete hist[k]; });
 export const HS = () => hist[store.curPageId] || (hist[store.curPageId] = { u: [], r: [] });
 
 function take(): Snap {
-  const u = page().underlay;
-  let img: ImgXf = null;
-  if (u) { const { src: _src, ...xf } = u; img = xf; }
-  return { sk: JSON.stringify(SK()), img };
+  return { sk: JSON.stringify(page().sk), imgs: page().underlays.map(u => ({ ...u })) }; // the whole page: its plan and its wall faces
 }
 
 function restore(s: Snap): void {
   const pg = page();
   pg.sk = JSON.parse(s.sk);
-  // placement only applies while the same image is still on the page
-  if (s.img && pg.underlay) pg.underlay = { src: pg.underlay.src, ...s.img };
+  // an image uploaded since keeps its stored address (not the local copy it had when this was taken)
+  const now = new Map(pg.underlays.map(u => [u.id, u.src]));
+  pg.underlays = s.imgs.map(u => ({ ...u, src: stored(u.src, now.get(u.id)) }));
+}
+
+/** The newer of two references to the same picture: a stored address beats the local data it was uploaded from. */
+const stored = (then: string, now: string | undefined): string => (now && then.startsWith('data:') && !now.startsWith('data:') ? now : then);
+
+/** An image was uploaded: every undo step that still holds its local copy takes the stored address instead. */
+export function imageStored(pageId: string, local: string, ref: string): void {
+  const h = hist[pageId];
+  if (!h) return;
+  for (const s of [...h.u, ...h.r]) for (const u of s.imgs) if (u.src === local) u.src = ref;
 }
 
 export function pushHistory(): void {

package/src/model/images.ts

@@ -0,0 +1,35 @@
+import { page } from './store';
+import type { Page, Underlay } from './types';
+
+/*
+  A page's photos and plans: a list, drawn in order (the last on top), each placed, scaled, faded and locked on its
+  own. Pages saved when a page held one image (`underlay`) read as a list of that one.
+*/
+
+type Stored = { underlays?: Underlay[] | null; underlay?: (Omit<Underlay, 'id'> & { id?: string }) | null };
+
+/** A stored page's images as a list (an older page's single image becomes the first), each with an id. */
+export function imagesOf(doc: Stored): Underlay[] {
+  // (a host that reads a missing list as empty still finds an older page's one image)
+  const list = doc.underlays?.length ? doc.underlays : doc.underlay ? [doc.underlay] : [];
+  const seen = new Set<string>();
+  return list.filter(Boolean).map((u, i) => {
+    let id = u.id || 'img' + (i + 1);
+    while (seen.has(id)) id += 'x';
+    seen.add(id);
+    return { ...u, id };
+  });
+}
+
+/** Bring a page read from storage up to date: its images as a list. */
+export function normalizeImages<P extends Stored>(pg: P): P & { underlays: Underlay[] } {
+  const out = pg as P & { underlays: Underlay[] };
+  out.underlays = imagesOf(pg);
+  delete out.underlay;
+  return out;
+}
+
+/** The current page's images, bottom first. */
+export const images = (pg: Page = page()): Underlay[] => pg.underlays;
+/** One of the current page's images. */
+export const imageById = (id: string, pg: Page = page()): Underlay | undefined => pg.underlays.find(u => u.id === id);

package/src/model/links.ts

@@ -0,0 +1,77 @@
+import { allCons } from './faces';
+import { sessionState } from './session';
+import type { LinkInfo, LinkTarget, Note, Project, Sketch } from './types';
+
+/*
+  Links: tiles on the drawing for the job's files and measurements (notes of type 'link'), and the job measurements
+  that drive dimensions (a constraint's measurementRef). What's linked belongs to the job, which the host has: the
+  drawing keeps where each one points and what it was when it was linked, and asks the host for what it is now (see
+  editor/links.ts).
+*/
+
+/** Micrometres in an inch: the job keeps lengths in µm, the drawing in inches. */
+export const UM_PER_IN = 25400;
+export const toUm = (inches: number): number => inches * UM_PER_IN;
+export const fromUm = (um: number): number => um / UM_PER_IN;
+
+/** A link's key, the same for the host and the editor: its kind, its group and its id. */
+export const linkKey = (t: Pick<LinkTarget, 'kind' | 'groupId' | 'id'>): string => t.kind + ':' + t.groupId + ':' + t.id;
+
+/** Whether `n` is a link's tile. */
+export const isLink = (n: Note): n is Note & { link: LinkTarget } => n.type === 'link' && !!n.link;
+
+/** How big a tile is on the screen as it's placed (points): its side on the drawing is what that is at the zoom then. */
+export const LINK_TILE_PX = 96;
+/** How big a tile can be on the drawing, inches; unset (never, once placed), this. */
+export const LINK_MIN_IN = 6, LINK_MAX_IN = 480, LINK_SIDE_IN = 24;
+/**
+ * On the screen, points: from LINK_FULL_PX across a tile shows its picture or icon and its name; under LINK_PIN_PX it's
+ * a pin of that size, however far out the drawing is.
+ */
+export const LINK_FULL_PX = 64, LINK_PIN_PX = 24;
+/** A new link's leader colour: the palette's blue. */
+export const LINK_COLOR = '#0364F4';
+
+/** A tile's side on the drawing, inches. */
+export const linkSide = (n: Note): number => n.ts ?? LINK_SIDE_IN;
+
+/** What the host has said each link is now, by key (asked for by editor/links.ts; nothing until it answers). */
+export const linkInfo = sessionState(() => ({ byKey: {} as Record<string, LinkInfo> }));
+export const linkInfoOf = (t: LinkTarget): LinkInfo | undefined => linkInfo.byKey[linkKey(t)];
+
+/**
+ * What the drawing keeps of a link the host picked: where it points, and what it was then — shown until the host says
+ * what it is now, in exports, and once it's gone. (Nothing else the host put on it.)
+ */
+export function linkSnapshot(t: LinkTarget): LinkTarget {
+  const out: LinkTarget = { kind: t.kind, id: t.id, groupId: t.groupId };
+  for (const k of ['columnId', 'path', 'name', 'groupName', 'fileType', 'mkind', 'value', 'text'] as const) {
+    if (t[k] != null) (out as unknown as Record<string, unknown>)[k] = t[k];
+  }
+  return out;
+}
+
+/** What a link is called: what the host says, or what it was when linked. */
+export function linkName(t: LinkTarget): string {
+  return linkInfoOf(t)?.name ?? t.name ?? (t.kind === 'file' ? 'File' : 'Measurement');
+}
+
+/** A sketch's links: its tiles, and its dimensions' measurements (on its wall faces too). */
+export function sketchLinks(sk: Sketch): LinkTarget[] {
+  const out: LinkTarget[] = [];
+  for (const n of sk.notes) if (isLink(n)) out.push(n.link);
+  for (const [, c] of allCons(sk)) if (c.measurementRef) out.push(c.measurementRef);
+  return out;
+}
+
+/** Everything a project links to, each once: its pages' tiles and the measurements its dimensions show. */
+export function linkTargets(p: Project): LinkTarget[] {
+  const out = new Map<string, LinkTarget>();
+  for (const pg of p.pages) for (const t of sketchLinks(pg.sk)) if (!out.has(linkKey(t))) out.set(linkKey(t), t);
+  return [...out.values()];
+}
+
+/** The job measurements a project links to, for the host's record of where measurements are placed. */
+export function linkedMeasurements(p: Project): { groupId: string; id: string; columnId?: string }[] {
+  return linkTargets(p).filter(t => t.kind === 'measurement').map(t => ({ groupId: t.groupId, id: t.id, ...(t.columnId ? { columnId: t.columnId } : {}) }));
+}

package/src/model/markup.ts

@@ -0,0 +1,80 @@
+import type { Note, NoteCap, NoteType } from './types';
+
+/*
+  Markup's look, as BOLDR's annotation editor offers it: a color from its palette, a stroke width, solid / dashed /
+  dotted, and for open strokes (pen, arrows) how each end finishes. Widths are screen pixels: markup reads the same at
+  any zoom.
+*/
+
+/** BOLDR's annotation palette (the annotation editors' 15 colors, five to a row). */
+export const NOTE_COLORS = [
+  '#FFFFFF', '#000000', '#0364F4', '#58A942', '#FFEA00',
+  '#FF8C00', '#FF0073', '#FF0000', '#FF66C7', '#780A9F',
+  '#225913', '#4D2409', '#CEB18E', '#182E39', '#680B19',
+];
+export const DEFAULT_NOTE_COLOR = '#FF0000';
+/** stroke widths offered, thinnest first */
+export const NOTE_WIDTHS = [1, 2, 3, 5, 8, 12];
+export const DEFAULT_NOTE_WIDTH = 3;
+export type NoteStyle = 'solid' | 'dash' | 'dot';
+export const NOTE_STYLES: NoteStyle[] = ['solid', 'dash', 'dot'];
+export const NOTE_CAPS: NoteCap[] = ['butt', 'round', 'arrow'];
+
+/** Open strokes: the kinds whose ends can be finished (round, flat or an arrowhead) — a link's leader among them. */
+export const hasEnds = (n: Note): boolean => n.type === 'pen' || n.type === 'arrow' || n.type === 'line' || (n.type === 'link' && !!n.leader);
+
+/** Two-point strokes: a straight line between `pts[0]` and `pts[1]`, reshaped by moving either end. */
+export const isSegment = (n: Note): boolean => n.type === 'arrow' || n.type === 'line';
+
+/** Outlined shapes in the box `pts[0]`–`pts[1]`: drawn, hit and exported by their outline (shapeOutline). */
+export const CLOSED_SHAPES: ReadonlySet<NoteType> = new Set(['rect', 'triangle', 'ellipse']);
+
+type Pt = [number, number];
+
+/**
+ * A closed shape's outline, in world coordinates (y up), fitted to the box its two corners make: a rectangle, a
+ * triangle with its point at the top, or a circle (an ellipse, when the box isn't square). Null for anything else.
+ */
+export function shapeOutline(n: Note): Pt[] | null {
+  if (!CLOSED_SHAPES.has(n.type) || !n.pts || n.pts.length < 2) return null;
+  const [[ax, ay], [bx, by]] = n.pts;
+  const l = Math.min(ax, bx), r = Math.max(ax, bx), b = Math.min(ay, by), t = Math.max(ay, by);
+  /** a point of the box, u and v from 0 to 1 (left to right, bottom to top) */
+  const at = (u: number, v: number): Pt => [l + (r - l) * u, b + (t - b) * v];
+  if (n.type === 'rect') return [at(0, 1), at(1, 1), at(1, 0), at(0, 0)];
+  if (n.type === 'triangle') return [at(0.5, 1), at(1, 0), at(0, 0)];
+  return Array.from({ length: 64 }, (_, i) => { const a = (i / 64) * 2 * Math.PI; return at(0.5 + Math.cos(a) / 2, 0.5 + Math.sin(a) / 2); });
+}
+
+export interface NoteLook { color: string; width: number; style: NoteStyle; startCap: NoteCap; endCap: NoteCap }
+
+/**
+ * How a note is drawn, its unset parts filled in. A link's leader starts under its tile (flat) and points at what it's
+ * for (an arrowhead) — its end is the far one, unlike Skia's, where the arrow at the target needed the start cap.
+ */
+export function noteLook(n: Note): NoteLook {
+  return {
+    color: n.color,
+    width: n.width ?? (n.type === 'cloud' ? 2.5 : DEFAULT_NOTE_WIDTH),
+    style: n.style ?? 'solid',
+    startCap: n.startCap ?? (n.type === 'link' ? 'butt' : 'round'),
+    endCap: n.cap ?? (n.type === 'arrow' || n.type === 'link' ? 'arrow' : 'round'),
+  };
+}
+
+/** The dash pattern for a style at a width (screen pixels); [] when solid. Dots are zero-length dashes with round caps. */
+export function dashFor(style: NoteStyle, width: number): number[] {
+  if (style === 'dash') return [width * 2.5 + 5, width * 1.5 + 4];
+  if (style === 'dot') return [0, width * 1.5 + 3];
+  return [];
+}
+
+/**
+ * Text notes: set at one size (NOTE_TEXT_SIZE px) and scaled to their size on the drawing — letters `ts` inches tall,
+ * NOTE_TEXT_IN unless set, from NOTE_TEXT_MIN_IN to NOTE_TEXT_MAX_IN — so a note zooms with the drawing.
+ */
+export const NOTE_TEXT_SIZE = 14, NOTE_TEXT_IN = 5, NOTE_TEXT_MIN_IN = 1, NOTE_TEXT_MAX_IN = 120;
+/** A note's letter height on the drawing, inches (a note from before kept screen pixels: 14 px is 5", as printed). */
+export const noteTextIn = (n: Note): number => n.ts ?? (n.size != null ? (n.size * NOTE_TEXT_IN) / NOTE_TEXT_SIZE : NOTE_TEXT_IN);
+/** Text sizes the markup panel offers (letter height on the drawing, inches); any other comes from a note's corners. */
+export const NOTE_TEXT_SIZES = [3, 5, 8, 12];

package/src/model/measurement.ts

@@ -0,0 +1,26 @@
+import type { CadMeasurementValue } from '../data/provider';
+import type { Constraint } from './types';
+
+/*
+  A dimension's value as BOLDR keeps a measurement — lengths in micrometres, angles in degrees — and back: for the
+  drawing's own measurements (data/sync.ts) and for measurements of the job it's linked to (editor/linkWrite.ts).
+*/
+
+const LENGTHS = new Set<Constraint['type']>(['dist', 'pldist', 'diam']);
+
+/**
+ * Dimension `c`'s value (or `value`, one it's about to have) as a measurement. Null for what isn't one: reference and
+ * print dimensions, measured-only ones, and constraints without a value.
+ */
+export function dimMeasurement(c: Constraint, value = c.value): CadMeasurementValue | null {
+  if (c.driving === false || c.layer === 'print' || value == null || c.auto) return null;
+  if (c.type === 'angle') return { kind: 'angle', value: Math.round(value * 100) / 100 };
+  // a fillet's radius is kept as its diameter; BOLDR keeps the radius
+  if (LENGTHS.has(c.type)) return { kind: 'length', value: Math.round((c.rad ? value / 2 : value) * 25400) };
+  return null;
+}
+
+/** A measurement's value as dimension `c` holds it: inches (a fillet's radius as its diameter), or degrees. */
+export function dimValueOf(c: Constraint, m: { value: number }): number {
+  return c.type === 'angle' ? m.value : (m.value / 25400) * (c.rad ? 2 : 1);
+}

package/src/model/openings.ts

@@ -307,3 +307,9 @@ export function pickBetween(sk: Sketch, a: string, aEdge: OpeningEdge, b: string
   const cb = driveCheck(sk, b, toB.ref), ca = driveCheck(sk, a, toA.ref);
   return cb === 'free' ? toB : ca === 'free' ? toA : cb === 'reroot' ? toB : ca === 'reroot' ? toA : toB;
 }
+
+/** A new door's or window's width, inches. */
+export const STANDARD_OPENING_W = 36;
+
+/** Whether an opening's width was entered (blue), rather than the standard size it was placed at (grey). */
+export const widthEntered = (o: Opening): boolean => o.wSet ?? Math.abs(o.w - STANDARD_OPENING_W) > 1e-6;