@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/dist/render/draw.js

@@ -1,33 +1,63 @@
 import { ed, isSel } 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 { 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 } from './elevation';
 import { fmtAng, fmtArea, fmtLen } from '../units';
 import { FONT, TH } from './theme';
-import { cvs, imgCache, mainT, noteHandles, S, sketchBounds, underlayH, underlayHandles } from './view';
+import { cvs, imgCache, keyPlanSize, mainT, nextThumbFrame, noteFont, noteHandles, noteTextBox, S, sketchBounds, underlayH, underlayHandles, underlayMid } from './view';
+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';
 /** Tap targets registered while drawPlan() paints (null outside it: thumbnails and the elevation register none). */
 let hits = null;
 const addHit = (h) => { 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, x, y, w, h, r) {
+    // (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);
+}
+/** Blue for outlined (linked) chips: the lighter blue on a dark canvas, so the text stays readable. */
+export function linkBlue() {
+    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, x, y, color) {
+    c.save();
+    c.translate(x, y);
+    c.rotate(-Math.PI / 4);
+    c.strokeStyle = color;
+    c.lineWidth = 1.4;
     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();
+    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, text, cx, cy, { bg, fg, border, font = '600 12px', pad = 7, h = 22, minW = 0, kind, id, rot = 0 }) {
+export function chip(c, text, cx, cy, { bg, fg, border, font = '600 12px', pad = 7, h = 22, minW = 0, kind, id, rot = 0, mark }) {
     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) {
@@ -46,7 +76,9 @@ export function chip(c, text, cx, cy, { bg, fg, border, font = '600 12px', pad =
     c.fillStyle = fg;
     c.textAlign = 'center';
     c.textBaseline = 'middle';
-    c.fillText(text, cx, cy + 0.5);
+    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;
@@ -54,44 +86,51 @@ export function chip(c, text, cx, cy, { bg, fg, border, font = '600 12px', pad =
     }
     return w;
 }
-function drawGrid(c, T) {
+/** The grid over the screen, and `m` px past each edge (see KeepOpts). */
+function drawGrid(c, T, m = 0) {
     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, color, w) => {
-        if ((x1 - x0) / step > 600)
+        // (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);
+            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(0, sy);
-            c.lineTo(W, sy);
+            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, T) {
-    const u = page().underlay;
-    if (!u || !settings.layers.underlay)
+    if (!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();
+    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, constr) => (constr ? TH.constr : defined ? TH.def : TH.ink);
 function drawRooms(c, T, sk, thumb) {
@@ -122,33 +161,6 @@ function drawRooms(c, T, sk, thumb) {
         addHit({ kind: 'room', id, x: cx - w / 2, y: cy - 20, w, h: 40 });
     }
 }
-function wallDegree(sk) {
-    const deg = {};
-    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, T, sk, l, deg, extra) {
-    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);
-}
 function curveWalls(sk) {
     const out = [];
     const show = (constr) => !(constr && !settings.layers.construction);
@@ -175,57 +187,209 @@ function curveWallPath(c, T, sk, cw) {
         c.arc(x, y, Math.max(0.5, g.r * T.s), -g.t0, -g.t1, true);
     }
 }
+/**
+ * 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, T, sk) {
+    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, T, pts, fresh = true) {
+    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, T, sk, thumb) {
-    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)
+    const shown = (w) => !(w.constr && !settings.layers.construction);
+    const pieces = wallPieces(sk, shown), curves = curveWalls(sk);
+    if (!pieces.length && !curves.length)
         return;
-    c.lineCap = 'butt';
     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);
+    const ink = (id) => { 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();
     }
-    // curved walls: same outline-then-fill treatment
-    const curves = curveWalls(sk);
     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)) {
+    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, T, sk) {
+    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();
-            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();
+            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, T, sk, id, side, lit) {
+    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, T, sk) {
-    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) => 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;
@@ -244,10 +408,10 @@ function drawOpenings(c, T, sk) {
         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;
@@ -317,6 +481,8 @@ function drawLines(c, T, sk, thumb) {
             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);
@@ -380,13 +546,20 @@ function drawCurves(c, T, sk, thumb) {
         c.setLineDash([]);
     }
 }
-function inkForPoint(sk, id) {
+/** 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) => frameMemo(sk, 'looseEnds', () => {
+    const out = new Set();
     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;
+        if (!lineDefined(ed.ana, l)) {
+            out.add(l.a);
+            out.add(l.b);
+        }
     }
-    return TH.def;
+    return out;
+});
+function inkForPoint(sk, id) {
+    return looseEnds(sk).has(id) ? TH.ink : TH.def;
 }
 function drawLock(c, x, y) {
     c.save();
@@ -409,6 +582,8 @@ function drawLock(c, x, y) {
 function drawPoints(c, T, sk) {
     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.cabs ?? {}).flatMap(cabPoints));
     for (const id in sk.points) {
         const p = sk.points[id];
         const [x, y] = S(T, p.x, p.y);
@@ -425,7 +600,11 @@ function drawPoints(c, T, sk) {
             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);
@@ -447,28 +626,32 @@ function drawPoints(c, T, sk) {
             c.strokeStyle = TH.ink;
             c.stroke();
         }
-        if (p.fixed && !p.origin)
+        if (p.fixed && !p.origin && !p.anchor)
             drawLock(c, x + 9, y - 14);
     }
 }
 function dimAnchor(sk, c) {
     const P = (id) => 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];
@@ -483,26 +666,46 @@ function dimAnchor(sk, c) {
     }
     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, id, d) {
+    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) => !!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, T, sk) {
     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 = selected ? [TH.yellow, 2.5] : null;
+        if (linked) {
+            bg = TH.bg;
+            fg = gone ? TH.red : d.type === 'angle' ? TH.purple : linkBlue();
+        }
+        const border = selected ? [TH.yellow, 2.5] : linked ? [fg, 1.5] : null;
+        const mark = linked ? 'link' : undefined;
         const wrap = (s) => (ref ? '(' : '') + s + (ref ? ')' : '');
         if (d.type === 'angle' && 'vtx' in A) {
             const [vx, vy] = S(T, A.vtx.x, A.vtx.y);
@@ -517,16 +720,19 @@ function drawDims(c, T, sk) {
                 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))
@@ -534,12 +740,14 @@ function drawDims(c, T, sk) {
         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]);
+            if (ref)
+                c.setLineDash([3, 3]);
             c.strokeStyle = bad ? TH.red : ref ? TH.chipline : TH.blue;
             c.lineWidth = 1.2;
             c.beginPath();
@@ -548,7 +756,7 @@ function drawDims(c, T, sk) {
             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 });
     }
 }
 /**
@@ -639,6 +847,9 @@ function drawOpeningDims(c, T, sk) {
             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);
@@ -673,22 +884,23 @@ function drawOpeningDims(c, T, sk) {
             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);
+                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);
+                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);
     }
 }
 /**
@@ -700,7 +912,8 @@ function drawOpeningAnchors(c, T, sk) {
         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) => 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);
@@ -711,7 +924,7 @@ function drawOpeningAnchors(c, T, sk) {
             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();
@@ -840,7 +1053,7 @@ export function drawPendingDim(c, T, p) {
  * 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, T, a, b, nx, ny, off, color) {
+function drawDimLeaders(c, T, a, b, nx, ny, off, color, dashed = false) {
     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
@@ -856,10 +1069,13 @@ function drawDimLeaders(c, T, a, b, nx, ny, off, color) {
     }
     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);
@@ -869,7 +1085,7 @@ function drawDimLeaders(c, T, a, b, nx, ny, off, color) {
  * 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, T, o, r, d, text, color, chipOpts) {
+function drawDiameter(c, T, o, r, d, text, color, chipOpts, dashed = false) {
     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)
@@ -882,16 +1098,22 @@ function drawDiameter(c, T, o, r, d, text, color, chipOpts) {
     c.strokeStyle = color;
     c.fillStyle = color;
     c.lineWidth = 1.2;
+    // 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(p2[0], p2[1]);
+    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);
-    arrowHead(c, p2, -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);
 }
 /** Architectural dimension strings on the Print dimensions layer (reference-only). */
@@ -954,6 +1176,48 @@ function drawPrintDims(c, T, sk) {
         addHit({ kind: 'pdim', id, x: mx - w / 2 - 4, y: my - 18, w: w + 8, h: 24 });
     }
 }
+/**
+ * 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, g, x, y, ink) {
+    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 = { h: 'H', v: 'V', par: '∥', perp: '⊥', col: '—', tan: 'T', eq: '=', eqr: '=', mid: 'M', online: '∘', oncircle: '∘', conc: '◎' };
 function badgeSpots(T, sk, c) {
     const P = (id) => sk.points[id];
@@ -969,7 +1233,7 @@ function badgeSpots(T, sk, c) {
         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 {
@@ -1025,7 +1289,7 @@ function drawBadges(c, T, sk) {
     }
     for (const id in sk.cons) {
         const k = sk.cons[id];
-        if (isDim(k))
+        if (isDim(k) || k.elev)
             continue;
         const g = GLYPH[k.type];
         if (!g)
@@ -1044,11 +1308,14 @@ function drawBadges(c, T, sk) {
             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 });
         }
@@ -1074,8 +1341,13 @@ function drawNotes(c, T, sk) {
     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;
@@ -1086,98 +1358,105 @@ function drawNotes(c, T, sk) {
             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.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, x + 8, y + 0.5);
+            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, T) {
-    const u = page().underlay;
-    if (!u || !settings.layers.underlay || ed.mode !== 'annotate' || !isSel('underlay', 'u'))
+    if (!settings.layers.underlay || ed.mode !== 'annotate')
         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);
+    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();
-        return;
     }
-    drawHandleSet(c, hs);
-    c.restore();
 }
-/** Resize handles: round white corners (and arrow ends), blue bars on the sides. */
+/** Resize handles: round white corners (and arrow ends), blue bars on the sides — along them, on a turned image (`ang`). */
 function drawHandleSet(c, hs) {
     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);
+            c.arc(0, 0, 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);
+            rr(c, -3.5, -15, 7, 30, 3.5);
         else
-            rr(c, hd.x - 12, hd.y - 3, 24, 6, 3);
+            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, T) {
     if (ed.mode !== 'annotate' || !settings.layers.annot)
         return;
@@ -1191,7 +1470,8 @@ function drawNoteSelection(c, T) {
     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;
@@ -1243,6 +1523,16 @@ function drawSnap(c, T) {
             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) {
         c.font = '600 11px ' + FONT;
@@ -1259,8 +1549,9 @@ function drawSnap(c, T) {
 }
 /** Paint the browser canvas, keeping the frame's tap targets for hit testing. */
 export function draw() {
-    const { W, H, dpr, ctx } = cvs;
-    if (!W)
+    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);
@@ -1274,20 +1565,70 @@ export function drawPlan(ctx, W, H) {
     hits = out;
     try {
         paintPlan(ctx, W, H);
+        paintOverlay(ctx, W, H);
     }
     finally {
         hits = null;
     }
     return out;
 }
-function paintPlan(ctx, W, H) {
-    ctx.fillStyle = TH.bg;
-    ctx.fillRect(0, 0, W, H);
-    const sk = SK(), T = mainT();
-    drawGrid(ctx, T);
-    drawUnderlay(ctx, T);
+/**
+ * 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, W, H, opts = {}) {
+    const out = [];
+    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, W, H, opts = {}) {
+    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, W, H, opts = {}) {
+    paintOverlay(ctx, W, H, opts.fixed ?? ctx);
+}
+function paintPlan(ctx, W, H, opts = {}) {
+    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, sk, m, under = true) {
+    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);
@@ -1295,13 +1636,51 @@ function paintPlan(ctx, W, H) {
     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, W, fixed) {
+    const sk = SK(), 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) => 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, W, H, fixed = ctx) {
+    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);
@@ -1318,14 +1697,15 @@ function paintPlan(ctx, W, H) {
         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();
     }
 }
 /** Page thumbnail for the drawer (no chips, no definition colors). */
@@ -1360,11 +1740,9 @@ export function paintThumb(c, w, h, pg) {
     ed.hover = null;
     cvs.W = w;
     cvs.H = h;
+    // (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 {
-        drawRooms(c, T, sk, true);
-        drawWalls(c, T, sk, true);
-        drawLines(c, T, sk, true);
-        drawCurves(c, T, sk, true);
+        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;