@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/render/draw.ts

@@ -1,17 +1,28 @@
 import { ed, isSel, type HitChip } from '../app/state';
-import { curveDefined, isDim, lineDefined, measure } from '../model/constraints';
+import { consPoints, curveDefined, isDim, lineDefined, measure } from '../model/constraints';
 import { hyp, norm2, normAng, projT } from '../model/geom';
-import { drivingDim, edgePoint, measureOpeningDim, refPoint, refS } from '../model/openings';
-import { arcAngles, gridSteps, OPENING_TICK_EXT, openingFrame, outsideSide } from '../model/planGeom';
+import { drivingDim, edgePoint, measureOpeningDim, refPoint, refS, widthEntered } from '../model/openings';
+import { arcAngles, curveFrame, dimEnds, dimRadius, edgeOf, gridSteps, OPENING_TICK_EXT, openingFrame, outsideSide, wallThick } from '../model/planGeom';
+import { faceCorner } from '../model/wallfaces';
 import { roomGeom } from '../model/rooms';
+import { wallPieces } from '../model/wallshape';
+import { cabinetFootprints } from '../model/facesolve';
 import { settings } from '../model/settings';
-import { curveInfo, linesBetween, roomValid } from '../model/sketch';
-import { page, SK } from '../model/store';
-import type { Constraint, Line, Page, Sketch, XY } from '../model/types';
+import { curveInfo, frameMemo, lineBetween, roomValid, withLineIndex } from '../model/sketch';
+import { page, planSK, SK } from '../model/store';
+import { elev, elevOpen } from '../editor/elevation';
+import { cabPoints } from '../model/faces';
+import { drawKeyPlan, drawWallBackdrop, drawWallChips, drawWallSelection, type ElevAct } from './elevation';
+import type { Constraint, Page, Sketch, WallFace, XY } from '../model/types';
 import { fmtAng, fmtArea, fmtLen } from '../units';
 import { FONT, TH } from './theme';
-import { cvs, imgCache, mainT, noteHandles, S, sketchBounds, underlayH, underlayHandles, type Xform } from './view';
+import { cvs, imgCache, keyPlanSize, mainT, nextThumbFrame, noteFont, noteHandles, noteTextBox, S, sketchBounds, underlayH, underlayHandles, underlayMid, type Xform } from './view';
 import type { DrawCtx } from './ctx';
+import { dashFor, isSegment, NOTE_TEXT_SIZE, noteLook, shapeOutline } from '../model/markup';
+import { strokeMarkup, strokeOutline } from './markup';
+import { drawLink } from './linkTile';
+import { isLink, linkInfoOf } from '../model/links';
+import { smoothRectPath } from './squircle';
 
 type C2D = DrawCtx;
 
@@ -19,34 +30,52 @@ type C2D = DrawCtx;
 let hits: HitChip[] | null = null;
 const addHit = (h: HitChip): void => { if (hits) hits.push(h); };
 
-const OPENING_PAD = 4;
 
+/** A rounded rectangle's path, its corners smoothed as Figma's 60% ("iOS"): render/squircle.ts. */
 export function rr(c: C2D, x: number, y: number, w: number, h: number, r: number): void {
-  c.beginPath();
-  c.moveTo(x + r, y);
-  c.arcTo(x + w, y, x + w, y + h, r);
-  c.arcTo(x + w, y + h, x, y + h, r);
-  c.arcTo(x, y + h, x, y, r);
-  c.arcTo(x, y, x + w, y, r);
-  c.closePath();
+  // (one shape for each size, moved into place where the engine can: hundreds of these are drawn every frame)
+  if (c.shape) c.shape('rr ' + w + ' ' + h + ' ' + r, x, y, (cc, X, Y) => smoothRectPath(cc, X, Y, w, h, r));
+  else smoothRectPath(c, x, y, w, h, r);
 }
 
 export interface ChipOpts {
   bg: string; fg: string; border?: [string, number?] | null; font?: string; pad?: number; h?: number; minW?: number;
   kind?: HitChip['kind']; id?: string; rot?: number;
+  /** a link mark before the text (a value set elsewhere: another view, or a measurement of the job) */
+  mark?: 'link';
+}
+
+/** Blue for outlined (linked) chips: the lighter blue on a dark canvas, so the text stays readable. */
+export function linkBlue(): string {
+  const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i.exec(TH.bg);
+  const dark = !!m && (parseInt(m[1], 16) * 299 + parseInt(m[2], 16) * 587 + parseInt(m[3], 16) * 114) / 1000 < 128;
+  return dark ? TH.lblue : TH.blue;
+}
+
+/** A small chain-link mark centred on (x, y). */
+export function linkMark(c: C2D, x: number, y: number, color: string): void {
+  c.save();
+  c.translate(x, y); c.rotate(-Math.PI / 4);
+  c.strokeStyle = color; c.lineWidth = 1.4;
+  c.beginPath(); c.roundRect(-6.5, -2.25, 7.5, 4.5, 2.25); c.roundRect(-1, -2.25, 7.5, 4.5, 2.25); c.stroke();
+  c.restore();
 }
 
+/** What a link mark takes before a chip's text. */
+const MARK_W = 14;
+
 /** Rounded label on the canvas; registers a hit region when `kind` is given. */
