@reekon-tools/boldr-cad 1.4.0 → 1.5.0

package/src/render/draw.ts

@@ -1,8 +1,8 @@
 import { ed, isSel, type HitChip } 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';
@@ -16,13 +16,15 @@ import { drawKeyPlan, drawWallBackdrop, drawWallChips, drawWallSelection, type E
 import type { Constraint, Page, Sketch, WallFace, XY } from '../model/types';
 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, type Xform } from './view';
+import { cvs, imageLinkBadge, imgCache, keyPlanSize, mainT, nextThumbFrame, noteFont, noteHandles, noteTextBox, S, sketchBounds, underlayH, underlayHandles, underlayMid, underlaySrc, type Xform } from './view';
 import type { DrawCtx } from './ctx';
 import { dashFor, isSegment, NOTE_TEXT_SIZE, noteLook, shapeOutline } from '../model/markup';
 import { strokeMarkup, strokeOutline } from './markup';
 import { drawLink } from './linkTile';
 import { isLink, linkInfoOf } from '../model/links';
 import { smoothRectPath } from './squircle';
+import { LINK_SVG } from './figmaIcons';
+import { drawSvgIcon, svgIcon } from './svgPath';
 
 type C2D = DrawCtx;
 
@@ -41,7 +43,10 @@ export function rr(c: C2D, x: number, y: number, w: number, h: number, r: number
 export interface ChipOpts {
   bg: string; fg: string; border?: [string, number?] | null; font?: string; pad?: number; h?: number; minW?: number;
   kind?: HitChip['kind']; id?: string; rot?: number;
-  /** a link mark before the text (a value set elsewhere: another view, or a measurement of the job) */
+  /**
+   * 'link': a measurement of the job sets it. The chip is then Figma's linked measurement (2795:77149): a white badge
+   * with the link icon before the value (LINKED), at the chip's own height and font, so it's the size of a plain chip.
+   */
   mark?: 'link';
 }
 
@@ -52,30 +57,46 @@ export function linkBlue(): string {
   return dark ? TH.lblue : TH.blue;
 }
 
-/** A small chain-link mark centred on (x, y). */
-export function linkMark(c: C2D, x: number, y: number, color: string): void {
-  c.save();
-  c.translate(x, y); c.rotate(-Math.PI / 4);
-  c.strokeStyle = color; c.lineWidth = 1.4;
-  c.beginPath(); c.roundRect(-6.5, -2.25, 7.5, 4.5, 2.25); c.roundRect(-1, -2.25, 7.5, 4.5, 2.25); c.stroke();
-  c.restore();
+/** 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: C2D, x: number, y: number, size: number, color?: string): void {
+  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;
+/**
+ * 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 } as const;
 
-/** Rounded label on the canvas; registers a hit region when `kind` is given. */
-export function chip(c: C2D, text: string, cx: number, cy: number, { bg, fg, border, font = '600 12px', pad = 7, h = 22, minW = 0, kind, id, rot = 0, mark }: ChipOpts): number {
+/** The width and height chip() draws `text` at (and its font, set on `c`). */
+export function chipSize(c: C2D, text: string, { font = '600 12px', pad = 7, h = 22, minW = 0, mark }: ChipOpts): { w: number; h: number } {
   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: C2D, text: string, cx: number, cy: number, opts: ChipOpts): number {
+  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); c.rotate(rot); c.translate(-cx, -cy); }
   rr(c, x, y, w, h, 5);
   c.fillStyle = bg; c.fill();
   if (border) { c.lineWidth = border[1] || 1; c.strokeStyle = border[0]; c.stroke(); }
-  c.fillStyle = fg; c.textAlign = 'center'; c.textBaseline = 'middle'; c.fillText(text, cx + mw / 2, cy + 0.5);
-  if (mark) linkMark(c, x + pad + 4.5, cy, fg);
+  c.fillStyle = fg; c.textAlign = 'center'; c.textBaseline = 'middle';
+  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;
@@ -105,14 +126,43 @@ function drawGrid(c: C2D, T: Xform, m = 0): void {
 function drawUnderlay(c: C2D, T: Xform): void {
   if (!settings.layers.underlay) return;
   for (const u of page().underlays) {
-    const im = imgCache(u.src);
-    if (!im || !im.complete || !im.naturalWidth) continue;
+    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;
     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);
+    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: C2D, T: Xform): void {
+  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: C2D, X: number, Y: number) => { 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();
   }
 }
@@ -131,18 +181,40 @@ function drawRooms(c: C2D, T: Xform, sk: Sketch, thumb?: boolean): void {
     c.fill();
     if (thumb) continue;
     const [cx, cy] = S(T, g.c.x, g.c.y);
-    c.textAlign = 'center'; c.textBaseline = 'middle'; c.fillStyle = TH.label;
+    // (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 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);
+    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 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: Xform, inner: XY[], nameW: number, infoW: number): { name: boolean; info: boolean } {
+  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 };
+}
+
 interface CurveWall { id: string; kind: 'circle' | 'arc'; thick: number; constr?: boolean }
 
 function curveWalls(sk: Sketch): CurveWall[] {
@@ -333,11 +405,13 @@ function drawOpenings(c: C2D, T: Xform, sk: Sketch): void {
       for (const k of [t / 6, -t / 6]) { const a = P(s0, k), b = P(s1, k); c.moveTo(a[0], a[1]); c.lineTo(b[0], b[1]); }
       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]); c.lineWidth = 1;
       const ccw = normAng(a1 - a0) > Math.PI;
@@ -423,12 +497,25 @@ function drawLock(c: C2D, x: number, y: number): void {
   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: Sketch): Set<string> {
+  const out = new Set<string>();
+  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: C2D, T: Xform, sk: Sketch): void {
   const { W, H } = cvs;
   const touch = ed.lastPointerTouch;
   // a cabinet's corners aren't grab points: it moves as one, like a door or window
   const cabCorners = new Set(Object.values((sk as WallFace).cabs ?? {}).flatMap(cabPoints));
+  // 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);
@@ -447,47 +534,31 @@ function drawPoints(c: C2D, T: Xform, sk: Sketch): void {
     if (selected) { c.fillStyle = TH.yellow; c.fill(); c.lineWidth = 1.5; c.strokeStyle = TH.ink; c.stroke(); }
     else if (det) { c.fillStyle = ed.highlight.has(id) ? TH.red : p.origin ? TH.ink : inkForPoint(sk, id); c.fill(); }
     else { c.fillStyle = TH.bg; c.fill(); c.lineWidth = 1.8; c.strokeStyle = TH.ink; c.stroke(); }
-    if (p.fixed && !p.origin && !p.anchor) drawLock(c, x + 9, y - 14);
+    if (p.fixed && !p.origin && !p.anchor && (!locks || locks.has(id) || ed.highlight.has(id))) drawLock(c, x + 9, y - 14);
   }
 }
 
 type DimAnchor =
   | { m: XY; a: XY; b: XY; nx?: number; ny?: number; L?: number }
   | { m: XY; o: XY; r: number }
-  | { vtx: XY; bis: [number, number]; u1?: [number, number]; u2?: [number, number] };
+  | { vtx: XY; bis: [number, number]; u1?: [number, number]; u2?: [number, number]; len1?: number; len2?: number };
 
 function dimAnchor(sk: Sketch, c: Constraint): DimAnchor | null {
-  const P = (id: string) => 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;
     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') {
-    // (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;
 }
 
@@ -509,35 +580,50 @@ function drawDims(c: C2D, T: Xform, sk: Sketch): void {
   if (!settings.layers.dims) return;
   for (const id in sk.cons) {
     const d = sk.cons[id];
-    if (!isDim(d) || d.layer === 'print' || d.elev) continue; // the wall view's own dimensions are its chips
+    if (!isDim(d) || 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
+    // 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) { bg = TH.red; fg = '#fff'; }
-    if (linked) { bg = TH.bg; fg = gone ? TH.red : d.type === 'angle' ? TH.purple : linkBlue(); }
-    const border: [string, number] | null = selected ? [TH.yellow, 2.5] : linked ? [fg, 1.5] : null;
+    if (bad || gone) { bg = TH.red; fg = '#fff'; }
+    const border: [string, number] | null = selected ? [TH.yellow, 2.5] : null;
     const mark = linked ? 'link' as const : undefined;
     const wrap = (s: string) => (ref ? '(' : '') + s + (ref ? ')' : '');
     if (d.type === 'angle' && 'vtx' in A) {
       const [vx, vy] = S(T, A.vtx.x, A.vtx.y);
+      // 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]);
         let sweep = t2 - t1;
         while (sweep > Math.PI) sweep -= 2 * Math.PI;
         while (sweep < -Math.PI) sweep += 2 * Math.PI;
-        c.save(); c.strokeStyle = bad ? TH.red : ref ? TH.chipline : TH.purple; c.lineWidth = 1.2;
+        // (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.blue; 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();
+        c.beginPath(); 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]] as const) {
+          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: ChipOpts = { 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) {
@@ -547,7 +633,7 @@ function drawDims(c: C2D, T: Xform, sk: Sketch): void {
     if (!('a' in A)) continue;
     const [mx, my] = S(T, A.m.x, A.m.y);
     const lineColor = bad ? TH.red : ref ? TH.chipline : TH.blue;
-    if (d.type === 'dist' && A.nx != null && Math.abs((d.off || 0) * T.s) > 10) {
+    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) {
       // (dashed only when it's a reference: a dashed line means the number holds nothing, wherever it's drawn)
@@ -720,7 +806,8 @@ export function drawRubberBand(c: C2D, T: Xform, from: XY, to: XY, snapped: bool
   if (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) chip(c, fmtLen(L), (x1 + x2) / 2, (y1 + y2) / 2 - 16, { bg: '#fff', fg: TH.blue, border: [TH.blue, 1.5] });
+  // (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] });
 }
 
 /**
@@ -751,7 +838,8 @@ export function drawPendingDim(c: C2D, T: Xform, p: { from: XY; to: XY; a: XY; b
   for (const q of [p.from, p.to]) { const [x, y] = S(T, q.x, q.y); endRing(c, x, y, TH.yellow); }
   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] });
 }
 
 /**
@@ -800,54 +888,10 @@ function drawDiameter(c: C2D, T: Xform, o: XY, r: number, d: Constraint, text: s
   arrowHead(c, p1, sx, sy);
   if (!d.rad) arrowHead(c, p2, -sx, -sy);
   c.restore();
-  c.font = (chipOpts.font || '600 12px') + ' ' + FONT;
-  const w = c.measureText(text).width + 14 + (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: C2D, T: Xform, sk: Sketch): void {
-  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"
@@ -914,11 +958,7 @@ function badgeSpots(T: Xform, sk: Sketch, c: Constraint): [number, number][] {
 
 function drawBadges(c: C2D, T: Xform, sk: Sketch): void {
   const { W, H } = cvs;
-  const selIds = new Set(ed.sel.map(s => s.id)), selPts = new Set<string>();
-  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) continue;
@@ -1162,7 +1202,6 @@ function paintPlanView(ctx: C2D, sk: Sketch, m: number, under = true): void {
   if (settings.layers.rooms) drawRooms(ctx, T, sk);
   if (settings.layers.cabinets) drawCabinetFootprints(ctx, T, sk);
   drawWalls(ctx, T, sk); drawOpenings(ctx, T, sk); drawLines(ctx, T, sk); drawCurves(ctx, T, sk);
-  drawPrintDims(ctx, T, sk);
   if (ed.mode === 'draft') drawBadges(ctx, T, sk);
   // (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)
@@ -1170,6 +1209,8 @@ function paintPlanView(ctx: C2D, sk: Sketch, m: number, under = true): void {
   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);
 }
@@ -1190,7 +1231,6 @@ function paintWall(ctx: C2D, W: number, fixed: C2D): void {
   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);

package/src/render/elevation.ts

@@ -5,7 +5,7 @@ import { cabPoints, cornerAnchor, emptyFace, openingAnchor } from '../model/face
 import { edgeS, openingSpan, pickBetween, refS, sameRef, widthEntered } from '../model/openings';
 import type { Constraint, OpeningDim, OpeningEdge, OpeningRef, Sketch, WallFace } from '../model/types';
 import { fmtLen } from '../units';
-import { chip, linkBlue, linkMark } from './draw';
+import { chip, linkBlue, linkIcon } from './draw';
 import { FONT, TH } from './theme';
 import { S, type Xform } from './view';
 import type { DrawCtx } from './ctx';
@@ -35,7 +35,8 @@ export interface ElevHit { x: number; y: number; w: number; h: number; act: Elev
 
 /**
  * Chip look: locked blue, reference grey in parentheses, unlocked (just measured) neutral grey, red when it can't be met,
- * and 'linked': locked, but set in another view (the floor plan) — an outlined blue chip with a link mark, read-only here.
+ * and 'linked': locked, but set in another view (the floor plan) — an outlined blue chip with the link icon, read-only
+ * here. (Not a linked measurement's chip: that's one of the job's, set from outside the drawing — chip()'s `mark`.)
  */
 type Look = 'drive' | 'ref' | 'free' | 'bad' | 'linked';
 const LOOK = (look: Look) => look === 'drive' ? { bg: TH.blue, fg: '#fff', line: TH.blue } : look === 'bad' ? { bg: TH.red, fg: '#fff', line: TH.red }
@@ -75,7 +76,7 @@ function dim(c: C2D, p: [number, number], q: [number, number], nx: number, ny: n
   // 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);
+  if (linked) linkIcon(c, cx - w / 2 + 11, cy, 10, st.fg);
   return { x: cx - w / 2 - 4, y: cy - h / 2 - 4, w: w + 8, h: h + 8 };
 }
 
@@ -433,7 +434,7 @@ export function drawWallChips(c: C2D, T: Xform, sk: Sketch, f: ElevFrame, face:
   }
   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 planLocked = Object.values(sk.cons).some(cn => cn.type === 'dist' && cn.line === f.lid && cn.driving !== false);
   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

package/src/render/figmaIcons.ts

@@ -1,6 +1,7 @@
 /*
   Icons drawn in a Figma frame, kept exactly as Figma exports them (their own size, viewBox and colours) rather than
-  redrawn on the rail's 24 grid: the Pages panel's Delete and + Page (Figma 2548:101989).
+  redrawn on the rail's 24 grid: the Pages panel's Delete and + Page (Figma 2548:101989), and the link icon on a
+  linked measurement's chip (Figma 2795:77149), which the canvas draws from its paths (render/svgPath.ts).
 */
 
 /** Delete page: a trash can, white, for the red pill. */
@@ -20,3 +21,18 @@ export const PLUS_SVG = `<svg preserveAspectRatio="none" overflow="visible" styl
 <path id="Vector" d="M9.25 0.125C9.58152 0.125 9.89937 0.256791 10.1338 0.491211C10.3682 0.725631 10.5 1.04348 10.5 1.375V8H17.125C17.4565 8 17.7744 8.13179 18.0088 8.36621C18.2432 8.60063 18.375 8.91848 18.375 9.25C18.375 9.58152 18.2432 9.89937 18.0088 10.1338C17.7744 10.3682 17.4565 10.5 17.125 10.5H10.5V17.125C10.5 17.4565 10.3682 17.7744 10.1338 18.0088C9.89937 18.2432 9.58152 18.375 9.25 18.375C8.91848 18.375 8.60063 18.2432 8.36621 18.0088C8.13179 17.7744 8 17.4565 8 17.125V10.5H1.375C1.04348 10.5 0.725631 10.3682 0.491211 10.1338C0.256791 9.89937 0.125 9.58152 0.125 9.25C0.125 8.91848 0.256791 8.60063 0.491211 8.36621C0.725631 8.13179 1.04348 8 1.375 8H8V1.375C8 1.04348 8.13179 0.725631 8.36621 0.491211C8.60063 0.256791 8.91848 0.125 9.25 0.125Z" fill="#181A1C" stroke="#181A1C" stroke-width="0.25"/>
 </svg>`;
 export const PLUS_SIZE = { width: 18.5, height: 18.5 };
+
+/** Link: a chain link, dark grey, for the white badge on a linked measurement's chip. */
+export const LINK_SVG = `<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="link-svgrepo-com (2) 1" clip-path="url(#clip0_0_4)">
+<path id="Vector" d="M5.28769 1.15165C6.02508 0.414261 7.02519 0 8.06805 0C10.2396 0 12 1.76041 12 3.93198C12 4.97481 11.5858 5.97492 10.8484 6.71231L9.31065 8.25L8.25 7.18934L9.78772 5.65165C10.2438 5.19557 10.5 4.57698 10.5 3.93198C10.5 2.58884 9.41115 1.5 8.06805 1.5C7.42302 1.5 6.80444 1.75622 6.34835 2.21231L4.81066 3.75L3.75 2.68934L5.28769 1.15165Z" fill="#181A1C"/>
+<path id="Vector_2" d="M5.65165 9.78772L7.18934 8.25L8.25 9.31065L6.71231 10.8484C5.97492 11.5858 4.97481 12 3.93198 12C1.76041 12 0 10.2396 0 8.06805C0 7.0252 0.41426 6.02508 1.15165 5.28769L2.68934 3.75L3.75 4.81066L2.21231 6.34835C1.75622 6.80444 1.5 7.42302 1.5 8.06805C1.5 9.41115 2.58884 10.5 3.93198 10.5C4.57698 10.5 5.19557 10.2438 5.65165 9.78772Z" fill="#181A1C"/>
+<path id="Vector_3" d="M4.28039 8.78136L8.78038 4.28137L7.71973 3.2207L3.21973 7.72071L4.28039 8.78136Z" fill="#181A1C"/>
+</g>
+<defs>
+<clipPath id="clip0_0_4">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>`;
+export const LINK_SIZE = { width: 12, height: 12 };

package/src/render/hit.ts

@@ -6,12 +6,12 @@ import { roomValid } from '../model/sketch';
 import { page, SK } from '../model/store';
 import { edgePoint } from '../model/openings';
 import { elevOpen, wallBodyAt } from '../editor/elevation';
-import type { Note, OpeningEdge } from '../model/types';
+import type { LinkTarget, Note, OpeningEdge, Underlay } from '../model/types';
 import { cabinetFootprints } from '../model/facesolve';
 import { arcAngles, curveFrame, edgeId, OPENING_TICK_EXT, openingFrame, wallThick } from '../model/planGeom';
 import { noteLook, shapeOutline } from '../model/markup';
 import { smoothPolyline } from '../model/smooth';
-import { leaderPath, linkBox, mainT, noteHandles, noteTextBox, S, s2w, underlayH, underlayHandles, underlayLocal, type Xform } from './view';
+import { imageLinkBadge, leaderPath, linkBox, mainT, noteHandles, noteTextBox, S, s2w, underlayH, underlayHandles, underlayLocal, type Xform } from './view';
 
 /** The handle closest to (sx, sy) within `tol` px (small boxes put handles close together; take the nearest, not the first). */
 function nearestHandle<H extends { x: number; y: number }>(hs: H[], sx: number, sy: number, tol: number): H | null {
@@ -42,6 +42,20 @@ export function linkAt(sx: number, sy: number, touch = false): (Note & { link: N
   return null;
 }
 
+/**
+ * The expanded photo whose badge is under a screen point (its link icon, in its corner: a tap opens what it's for —
+ * a view-only one too), the top one. The badges are drawn over every image, so they're picked before any.
+ */
+export function imageLinkAt(sx: number, sy: number, touch = false): (Underlay & { link: LinkTarget }) | null {
+  if (!settings.layers.underlay || elevOpen()) return null;
+  const T = mainT(), ims = page().underlays;
+  for (let i = ims.length - 1; i >= 0; i--) {
+    const b = imageLinkBadge(T, ims[i]);
+    if (b && hyp(sx - b.x, sy - b.y) <= b.r + (touch ? 6 : 2)) return ims[i] as Underlay & { link: LinkTarget };
+  }
+  return null;
+}
+
 function notePointHit(n: Note, sx: number, sy: number, T: Xform, tol: number): boolean {
   if (n.type === 'link') return !!linkHit(T, n, sx, sy, tol);
   if (n.type === 'text') {
@@ -129,6 +143,9 @@ export function hitAny(sx: number, sy: number, { touch = false, only = null as s
       if (notePointHit(n, sx, sy, T, tol)) return { type: 'note', id: n.id };
     }
     if (!only) {
+      // an expanded photo's badge: a tap opens what it's for, a drag moves the photo
+      const lu = imageLinkAt(sx, sy, touch);
+      if (lu) return { type: 'underlay', id: lu.id, part: 'link' };
       // the topmost image under the point
       const [wx, wy] = s2w(sx, sy);
       for (let i = ims.length - 1; i >= 0; i--) {
@@ -145,7 +162,7 @@ export function hitAny(sx: number, sy: number, { touch = false, only = null as s
       const h = chips[i];
       if (h.weak) continue;
       if (sx >= h.x && sx <= h.x + h.w && sy >= h.y && sy <= h.y + h.h) {
-        if (h.kind === 'dim' || h.kind === 'pdim') return { type: 'dim', id: h.id, print: h.kind === 'pdim' };
+        if (h.kind === 'dim') return { type: 'dim', id: h.id };
         if (h.kind === 'cons') return { type: 'cons', id: h.id };
         if (h.kind === 'odim') return { type: 'odim', id: h.id, part: h.part };
         if (h.kind === 'room') return { type: 'room', id: h.id };
@@ -219,7 +236,7 @@ export function hitAny(sx: number, sy: number, { touch = false, only = null as s
     const [x, y] = S(T, g.o.x, g.o.y);
     const [wx, wy] = s2w(sx, sy);
     const th = Math.atan2(wy - g.o.y, wx - g.o.x);
-    const sweep = normAng(g.t1 - g.t0), at = normAng(th - g.t0);
+    const sweep = g.full ? 2 * Math.PI : normAng(g.t1 - g.t0), at = normAng(th - g.t0);
     const tw = sk.arcs[id].kind === 'wall' ? Math.max(0, ((sk.arcs[id].thick || 4.5) * T.s) / 2 - tol / 2) : 0;
     if (at <= sweep) consider('arc', id, Math.abs(hyp(x - sx, y - sy) - g.r * T.s) - tw);
   }