@reekon-tools/boldr-cad 1.3.0 → 1.5.0

package/dist/render/draw.js

@@ -1,8 +1,8 @@
 import { ed, isSel } from '../app/state';
 import { consPoints, curveDefined, isDim, lineDefined, measure } from '../model/constraints';
 import { hyp, norm2, normAng, projT } from '../model/geom';
-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 { drivingDim, edgePoint, hingeEdge, measureOpeningDim, refPoint, refS, widthEntered } from '../model/openings';
+import { angleCorner, angleLabel, 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';
@@ -15,12 +15,14 @@ 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, keyPlanSize, mainT, nextThumbFrame, noteFont, noteHandles, noteTextBox, S, sketchBounds, underlayH, underlayHandles, underlayMid } from './view';
+import { cvs, imageLinkBadge, imgCache, keyPlanSize, mainT, nextThumbFrame, noteFont, noteHandles, noteTextBox, S, sketchBounds, underlayH, underlayHandles, underlayMid, underlaySrc } 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';
+import { LINK_SVG } from './figmaIcons';
+import { drawSvgIcon, svgIcon } from './svgPath';
 /** Tap targets registered while drawPlan() paints (null outside it: thumbnails and the elevation register none). */
 let hits = null;
 const addHit = (h) => { if (hits)
@@ -39,26 +41,29 @@ export function linkBlue() {
     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.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();
+/** Figma's link icon (render/figmaIcons.ts), read once. */
+const LINK_ICON = svgIcon(LINK_SVG);
+/** The link icon, `size` across, centred on (x, y): in its own dark grey, or `color`. */
+export function linkIcon(c, x, y, size, color) {
+    drawSvgIcon(c, LINK_ICON, 'link', x - size / 2, y - size / 2, size, color);
 }
-/** 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, mark }) {
+/**
+ * A linked measurement's badge, as the frame draws it on its 30 px chip (Figma 2795:77149): 5 in from the chip's edges,
+ * 20 across with the 12 px link icon in its middle, 10 before the value, and the value 5 from the chip's end. A linked
+ * chip is the size of a plain one (the user's call, 2026-10-25: "the same size as the regular measurement tiles"), so
+ * the badge is drawn at the chip's own height: all of it scaled by h / 30.
+ */
+const LINKED = { h: 30, pad: 5, badge: 20, badgeR: 3.826, icon: 12, gap: 10 };
+/** The width and height chip() draws `text` at (and its font, set on `c`). */
+export function chipSize(c, text, { font = '600 12px', pad = 7, h = 22, minW = 0, mark }) {
     c.font = font + ' ' + FONT;
-    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;
+    const room = mark ? (LINKED.pad * 2 + LINKED.badge + LINKED.gap) * (h / LINKED.h) : pad * 2;
+    return { w: Math.max(minW, c.measureText(text).width + room), h };
+}
+/** Rounded label on the canvas; registers a hit region when `kind` is given. */
+export function chip(c, text, cx, cy, opts) {
+    const { bg, fg, border, kind, id, rot = 0, mark } = opts;
+    const { w, h } = chipSize(c, text, opts), x = cx - w / 2, y = cy - h / 2;
     c.save();
     if (rot) {
         c.translate(cx, cy);
@@ -76,9 +81,16 @@ 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 + mw / 2, cy + 0.5);
-    if (mark)
-        linkMark(c, x + pad + 4.5, cy, fg);
+    if (mark) {
+        const k = h / LINKED.h, inset = LINKED.pad * k, bw = LINKED.badge * k, bx = x + inset, tx = bx + bw + LINKED.gap * k;
+        c.fillText(text, (tx + x + w - inset) / 2, cy + 0.5);
+        rr(c, bx, cy - bw / 2, bw, bw, LINKED.badgeR * k);
+        c.fillStyle = '#FFFFFF';
+        c.fill();
+        linkIcon(c, bx + bw / 2, cy, LINKED.icon * k);
+    }
+    else
+        c.fillText(text, cx, cy + 0.5);
     c.restore();
     if (kind) {
         const ext = rot ? Math.max(w, h) / 2 : 0;
@@ -118,8 +130,9 @@ function drawUnderlay(c, T) {
     if (!settings.layers.underlay)
         return;
     for (const u of page().underlays) {
-        const im = imgCache(u.src);
-        if (!im || !im.complete || !im.naturalWidth)
+        const im = imgCache(underlaySrc(u)), ready = !!im && im.complete && !!im.naturalWidth;
+        // (an expanded photo whose picture hasn't come yet, or is gone: where it is, as its tile's card)
+        if (!ready && !u.link)
             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;
@@ -128,7 +141,48 @@ function drawUnderlay(c, T) {
         c.translate(x, y);
         if (u.rot)
             c.rotate((u.rot * Math.PI) / 180);
-        c.drawImage(im, -w / 2, -hh / 2, w, hh);
+        if (ready)
+            c.drawImage(im, -w / 2, -hh / 2, w, hh);
+        else {
+            c.fillStyle = '#2B2C2E';
+            c.fillRect(-w / 2, -hh / 2, w, hh);
+            if (linkInfoOf(u.link)?.exists === false) {
+                c.font = '500 13px ' + FONT;
+                c.fillStyle = '#9FA0A2';
+                c.textAlign = 'center';
+                c.textBaseline = 'middle';
+                c.fillText('Removed', 0, 0);
+            }
+        }
+        c.restore();
+    }
+}
+/**
+ * Each expanded photo's badge: its link icon in a white disc in its top-right corner (imageLinkBadge), over the drawing
+ * — always, as Skia's, selected or not, locked or not: it says the photo is the job's, and a tap on it opens it.
+ */
+function drawImageLinks(c, T) {
+    if (!settings.layers.underlay)
+        return;
+    const { W, H } = cvs;
+    for (const u of page().underlays) {
+        const b = imageLinkBadge(T, u);
+        if (!b || b.x < -b.r || b.y < -b.r || b.x > W + b.r || b.y > H + b.r)
+            continue;
+        const r = b.r, disc = (cc, X, Y) => { cc.beginPath(); cc.arc(X + r, Y + r, r, 0, Math.PI * 2); };
+        c.save();
+        if (ed.mode === 'draft')
+            c.globalAlpha = 0.75;
+        if (c.shape)
+            c.shape('image link ' + r, b.x - r, b.y - r, disc);
+        else
+            disc(c, b.x - r, b.y - r);
+        c.fillStyle = '#FFFFFF';
+        c.fill();
+        c.lineWidth = 1;
+        c.strokeStyle = 'rgba(24,26,28,.2)';
+        c.stroke();
+        linkIcon(c, b.x, b.y, r * 1.2, '#181A1C');
         c.restore();
     }
 }
@@ -147,20 +201,49 @@ function drawRooms(c, T, sk, thumb) {
         if (thumb)
             continue;
         const [cx, cy] = S(T, g.c.x, g.c.y);
+        // (its area and perimeter once the drawing has its scale: before, only placeholders — just its name)
+        const nm = r.name, info = sk.unscaled ? '' : fmtArea(g.area) + '  ·  ' + fmtLen(g.per) + ' perim.';
+        c.font = '600 14px ' + FONT;
+        const nw = c.measureText(nm).width;
+        c.font = '500 12px ' + FONT;
+        const iw = info ? c.measureText(info).width : 0;
+        const show = spaceLabel(T, g.inner, nw, iw);
+        if (!show.name)
+            continue;
         c.textAlign = 'center';
         c.textBaseline = 'middle';
         c.fillStyle = TH.label;
         c.font = '600 14px ' + FONT;
-        const nm = r.name;
-        c.fillText(nm, cx, cy - 9);
-        c.font = '500 12px ' + FONT;
-        c.fillStyle = TH.ink2;
-        c.fillText(fmtArea(g.area) + '  ·  ' + fmtLen(g.per) + ' perim.', cx, cy + 9);
-        c.font = '600 14px ' + FONT;
-        const w = Math.max(c.measureText(nm).width, 140);
+        c.fillText(nm, cx, show.info ? cy - 9 : cy);
+        if (show.info) {
+            c.font = '500 12px ' + FONT;
+            c.fillStyle = TH.ink2;
+            c.fillText(info, cx, cy + 9);
+        }
+        const w = Math.max(nw, 140);
         addHit({ kind: 'room', id, x: cx - w / 2, y: cy - 20, w, h: 40 });
     }
 }
+/** Room left round a space's label on the screen, each side, points. */
+const SPACE_LABEL_PAD = 8;
+/**
+ * Which of a space's label shows: only what fits inside the space on the screen, so zoomed out it goes rather than
+ * cluttering the drawing (the user's call, 2026-10-29, as a tile's name goes: LINK_FULL_PX) — its area and perimeter
+ * first, then its name. `nameW`, `infoW`: their widths (no area line: 0).
+ */
+export function spaceLabel(T, inner, nameW, infoW) {
+    let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity;
+    for (const p of inner) {
+        x0 = Math.min(x0, p.x);
+        x1 = Math.max(x1, p.x);
+        y0 = Math.min(y0, p.y);
+        y1 = Math.max(y1, p.y);
+    }
+    const w = (x1 - x0) * T.s, h = (y1 - y0) * T.s, pad = 2 * SPACE_LABEL_PAD;
+    // (one line of 14 pt; two, 18 apart, of 14 and 12)
+    const name = w >= nameW + pad && h >= 18 + pad;
+    return { name, info: name && infoW > 0 && w >= infoW + pad && h >= 36 + pad };
+}
 function curveWalls(sk) {
     const out = [];
     const show = (constr) => !(constr && !settings.layers.construction);
@@ -443,14 +526,16 @@ function drawOpenings(c, T, sk) {
             c.stroke();
         }
         else {
-            const hinge = P(s0, (f * t) / 2), leaf = P(s0, f * (t / 2 + w));
+            // the leaf, open square to the wall from the jamb it hangs on, and its swing back to the other
+            const [hs, ls] = hingeEdge(o) === 's1' ? [s1, s0] : [s0, s1];
+            const hinge = P(hs, (f * t) / 2), leaf = P(hs, f * (t / 2 + w));
             c.beginPath();
             c.moveTo(hinge[0], hinge[1]);
             c.lineTo(leaf[0], leaf[1]);
             c.stroke();
             const [hx, hy] = hinge, r = w * T.s;
             const a0 = Math.atan2(leaf[1] - hy, leaf[0] - hx);
-            const end = P(s1, (f * t) / 2);
+            const end = P(ls, (f * t) / 2);
             const a1 = Math.atan2(end[1] - hy, end[0] - hx);
             c.beginPath();
             c.setLineDash([4, 3]);
@@ -578,12 +663,31 @@ function drawLock(c, x, y) {
     c.fillRect(x - 3.3, y - 1.2, 6.6, 4.6);
     c.restore();
 }
+/** The selected points and the selected lines' ends: what a constraint's icon still shows for with the icons off. */
+function selPoints(sk) {
+    const out = new Set();
+    for (const s of ed.sel) {
+        if (s.type === 'line') {
+            const l = sk.lines[s.id];
+            if (l) {
+                out.add(l.a);
+                out.add(l.b);
+            }
+        }
+        if (s.type === 'point')
+            out.add(s.id);
+    }
+    return out;
+}
 /** Points: filled = fully defined, hollow = still free (shape cue paired with color). */
 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));
+    // a locked point's padlock is a constraint icon: with the icons off, it shows only as the badges do, on what's
+    // selected (the user's call, 2026-10-26)
+    const locks = settings.showCons ? null : selPoints(sk);
     for (const id in sk.points) {
         const p = sk.points[id];
         const [x, y] = S(T, p.x, p.y);
@@ -626,14 +730,14 @@ function drawPoints(c, T, sk) {
             c.strokeStyle = TH.ink;
             c.stroke();
         }
-        if (p.fixed && !p.origin && !p.anchor)
+        if (p.fixed && !p.origin && !p.anchor && (!locks || locks.has(id) || ed.highlight.has(id)))
             drawLock(c, x + 9, y - 14);
     }
 }
 function dimAnchor(sk, c) {
-    const P = (id) => sk.points[id];
-    if (c.type === 'dist') {
-        // (measured on a wall's face: from its corner to corner, the label off the face on that side)
+    if (c.type === 'dist' || c.type === 'pldist') {
+        // (a length measured on a wall's face: from its corner to corner, the label off the face on that side. Between
+        // parallel lines or walls: from face to face, slid along them.)
         const e = dimEnds(sk, c);
         if (!e)
             return null;
@@ -641,29 +745,13 @@ function dimAnchor(sk, c) {
         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') {
-        // (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') {
         // (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];
-        const sh = [l1.a, l1.b].find(p => p === l2.a || p === l2.b);
-        if (sh) {
-            const s = P(sh), o1 = P(l1.a === sh ? l1.b : l1.a), o2 = P(l2.a === sh ? l2.b : l2.a);
-            const u1 = norm2(o1.x - s.x, o1.y - s.y), u2 = norm2(o2.x - s.x, o2.y - s.y);
-            return { vtx: s, bis: norm2(u1[0] + u2[0], u1[1] + u2[1]), u1, u2 };
-        }
-        const a = P(l1.a), b = P(l1.b);
-        return { vtx: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }, bis: [0, 1] };
-    }
+    if (c.type === 'angle')
+        return angleCorner(sk, c);
     return null;
 }
 /** Whether a dimension, or something it measures (its lines, points or curves), is selected or hovered. */
@@ -683,7 +771,7 @@ function drawDims(c, T, sk) {
         return;
     for (const id in sk.cons) {
         const d = sk.cons[id];
-        if (!isDim(d) || d.layer === 'print' || d.elev)
+        if (!isDim(d) || d.elev)
             continue; // the wall view's own dimensions are its chips
         const A = dimAnchor(sk, d);
         if (!A)
@@ -693,22 +781,22 @@ function drawDims(c, T, sk) {
         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
+        // a measurement of the job sets it: the link badge before its value (chip()), on the chip's own colour — 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) {
+        if (bad || gone) {
             bg = TH.red;
             fg = '#fff';
         }
-        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 border = selected ? [TH.yellow, 2.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);
+            // pulled off its corner: its arc out where the label is, the label riding on it; else a little arc at the
+            // corner, the label out along the bisector
+            const moved = angleLabel(sk, d), R = moved ? moved.r * T.s : 22;
             if (A.u1 && A.u2) {
                 // arc between the two lines, so the angle reads as belonging to that corner
                 const t1 = Math.atan2(-A.u1[1], A.u1[0]), t2 = Math.atan2(-A.u2[1], A.u2[0]);
@@ -717,18 +805,34 @@ function drawDims(c, T, sk) {
                     sweep -= 2 * Math.PI;
                 while (sweep < -Math.PI)
                     sweep += 2 * Math.PI;
+                // (blue, as every other dimension is — the user's call, 2026-10-29; purple is the inference guides')
                 c.save();
-                c.strokeStyle = bad ? TH.red : ref ? TH.chipline : TH.purple;
+                c.strokeStyle = bad ? TH.red : ref ? TH.chipline : TH.blue;
                 c.lineWidth = 1.2;
                 if (ref)
                     c.setLineDash([3, 3]);
                 c.beginPath();
-                c.arc(vx, vy, 22, t1, t1 + sweep, sweep < 0);
+                c.arc(vx, vy, R, t1, t1 + sweep, sweep < 0);
                 c.stroke();
+                // (pulled out past where a line ends: an extension line along it, out to the arc)
+                c.lineWidth = 1;
+                for (const [u, len] of [[A.u1, A.len1], [A.u2, A.len2]]) {
+                    const from = (len ?? 0) * T.s;
+                    if (moved && R > from + 2) {
+                        c.beginPath();
+                        c.moveTo(vx + u[0] * from, vy - u[1] * from);
+                        c.lineTo(vx + u[0] * (R + 4), vy - u[1] * (R + 4));
+                        c.stroke();
+                    }
+                }
                 c.restore();
             }
-            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 });
+            const text = wrap(fmtAng(val)), opts = { bg, fg, border, kind: 'dim', id, mark };
+            // (left where it was drawn: 50 px out along the bisector, or as far as its corners stay clear of the corner — a
+            // linked chip is wider)
+            const sz = chipSize(c, text, opts), out = Math.max(50, Math.hypot(sz.w, sz.h) / 2 + 28);
+            const [lx, ly] = moved ? [vx + Math.cos(moved.ang) * R, vy - Math.sin(moved.ang) * R] : [vx + A.bis[0] * out, vy - A.bis[1] * out];
+            chip(c, text, lx, ly, opts);
             continue;
         }
         if (d.type === 'diam' && 'o' in A) {
@@ -739,7 +843,7 @@ function drawDims(c, T, sk) {
             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) {
+        if ((d.type === 'dist' || d.type === 'pldist') && 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, ref);
         }
         else if (d.type === 'pldist' || !d.line) {
@@ -999,7 +1103,8 @@ export function drawRubberBand(c, T, from, to, snapped) {
         endRing(c, x2, y2, TH.blue);
     c.restore();
     const L = hyp(to.x - from.x, to.y - from.y);
-    if (L * T.s > 24)
+    // (no distance on a drawing without its scale yet: it's only a placeholder)
+    if (L * T.s > 24 && !planSK().unscaled)
         chip(c, fmtLen(L), (x1 + x2) / 2, (y1 + y2) / 2 - 16, { bg: '#fff', fg: TH.blue, border: [TH.blue, 1.5] });
 }
 /**
@@ -1047,7 +1152,9 @@ export function drawPendingDim(c, T, p) {
     }
     c.restore();
     const [mx, my] = S(T, (p.a.x + p.b.x) / 2 + p.nx * p.off, (p.a.y + p.b.y) / 2 + p.ny * p.off);
-    chip(c, p.label, mx, my - (Math.abs(p.off * T.s) > 1 ? 0 : 16), { bg: TH.blue, fg: '#fff', border: [TH.yellow, 2] });
+    // (no label until one's typed, on a page whose sizes are still placeholders)
+    if (p.label)
+        chip(c, p.label, mx, my - (Math.abs(p.off * T.s) > 1 ? 0 : 16), { bg: TH.blue, fg: '#fff', border: [TH.yellow, 2] });
 }
 /**
  * A linear dimension pulled off its line: extension lines from both ends out to a dimension line with
@@ -1112,70 +1219,9 @@ function drawDiameter(c, T, o, r, d, text, color, chipOpts, dashed = false) {
     if (!d.rad)
         arrowHead(c, p2, -sx, -sy);
     c.restore();
-    c.font = (chipOpts.font || '600 12px') + ' ' + FONT;
-    const w = c.measureText(text).width + 14 + (chipOpts.mark ? MARK_W : 0);
+    const { w } = chipSize(c, text, chipOpts);
     chip(c, text, end[0] + side * (w / 2 + 2), end[1], chipOpts);
 }
-/** Architectural dimension strings on the Print dimensions layer (reference-only). */
-function drawPrintDims(c, T, sk) {
-    if (!settings.layers.print)
-        return;
-    for (const id in sk.cons) {
-        const d = sk.cons[id];
-        if (d.layer !== 'print' || d.type !== 'dist')
-            continue;
-        const a = sk.points[d.a], b = sk.points[d.b];
-        if (!a || !b)
-            continue;
-        const dx = b.x - a.x, dy = b.y - a.y, L = hyp(dx, dy);
-        if (L < 1e-6)
-            continue;
-        const nx = -dy / L, ny = dx / L, off = d.off || 24;
-        const pa = { x: a.x + nx * off, y: a.y + ny * off }, pb = { x: b.x + nx * off, y: b.y + ny * off };
-        const [ax, ay] = S(T, a.x, a.y), [bx, by] = S(T, b.x, b.y), [qax, qay] = S(T, pa.x, pa.y), [qbx, qby] = S(T, pb.x, pb.y);
-        const sgn = Math.sign(off) || 1, ex = nx * sgn * 6, ey = -ny * sgn * 6;
-        const selected = isSel('dim', id);
-        c.strokeStyle = selected ? TH.yellow : TH.ink;
-        c.lineWidth = 1;
-        c.beginPath();
-        const gap = ax - qax || ay - qay ? 4 : 0, ga = norm2(qax - ax, qay - ay);
-        c.moveTo(ax + ga[0] * gap, ay + ga[1] * gap);
-        c.lineTo(qax + ex, qay + ey);
-        c.moveTo(bx + ga[0] * gap, by + ga[1] * gap);
-        c.lineTo(qbx + ex, qby + ey);
-        c.moveTo(qax, qay);
-        c.lineTo(qbx, qby);
-        c.stroke();
-        const u = norm2(qbx - qax, qby - qay);
-        c.lineWidth = 1.8;
-        c.beginPath();
-        for (const [x, y] of [[qax, qay], [qbx, qby]]) {
-            const tx = ((u[0] - u[1]) * 5) / Math.SQRT2, ty = ((u[1] + u[0]) * 5) / Math.SQRT2;
-            c.moveTo(x - tx, y - ty);
-            c.lineTo(x + tx, y + ty);
-        }
-        c.stroke();
-        let ang = Math.atan2(qby - qay, qbx - qax);
-        if (ang > Math.PI / 2)
-            ang -= Math.PI;
-        if (ang < -Math.PI / 2)
-            ang += Math.PI;
-        const mx = (qax + qbx) / 2, my = (qay + qby) / 2, txt = fmtLen(L);
-        c.save();
-        c.translate(mx, my);
-        c.rotate(ang);
-        c.font = '600 12px ' + FONT;
-        const w = c.measureText(txt).width + 8;
-        c.fillStyle = TH.bg;
-        c.fillRect(-w / 2, -17, w, 14);
-        c.fillStyle = selected ? TH.yellow : TH.ink;
-        c.textAlign = 'center';
-        c.textBaseline = 'alphabetic';
-        c.fillText(txt, 0, -6);
-        c.restore();
-        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"
@@ -1275,18 +1321,7 @@ function badgeSpots(T, sk, c) {
 }
 function drawBadges(c, T, sk) {
     const { W, H } = cvs;
-    const selIds = new Set(ed.sel.map(s => s.id)), selPts = new Set();
-    for (const s of ed.sel) {
-        if (s.type === 'line') {
-            const l = sk.lines[s.id];
-            if (l) {
-                selPts.add(l.a);
-                selPts.add(l.b);
-            }
-        }
-        if (s.type === 'point')
-            selPts.add(s.id);
-    }
+    const selIds = new Set(ed.sel.map(s => s.id)), selPts = selPoints(sk);
     for (const id in sk.cons) {
         const k = sk.cons[id];
         if (isDim(k) || k.elev)
@@ -1633,7 +1668,6 @@ function paintPlanView(ctx, sk, m, under = true) {
     drawOpenings(ctx, T, sk);
     drawLines(ctx, T, sk);
     drawCurves(ctx, T, sk);
-    drawPrintDims(ctx, T, sk);
     if (ed.mode === 'draft')
         drawBadges(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
@@ -1643,6 +1677,8 @@ function paintPlanView(ctx, sk, m, under = true) {
     drawOpeningAnchors(ctx, T, sk);
     drawDims(ctx, T, sk);
     drawOpeningDims(ctx, T, sk);
+    // (an expanded photo's badge over the drawing, under the markup: as it's tapped)
+    drawImageLinks(ctx, T);
     drawNotes(ctx, T, sk);
     drawNoteSelection(ctx, T);
 }
@@ -1665,7 +1701,6 @@ function paintWall(ctx, W, fixed) {
     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);