@reekon-tools/boldr-cad 0.1.0 → 1.1.0

package/dist/render/elevation.js

@@ -1,51 +1,24 @@
-import { ed } from '../app/state';
-import { elevLines, elevLineUZ, elevOpenings, toU } from '../model/elevation';
-import { edgeS, openingSpan, pickBetween, refS, sameRef } from '../model/openings';
+import { ed, isSel } from '../app/state';
+import { measure } from '../model/constraints';
+import { elevOpenings, toU } from '../model/elevation';
+import { cabPoints, cornerAnchor, emptyFace, openingAnchor } from '../model/faces';
+import { edgeS, openingSpan, pickBetween, refS, sameRef, widthEntered } from '../model/openings';
 import { fmtLen } from '../units';
-import { chip } from './draw';
+import { chip, linkBlue, linkMark } from './draw';
 import { FONT, TH } from './theme';
 import { S } from './view';
-export const elevT = (v, W, H) => ({ s: v.s, ox: W / 2 - v.cu * v.s, oy: H / 2 + v.cz * v.s });
-/** Screen room taken by dimensions around the wall, pixels: below the floor, right of the face. */
-const DIM_BELOW = 92, DIM_RIGHT = 70, PAD = 36;
-/**
- * Fit the wall to a W × H view, leaving pixel margins for the dimensions and for anything overlaid
- * (`keep`: space taken at the top or the right, e.g. the key plan).
- */
-export function elevFit(f, W, H, keep = {}) {
-    const u0 = Math.min(f.face[0], ...f.strips.map(s => s[0])), u1 = Math.max(f.face[1], ...f.strips.map(s => s[1]));
-    const w = u1 - u0, h = f.H, top = keep.top || 0, right = Math.max(DIM_RIGHT, keep.right || 0), left = keep.left || 0, below = DIM_BELOW + (keep.bottom || 0);
-    const s = Math.max(0.05, Math.min((W - 2 * PAD - right - left) / (w || 1), (H - 2 * PAD - below - top) / (h || 1)));
-    // centre the drawing in the space left after the margins
-    return { s, cu: (u0 + u1) / 2 + (right - left) / 2 / s, cz: h / 2 - (below - top) / 2 / s };
-}
 const LOOK = (look) => look === 'drive' ? { bg: TH.blue, fg: '#fff', line: TH.blue } : look === 'bad' ? { bg: TH.red, fg: '#fff', line: TH.red }
     : look === 'linked' ? { bg: TH.bg, fg: linkBlue(), line: linkBlue() }
         : look === 'ref' ? { bg: TH.ref, fg: TH.reftext, line: TH.chipline } : { bg: TH.chip, fg: TH.ink, line: TH.ink2 };
-/** Blue for outlined (linked) chips: the lighter blue on a dark canvas, so the text stays readable. */
-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). */
-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.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();
-}
 /**
  * Linear dimension between screen points p and q, its line offset by (nx, ny) pixels: ticks, extension lines and
  * the value chip. Returns the chip's box (for taps). `force` draws the chip even for a zero-length dimension.
  */
