@reekon-tools/boldr-cad 1.4.0 → 1.6.0

package/src/react/saving.ts

@@ -32,10 +32,18 @@ function setState(s: CadSaveState): void {
   notify();
 }
 
-/** Start manual saving for the drawing open in `sync`; `listener` hears each change of state. */
+/**
+ * Start manual saving for the drawing open in `sync`; `listener` hears each change of state, and the first, 'saved',
+ * once the editor has mounted (announceSaveState). This runs as the editor first renders, and a host keeps the state in
+ * its own: React won't have one component set another's state while it renders.
+ */
 export function startManualSave(sync: CadSync, listener: ((s: CadSaveState) => void) | null): void {
   Object.assign(sv, { manual: true, state: 'saved', cleanSeq: ed.editSeq, sync, listener });
-  listener?.('saved');
+}
+
+/** Tell the host the state as it is now (the editor, once it has mounted). */
+export function announceSaveState(): void {
+  if (sv.manual) sv.listener?.(sv.state);
 }
 
 export function stopManualSave(): void {

package/src/react/store.ts

@@ -55,8 +55,11 @@ export const ui = sessionState(() => ({
   palette: false,
   /** what the tool just picked from the rail does (a note under the tabs that goes by itself); seq tells one pick from the next */
   toolTip: null as { text: string; seq: number } | null,
-  /** the slider open above the bar: the selected image's opacity, or how far it's turned; or the link tiles' size */
-  imgPop: null as null | 'opacity' | 'rotate' | 'tilesize',
+  /**
+   * what's open above the bar: the selected image's opacity or turn, or the link tiles' size (sliders), or Open's
+   * question (here, or side by side)
+   */
+  imgPop: null as null | 'opacity' | 'rotate' | 'tilesize' | 'open',
   /** the tool each shared place on the rail draws with (the last picked; editor/mode.ts TOOL_GROUPS), and the menu of
       a group's tools, open beside its place at x, y */
   picked: { shapes: 'line', marks: 'arrow' } as Record<string, string>,

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,52 @@ 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) {
+      // cropped: the picture whole, past the part that shows, clipped to it
+      const k = u.crop;
+      if (k) { c.beginPath(); c.rect(-w / 2, -hh / 2, w, hh); c.clip(); }
+      const fw = k ? w / (1 - k.l - k.r) : w, fh = k ? hh / (1 - k.t - k.b) : hh;
+      c.drawImage(im!, -w / 2 - (k ? k.l * fw : 0), -hh / 2 - (k ? k.t * fh : 0), fw, fh);
+    } 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.
+ * `selected`: the selected photos' badges, drawn with their outlines and handles (paintOverlay), or the rest, with the
+ * drawing. A device keeps the drawing as a picture while a photo is moved, sized, cropped or turned, and draws only
+ * the photos and the moving parts again: a badge kept with the drawing stayed where the photo had been.
+ */
+function drawImageLinks(c: C2D, T: Xform, selected: boolean): void {
+  if (!settings.layers.underlay) return;
+  const { W, H } = cvs;
+  for (const u of page().underlays) {
+    if (isSel('underlay', u.id) !== selected) continue;
+    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 +190,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 +414,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 +506,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 +543,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 +589,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 +642,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 +815,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 +847,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 +897,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 +967,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;
@@ -1068,7 +1117,7 @@ function drawSnap(c: C2D, T: Xform): void {
   const [x, y] = S(T, s.x, s.y);
   if (s.kind !== 'free' && s.kind !== 'grid') {
     c.lineWidth = 2; c.beginPath();
-    if (s.kind === 'point') c.arc(x, y, 8, 0, Math.PI * 2);
+    if (s.kind === 'point' || s.kind === 'facecorner') c.arc(x, y, 8, 0, Math.PI * 2);
     else if (s.kind === 'mid') { c.moveTo(x, y - 8); c.lineTo(x + 7, y + 5); c.lineTo(x - 7, y + 5); c.closePath(); }
     else if (s.kind === 'inter') { c.moveTo(x - 6, y - 6); c.lineTo(x + 6, y + 6); c.moveTo(x + 6, y - 6); c.lineTo(x - 6, y + 6); }
     else c.rect(x - 5, y - 5, 10, 10);
@@ -1162,7 +1211,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 +1218,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. A selected one's: paintOverlay)
+  drawImageLinks(ctx, T, false);
   drawNotes(ctx, T, sk);
   drawNoteSelection(ctx, T);
 }
@@ -1190,7 +1240,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);
@@ -1218,7 +1267,9 @@ function drawSurveyCursor(ctx: C2D, T: Xform): void {
 
 function paintOverlay(ctx: C2D, W: number, H: number, fixed: C2D = ctx): void {
   const T = mainT();
-  // a selected image's outline and handles: with the moving parts, as it's turned, moved or sized (over the drawing)
+  // a selected image's badge, outline and handles: with the moving parts, as it's turned, moved or sized (over the
+  // drawing; the badge under the handles, as it was under them kept with the drawing). The wall view has no photos.
+  if (!(elevOpen() && elev.frame)) drawImageLinks(ctx, T, true);
   drawUnderlaySelection(ctx, T);
   if (ed.preview) ed.preview(ctx, T);
   // (over the tool's preview — the templator's would-be edge runs into it — whatever tool is in hand)

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 };