-export function chip(c: C2D, text: string, cx: number, cy: number, { bg, fg, border, font = '600 12px', pad = 7, h = 22, minW = 0, kind, id, rot = 0 }: ChipOpts): number {
+export function chip(c: C2D, text: string, cx: number, cy: number, { bg, fg, border, font = '600 12px', pad = 7, h = 22, minW = 0, kind, id, rot = 0, mark }: ChipOpts): number {
   c.font = font + ' ' + FONT;
-  const w = Math.max(minW, c.measureText(text).width + pad * 2);
+  const mw = mark ? MARK_W : 0, w = Math.max(minW, c.measureText(text).width + pad * 2 + mw);
   const x = cx - w / 2, y = cy - h / 2;
   c.save();
   if (rot) { c.translate(cx, cy); c.rotate(rot); c.translate(-cx, -cy); }
   rr(c, x, y, w, h, 5);
   c.fillStyle = bg; c.fill();
   if (border) { c.lineWidth = border[1] || 1; c.strokeStyle = border[0]; c.stroke(); }
-  c.fillStyle = fg; c.textAlign = 'center'; c.textBaseline = 'middle'; c.fillText(text, cx, cy + 0.5);
+  c.fillStyle = fg; c.textAlign = 'center'; c.textBaseline = 'middle'; c.fillText(text, cx + mw / 2, cy + 0.5);
+  if (mark) linkMark(c, x + pad + 4.5, cy, fg);
   c.restore();
   if (kind) {
     const ext = rot ? Math.max(w, h) / 2 : 0;
@@ -55,29 +84,37 @@ export function chip(c: C2D, text: string, cx: number, cy: number, { bg, fg, bor
   return w;
 }
 
-function drawGrid(c: C2D, T: Xform): void {
+/** The grid over the screen, and `m` px past each edge (see KeepOpts). */
+function drawGrid(c: C2D, T: Xform, m = 0): void {
   const { W, H } = cvs;
   const { minor, major } = gridSteps(T.s);
-  const x0 = (0 - T.ox) / T.s, x1 = (W - T.ox) / T.s, y1 = (T.oy - 0) / T.s, y0 = (T.oy - H) / T.s;
+  const x0 = (-m - T.ox) / T.s, x1 = (W + m - T.ox) / T.s, y1 = (T.oy + m) / T.s, y0 = (T.oy - H - m) / T.s;
   const lines = (step: number, color: string, w: number) => {
-    if ((x1 - x0) / step > 600) return;
+    // (too dense to draw: judged on the screen's width, whatever is drawn past it)
+    if (W / T.s / step > 600) return;
     c.beginPath(); c.strokeStyle = color; c.lineWidth = w;
-    for (let x = Math.floor(x0 / step) * step; x <= x1; x += step) { const sx = Math.round(x * T.s + T.ox) + 0.5; c.moveTo(sx, 0); c.lineTo(sx, H); }
-    for (let y = Math.floor(y0 / step) * step; y <= y1; y += step) { const sy = Math.round(-y * T.s + T.oy) + 0.5; c.moveTo(0, sy); c.lineTo(W, sy); }
+    for (let x = Math.floor(x0 / step) * step; x <= x1; x += step) { const sx = Math.round(x * T.s + T.ox) + 0.5; c.moveTo(sx, -m); c.lineTo(sx, H + m); }
+    for (let y = Math.floor(y0 / step) * step; y <= y1; y += step) { const sy = Math.round(-y * T.s + T.oy) + 0.5; c.moveTo(-m, sy); c.lineTo(W + m, sy); }
     c.stroke();
   };
   lines(minor, TH.grid, 1);
   lines(major, TH.grid2, 1);
 }
 
+/** The page's photos and plans, in order (the last on top). */
 function drawUnderlay(c: C2D, T: Xform): void {
-  const u = page().underlay;
-  if (!u || !settings.layers.underlay) return;
-  const im = imgCache(u.src);
-  if (!im || !im.complete || !im.naturalWidth) return;
-  const h = underlayH(u);
-  const [x, y] = S(T, u.x, u.y);
-  c.save(); c.globalAlpha = u.opacity ?? 0.6; c.drawImage(im, x, y, u.w * T.s, h * T.s); c.restore();
+  if (!settings.layers.underlay) return;
+  for (const u of page().underlays) {
+    const im = imgCache(u.src);
+    if (!im || !im.complete || !im.naturalWidth) continue;
+    // drawn about its middle, turned as it's set (clockwise as seen: the canvas turns that way)
+    const h = underlayH(u), m = underlayMid(u), [x, y] = S(T, m.x, m.y), w = u.w * T.s, hh = h * T.s;
+    c.save(); c.globalAlpha = u.opacity ?? 0.6;
+    c.translate(x, y);
+    if (u.rot) c.rotate((u.rot * Math.PI) / 180);
+    c.drawImage(im, -w / 2, -hh / 2, w, hh);
+    c.restore();
+  }
 }
 
 const inkFor = (defined: boolean, constr: boolean | undefined) => (constr ? TH.constr : defined ? TH.def : TH.ink);
@@ -106,30 +143,6 @@ function drawRooms(c: C2D, T: Xform, sk: Sketch, thumb?: boolean): void {
   }
 }
 
-function wallDegree(sk: Sketch): Record<string, number> {
-  const deg: Record<string, number> = {};
-  for (const id in sk.lines) {
-    const l = sk.lines[id];
-    if (l.kind !== 'wall') continue;
-    deg[l.a] = (deg[l.a] || 0) + 1; deg[l.b] = (deg[l.b] || 0) + 1;
-  }
-  for (const id in sk.arcs) {
-    const a = sk.arcs[id];
-    if (a.kind !== 'wall') continue;
-    deg[a.a] = (deg[a.a] || 0) + 1; deg[a.b] = (deg[a.b] || 0) + 1;
-  }
-  return deg;
-}
-
-/** Wall centerline path, extended at joints by half the thickness so corners close. */
-function wallPath(c: C2D, T: Xform, sk: Sketch, l: Line, deg: Record<string, number>, extra?: number): void {
-  const A = sk.points[l.a], B = sk.points[l.b];
-  const dx = B.x - A.x, dy = B.y - A.y, L = hyp(dx, dy) || 1e-9, ux = dx / L, uy = dy / L, e = l.thick / 2 + (extra || 0);
-  const ea = deg[l.a] > 1 ? e : 0, eb = deg[l.b] > 1 ? e : 0;
-  const [x1, y1] = S(T, A.x - ux * ea, A.y - uy * ea), [x2, y2] = S(T, B.x + ux * eb, B.y + uy * eb);
-  c.moveTo(x1, y1); c.lineTo(x2, y2);
-}
-
 interface CurveWall { id: string; kind: 'circle' | 'arc'; thick: number; constr?: boolean }
 
 function curveWalls(sk: Sketch): CurveWall[] {
@@ -151,46 +164,137 @@ function curveWallPath(c: C2D, T: Xform, sk: Sketch, cw: CurveWall): void {
   }
 }
 
+/**
+ * Cabinets in the plan: each one's footprint against its wall, from the wall's view (read-only — tap one to open its
+ * wall). Drawn as cabinetry, not a shape to edit: base cabinets hatched, with a bold front where the doors face the room
+ * and their name when there's room for it; wall (upper) cabinets dashed with a cross, as drafted.
+ */
+function drawCabinetFootprints(c: C2D, T: Xform, sk: Sketch): void {
+  const fps = cabinetFootprints(sk);
+  if (!fps.length) return;
+  for (const fp of fps) {
+    // pts: along the wall face (0 → 1), then the front, out in the room (2 → 3)
+    const q = fp.pts.map(p => S(T, p.x, p.y));
+    const path = () => { c.beginPath(); q.forEach(([x, y], i) => (i ? c.lineTo(x, y) : c.moveTo(x, y))); c.closePath(); };
+    const hov = ed.hover?.type === 'cabfoot' && ed.hover.id === fp.key + '#' + fp.id;
+    c.save();
+    if (fp.upper) {
+      path(); c.setLineDash([6, 4]); c.strokeStyle = TH.ink2; c.lineWidth = hov ? 2 : 1.2; c.stroke();
+      c.beginPath(); c.moveTo(...q[0]); c.lineTo(...q[2]); c.moveTo(...q[1]); c.lineTo(...q[3]); c.lineWidth = 1; c.stroke();
+      c.restore();
+      continue;
+    }
+    path();
+    c.fillStyle = hov ? 'rgba(128,128,128,.30)' : 'rgba(128,128,128,.16)'; c.fill();
+    // hatching, clipped to the footprint
+    c.save(); path(); c.clip();
+    const xs = q.map(p => p[0]), ys = q.map(p => p[1]), x0 = Math.min(...xs), x1 = Math.max(...xs), y0 = Math.min(...ys), y1 = Math.max(...ys);
+    c.strokeStyle = TH.ink2; c.globalAlpha = 0.45; c.lineWidth = 1; c.beginPath();
+    for (let k = x0 - (y1 - y0); k < x1; k += 7) { c.moveTo(k, y1); c.lineTo(k + (y1 - y0), y0); }
+    c.stroke(); c.restore();
+    path(); c.strokeStyle = TH.ink2; c.lineWidth = hov ? 2 : 1.2; c.stroke();
+    // the front (where its doors are)
+    c.beginPath(); c.moveTo(...q[2]); c.lineTo(...q[3]); c.strokeStyle = TH.ink; c.lineWidth = 2.5; c.stroke();
+    const w = Math.hypot(q[1][0] - q[0][0], q[1][1] - q[0][1]), d = Math.hypot(q[2][0] - q[1][0], q[2][1] - q[1][1]);
+    if (Math.max(w, d) > 64 && Math.min(w, d) > 18) {
+      // along its longer side, reading upright
+      const [p0, p1] = w >= d ? [q[0], q[1]] : [q[1], q[2]], cx = (q[0][0] + q[2][0]) / 2, cy = (q[0][1] + q[2][1]) / 2;
+      let a = Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
+      if (a > Math.PI / 2) a -= Math.PI; else if (a <= -Math.PI / 2) a += Math.PI;
+      c.translate(cx, cy); c.rotate(a);
+      c.font = '600 10px ' + FONT; c.textAlign = 'center'; c.textBaseline = 'middle';
+      c.fillStyle = TH.bg; c.globalAlpha = 0.85; const tw = c.measureText('Cabinet').width; c.fillRect(-tw / 2 - 3, -7, tw + 6, 14);
+      c.globalAlpha = 1; c.fillStyle = TH.ink; c.fillText('Cabinet', 0, 0.5);
+    }
+    c.restore();
+  }
+}
+
+/** A wall piece's outline, added to the current path (`fresh`: start a new path first). */
+function piecePath(c: C2D, T: Xform, pts: XY[], fresh = true): void {
+  if (fresh) c.beginPath();
+  pts.forEach((p, i) => { const [x, y] = S(T, p.x, p.y); if (i) c.lineTo(x, y); else c.moveTo(x, y); });
+  c.closePath();
+}
+
+/**
+ * Walls as solid bands of their thickness, outlined in the definition colour. Straight walls are filled outlines cut
+ * to fit where they meet (model/wallshape.ts), so corners at any angle close cleanly; curved walls are thick strokes.
+ * Every outline is drawn first and the fill over all of them, so only the outside of the outlines shows, not the seams.
+ */
 function drawWalls(c: C2D, T: Xform, sk: Sketch, thumb?: boolean): void {
-  const deg = wallDegree(sk);
-  const walls = Object.entries(sk.lines).filter(([, l]) => l.kind === 'wall' && !(l.constr && !settings.layers.construction));
-  if (!walls.length && !curveWalls(sk).length) return;
-  c.lineCap = 'butt';
+  const shown = (w: { constr?: boolean }) => !(w.constr && !settings.layers.construction);
+  const pieces = wallPieces(sk, shown), curves = curveWalls(sk);
+  if (!pieces.length && !curves.length) return;
   const ow = thumb ? 1 : 1.6;
-  // outline pass (definition color), then fill pass
-  for (const [id, l] of walls) {
-    const d = lineDefined(ed.ana, l);
-    c.beginPath(); wallPath(c, T, sk, l, deg, ow / T.s);
-    c.lineWidth = l.thick * T.s + ow * 2;
-    c.strokeStyle = ed.highlight.has(id) ? TH.red : inkFor(d && !thumb, l.constr);
-    c.stroke();
-  }
-  // curved walls: same outline-then-fill treatment
-  const curves = curveWalls(sk);
+  const ink = (id: string) => { const l = sk.lines[id]; return ed.highlight.has(id) ? TH.red : inkFor(lineDefined(ed.ana, l) && !thumb, l.constr); };
+  c.save();
+  c.lineJoin = 'round'; c.lineCap = 'butt';
+  for (const p of pieces) { piecePath(c, T, p.pts); c.lineWidth = ow * 2; c.strokeStyle = ink(p.of); c.stroke(); }
   for (const cw of curves) {
     curveWallPath(c, T, sk, cw);
     c.lineWidth = cw.thick * T.s + ow * 2;
     c.strokeStyle = ed.highlight.has(cw.id) ? TH.red : inkFor(curveDefined(ed.ana, sk, cw.id) && !thumb, cw.constr);
     c.stroke();
   }
-  for (const [, l] of walls) {
-    c.beginPath(); wallPath(c, T, sk, l, deg, 0);
-    c.lineWidth = Math.max(0.5, l.thick * T.s); c.strokeStyle = TH.wall; c.stroke();
-  }
+  // one fill for every piece: pieces filled one by one leave a hairline where they meet
+  c.fillStyle = TH.wall;
+  c.beginPath();
+  for (const p of pieces) piecePath(c, T, p.pts, false);
+  c.fill();
   for (const cw of curves) { curveWallPath(c, T, sk, cw); c.lineWidth = Math.max(0.5, cw.thick * T.s); c.strokeStyle = TH.wall; c.stroke(); }
-  if (thumb) return;
-  for (const [id, l] of walls) {
-    if (isSel('line', id) || (ed.hover && ed.hover.type === 'line' && ed.hover.id === id)) {
-      c.beginPath(); wallPath(c, T, sk, l, deg, 0);
-      c.lineWidth = Math.max(3, l.thick * T.s);
-      c.strokeStyle = isSel('line', id) ? 'rgba(255,173,0,.55)' : 'rgba(255,173,0,.28)';
-      c.stroke();
+  if (!thumb) {
+    for (const p of pieces) {
+      if (!p.id || !(isSel('line', p.id) || (ed.hover && ed.hover.type === 'line' && ed.hover.id === p.id))) continue;
+      piecePath(c, T, p.pts);
+      c.fillStyle = isSel('line', p.id) ? 'rgba(255,173,0,.55)' : 'rgba(255,173,0,.28)';
+      c.fill();
     }
+    drawEdges(c, T, sk);
+  }
+  c.restore();
+}
+
+/**
+ * Wall edges picked on their own (and the one under the pointer): along the face, from its corner to its corner — a
+ * curved wall's all along it.
+ */
+function drawEdges(c: C2D, T: Xform, sk: Sketch): void {
+  const ids = ed.sel.filter(s => s.type === 'wface').map(s => s.id);
+  const hov = ed.hover?.type === 'wface' && !ids.includes(ed.hover.id) ? ed.hover.id : null;
+  if (hov) ids.push(hov);
+  for (const id of ids) {
+    const [lid, side] = edgeOf(id);
+    if (!sk.lines[lid]) { drawCurveEdge(c, T, sk, lid, side, id !== hov); continue; }
+    const a = faceCorner(sk, lid, side, 'a'), b = faceCorner(sk, lid, side, 'b');
+    if (!a || !b) continue;
+    const [ax, ay] = S(T, a.x, a.y), [bx, by] = S(T, b.x, b.y), lit = id !== hov;
+    c.lineCap = 'round';
+    c.strokeStyle = lit ? TH.yellow : 'rgba(255,173,0,.6)'; c.lineWidth = lit ? 3.5 : 2.5;
+    c.beginPath(); c.moveTo(ax, ay); c.lineTo(bx, by); c.stroke();
+    // (its corners: where a length on it is measured from and to)
+    c.fillStyle = lit ? TH.yellow : 'rgba(255,173,0,.6)';
+    for (const [x, y] of [[ax, ay], [bx, by]]) { c.beginPath(); c.arc(x, y, lit ? 4 : 3, 0, Math.PI * 2); c.fill(); }
   }
 }
 
+/** A curved wall's outer (+1) or inner (−1) edge, picked (`lit`) or under the pointer. */
+function drawCurveEdge(c: C2D, T: Xform, sk: Sketch, id: string, side: 1 | -1, lit: boolean): void {
+  const w = sk.circles[id] ?? sk.arcs[id], f = curveFrame(sk, id);
+  if (!w || !f) return;
+  const rr = (f.r + (side * wallThick(w)) / 2) * T.s, [x, y] = S(T, f.o.x, f.o.y);
+  if (rr <= 0) return;
+  c.lineCap = 'round';
+  c.strokeStyle = lit ? TH.yellow : 'rgba(255,173,0,.6)'; c.lineWidth = lit ? 3.5 : 2.5;
+  c.beginPath();
+  if (f.arc) c.arc(x, y, rr, -f.arc.t0, -f.arc.t1, true); else c.arc(x, y, rr, 0, Math.PI * 2);
+  c.stroke();
+}
+
 function drawOpenings(c: C2D, T: Xform, sk: Sketch): void {
-  for (const id in sk.openings) {
+  // the selected or hovered one last: a neighbour drawn after it would knock the wall out over its outline
+  const lit = (id: string) => isSel('opening', id) || (ed.hover?.type === 'opening' && ed.hover.id === id);
+  for (const id of Object.keys(sk.openings).sort((a, b) => Number(lit(a)) - Number(lit(b)))) {
     const o = sk.openings[id], g = openingFrame(sk, id);
     if (!g) continue;
     const { A, ux, uy, nx, ny, s0, s1, w, t } = g, f = o.flip ? -1 : 1;
@@ -207,10 +311,10 @@ function drawOpenings(c: C2D, T: Xform, sk: Sketch): void {
     const sel1 = isSel('opening', id);
     const hov = !sel1 && ed.hover && ed.hover.type === 'opening' && ed.hover.id === id;
     const ext = OPENING_TICK_EXT / T.s;
-    // hover / selection band so it's obvious what a click will grab
+    // hover / selection band so it's obvious what a click will grab: exactly its footprint in the wall, face to face
+    // and end to end (not padded out past them)
     if (sel1 || hov) {
-      const pad = OPENING_PAD / T.s;
-      quad(s0 - pad, s1 + pad, t / 2 + ext + pad);
+      quad(s0, s1, t / 2);
       c.fillStyle = sel1 ? 'rgba(255,173,0,.30)' : 'rgba(255,173,0,.16)'; c.fill();
       c.lineWidth = sel1 ? 2 : 1.5; c.strokeStyle = sel1 ? TH.yellow : 'rgba(255,173,0,.85)'; c.stroke();
     }
@@ -255,6 +359,7 @@ function drawLines(c: C2D, T: Xform, sk: Sketch, thumb?: boolean): void {
       c.beginPath(); c.moveTo(x1, y1); c.lineTo(x2, y2);
       c.lineWidth = 7; c.strokeStyle = selected ? 'rgba(255,173,0,.6)' : 'rgba(255,173,0,.3)'; c.stroke();
     }
+    if (l.anchor || l.cab) continue; // a wall face's edge from the plan, a cabinet's: the wall view's backdrop draws them
     c.beginPath(); c.moveTo(x1, y1); c.lineTo(x2, y2);
     if (l.constr) { c.setLineDash([6, 5]); c.lineWidth = 1.2; } else c.lineWidth = thumb ? 1.2 : 2;
     c.strokeStyle = ed.highlight.has(id) ? TH.red : inkFor(lineDefined(ed.ana, l) && !thumb, l.constr);
@@ -297,9 +402,15 @@ function drawCurves(c: C2D, T: Xform, sk: Sketch, thumb?: boolean): void {
   }
 }
 
+/** Points on a line that isn't fully defined: drawn in ink, not green (worked out once a frame, not once a point). */
+const looseEnds = (sk: Sketch): Set<string> => frameMemo(sk, 'looseEnds', () => {
+  const out = new Set<string>();
+  for (const lid in sk.lines) { const l = sk.lines[lid]; if (!lineDefined(ed.ana, l)) { out.add(l.a); out.add(l.b); } }
+  return out;
+});
+
 function inkForPoint(sk: Sketch, id: string): string {
-  for (const lid in sk.lines) { const l = sk.lines[lid]; if ((l.a === id || l.b === id) && !lineDefined(ed.ana, l)) return TH.ink; }
-  return TH.def;
+  return looseEnds(sk).has(id) ? TH.ink : TH.def;
 }
 
 function drawLock(c: C2D, x: number, y: number): void {
@@ -316,6 +427,8 @@ function drawLock(c: C2D, x: number, y: number): void {
 function drawPoints(c: C2D, T: Xform, sk: Sketch): void {
   const { W, H } = cvs;
   const touch = ed.lastPointerTouch;
+  // a cabinet's corners aren't grab points: it moves as one, like a door or window
+  const cabCorners = new Set(Object.values((sk as WallFace).cabs ?? {}).flatMap(cabPoints));
   for (const id in sk.points) {
     const p = sk.points[id];
     const [x, y] = S(T, p.x, p.y);
@@ -325,13 +438,16 @@ function drawPoints(c: C2D, T: Xform, sk: Sketch): void {
       c.beginPath(); c.moveTo(x - 9, y); c.lineTo(x + 9, y); c.moveTo(x, y - 9); c.lineTo(x, y + 9); c.stroke();
     }
     const selected = isSel('point', id), hov = ed.hover && ed.hover.type === 'point' && ed.hover.id === id;
+    // a wall face's corners from the plan, and a cabinet's, show only when picked or under the pointer (like a window's)
+    if ((p.anchor || cabCorners.has(id)) && !selected && !hov) continue;
     const r = (touch ? 5 : 4.2) + (hov ? 1.5 : 0);
+    // (a door's or window's corners on a wall face are free until the plan locks it, or the face pins it: as a cabinet's)
     const det = ed.ana.det.has(id);
     c.beginPath(); c.arc(x, y, r, 0, Math.PI * 2);
     if (selected) { c.fillStyle = TH.yellow; c.fill(); c.lineWidth = 1.5; c.strokeStyle = TH.ink; c.stroke(); }
     else if (det) { c.fillStyle = ed.highlight.has(id) ? TH.red : p.origin ? TH.ink : inkForPoint(sk, id); c.fill(); }
     else { c.fillStyle = TH.bg; c.fill(); c.lineWidth = 1.8; c.strokeStyle = TH.ink; c.stroke(); }
-    if (p.fixed && !p.origin) drawLock(c, x + 9, y - 14);
+    if (p.fixed && !p.origin && !p.anchor) drawLock(c, x + 9, y - 14);
   }
 }
 
@@ -343,21 +459,23 @@ type DimAnchor =
 function dimAnchor(sk: Sketch, c: Constraint): DimAnchor | null {
   const P = (id: string) => sk.points[id];
   if (c.type === 'dist') {
-    const a = P(c.a!), b = P(c.b!);
+    // (measured on a wall's face: from its corner to corner, the label off the face on that side)
+    const e = dimEnds(sk, c);
+    if (!e) return null;
+    const { a, b } = e;
     const dx = b.x - a.x, dy = b.y - a.y, L = hyp(dx, dy) || 1e-9, nx = -dy / L, ny = dx / L, off = c.off || 0;
     return { m: { x: (a.x + b.x) / 2 + nx * off, y: (a.y + b.y) / 2 + ny * off }, a, b, nx, ny, L };
   }
   if (c.type === 'pldist') {
-    const l = sk.lines[c.l!], p = P(c.p!), A = P(l.a), B = P(l.b);
-    const t = projT(A, B, p);
-    const f = { x: A.x + (B.x - A.x) * t, y: A.y + (B.y - A.y) * t };
-    return { m: { x: (p.x + f.x) / 2, y: (p.y + f.y) / 2 }, a: p, b: f };
+    // (between walls' faces: from face to face)
+    const e = dimEnds(sk, c);
+    if (!e) return null;
+    return { m: { x: (e.a.x + e.b.x) / 2, y: (e.a.y + e.b.y) / 2 }, a: e.a, b: e.b };
   }
   if (c.type === 'diam') {
-    const ci = curveInfo(sk, c.c)!;
-    const o = P(ci.o.c);
-    const r = ci.kind === 'circle' ? ci.o.r : hyp(P(ci.o.a).x - o.x, P(ci.o.a).y - o.y);
-    return { m: { x: o.x, y: o.y }, o, r };
+    // (across a curved wall's face: its arrows on that face)
+    const g = dimRadius(sk, c);
+    return g ? { m: { x: g.o.x, y: g.o.y }, o: g.o, r: g.r } : null;
   }
   if (c.type === 'angle') {
     const l1 = sk.lines[c.l1!], l2 = sk.lines[c.l2!];
@@ -373,20 +491,38 @@ function dimAnchor(sk: Sketch, c: Constraint): DimAnchor | null {
   return null;
 }
 
-/** Driving/reference dimension chips. (Lengths are added from the bottom bar's + / Length, not on-canvas prompts.) */
+/** Whether a dimension, or something it measures (its lines, points or curves), is selected or hovered. */
+function dimLive(sk: Sketch, id: string, d: Constraint): boolean {
+  const pts = consPoints(sk, d), lines = new Set([d.line, d.l, d.l1, d.l2].filter(Boolean)), curves = new Set([d.c, d.c1, d.c2].filter(Boolean));
+  const hit = (x: { type: string; id: string } | null) => !!x && (
+    ((x.type === 'dim' || x.type === 'cons') && x.id === id) || (x.type === 'point' && pts.has(x.id)) || (x.type === 'line' && lines.has(x.id))
+    || ((x.type === 'circle' || x.type === 'arc') && curves.has(x.id)));
+  return ed.sel.some(hit) || hit(ed.hover);
+}
+
+/**
+ * Driving/reference dimension chips. (Lengths are added from the bottom bar's + / Length, not on-canvas prompts.) What's
+ * been entered (blue, or red when it can't be met) always shows; a reference only while it or what it measures is
+ * selected or hovered.
+ */
 function drawDims(c: C2D, T: Xform, sk: Sketch): void {
   if (!settings.layers.dims) return;
   for (const id in sk.cons) {
     const d = sk.cons[id];
-    if (!isDim(d) || d.layer === 'print') continue;
+    if (!isDim(d) || d.layer === 'print' || d.elev) continue; // the wall view's own dimensions are its chips
     const A = dimAnchor(sk, d);
     if (!A) continue;
     const ref = d.driving === false, val = ref ? measure(sk, d) : d.value!;
     const selected = isSel('dim', id) || isSel('cons', id);
     const bad = ed.highlight.has(id) || ed.ana.bad.has(id);
+    if (ref && !bad && !dimLive(sk, id, d)) continue;
+    // a measurement of the job sets it: outlined, with a link mark — red once the job's measurement is gone
+    const linked = !!d.measurementRef && !ref && !bad, gone = linked && linkInfoOf(d.measurementRef!)?.exists === false;
     let bg = ref ? TH.ref : TH.blue, fg = ref ? TH.reftext : '#fff';
     if (bad) { bg = TH.red; fg = '#fff'; }
-    const border: [string, number] | null = selected ? [TH.yellow, 2.5] : null;
+    if (linked) { bg = TH.bg; fg = gone ? TH.red : d.type === 'angle' ? TH.purple : linkBlue(); }
+    const border: [string, number] | null = selected ? [TH.yellow, 2.5] : linked ? [fg, 1.5] : null;
+    const mark = linked ? 'link' as const : undefined;
     const wrap = (s: string) => (ref ? '(' : '') + s + (ref ? ')' : '');
     if (d.type === 'angle' && 'vtx' in A) {
       const [vx, vy] = S(T, A.vtx.x, A.vtx.y);
@@ -397,26 +533,29 @@ function drawDims(c: C2D, T: Xform, sk: Sketch): void {
         while (sweep > Math.PI) sweep -= 2 * Math.PI;
         while (sweep < -Math.PI) sweep += 2 * Math.PI;
         c.save(); c.strokeStyle = bad ? TH.red : ref ? TH.chipline : TH.purple; c.lineWidth = 1.2;
+        if (ref) c.setLineDash([3, 3]);
         c.beginPath(); c.arc(vx, vy, 22, t1, t1 + sweep, sweep < 0); c.stroke(); c.restore();
       }
-      chip(c, wrap(fmtAng(val)), vx + A.bis[0] * 50, vy - A.bis[1] * 50, { bg: bad ? TH.red : ref ? TH.ref : TH.purple, fg: ref ? TH.reftext : '#fff', border, kind: 'dim', id });
+      chip(c, wrap(fmtAng(val)), vx + A.bis[0] * 50, vy - A.bis[1] * 50, linked ? { bg, fg, border, kind: 'dim', id, mark }
+        : { bg: bad ? TH.red : ref ? TH.ref : TH.purple, fg: ref ? TH.reftext : '#fff', border, kind: 'dim', id });
       continue;
     }
     if (d.type === 'diam' && 'o' in A) {
-      drawDiameter(c, T, A.o, A.r, d, 'Ø ' + wrap(fmtLen(val)), bad ? TH.red : ref ? TH.chipline : TH.blue, { bg, fg, border, kind: 'dim', id });
+      drawDiameter(c, T, A.o, A.r, d, d.rad ? 'R ' + wrap(fmtLen(val / 2)) : 'Ø ' + wrap(fmtLen(val)), bad ? TH.red : ref ? TH.chipline : TH.blue, { bg, fg, border, kind: 'dim', id, mark }, ref);
       continue;
     }
     if (!('a' in A)) continue;
     const [mx, my] = S(T, A.m.x, A.m.y);
     const lineColor = bad ? TH.red : ref ? TH.chipline : TH.blue;
     if (d.type === 'dist' && A.nx != null && Math.abs((d.off || 0) * T.s) > 10) {
-      drawDimLeaders(c, T, A.a, A.b, A.nx, A.ny!, d.off!, lineColor);
+      drawDimLeaders(c, T, A.a, A.b, A.nx, A.ny!, d.off!, lineColor, ref);
     } else if (d.type === 'pldist' || !d.line) {
+      // (dashed only when it's a reference: a dashed line means the number holds nothing, wherever it's drawn)
       const [ax, ay] = S(T, A.a.x, A.a.y), [bx, by] = S(T, A.b.x, A.b.y);
-      c.save(); c.setLineDash([3, 3]); c.strokeStyle = bad ? TH.red : ref ? TH.chipline : TH.blue; c.lineWidth = 1.2;
+      c.save(); if (ref) c.setLineDash([3, 3]); c.strokeStyle = bad ? TH.red : ref ? TH.chipline : TH.blue; c.lineWidth = 1.2;
       c.beginPath(); c.moveTo(ax, ay); c.lineTo(bx, by); c.stroke(); c.restore();
     }
-    chip(c, wrap(fmtLen(val)), mx, my, { bg, fg, border, kind: 'dim', id });
+    chip(c, wrap(fmtLen(val)), mx, my, { bg, fg, border, kind: 'dim', id, mark });
   }
 }
 
@@ -482,6 +621,8 @@ function drawOpeningDims(c: C2D, T: Xform, sk: Sketch): void {
     for (const d of o.dims || []) {
       const r = refS(sk, o, d.ref), rp = refPoint(sk, d.ref);
       if (r == null || !rp) continue;
+      // a reference shows only while its door or window is selected or hovered; what locks it always
+      if (!d.driving && !ed.badOpeningDims.has(d.id) && !active) continue;
       const e = d.edge === 's0' ? g.s0 : g.s1;
       const k = d.off ?? kRow(place(r, e));
       const bad = ed.badOpeningDims.has(d.id);
@@ -504,13 +645,15 @@ function drawOpeningDims(c: C2D, T: Xform, sk: Sketch): void {
     // blue is only for dimensions that lock something
     if (active && !locked) {
       const grey = TH.chipline;
-      if (g.s0 > 0.5) { ext(0, kw, grey); span(0, g.s0, kw, grey); label(0, g.s0, 'a', fmtLen(g.s0), kw, TH.ref, TH.reftext); }
-      if (L - g.s1 > 0.5) { ext(L, kw, grey); span(g.s1, L, kw, grey); label(g.s1, L, 'b', fmtLen(L - g.s1), kw, TH.ref, TH.reftext); }
+      if (g.s0 > 0.5) { ext(0, kw, grey); span(0, g.s0, kw, grey); label(0, g.s0, 'a', '(' + fmtLen(g.s0) + ')', kw, TH.ref, TH.reftext); }
+      if (L - g.s1 > 0.5) { ext(L, kw, grey); span(g.s1, L, kw, grey); label(g.s1, L, 'b', '(' + fmtLen(L - g.s1) + ')', kw, TH.ref, TH.reftext); }
     }
-    // width: a solid dimension line with extension lines from the jambs whenever it's in view (hovered or selected,
-    // locked or not) or has been pulled away from its usual spot
-    if (o.wOff != null || active) { ext(g.s0, kw, TH.blue); ext(g.s1, kw, TH.blue); span(g.s0, g.s1, kw, TH.blue, false); }
-    label(g.s0, g.s1, 'w', fmtLen(g.w), kw, TH.blue, '#fff', isSel('opening', id) ? [TH.yellow, 2] : null);
+    // width: a full dimension, a solid line with extension lines from the jambs; blue once it's been entered (and then
+    // always shown), grey while it's the standard size it was placed at (and then only while the opening is selected or hovered)
+    if (!widthEntered(o) && !active) continue;
+    const wc = widthEntered(o) ? TH.blue : TH.chipline;
+    ext(g.s0, kw, wc); ext(g.s1, kw, wc); span(g.s0, g.s1, kw, wc, false);
+    label(g.s0, g.s1, 'w', fmtLen(g.w), kw, widthEntered(o) ? TH.blue : TH.ref, widthEntered(o) ? '#fff' : TH.reftext, isSel('opening', id) ? [TH.yellow, 2] : null);
   }
 }
 
@@ -522,7 +665,8 @@ function drawOpeningAnchors(c: C2D, T: Xform, sk: Sketch): void {
   if (ed.mode !== 'draft') return;
   for (const id in sk.openings) {
     const o = sk.openings[id];
-    const show = ed.tool === 'dim' || isSel('opening', id) || (ed.hover != null && ed.hover.id === id);
+    const endPicked = (e: string) => isSel('oanchor', id + '|' + e);
+    const show = ed.tool === 'dim' || isSel('opening', id) || endPicked('s0') || endPicked('s1') || (ed.hover != null && ed.hover.id === id);
     if (!show) continue;
     const locked = !!drivingDim(o);
     for (const edge of ['s0', 's1'] as const) {
@@ -531,7 +675,7 @@ function drawOpeningAnchors(c: C2D, T: Xform, sk: Sketch): void {
       const [x, y] = S(T, p.x, p.y);
       const hov = ed.hover && ed.hover.type === 'oanchor' && ed.hover.id === id && ed.hover.part === edge;
       // a body pick hasn't settled on an edge yet, so both light up
-      const picked = ed.pickedAnchor && ed.pickedAnchor.id === id && (ed.pickedAnchor.body || ed.pickedAnchor.edge === edge);
+      const picked = (ed.pickedAnchor && ed.pickedAnchor.id === id && (ed.pickedAnchor.body || ed.pickedAnchor.edge === edge)) || endPicked(edge);
       const r = (ed.lastPointerTouch ? 5 : 4.2) + (hov ? 1.5 : 0);
       c.save();
       c.beginPath(); c.rect(x - r, y - r, r * 2, r * 2);
@@ -614,7 +758,7 @@ export function drawPendingDim(c: C2D, T: Xform, p: { from: XY; to: XY; a: XY; b
  * A linear dimension pulled off its line: extension lines from both ends out to a dimension line with
  * arrowheads, so the label always reads as attached to what it measures.
  */
-function drawDimLeaders(c: C2D, T: Xform, a: XY, b: XY, nx: number, ny: number, off: number, color: string): void {
+function drawDimLeaders(c: C2D, T: Xform, a: XY, b: XY, nx: number, ny: number, off: number, color: string, dashed = false): void {
   const [ax, ay] = S(T, a.x, a.y), [bx, by] = S(T, b.x, b.y);
   const [qax, qay] = S(T, a.x + nx * off, a.y + ny * off), [qbx, qby] = S(T, b.x + nx * off, b.y + ny * off);
   const [ex, ey] = norm2(qax - ax, qay - ay); // screen direction from geometry toward the dimension line
@@ -625,7 +769,9 @@ function drawDimLeaders(c: C2D, T: Xform, a: XY, b: XY, nx: number, ny: number,
   for (const [x0, y0, x1, y1] of [[ax, ay, qax, qay], [bx, by, qbx, qby]]) { c.moveTo(x0 + ex * gap, y0 + ey * gap); c.lineTo(x1 + ex * over, y1 + ey * over); }
   c.stroke();
   c.lineWidth = 1.2;
+  if (dashed) c.setLineDash([3, 3]);
   c.beginPath(); c.moveTo(qax, qay); c.lineTo(qbx, qby); c.stroke();
+  c.setLineDash([]);
   const [ux, uy] = norm2(qbx - qax, qby - qay);
   arrowHead(c, [qbx, qby], ux, uy); arrowHead(c, [qax, qay], -ux, -uy);
   c.restore();
@@ -635,7 +781,7 @@ function drawDimLeaders(c: C2D, T: Xform, a: XY, b: XY, nx: number, ny: number,
  * Diameter dimension, CAD style: a line across the circle through its centre with arrowheads on the
  * circle, a leader out past the edge and a short landing with the label, so the centre stays free to grab.
  */
-function drawDiameter(c: C2D, T: Xform, o: XY, r: number, d: Constraint, text: string, color: string, chipOpts: ChipOpts): void {
+function drawDiameter(c: C2D, T: Xform, o: XY, r: number, d: Constraint, text: string, color: string, chipOpts: ChipOpts, dashed = false): void {
   const a = d.ang ?? DIAM_DEFAULT_ANG, ux = Math.cos(a), uy = Math.sin(a);
   const [ox, oy] = S(T, o.x, o.y);
   const rs = r * T.s, sx = ux, sy = -uy; // screen direction (y down)
@@ -646,11 +792,16 @@ function drawDiameter(c: C2D, T: Xform, o: XY, r: number, d: Constraint, text: s
   const end = [q[0] + side * land, q[1]];
   c.save();
   c.strokeStyle = color; c.fillStyle = color; c.lineWidth = 1.2;
-  c.beginPath(); c.moveTo(p2[0], p2[1]); c.lineTo(q[0], q[1]); c.lineTo(end[0], end[1]); c.stroke();
-  arrowHead(c, p1, sx, sy); arrowHead(c, p2, -sx, -sy);
+  // a radius (a fillet's) runs from the centre out through the arc; a diameter right across
+  const from = d.rad ? [ox, oy] : p2;
+  if (dashed) c.setLineDash([3, 3]);
+  c.beginPath(); c.moveTo(from[0], from[1]); c.lineTo(q[0], q[1]); c.lineTo(end[0], end[1]); c.stroke();
+  c.setLineDash([]);
+  arrowHead(c, p1, sx, sy);
+  if (!d.rad) arrowHead(c, p2, -sx, -sy);
   c.restore();
   c.font = (chipOpts.font || '600 12px') + ' ' + FONT;
-  const w = c.measureText(text).width + 14;
+  const w = c.measureText(text).width + 14 + (chipOpts.mark ? MARK_W : 0);
   chip(c, text, end[0] + side * (w / 2 + 2), end[1], chipOpts);
 }
 
@@ -697,6 +848,21 @@ function drawPrintDims(c: C2D, T: Xform, sk: Sketch): void {
   }
 }
 
+/**
+ * A badge's symbol drawn as lines rather than a character: ∥ ⊥ ∘ ◎ aren't in every typeface — on a device the
+ * app's own (Inter) lacks them and Skia has nothing to fall back on, so they came out as the font's "missing glyph"
+ * box. Letters and = — are in every font and stay text. False for a symbol that isn't one of these.
+ */
+function drawSymbol(c: C2D, g: string, x: number, y: number, ink: string): boolean {
+  c.strokeStyle = ink; c.lineWidth = 1.6; c.lineCap = 'round';
+  c.beginPath();
+  if (g === '∥') { c.moveTo(x - 2.5, y - 5); c.lineTo(x - 2.5, y + 5); c.moveTo(x + 2.5, y - 5); c.lineTo(x + 2.5, y + 5); c.stroke(); return true; }
+  if (g === '⊥') { c.moveTo(x, y - 5); c.lineTo(x, y + 4.5); c.moveTo(x - 5, y + 4.5); c.lineTo(x + 5, y + 4.5); c.stroke(); return true; }
+  if (g === '∘') { c.arc(x, y, 3, 0, Math.PI * 2); c.stroke(); return true; }
+  if (g === '◎') { c.lineWidth = 1.3; c.arc(x, y, 4.5, 0, Math.PI * 2); c.stroke(); c.beginPath(); c.arc(x, y, 1.8, 0, Math.PI * 2); c.fill(); return true; }
+  return false;
+}
+
 const GLYPH: Partial<Record<Constraint['type'], string>> = { h: 'H', v: 'V', par: '∥', perp: '⊥', col: '—', tan: 'T', eq: '=', eqr: '=', mid: 'M', online: '∘', oncircle: '∘', conc: '◎' };
 
 function badgeSpots(T: Xform, sk: Sketch, c: Constraint): [number, number][] {
@@ -712,7 +878,7 @@ function badgeSpots(T: Xform, sk: Sketch, c: Constraint): [number, number][] {
     out.push([x1 + (x2 - x1) * frac + nx * off * side, y1 + (y2 - y1) * frac + ny * off * side]);
   };
   if (c.type === 'h' || c.type === 'v') {
-    const lid = linesBetween(sk, c.a!, c.b!)[0];
+    const lid = lineBetween(sk, c.a!, c.b!);
     if (lid) onLine(lid, 0.22, -1);
     else {
       const a = P(c.a!), b = P(c.b!);
@@ -755,7 +921,7 @@ function drawBadges(c: C2D, T: Xform, sk: Sketch): void {
   }
   for (const id in sk.cons) {
     const k = sk.cons[id];
-    if (isDim(k)) continue;
+    if (isDim(k) || k.elev) continue;
     const g = GLYPH[k.type];
     if (!g) continue;
     const related = selIds.has(id) || [k.l, k.l1, k.l2, k.c, k.c1, k.c2].some(x => x && selIds.has(x)) || [k.a, k.b, k.p].some(x => x && selPts.has(x));
@@ -767,8 +933,9 @@ function drawBadges(c: C2D, T: Xform, sk: Sketch): void {
       rr(c, x - 9, y - 9, 18, 18, 5);
       c.fillStyle = bad ? TH.red : selected ? TH.yellow : TH.badge; c.fill();
       c.lineWidth = 1; c.strokeStyle = bad ? TH.red : TH.badgeline; c.stroke();
-      c.fillStyle = bad ? '#fff' : selected ? '#181A1C' : TH.badgefg;
-      c.font = '700 11px ' + FONT; c.textAlign = 'center'; c.textBaseline = 'middle'; c.fillText(g, x, y + 0.5);
+      const ink = bad ? '#fff' : selected ? '#181A1C' : TH.badgefg;
+      c.fillStyle = ink;
+      if (!drawSymbol(c, g, x, y, ink)) { c.font = '700 11px ' + FONT; c.textAlign = 'center'; c.textBaseline = 'middle'; c.fillText(g, x, y + 0.5); }
       c.restore();
       addHit({ kind: 'cons', id, x: x - 10, y: y - 10, w: 20, h: 20 });
     }
@@ -792,74 +959,80 @@ export function cloudPath(c: C2D, x: number, y: number, w: number, h: number): v
 function drawNotes(c: C2D, T: Xform, sk: Sketch): void {
   if (!settings.layers.annot) return;
   const dim = ed.mode === 'draft' ? 0.75 : 1;
+  nextThumbFrame();
   for (const n of sk.notes) {
     const selected = isSel('note', n.id);
+    if (isLink(n)) { drawLink(c, T, n, { selected, alpha: dim, info: linkInfoOf(n.link) }); continue; }
     c.save();
     c.globalAlpha = dim; c.strokeStyle = n.color; c.fillStyle = n.color; c.lineCap = 'round'; c.lineJoin = 'round';
     if (selected) { c.shadowColor = TH.yellow; c.shadowBlur = 0; }
-    if ((n.type === 'pen' || n.type === 'arrow') && n.pts) {
-      c.lineWidth = 3; c.beginPath();
-      n.pts.forEach((p, i) => { const [x, y] = S(T, p[0], p[1]); i ? c.lineTo(x, y) : c.moveTo(x, y); });
-      if (selected) { c.save(); c.lineWidth = 9; c.strokeStyle = 'rgba(255,173,0,.45)'; c.stroke(); c.restore(); }
-      c.stroke();
-      if (n.type === 'arrow' && n.pts.length > 1) {
-        const p1 = n.pts[n.pts.length - 2], p2 = n.pts[n.pts.length - 1];
-        const [x1, y1] = S(T, p1[0], p1[1]), [x2, y2] = S(T, p2[0], p2[1]);
-        const a = Math.atan2(y2 - y1, x2 - x1);
-        c.beginPath(); c.moveTo(x2, y2);
-        c.lineTo(x2 - 13 * Math.cos(a - 0.45), y2 - 13 * Math.sin(a - 0.45));
-        c.lineTo(x2 - 13 * Math.cos(a + 0.45), y2 - 13 * Math.sin(a + 0.45));
-        c.closePath(); c.fill();
-      }
+    const look = noteLook(n);
+    const outline = shapeOutline(n);
+    if (outline) {
+      strokeOutline(c, outline.map(p => S(T, p[0], p[1])), look, selected ? 'rgba(255,173,0,.45)' : undefined);
+    } else if ((n.type === 'pen' || isSegment(n)) && n.pts) {
+      strokeMarkup(c, n.pts.map(p => S(T, p[0], p[1])), look, selected ? 'rgba(255,173,0,.45)' : undefined);
     } else if (n.type === 'text') {
-      const [x, y] = S(T, n.x!, n.y!);
-      c.font = '600 14px ' + FONT;
-      const w = c.measureText(n.text!).width + 16;
-      rr(c, x, y - 14, w, 28, 7);
+      // laid out at the one text size and scaled to the note's size on the drawing (its outline stays the same width)
+      const { x, w, mid, k } = noteTextBox(T, n, c), lw = selected ? 2.5 : 1.5;
+      c.translate(x, mid); c.scale(k, k);
+      rr(c, 0, -14, w / k, 28, 7);
       c.fillStyle = TH.bg; c.globalAlpha = 0.92 * dim; c.fill(); c.globalAlpha = dim;
-      c.lineWidth = selected ? 2.5 : 1.5; c.strokeStyle = selected ? TH.yellow : n.color; c.stroke();
-      c.fillStyle = n.color; c.textBaseline = 'middle'; c.fillText(n.text!, x + 8, y + 0.5);
+      c.lineWidth = lw / k; c.strokeStyle = selected ? TH.yellow : n.color;
+      c.setLineDash(dashFor(look.style, lw).map(v => v / k)); c.stroke(); c.setLineDash([]);
+      c.font = noteFont(NOTE_TEXT_SIZE);
+      c.fillStyle = n.color; c.textAlign = 'left'; c.textBaseline = 'middle'; c.fillText(n.text!, 8, 0.5 / k); // (left: not whatever was drawn last)
     } else if (n.type === 'cloud' && n.pts) {
       const [x1, y1] = S(T, n.pts[0][0], n.pts[0][1]), [x2, y2] = S(T, n.pts[1][0], n.pts[1][1]);
       cloudPath(c, Math.min(x1, x2), Math.min(y1, y2), Math.abs(x2 - x1), Math.abs(y2 - y1));
-      c.lineWidth = selected ? 4 : 2.5;
-      if (selected) c.strokeStyle = TH.yellow;
+      if (selected) { c.save(); c.lineWidth = look.width + 6; c.strokeStyle = 'rgba(255,173,0,.45)'; c.stroke(); c.restore(); }
+      c.lineWidth = look.width;
+      if (look.style === 'dot') c.lineCap = 'round';
+      c.setLineDash(dashFor(look.style, look.width));
       c.stroke();
+      c.setLineDash([]);
     }
     c.restore();
   }
 }
 
-/** Selected image: blue outline with corner (scale) and side (stretch) handles, or a lock badge when locked. */
+/** Selected images: blue outline with corner (scale) and side (stretch) handles — one image alone — or a lock badge when locked. */
 function drawUnderlaySelection(c: C2D, T: Xform): void {
-  const u = page().underlay;
-  if (!u || !settings.layers.underlay || ed.mode !== 'annotate' || !isSel('underlay', 'u')) return;
-  const hs = underlayHandles(T, u), nw = hs[0], se = hs[4];
-  c.save();
-  c.strokeStyle = TH.blue; c.lineWidth = 1.5;
-  if (u.locked) c.setLineDash([6, 4]);
-  c.strokeRect(nw.x, nw.y, se.x - nw.x, se.y - nw.y);
-  c.setLineDash([]);
-  if (u.locked) { drawLock(c, nw.x + 12, nw.y + 12); c.restore(); return; }
-  drawHandleSet(c, hs);
-  c.restore();
+  if (!settings.layers.underlay || ed.mode !== 'annotate') return;
+  const sel = page().underlays.filter(u => isSel('underlay', u.id));
+  for (const u of sel) {
+    const hs = underlayHandles(T, u), nw = hs[0];
+    c.save();
+    c.strokeStyle = TH.blue; c.lineWidth = 1.5;
+    if (u.locked) c.setLineDash([6, 4]);
+    // its outline, turned with it: through the corners
+    c.beginPath(); [hs[0], hs[2], hs[4], hs[6]].forEach((q, i) => (i ? c.lineTo(q.x, q.y) : c.moveTo(q.x, q.y))); c.closePath(); c.stroke();
+    c.setLineDash([]);
+    if (u.locked) drawLock(c, nw.x + 12, nw.y + 12);
+    else if (sel.length === 1) drawHandleSet(c, hs);
+    c.restore();
+  }
 }
 
-/** Resize handles: round white corners (and arrow ends), blue bars on the sides. */
-function drawHandleSet(c: C2D, hs: { part: string; x: number; y: number }[]): void {
+/** Resize handles: round white corners (and arrow ends), blue bars on the sides — along them, on a turned image (`ang`). */
+function drawHandleSet(c: C2D, hs: { part: string; x: number; y: number; ang?: number }[]): void {
   const r = ed.lastPointerTouch ? 8 : 6;
   for (const hd of hs) {
     const side = hd.part === 'n' || hd.part === 's' || hd.part === 'e' || hd.part === 'w';
+    c.save();
+    c.translate(hd.x, hd.y);
+    if (hd.ang) c.rotate(hd.ang);
     c.beginPath();
-    if (!side) c.arc(hd.x, hd.y, r, 0, Math.PI * 2);
-    else if (hd.part === 'e' || hd.part === 'w') rr(c, hd.x - 3.5, hd.y - 15, 7, 30, 3.5);
-    else rr(c, hd.x - 12, hd.y - 3, 24, 6, 3);
+    if (!side) c.arc(0, 0, r, 0, Math.PI * 2);
+    else if (hd.part === 'e' || hd.part === 'w') rr(c, -3.5, -15, 7, 30, 3.5);
+    else rr(c, -12, -3, 24, 6, 3);
     c.fillStyle = side ? TH.blue : '#fff'; c.fill();
     c.lineWidth = 1.5; c.strokeStyle = TH.blue; c.stroke();
+    c.restore();
   }
 }
 
-/** A single selected arrow, cloud or pen stroke: its adjustment handles (and a box around clouds and strokes). */
+/** A single selected piece of markup: its adjustment handles (and a box around all but the straight ones and notes). */
 function drawNoteSelection(c: C2D, T: Xform): void {
   if (ed.mode !== 'annotate' || !settings.layers.annot) return;
   const notes = ed.sel.filter(s => s.type === 'note');
@@ -869,7 +1042,8 @@ function drawNoteSelection(c: C2D, T: Xform): void {
   const hs = noteHandles(T, n);
   if (!hs.length) return;
   c.save();
-  if (n.type !== 'arrow') {
+  // (a note has its own outline, and a link its card)
+  if (!isSegment(n) && n.type !== 'text' && n.type !== 'link') {
     const nw = hs[0], se = hs[4];
     c.strokeStyle = TH.blue; c.lineWidth = 1.2; c.setLineDash([5, 4]);
     c.strokeRect(nw.x, nw.y, se.x - nw.x, se.y - nw.y);
@@ -899,6 +1073,10 @@ function drawSnap(c: C2D, T: Xform): void {
     else if (s.kind === 'inter') { c.moveTo(x - 6, y - 6); c.lineTo(x + 6, y + 6); c.moveTo(x + 6, y - 6); c.lineTo(x - 6, y + 6); }
     else c.rect(x - 5, y - 5, 10, 10);
     c.stroke();
+  } else if (s.kind === 'grid') {
+    // on the grid: the grid point it's on, marked (it moves in steps from one to the next)
+    c.beginPath(); c.arc(x, y, 3.5, 0, Math.PI * 2); c.fill();
+    c.lineWidth = 1.2; c.beginPath(); c.arc(x, y, 7, 0, Math.PI * 2); c.stroke();
   }
   const lbl = s.label || (s.guides && s.guides.length ? s.guides.map(g => g.label).join(' · ') : '');
   if (lbl) {
@@ -913,8 +1091,9 @@ function drawSnap(c: C2D, T: Xform): void {
 
 /** Paint the browser canvas, keeping the frame's tap targets for hit testing. */
 export function draw(): void {
-  const { W, H, dpr, ctx } = cvs;
-  if (!W) return;
+  const { cv, W, H, dpr, ctx } = cvs;
+  // (no browser canvas — a unit test — nothing to paint)
+  if (!W || !cv) return;
   ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
   ed.hitChips = drawPlan(ctx, W, H);
 }
@@ -926,25 +1105,106 @@ export function draw(): void {
 export function drawPlan(ctx: C2D, W: number, H: number): HitChip[] {
   const out: HitChip[] = [];
   hits = out;
-  try { paintPlan(ctx, W, H); } finally { hits = null; }
+  try { paintPlan(ctx, W, H); paintOverlay(ctx, W, H); } finally { hits = null; }
   return out;
 }
 
-function paintPlan(ctx: C2D, W: number, H: number): void {
-  ctx.fillStyle = TH.bg; ctx.fillRect(0, 0, W, H);
-  const sk = SK(), T = mainT();
-  drawGrid(ctx, T); drawUnderlay(ctx, T);
+/**
+ * How a host that keeps the drawing as a picture (see PlanCanvas.native) wants it drawn. It moves and scales the
+ * picture with the view until it's redrawn, so: `margin` px of background and grid past each edge of the screen (so
+ * a picture zoomed out or panned a little shows no edge), and what stays put on the screen however the view moves —
+ * the wall view's key plan, the conflict border — drawn on `fixed` instead. Without them, everything is drawn on the
+ * one canvas, to the screen's edges (the browser).
+ */
+/**
+ * `layer`: just the background, grid and photos and plans ('under'), or everything over them ('above') — a host that
+ * keeps them apart redraws the photos alone as one is turned or moved. Without it, all of it.
+ */
+export interface KeepOpts { margin?: number; fixed?: C2D; layer?: 'under' | 'above' }
+
+/**
+ * The drawing without its moving parts (see drawPlanOverlay), for a host that keeps it as a picture and redraws only
+ * those parts as the pointer moves. Returns the tap targets, as drawPlan does.
+ */
+export function drawPlanStatic(ctx: C2D, W: number, H: number, opts: KeepOpts = {}): HitChip[] {
+  const out: HitChip[] = [];
+  hits = out;
+  try { paintPlan(ctx, W, H, opts); } finally { hits = null; }
+  return out;
+}
+
+/** The photos and plans under the drawing, with the background and grid (see KeepOpts.layer). */
+export function drawPlanUnder(ctx: C2D, W: number, H: number, opts: KeepOpts = {}): void {
+  paintPlan(ctx, W, H, { ...opts, layer: 'under' });
+}
+
+/** The parts that move with the pointer: a tool's preview, the snap marker, the selection box, the conflict tint. */
+export function drawPlanOverlay(ctx: C2D, W: number, H: number, opts: KeepOpts = {}): void {
+  paintOverlay(ctx, W, H, opts.fixed ?? ctx);
+}
+
+function paintPlan(ctx: C2D, W: number, H: number, opts: KeepOpts = {}): void {
+  const m = opts.margin ?? 0, wall = elevOpen() && !!elev.frame;
+  if (opts.layer !== 'above') { ctx.fillStyle = TH.bg; ctx.fillRect(-m, -m, W + 2 * m, H + 2 * m); }
+  // the photos and plans under the drawing (the wall view has none: its grid is on the wall, drawn with it)
+  if (opts.layer === 'under') { if (!wall) { const T = mainT(); drawGrid(ctx, T, m); drawUnderlay(ctx, T); } return; }
+  const sk = SK();
+  // (the sketch can't change while a frame is drawn: index its lines once for the frame)
+  withLineIndex(sk, () => {
+    if (wall) paintWall(ctx, W, opts.fixed ?? ctx);
+    else paintPlanView(ctx, sk, m, opts.layer !== 'above');
+  });
+}
+
+function paintPlanView(ctx: C2D, sk: Sketch, m: number, under = true): void {
+  const T = mainT();
+  if (under) { drawGrid(ctx, T, m); drawUnderlay(ctx, T); }
   if (settings.layers.rooms) drawRooms(ctx, T, sk);
+  if (settings.layers.cabinets) drawCabinetFootprints(ctx, T, sk);
   drawWalls(ctx, T, sk); drawOpenings(ctx, T, sk); drawLines(ctx, T, sk); drawCurves(ctx, T, sk);
   drawPrintDims(ctx, T, sk);
   if (ed.mode === 'draft') drawBadges(ctx, T, sk);
-  drawPoints(ctx, T, sk);
+  // (the drawing's points only in Draft: Annotate can't move them, and shouldn't look as if it could — the user's
+  // call, 2026-10-21)
+  if (ed.mode === 'draft') drawPoints(ctx, T, sk);
   drawOpeningAnchors(ctx, T, sk);
   drawDims(ctx, T, sk);
   drawOpeningDims(ctx, T, sk);
   drawNotes(ctx, T, sk);
-  drawUnderlaySelection(ctx, T);
   drawNoteSelection(ctx, T);
+}
+
+/**
+ * The wall view: the open wall face, drawn as the plan is (its grid on the wall only, lines, curves, constraints, dimensions, points), over
+ * the wall itself (render/elevation.ts) and under the dimensions its doors, windows and cabinets get, plus a key plan.
+ */
+function paintWall(ctx: C2D, W: number, fixed: C2D): void {
+  const sk = SK() as WallFace, plan = planSK(), f = elev.frame!, T = mainT();
+  // the grid only on the wall itself: outside it is plain, so it's plain that nothing goes there
+  const [gx0, gy0] = S(T, f.face[0], f.H), [gx1, gy1] = S(T, f.face[1], 0);
+  ctx.save();
+  ctx.beginPath(); ctx.rect(gx0, gy0, gx1 - gx0, gy1 - gy0); ctx.clip();
+  drawGrid(ctx, T);
+  ctx.restore();
+  drawWallBackdrop(ctx, T, plan, f, sk);
+  drawLines(ctx, T, sk); drawCurves(ctx, T, sk);
+  // (over the edges — its own and its neighbours' — so a selected cabinet's outline shows all the way round)
+  drawWallSelection(ctx, T, plan, f, sk);
+  drawPrintDims(ctx, T, sk);
+  drawBadges(ctx, T, sk);
+  if (ed.mode === 'draft') drawPoints(ctx, T, sk);
+  drawDims(ctx, T, sk);
+  const on = (a: ElevAct) => isSel('elev', JSON.stringify(a)) || (a.k === 'fdim' && isSel('dim', a.id));
+  for (const h of drawWallChips(ctx, T, plan, f, sk, on)) addHit({ kind: 'elev', id: JSON.stringify(h.act), part: h.look, x: h.x, y: h.y, w: h.w, h: h.h });
+  // (where you stand: it stays put on the screen as the wall is panned and zoomed)
+  const k = keyPlanSize(W);
+  drawKeyPlan(fixed, W - k - 14, 70, k, plan, f);
+}
+
+function paintOverlay(ctx: C2D, W: number, H: number, fixed: C2D = ctx): void {
+  const T = mainT();
+  // a selected image's outline and handles: with the moving parts, as it's turned, moved or sized (over the drawing)
+  drawUnderlaySelection(ctx, T);
   if (ed.preview) ed.preview(ctx, T);
   drawSnap(ctx, T);
   if (ed.boxSel) {
@@ -958,11 +1218,12 @@ function paintPlan(ctx: C2D, W: number, H: number): void {
     ctx.strokeRect(Math.min(x0, x1) + 0.5, Math.min(y0, y1) + 0.5, Math.abs(x1 - x0), Math.abs(y1 - y0));
     ctx.restore();
   }
+  // (the screen's edge, however the view moves)
   if (ed.conflictTint) {
-    ctx.save();
-    ctx.fillStyle = 'rgba(218,17,0,.07)'; ctx.fillRect(0, 0, W, H);
-    ctx.strokeStyle = 'rgba(218,17,0,.7)'; ctx.lineWidth = 6; ctx.strokeRect(3, 3, W - 6, H - 6);
-    ctx.restore();
+    fixed.save();
+    fixed.fillStyle = 'rgba(218,17,0,.07)'; fixed.fillRect(0, 0, W, H);
+    fixed.strokeStyle = 'rgba(218,17,0,.7)'; fixed.lineWidth = 6; fixed.strokeRect(3, 3, W - 6, H - 6);
+    fixed.restore();
   }
 }
 
@@ -991,6 +1252,7 @@ export function paintThumb(c: C2D, w: number, h: number, pg: Page): void {
   const save = { ana: ed.ana, sel: ed.sel, hover: ed.hover, W: cvs.W, H: cvs.H };
   ed.ana = { dof: 0, det: new Set(), detR: new Set(), bad: new Set(), ok: true };
   ed.sel = []; ed.hover = null; cvs.W = w; cvs.H = h;
-  try { drawRooms(c, T, sk, true); drawWalls(c, T, sk, true); drawLines(c, T, sk, true); drawCurves(c, T, sk, true); }
+  // (the page's lines indexed by their ends while it's drawn, as a frame is: each room's edges looked up, not searched for)
+  try { withLineIndex(sk, () => { drawRooms(c, T, sk, true); drawWalls(c, T, sk, true); drawLines(c, T, sk, true); drawCurves(c, T, sk, true); }); }
   finally { cvs.W = save.W; cvs.H = save.H; ed.ana = save.ana; ed.sel = save.sel; ed.hover = save.hover; }
 }