-function dim(c, p, q, nx, ny, label, look = 'free', force = false, selected = false) {
+/**
+ * A dimension: extension lines, the dimension line with 45° ticks, the chip. `dashed`: a number that holds nothing (only
+ * measured, or a reference) — its dimension line dashed and its value in parentheses, as in the plan.
+ */
+function dim(c, p, q, nx, ny, label, look = 'free', force = false, selected = false, dashed = false) {
     const len = Math.hypot(q[0] - p[0], q[1] - p[1]);
     if (len < 2 && !force)
         return null;
@@ -59,8 +32,20 @@ function dim(c, p, q, nx, ny, label, look = 'free', force = false, selected = fa
         c.lineTo(e[0] + (nx / L) * 5, e[1] + (ny / L) * 5);
     }
     if (len >= 2) {
-        c.moveTo(a[0], a[1]);
-        c.lineTo(b[0], b[1]);
+        if (dashed) {
+            c.stroke();
+            c.beginPath();
+            c.setLineDash([3, 3]);
+            c.moveTo(a[0], a[1]);
+            c.lineTo(b[0], b[1]);
+            c.stroke();
+            c.beginPath();
+            c.setLineDash([]);
+        }
+        else {
+            c.moveTo(a[0], a[1]);
+            c.lineTo(b[0], b[1]);
+        }
         // 45° architectural ticks
         const ux = (b[0] - a[0]) / len, uy = (b[1] - a[1]) / len;
         const tx = (ux + nx / L) * 4, ty = (uy + ny / L) * 4;
@@ -72,7 +57,8 @@ function dim(c, p, q, nx, ny, label, look = 'free', force = false, selected = fa
     c.stroke();
     c.restore();
     const cx = (a[0] + b[0]) / 2 + (len < 2 ? (nx / L) * 4 : 0), cy = (a[1] + b[1]) / 2 - (len < 2 ? 12 : 0), h = 20;
-    const linked = look === 'linked', text = look === 'ref' ? '(' + label + ')' : linked ? '\u2007\u2007' + label : label; // (figure spaces: room for the link mark)
+    // a number that holds nothing (dashed) reads in parentheses, as in the plan
+    const linked = look === 'linked', text = dashed ? '(' + label + ')' : linked ? '  ' + label : label; // (figure spaces: room for the link mark)
     const w = chip(c, text, cx, cy, { bg: st.bg, fg: st.fg, font: '600 11.5px', h, pad: 6, border: selected ? [TH.yellow, 2] : linked ? [st.line, 1.5] : null });
     if (linked)
         linkMark(c, cx - w / 2 + 11, cy, st.fg);
@@ -131,50 +117,96 @@ function drawOpening(c, T, o) {
         c.fillText(o.type === 'door' ? 'Door' : 'Window', (x0 + x1) / 2, o.type === 'door' ? yTop + h * 0.3 : (yTop + yBot) / 2);
     c.restore();
 }
-/** Draw the elevation of frame `f` into a W × H (CSS pixel) canvas context. */
-/** `selected`: the selected dimension's action (JSON), drawn with the yellow selection border. */
-export function drawElevation(c, W, H, v, sk, f, selected = null) {
-    const T = elevT(v, W, H);
+/** A cabinet's tint and panel lines: neutral grey (no yellow — that's the selection's), against a window's blue glass. */
+const WOOD = 'rgba(128,128,128,.14)', WOOD_LINE = 'rgba(128,128,128,.9)';
+/**
+ * A cabinet, as cabinetry is drawn in elevation: a wood-tinted box, a drawer across its top with a pull, and a door
+ * below it with a handle — so it reads as a cabinet at a glance, not a window. Its name and size sit on the door.
+ */
+function drawCabinet(c, T, x, y, w, h, name) {
+    const pad = Math.min(1.5 * T.s, w / 10, h / 10), drawer = Math.min(6 * T.s, h * 0.24);
+    c.save();
     c.fillStyle = TH.bg;
-    c.fillRect(0, 0, W, H);
+    c.fillRect(x, y, w, h);
+    c.fillStyle = WOOD;
+    c.fillRect(x, y, w, h);
+    c.strokeStyle = TH.ink;
+    c.lineWidth = 1.5;
+    c.strokeRect(x, y, w, h);
+    // the drawer front and the door, inset in the box
+    const ix = x + pad, iw = w - 2 * pad, dy = y + pad, dh = drawer - pad, oy = y + drawer + pad * 0.5, oh = h - drawer - pad * 1.5;
+    c.strokeStyle = WOOD_LINE;
+    c.lineWidth = 1;
+    if (dh > 3)
+        c.strokeRect(ix, dy, iw, dh);
+    if (oh > 6)
+        c.strokeRect(ix, oy, iw, oh);
+    // a pull on the drawer, a handle at the top of the door on its right
+    c.strokeStyle = TH.ink;
+    c.lineWidth = 2;
+    c.lineCap = 'round';
+    c.beginPath();
+    if (dh > 6 && iw > 16) {
+        const pw = Math.min(iw * 0.3, 4 * T.s);
+        c.moveTo(ix + iw / 2 - pw / 2, dy + dh / 2);
+        c.lineTo(ix + iw / 2 + pw / 2, dy + dh / 2);
+    }
+    if (oh > 24 && iw > 16) {
+        const hx = ix + iw - Math.max(5, pad * 2), hl = Math.min(oh * 0.18, 4 * T.s);
+        c.moveTo(hx, oy + Math.max(6, pad * 1.5));
+        c.lineTo(hx, oy + Math.max(6, pad * 1.5) + hl);
+    }
+    c.stroke();
+    // its name, on the door (its sizes are in the bar when it's picked: on the drawing they'd be noise)
+    c.fillStyle = TH.ink2;
+    c.textAlign = 'center';
+    c.textBaseline = 'middle';
+    const cx = x + w / 2, cy = oy + oh / 2;
+    if (w > 44 && oh > 22) {
+        c.font = '600 11px ' + FONT;
+        c.fillText(name, cx, cy);
+    }
+    c.restore();
+}
+/** A cabinet's extent on the face. */
+export function cabBox(face, id) {
+    const cb = face.cabs?.[id], ps = cb ? cabPoints(cb).map(p => face.points[p]) : [];
+    if (!cb || ps.some(p => !p))
+        return null;
+    return { u0: Math.min(...ps.map(p => p.x)), u1: Math.max(...ps.map(p => p.x)), z0: Math.min(...ps.map(p => p.y)), z1: Math.max(...ps.map(p => p.y)) };
+}
+/** A cabinet's left and right bottom corners as seen. */
+const cabSides = (face, id) => {
+    const cb = face.cabs[id];
+    return face.points[cb.bl].x <= face.points[cb.br].x ? [cb.bl, cb.br] : [cb.br, cb.bl];
+};
+/**
+ * Under what's drawn on the face: the walls cut at its corners, the face, its doors and windows, its cabinets (a door
+ * panel and their name and size; their edges are the face's lines, drawn over this), the face's outline and the floor.
+ * (The selected door, window or cabinet's outline: drawWallSelection, over all of it.)
+ */
+export function drawWallBackdrop(c, T, sk, f, face) {
     const [fx0, fyTop] = S(T, f.face[0], f.H), [fx1, fyBot] = S(T, f.face[1], 0);
-    // walls cut at the corners, then the face
     for (const [a, b] of f.strips) {
         const [x0] = S(T, a, 0), [x1] = S(T, b, 0);
         hatch(c, x0, fyTop, x1 - x0, fyBot - fyTop);
     }
     c.fillStyle = TH.room;
     c.fillRect(fx0, fyTop, fx1 - fx0, fyBot - fyTop);
-    const ops = elevOpenings(sk, f);
-    const hits = [];
-    // the face's end edges, as tap targets for the corners (first, so openings and chips on top win)
-    for (const [u, end] of [[f.face[0], f.leftEnd], [f.face[1], f.leftEnd === 'a' ? 'b' : 'a']]) {
-        const [x, yTop] = S(T, u, f.H), [, yBot] = S(T, u, 0);
-        hits.push({ x: x - 10, y: yTop, w: 20, h: yBot - yTop, act: { k: 'corner', end } });
-    }
-    for (const o of ops) {
+    for (const o of elevOpenings(sk, f))
         drawOpening(c, T, o);
-        const [x0, y0] = S(T, o.u0, o.head), [x1, y1] = S(T, o.u1, o.sill);
-        hits.push({ x: x0, y: y0, w: x1 - x0, h: y1 - y0, act: { k: 'body', op: o.id } }); // first, so chips on top win taps
+    for (const [id, cb] of Object.entries(face.cabs ?? {})) {
+        const b = cabBox(face, id);
+        if (!b)
+            continue;
+        const [x0, y0] = S(T, b.u0, b.z1), [x1, y1] = S(T, b.u1, b.z0);
+        drawCabinet(c, T, x0, y0, x1 - x0, y1 - y0, cb.label || 'Cabinet');
     }
-    // lines drawn on this face: solid, or dashed guides
     c.save();
-    c.lineCap = 'round';
-    for (const ln of elevLines(sk, f)) {
-        const [a, b] = elevLineUZ(f, ln), p = S(T, a[0], a[1]), q = S(T, b[0], b[1]);
-        c.strokeStyle = ln.guide ? TH.constr : TH.ink;
-        c.lineWidth = ln.guide ? 1.5 : 2;
-        c.setLineDash(ln.guide ? [6, 5] : []);
-        c.beginPath();
-        c.moveTo(p[0], p[1]);
-        c.lineTo(q[0], q[1]);
-        c.stroke();
-    }
-    c.restore();
     c.strokeStyle = TH.ink;
     c.lineWidth = 2;
     c.strokeRect(fx0, fyTop, fx1 - fx0, fyBot - fyTop);
-    // floor line across everything
+    // the floor line, across the cut walls too
     const u0 = Math.min(f.face[0], ...f.strips.map(s => s[0])), u1 = Math.max(f.face[1], ...f.strips.map(s => s[1]));
     const [gx0] = S(T, u0, 0), [gx1] = S(T, u1, 0);
     c.lineWidth = 3;
@@ -182,80 +214,324 @@ export function drawElevation(c, W, H, v, sk, f, selected = null) {
     c.moveTo(gx0 - 14, fyBot);
     c.lineTo(gx1 + 14, fyBot);
     c.stroke();
-    // dimensions (all tappable but the overall length): a chain along the floor (corner → openings → corner),
-    // the overall face, the wall height, and each opening's sill and height
-    /** a dimension chip with its tap action; the selected one gets the plan's yellow border */
-    const tag = (p, q, nx, ny, label, look, act, force = false) => {
-        const box = dim(c, p, q, nx, ny, label, look, force, selected === JSON.stringify(act));
-        if (box)
-            hits.push({ ...box, act, look });
+    c.restore();
+}
+/**
+ * The selected door, window or cabinet (and the one under the pointer, fainter): a yellow outline right on its edges,
+ * drawn over everything else on the wall — its own edges and its neighbours' — so the whole of it shows, even where
+ * it shares a side with another cabinet, or lines up with a window.
+ */
+export function drawWallSelection(c, T, sk, f, face) {
+    const lit = (type, id) => isSel(type, id) || (ed.hover?.type === type && ed.hover.id === id);
+    const ring = (u0, z1, u1, z0, selected) => {
+        const [x0, y0] = S(T, u0, z1), [x1, y1] = S(T, u1, z0);
+        c.save();
+        c.strokeStyle = TH.yellow;
+        c.globalAlpha = selected ? 1 : 0.5;
+        c.lineWidth = 3;
+        c.lineJoin = 'miter';
+        c.strokeRect(x0, y0, x1 - x0, y1 - y0);
+        c.restore();
     };
-    const { segs } = chain(sk, f), lookOf = (d) => (!d ? 'free' : ed.badOpeningDims.has(d.id) ? 'bad' : d.driving ? 'drive' : 'ref');
-    for (const g of segs) {
-        const p = S(T, g.u0, 0), q = S(T, g.u1, 0), text = fmtLen(g.u1 - g.u0);
-        if (g.act.k === 'w')
-            tag(p, q, 0, ROW0, text, 'drive', g.act);
-        else
-            tag(p, q, 0, ROW0, text, lookOf(g.dim), g.act);
-    }
-    // saved dimensions that aren't one step of the string (e.g. window → door across another window, or from a
-    // plan wall point): each on its own row below it, so it can be seen, selected and deleted
-    const extra = extraDims(sk, f);
-    for (const x of extra)
-        tag(S(T, x.u0, 0), S(T, x.u1, 0), 0, ROW0 + ROW * (x.row + 1), fmtLen(x.u1 - x.u0), lookOf(x.d), x.act);
-    const rows = extra.reduce((m, x) => Math.max(m, x.row + 1), 0);
-    // the wall's length comes from the floor plan: linked (outlined blue) when a dimension locks it there, grey when free
-    const planLocked = Object.values(sk.cons).some(cn => cn.type === 'dist' && cn.line === f.lid && cn.driving !== false && cn.layer !== 'print');
-    tag(S(T, f.face[0], 0), S(T, f.face[1], 0), 0, segs.length || rows ? ROW0 + ROW * (rows + 1) : ROW0, fmtLen(f.face[1] - f.face[0]), planLocked ? 'linked' : 'free', { k: 'len' });
-    // heights: blue once entered (the sill: locked), grey while they're defaults / free to drag
-    tag(S(T, f.face[1], 0), S(T, f.face[1], f.H), 34, 0, fmtLen(f.H), sk.lines[f.lid].height != null ? 'drive' : 'free', { k: 'wallH' });
-    for (const o of ops) {
-        const off = 24;
-        const op = sk.openings[o.id];
-        if (o.sill > 0.01 || o.type === 'window')
-            tag(S(T, o.u1, 0), S(T, o.u1, o.sill), off, 0, fmtLen(o.sill), op.sillLocked ? 'drive' : 'free', { k: 'sill', op: o.id }, true);
-        tag(S(T, o.u1, o.sill), S(T, o.u1, o.head), off, 0, fmtLen(o.head - o.sill), op.h != null ? 'drive' : 'free', { k: 'h', op: o.id });
+    for (const o of elevOpenings(sk, f))
+        if (lit('opening', o.id))
+            ring(o.u0, o.head, o.u1, o.sill, isSel('opening', o.id));
+    for (const id of Object.keys(face.cabs ?? {})) {
+        if (!lit('cab', id))
+            continue;
+        const b = cabBox(face, id);
+        if (b)
+            ring(b.u0, b.z1, b.u1, b.z0, isSel('cab', id));
     }
-    return hits;
 }
-/** Rows of dimensions below the floor, pixels: the string, then extra rows, then the overall length. */
+/** Rows of dimensions below the floor, pixels: the strings, then extra rows, then the overall length. */
 const ROW0 = 30, ROW = 34;
-/** The dimension string along the floor: corner → each opening's edges → corner, left to right. */
-function chain(sk, f) {
-    const ops = elevOpenings(sk, f), other = f.leftEnd === 'a' ? 'b' : 'a';
-    const nodes = [{ u: f.face[0], end: f.leftEnd }];
-    for (const o of ops) {
-        if (o.u0 < nodes[nodes.length - 1].u - 0.01 || o.u1 > f.face[1] + 0.01)
-            continue; // overlapping or past the corner: left out of the string
-        nodes.push({ u: o.u0, op: o, edge: o.e0 }, { u: o.u1, op: o, edge: o.e1 });
+/** One rule for every chip: blue once someone entered it; grey while it's a standard size (a new cabinet's) or only measured. */
+const faceLook = (c, id) => (ed.highlight.has(id) || ed.ana.bad.has(id) || ed.badFaceCons.has(id) ? 'bad' : c.driving === false ? 'ref' : c.auto ? 'free' : 'drive');
+/** The face dimension across the wall between two points, if there is one. */
+function dimAcross(face, a, b) {
+    for (const [id, c] of Object.entries(face.cons))
+        if (c.type === 'dist' && c.kind === 'h' && ((c.a === a && c.b === b) || (c.a === b && c.b === a)))
+            return id;
+    return null;
+}
+/** The face dimension of a cabinet's height above the floor, if there is one. */
+export function cabLiftDim(face, id) {
+    const cb = face.cabs[id];
+    for (const [cid, k] of Object.entries(face.cons)) {
+        const ends = [k.a, k.b];
+        if (k.type === 'dist' && k.kind === 'v' && ends.some(v => !!v && !!face.points[v]?.anchor && face.points[v].y === 0) && ends.some(v => v === cb.bl || v === cb.br))
+            return cid;
     }
-    nodes.push({ u: f.face[1], end: other });
+    return null;
+}
+/**
+ * The strings along the floor, corner to corner, left to right: the doors and windows and the cabinets that fit
+ * between them in the first; cabinets that overlap those (hung above a counter, say) in the next ones.
+ */
+function strings(sk, f, face) {
+    const ops = elevOpenings(sk, f).map(o => ({ u0: o.u0, u1: o.u1, op: o }));
+    const cabs = Object.keys(face.cabs ?? {}).flatMap(id => {
+        const b = cabBox(face, id);
+        if (!b)
+            return [];
+        const [l, r] = cabSides(face, id);
+        return [{ u0: b.u0, u1: b.u1, cab: { id, l, r } }];
+    });
+    const rows = [];
+    const inside = (it) => it.u0 >= f.face[0] - 0.01 && it.u1 <= f.face[1] + 0.01;
+    const fits = (row, it) => inside(it) && !row.some(x => it.u0 < x.u1 - 0.01 && it.u1 > x.u0 + 0.01);
+    // doors and windows first, then cabinets: each in the first string it fits, overlapping ones in strings of their own
+    for (const it of [...ops.sort((p, q) => p.u0 - q.u0), ...cabs.sort((p, q) => p.u0 - q.u0)]) {
+        if (!inside(it))
+            continue;
+        const row = rows.find(r => fits(r, it));
+        if (row)
+            row.push(it);
+        else
+            rows.push([it]);
+    }
+    return rows.map(r => r.sort((p, q) => p.u0 - q.u0));
+}
+/** One string's dimensions: each gap between corners, doors, windows and cabinets, and each one's width. */
+function stringSegs(sk, f, face, row) {
+    const other = f.leftEnd === 'a' ? 'b' : 'a';
+    const nodes = [{ u: f.face[0], pt: cornerAnchor(f.leftEnd), end: f.leftEnd }];
+    for (const it of row) {
+        if (it.op)
+            nodes.push({ u: it.u0, pt: openingAnchor(it.op.id, it.op.e0), it, edge: it.op.e0 }, { u: it.u1, pt: openingAnchor(it.op.id, it.op.e1), it, edge: it.op.e1 });
+        else
+            nodes.push({ u: it.u0, pt: it.cab.l, it }, { u: it.u1, pt: it.cab.r, it });
+    }
+    nodes.push({ u: f.face[1], pt: cornerAnchor(other), end: other });
     if (nodes.length <= 2)
-        return { segs: [] };
-    const face = (end) => ({ face: end, line: f.lid, side: f.side });
+        return [];
+    const faceRef = (end) => ({ face: end, line: f.lid, side: f.side });
     const segs = [];
     for (let i = 1; i < nodes.length; i++) {
         const n1 = nodes[i - 1], n2 = nodes[i];
-        if (n1.op && n2.op && n1.op === n2.op) {
-            segs.push({ u0: n1.u, u1: n2.u, act: { k: 'w', op: n1.op.id } });
+        if (n1.it && n1.it === n2.it) {
+            // a door's or window's width (its own), or a cabinet's (a face dimension)
+            if (n1.it.op)
+                segs.push({ u0: n1.u, u1: n2.u, act: { k: 'w', op: n1.it.op.id }, look: widthEntered(sk.openings[n1.it.op.id]) ? 'drive' : 'free', width: true });
+            else {
+                const id = face.cabs[n1.it.cab.id].w;
+                segs.push(id && face.cons[id]
+                    ? { u0: n1.u, u1: n2.u, act: { k: 'fdim', id }, look: faceLook(face.cons[id], id), width: true }
+                    : { u0: n1.u, u1: n2.u, act: { k: 'gap', a: n1.pt, b: n2.pt, kind: 'h', title: 'Cabinet width' }, look: 'free', width: true });
+            }
             continue;
         }
-        let act;
-        if (!n1.op)
-            act = { k: 'pos', op: n2.op.id, edge: n2.edge, ref: face(n1.end), title: 'Distance from the corner' };
-        else if (!n2.op)
-            act = { k: 'pos', op: n1.op.id, edge: n1.edge, ref: face(n2.end), title: 'Distance from the corner' };
-        // between two openings: one of them is locked to the other (pickBetween says which)
-        else
-            act = { k: 'pos', ...pickBetween(sk, n1.op.id, n1.edge, n2.op.id, n2.edge), title: 'Space between' };
-        const dim = (sk.openings[act.op].dims || []).find(d => d.edge === act.edge && sameRef(d.ref, act.ref));
-        segs.push({ u0: n1.u, u1: n2.u, act, dim });
+        if (!n1.it?.cab && !n2.it?.cab) {
+            if (!n1.it && !n2.it)
+                continue;
+            // between corners, doors and windows: the plan's door/window dimensions
+            let act;
+            if (!n1.it)
+                act = { k: 'pos', op: n2.it.op.id, edge: n2.edge, ref: faceRef(n1.end), title: 'Distance from the corner' };
+            else if (!n2.it)
+                act = { k: 'pos', op: n1.it.op.id, edge: n1.edge, ref: faceRef(n2.end), title: 'Distance from the corner' };
+            else
+                act = { k: 'pos', ...pickBetween(sk, n1.it.op.id, n1.edge, n2.it.op.id, n2.edge), title: 'Space between' };
+            const d = (sk.openings[act.op].dims || []).find(x => x.edge === act.edge && sameRef(x.ref, act.ref));
+            segs.push({ u0: n1.u, u1: n2.u, act, look: !d ? 'free' : ed.badOpeningDims.has(d.id) ? 'bad' : d.driving ? 'drive' : 'ref' });
+            continue;
+        }
+        // to or from a cabinet: a face dimension once entered
+        const id = dimAcross(face, n1.pt, n2.pt);
+        const title = n1.end || n2.end ? 'Distance from the corner' : 'Space between';
+        segs.push(id ? { u0: n1.u, u1: n2.u, act: { k: 'fdim', id }, look: faceLook(face.cons[id], id) } : { u0: n1.u, u1: n2.u, act: { k: 'gap', a: n1.pt, b: n2.pt, kind: 'h', title }, look: 'free' });
+    }
+    return segs;
+}
+/** The doors, windows and cabinets a wall-view dimension measures from or to (by the points it runs between). */
+function owners(face, act) {
+    const out = [];
+    const of = (pid) => {
+        if (!pid)
+            return;
+        const m = /^@o:([^:]+):/.exec(pid);
+        if (m) {
+            out.push(m[1]);
+            return;
+        }
+        for (const [id, cb] of Object.entries(face.cabs ?? {}))
+            if ([cb.bl, cb.br, cb.tr, cb.tl].includes(pid))
+                out.push(id);
+    };
+    if ('op' in act)
+        out.push(act.op);
+    if (act.k === 'pos' && 'op' in act.ref)
+        out.push(act.ref.op);
+    if (act.k === 'depth')
+        out.push(act.cab);
+    if (act.k === 'gap') {
+        of(act.a);
+        of(act.b);
+    }
+    if (act.k === 'fdim') {
+        const c = face.cons[act.id];
+        of(c?.a);
+        of(c?.b);
+    }
+    // the wall's own length and height: the wall's
+    if (act.k === 'len' || act.k === 'wallH')
+        out.push(WALL);
+    return out;
+}
+/**
+ * The doors, windows and cabinets whose reference dimensions show (as the plan shows a door's or window's distances
+ * only while it's selected): the selected and hovered ones, and the one a selected dimension belongs to.
+ */
+/** The wall itself, among what a wall view's dimensions belong to: live while one of its edges or corners is picked. */
+const WALL = '@wall';
+/** One of the wall's own edges or corners (the face's anchors that aren't a door's or window's, nor a shape's). */
+const wallPart = (id) => id.startsWith('@') && !id.startsWith('@o:') && !id.startsWith('@k:');
+function liveObjects(face) {
+    const live = new Set();
+    const add = (type, id) => {
+        if (type === 'opening' || type === 'cab')
+            live.add(id);
+        else if ((type === 'line' || type === 'point') && wallPart(id))
+            live.add(WALL);
+        else if (type === 'elev') {
+            try {
+                for (const o of owners(face, JSON.parse(id)))
+                    live.add(o);
+            }
+            catch { /* not a chip */ }
+        }
+        else if (type === 'dim' && face.cons[id])
+            for (const o of owners(face, { k: 'fdim', id }))
+                live.add(o);
+    };
+    for (const s of ed.sel)
+        add(s.type, s.id);
+    if (ed.hover)
+        add(ed.hover.type, ed.hover.id);
+    return live;
+}
+/**
+ * The wall view's dimensions, over the face: the strings along the floor, door/window dimensions that aren't a step of
+ * one, face dimensions entered from a chip that no longer are, the wall's length (set in the plan) and height, and
+ * beside each door, window and cabinet its height off the floor and its own height. `on`: whether a chip is selected.
+ * As in the plan, what's been entered (blue) always shows; the rest (grey: just measured, a standard size or a
+ * reference) only while what it belongs to — a door, window or cabinet, or the wall itself (an edge or corner of it) —
+ * is selected or hovered. Returns the chips, to tap.
+ */
+export function drawWallChips(c, T, sk, f, face, on) {
+    const hits = [], shown = new Set(), live = liveObjects(face);
+    /** entered by someone, so it shows in blue (or red, when it can't be met) — not just measured, a standard size or a reference */
+    const entered = (act, look) => (look === 'drive' || look === 'bad' || look === 'linked') && !(act.k === 'fdim' && face.cons[act.id]?.auto);
+    /** an object's own size (a door's, window's or cabinet's width or height; the wall's length or height), not a distance */
+    const ownSize = (act) => act.k === 'w' || act.k === 'h' || act.k === 'len' || act.k === 'wallH'
+        || (act.k === 'gap' && (act.title === 'Cabinet width' || act.title === 'Cabinet height'))
+        || (act.k === 'fdim' && Object.values(face.cabs ?? {}).some(cb => cb.w === act.id || cb.h === act.id));
+    // a dimension shows once it's entered, and otherwise only while what it belongs to is selected or hovered
+    const tag = (p, q, nx, ny, label, look, act, force = false) => {
+        if (!entered(act, look) && !on(act) && !owners(face, act).some(o => live.has(o)))
+            return;
+        // as in the plan, a number that holds nothing is dashed and in parentheses: a reference, or one only measured —
+        // a distance, or the wall's length when the plan doesn't lock it (a standard size, which holds, stays solid)
+        const dashed = look === 'ref' || (look === 'free' && !(ownSize(act) && act.k !== 'len'));
+        const box = dim(c, p, q, nx, ny, label, look, force, on(act), dashed);
+        if (box)
+            hits.push({ ...box, act, look });
+        if (act.k === 'fdim')
+            shown.add(act.id);
+    };
+    /** the chip's value: a driving face dimension's own, otherwise what's measured */
+    const val = (act, measured) => (act.k === 'fdim' && face.cons[act.id]?.driving !== false ? face.cons[act.id].value : measured);
+    const rows = strings(sk, f, face);
+    rows.forEach((row, r) => {
+        for (const g of stringSegs(sk, f, face, row))
+            tag(S(T, g.u0, 0), S(T, g.u1, 0), 0, ROW0 + ROW * r, fmtLen(val(g.act, g.u1 - g.u0)), g.look, g.act);
+    });
+    let next = Math.max(rows.length, 1);
+    // door/window dimensions that aren't a step of a string, packed into rows of their own
+    const extra = extraDims(sk, f, rows);
+    for (const x of extra)
+        tag(S(T, x.u0, 0), S(T, x.u1, 0), 0, ROW0 + ROW * (next + x.row), fmtLen(x.u1 - x.u0), ed.badOpeningDims.has(x.d.id) ? 'bad' : x.d.driving ? 'drive' : 'ref', x.act);
+    next += extra.reduce((m, x) => Math.max(m, x.row + 1), 0);
+    // heights beside doors, windows and cabinets
+    for (const o of elevOpenings(sk, f)) {
+        const op = sk.openings[o.id];
+        if (o.sill > 0.01 || o.type === 'window')
+            tag(S(T, o.u1, 0), S(T, o.u1, o.sill), 24, 0, fmtLen(o.sill), op.sillLocked ? 'drive' : 'free', { k: 'sill', op: o.id }, true);
+        tag(S(T, o.u1, o.sill), S(T, o.u1, o.head), 24, 0, fmtLen(o.head - o.sill), op.h != null ? 'drive' : 'free', { k: 'h', op: o.id });
     }
-    return { segs };
+    // beside a cabinet: on its right like a window's, unless a cabinet or opening is right there (a run of cabinets),
+    // then on its left, else just inside it
+    const boxes = [...Object.keys(face.cabs ?? {}).map(id => ({ id, b: cabBox(face, id) })).filter(x => x.b).map(x => ({ id: x.id, ...x.b })),
+        ...elevOpenings(sk, f).map(o => ({ id: o.id, u0: o.u0, u1: o.u1, z0: o.sill, z1: o.head }))];
+    const room = 64 / T.s;
+    const blocked = (id, b, lo, hi) => boxes.some(o => o.id !== id && o.u1 > lo + 0.01 && o.u0 < hi - 0.01 && o.z1 > b.z0 - 0.01 && o.z0 < b.z1 + 0.01);
+    for (const [id, cb] of Object.entries(face.cabs ?? {})) {
+        const b = cabBox(face, id);
+        if (!b)
+            continue;
+        const [l, r] = cabSides(face, id), zid = cabLiftDim(face, id);
+        const right = !blocked(id, b, b.u1, b.u1 + room), left = !right && !blocked(id, b, b.u0 - room, b.u0);
+        const u = right ? b.u1 : b.u0, off = right ? 24 : left ? -24 : 24, at = right || left ? u : b.u1 - 48 / T.s;
+        // its height off the floor: when it's off the floor, set, or selected (a cabinet on the floor needs no 0")
+        if (b.z0 > 0.01 || zid || live.has(id)) {
+            const zAct = zid ? { k: 'fdim', id: zid } : { k: 'gap', a: cornerAnchor(f.leftEnd), b: l, kind: 'v', title: 'Cabinet off the floor' };
+            tag(S(T, at, 0), S(T, at, b.z0), off, 0, fmtLen(val(zAct, b.z0)), zid ? faceLook(face.cons[zid], zid) : 'free', zAct, true);
+        }
+        // its depth, on its door near the bottom: a chip like the others (grey until it's entered, and then only while
+        // the cabinet is selected or hovered), on the cabinet itself
+        if (cb.depthSet || live.has(id) || on({ k: 'depth', cab: id })) {
+            const dAct = { k: 'depth', cab: id }, look = cb.depthSet ? 'drive' : 'free', st = LOOK(look);
+            const [cx] = S(T, (b.u0 + b.u1) / 2, 0), [, by] = S(T, 0, b.z0), [, ty] = S(T, 0, b.z1);
+            if (by - ty > 40) {
+                const y = by - Math.min(16, (by - ty) * 0.15), text = 'D ' + fmtLen(cb.depth);
+                const w = chip(c, text, cx, y, { bg: st.bg, fg: st.fg, font: '600 11.5px', h: 20, pad: 6, border: on(dAct) ? [TH.yellow, 2] : null });
+                hits.push({ x: cx - w / 2 - 4, y: y - 14, w: w + 8, h: 28, act: dAct, look });
+            }
+        }
+        const top = r === cb.br ? cb.tr : cb.tl;
+        const hAct = cb.h && face.cons[cb.h] ? { k: 'fdim', id: cb.h } : { k: 'gap', a: r, b: top, kind: 'v', title: 'Cabinet height' };
+        tag(S(T, at, b.z0), S(T, at, b.z1), off, 0, fmtLen(val(hAct, b.z1 - b.z0)), hAct.k === 'fdim' ? faceLook(face.cons[hAct.id], hAct.id) : 'free', hAct);
+    }
+    // face dimensions entered from a chip that isn't drawn now (what they measure has moved): across in rows of their own, up beside their point
+    const lostRows = [];
+    for (const [id, k] of Object.entries(face.cons)) {
+        if (!k.elev || k.anchor || k.type !== 'dist' || shown.has(id) || !k.a || !k.b || !face.points[k.a] || !face.points[k.b])
+            continue;
+        if (Object.values(face.cabs ?? {}).some(cb => cb.w === id || cb.h === id))
+            continue;
+        const A = face.points[k.a], B = face.points[k.b], act = { k: 'fdim', id }, text = fmtLen(k.driving === false ? measure(face, k) : k.value);
+        if (k.kind === 'v') {
+            tag(S(T, B.x, A.y), S(T, B.x, B.y), -24, 0, text, faceLook(k, id), act, true);
+            continue;
+        }
+        const u0 = Math.min(A.x, B.x), u1 = Math.max(A.x, B.x);
+        let row = 0;
+        while ((lostRows[row] || []).some(([x, y]) => u0 < y + 6 && u1 > x - 6))
+            row++;
+        (lostRows[row] = lostRows[row] || []).push([u0, u1]);
+        tag(S(T, A.x, 0), S(T, B.x, 0), 0, ROW0 + ROW * (next + row), text, faceLook(k, id), act);
+    }
+    next += lostRows.length;
+    // the wall's length comes from the floor plan: linked (outlined blue) when a dimension locks it there, grey when free
+    const planLocked = Object.values(sk.cons).some(cn => cn.type === 'dist' && cn.line === f.lid && cn.driving !== false && cn.layer !== 'print');
+    const anyRow = rows.some(r => r.length) || next > 1;
+    tag(S(T, f.face[0], 0), S(T, f.face[1], 0), 0, anyRow ? ROW0 + ROW * next : ROW0, fmtLen(f.face[1] - f.face[0]), planLocked ? 'linked' : 'free', { k: 'len' });
+    // the wall's height: blue once entered, grey while it's the default
+    tag(S(T, f.face[1], 0), S(T, f.face[1], f.H), 34, 0, fmtLen(f.H), sk.lines[f.lid].height != null ? 'drive' : 'free', { k: 'wallH' });
+    return hits;
 }
-/** Saved door/window dimensions on this wall that the string doesn't show, packed into rows (u intervals don't overlap). */
-export function extraDims(sk, f) {
-    const shown = new Set(chain(sk, f).segs.map(g => g.dim?.id).filter(Boolean));
+/** Saved door/window dimensions on this wall that the strings (`rows`) don't show, packed into rows. */
+export function extraDims(sk, f, strs) {
+    const shown = new Set();
+    for (const row of strs ?? strings(sk, f, emptyFace()))
+        for (const g of stringSegs(sk, f, emptyFace(), row.filter(it => it.op))) {
+            if (g.act.k !== 'pos')
+                continue;
+            const a = g.act, d = (sk.openings[a.op].dims || []).find(x => x.edge === a.edge && sameRef(x.ref, a.ref));
+            if (d)
+                shown.add(d.id);
+        }
     const out = [], rows = [];
     for (const o of elevOpenings(sk, f)) {
         const op = sk.openings[o.id], g = openingSpan(sk, op);
@@ -268,19 +544,17 @@ export function extraDims(sk, f) {
             if (r == null)
                 continue;
             const a = toU(f, r), b = toU(f, edgeS(op, g.w, d.edge)), u0 = Math.min(a, b), u1 = Math.max(a, b);
-            let row = 0;
-            while ((rows[row] || []).some(([x, y]) => u0 < y + 6 && u1 > x - 6))
-                row++;
-            (rows[row] = rows[row] || []).push([u0, u1]);
+            let k = 0;
+            while ((rows[k] || []).some(([x, y]) => u0 < y + 6 && u1 > x - 6))
+                k++;
+            (rows[k] = rows[k] || []).push([u0, u1]);
             const title = 'op' in d.ref ? 'Space between' : 'face' in d.ref ? 'Distance from the corner' : 'Distance from the wall end';
-            out.push({ u0, u1, d, row, act: { k: 'pos', op: o.id, edge: d.edge, ref: d.ref, title } });
+            out.push({ u0, u1, d, row: k, act: { k: 'pos', op: o.id, edge: d.edge, ref: d.ref, title } });
         }
     }
     return out;
 }
-/** Extra pixels below the floor that the extra dimension rows take (for fitting the view). */
-export const extraRowsPx = (sk, f) => ROW * extraDims(sk, f).reduce((m, x) => Math.max(m, x.row + 1), 0);
-/** A chip for previews (line length while drawing). */
+/** A chip for previews (a ghost's size, a height while placing). */
 export const previewChip = (c, text, x, y) => chip(c, text, x, y, { bg: TH.chip, fg: TH.ink, font: '600 11.5px', h: 20, pad: 6, border: [TH.purple, 1.5] });
 /** A small plan of the page in the corner: the wall in yellow and an arrow showing where you're looking from. */
 export function drawKeyPlan(c, x, y, size, sk, f) {