@reekon-tools/boldr-cad 1.4.0 → 1.6.0

package/src/render/snap.ts

@@ -2,18 +2,57 @@ import { ed, type Guide, type Snap } from '../app/state';
 import { distSeg, hyp, norm2, projT, segInter } from '../model/geom';
 import { settings } from '../model/settings';
 import { SK } from '../model/store';
-import { gridSteps } from '../model/planGeom';
+import { edgeId, gridSteps } from '../model/planGeom';
+import { faceCorner, wallFace } from '../model/wallfaces';
+import type { Sketch, XY } from '../model/types';
 import { mainT, S, s2w } from './view';
 import { intoWall } from '../editor/elevation';
+import { drawsWalls } from '../editor/mode';
 
 export interface SnapOpts {
   touch?: boolean;
-  /** point ids to ignore (e.g. the point being dragged) */
+  /**
+   * point ids to ignore (e.g. the point being dragged) — and what moves with them: the lines they're an end of (their
+   * middles, where they cross others, a point on them) and the circles they're the centre of. Snapping to those would
+   * only hold a dragged point to its own line.
+   */
   exclude?: Set<string>;
   excludeLines?: Set<string>;
   /** start of the segment being drawn (enables H/V/perpendicular inference) */
   from?: string | null;
   prevLine?: string | null;
+  /**
+   * Onto walls' faces beside the pointer, and the corners where two meet. On unless walls are being drawn: walls join
+   * along their centrelines (and a wall's own corner, dragged, says so).
+   */
+  faces?: boolean;
+}
+
+/** Where two of `walls`' faces meet — an inside corner, or an outside one a face wraps — and the two edges there. */
+function faceCorners(sk: Sketch, walls: Set<string>): { x: number; y: number; refs: [string, string] }[] {
+  const out: { x: number; y: number; refs: [string, string] }[] = [];
+  for (const id of walls) {
+    for (const side of [1, -1] as const) {
+      for (const end of ['a', 'b'] as const) {
+        const p = faceCorner(sk, id, side, end);
+        if (!p) continue;
+        let other: string | null = null;
+        for (const w of walls) if (w !== id && (other = faceThrough(sk, w, p))) break;
+        if (other) out.push({ x: p.x, y: p.y, refs: [edgeId(id, side), other] });
+      }
+    }
+  }
+  return out;
+}
+
+/** The face of straight wall `id` that point `p` is on, between that face's corners (its edge id), if it's on one. */
+function faceThrough(sk: Sketch, id: string, p: XY): string | null {
+  const l = sk.lines[id], A = sk.points[l.a], B = sk.points[l.b], L = hyp(B.x - A.x, B.y - A.y);
+  if (L < 1e-9) return null;
+  const k = ((B.x - A.x) * (p.y - A.y) - (B.y - A.y) * (p.x - A.x)) / L, side = k > 0 ? 1 : -1;
+  if (Math.abs(Math.abs(k) - l.thick / 2) > 1e-6) return null;
+  const f = wallFace(sk, id, side), s = ((p.x - A.x) * (B.x - A.x) + (p.y - A.y) * (B.y - A.y)) / L;
+  return f && s >= f.s0 - 1e-6 && s <= f.s1 + 1e-6 ? edgeId(id, side) : null;
 }
 
 /** Snap a screen point: endpoints > midpoints/intersections > on line > H/V/perp guides > on circle > grid. In the wall view, never past the wall. */
@@ -93,20 +132,36 @@ function snapRaw(sx: number, sy: number, o: SnapOpts): Snap {
     const p = sk.points[ci.c];
     cand(p.x, p.y, 'point', ci.c, 0, 'Center');
   }
+  // straight walls near the pointer, for their faces: a face corner is a corner as an endpoint is (the nearer wins).
+  // Beside one (not over it), what's inside it — its centreline's middle, where something crosses its centreline — isn't
+  // snapped to: that's what landed lines half a wall's thickness inside it
+  const walls = new Set<string>(), beside = new Set<string>();
+  if (o.faces ?? !drawsWalls()) {
+    for (const id in sk.lines) {
+      const l = sk.lines[id];
+      if (l.kind !== 'wall' || l.constr || !(l.thick > 0) || ex.has(l.a) || ex.has(l.b) || o.excludeLines?.has(id)) continue;
+      const A = sk.points[l.a], B = sk.points[l.b], [ax, ay] = S(T, A.x, A.y), [bx, by] = S(T, B.x, B.y);
+      if (distSeg({ x: sx, y: sy }, { x: ax, y: ay }, { x: bx, y: by }) >= tol * 3 + (l.thick / 2) * T.s) continue;
+      walls.add(id);
+      const L = hyp(B.x - A.x, B.y - A.y);
+      if (L > 1e-9 && Math.abs((B.x - A.x) * (wy - A.y) - (B.y - A.y) * (wx - A.x)) / L > l.thick / 2) beside.add(id);
+    }
+    for (const c of faceCorners(sk, walls)) cand(c.x, c.y, 'facecorner', c.refs, 0, 'Face corner');
+  }
   const near: string[] = [];
   for (const id in sk.lines) {
     if (o.excludeLines && o.excludeLines.has(id)) continue;
     const l = sk.lines[id];
-    if (ex.has(l.a) && ex.has(l.b)) continue;
+    if (ex.has(l.a) || ex.has(l.b)) continue;
     const A = sk.points[l.a], B = sk.points[l.b];
-    cand((A.x + B.x) / 2, (A.y + B.y) / 2, 'mid', id, 1, 'Midpoint');
+    if (!beside.has(id)) cand((A.x + B.x) / 2, (A.y + B.y) / 2, 'mid', id, 1, 'Midpoint');
     const [ax, ay] = S(T, A.x, A.y), [bx, by] = S(T, B.x, B.y);
-    if (distSeg({ x: sx, y: sy }, { x: ax, y: ay }, { x: bx, y: by }) < tol * 3) near.push(id);
+    if (walls.has(id) || distSeg({ x: sx, y: sy }, { x: ax, y: ay }, { x: bx, y: by }) < tol * 3) near.push(id);
   }
   for (let i = 0; i < near.length; i++) {
     for (let j = i + 1; j < near.length; j++) {
       const l1 = sk.lines[near[i]], l2 = sk.lines[near[j]];
-      if (l1.a === l2.a || l1.a === l2.b || l1.b === l2.a || l1.b === l2.b) continue;
+      if (l1.a === l2.a || l1.a === l2.b || l1.b === l2.a || l1.b === l2.b || beside.has(near[i]) || beside.has(near[j])) continue;
       const r = segInter(sk.points[l1.a], sk.points[l1.b], sk.points[l2.a], sk.points[l2.b]);
       if (r) cand(r.x, r.y, 'inter', [near[i], near[j]], 1, 'Intersection');
     }
@@ -117,15 +172,27 @@ function snapRaw(sx: number, sy: number, o: SnapOpts): Snap {
   }
   // on a line, near the pointer (checked before the alignment guides: a line under the pointer wins over lining up with
   // a point elsewhere — where both apply, the snap is where the guide crosses the line)
-  let bestL: { d: number; x: number; y: number; id: string } | null = null;
+  // (a wall with the pointer beside it, not over it: its face on that side, between the face's corners — t0 to t1 of
+  // the face's own A → B, which is the centreline's moved over)
+  let bestL: { d: number; x: number; y: number; id: string; A: XY; B: XY; t0: number; t1: number; face?: 1 | -1 } | null = null;
   for (const id of near) {
-    const l = sk.lines[id], A = sk.points[l.a], B = sk.points[l.b];
+    const l = sk.lines[id];
+    let A: XY = sk.points[l.a], B: XY = sk.points[l.b], t0 = 0, t1 = 1, face: 1 | -1 | undefined;
+    if (walls.has(id)) {
+      const L = hyp(B.x - A.x, B.y - A.y), k = ((B.x - A.x) * (wy - A.y) - (B.y - A.y) * (wx - A.x)) / L, side = k > 0 ? 1 : -1;
+      const f = Math.abs(k) > l.thick / 2 ? wallFace(sk, id, side) : null;
+      if (f) {
+        const nx = (-(B.y - A.y) / L) * side * (l.thick / 2), ny = ((B.x - A.x) / L) * side * (l.thick / 2);
+        A = { x: A.x + nx, y: A.y + ny }; B = { x: B.x + nx, y: B.y + ny };
+        t0 = f.s0 / L; t1 = f.s1 / L; face = side;
+      }
+    }
     const t = projT(A, B, { x: wx, y: wy });
-    if (t < 0 || t > 1) continue;
+    if (t < t0 || t > t1) continue;
     const fx = A.x + (B.x - A.x) * t, fy = A.y + (B.y - A.y) * t;
     const [qx, qy] = S(T, fx, fy);
     const d = hyp(qx - sx, qy - sy);
-    if (d < tol && (!bestL || d < bestL.d)) bestL = { d, x: fx, y: fy, id };
+    if (d < tol && (!bestL || d < bestL.d)) bestL = { d, x: fx, y: fy, id, A, B, t0, t1, face };
   }
   let x = wx, y = wy, kind: Snap['kind'] = 'free';
   const guides: Guide[] = [];
@@ -142,31 +209,33 @@ function snapRaw(sx: number, sy: number, o: SnapOpts): Snap {
   }
   if (bestL) {
     // a line under the pointer: on it — where a guide crosses it, if one does (level with the start, and on the line)
-    const l = sk.lines[bestL.id], A = sk.points[l.a], B = sk.points[l.b], dx = B.x - A.x, dy = B.y - A.y;
+    const on = bestL, { A, B, t0, t1 } = on, dx = B.x - A.x, dy = B.y - A.y;
+    const onIt = (x: number, y: number, guides: Guide[]): Snap =>
+      finish(on.face ? { x, y, kind: 'onface', ref: edgeId(on.id, on.face), label: 'On face', guides } : { x, y, kind: 'online', ref: on.id, label: 'On line', guides });
     const g = gy && Math.abs(dy) > 1e-9 ? { t: (gy.y - A.y) / dy, h: gy } : gx && Math.abs(dx) > 1e-9 ? { t: (gx.x - A.x) / dx, v: gx } : null;
-    if (g && g.t >= 0 && g.t <= 1) {
+    if (g && g.t >= t0 && g.t <= t1) {
       const ix = A.x + dx * g.t, iy = A.y + dy * g.t, [qx, qy] = S(T, ix, iy);
       if (hyp(qx - sx, qy - sy) < tol * 1.5) {
         const gd = 'h' in g ? g.h! : g.v!, H = 'h' in g;
-        return finish({ x: ix, y: iy, kind: 'online', ref: bestL.id, label: 'On line', guides: [H ? { x1: ix - 1, y1: iy, x2: ix + 1, y2: iy, kind: 'H', from: gd.from, label: gd.own ? 'Horizontal' : 'Aligned' } : { x1: ix, y1: iy - 1, x2: ix, y2: iy + 1, kind: 'V', from: gd.from, label: gd.own ? 'Vertical' : 'Aligned' }] });
+        return onIt(ix, iy, [H ? { x1: ix - 1, y1: iy, x2: ix + 1, y2: iy, kind: 'H', from: gd.from, label: gd.own ? 'Horizontal' : 'Aligned' } : { x1: ix, y1: iy - 1, x2: ix, y2: iy + 1, kind: 'V', from: gd.from, label: gd.own ? 'Vertical' : 'Aligned' }]);
       }
     }
     // on the grid, as far as the line allows: where it crosses the grid line nearest (along a level or plumb line,
     // the grid point on it)
     if (st) {
-      const on = bestL, near2 = (c: { x: number; y: number }) => hyp(c.x - on.x, c.y - on.y);
+      const near2 = (c: { x: number; y: number }) => hyp(c.x - on.x, c.y - on.y);
       const opts: { x: number; y: number; t: number; axis: 'x' | 'y' }[] = [];
       if (Math.abs(dx) > 1e-9) { const gv = onGrid(on.x, st, was?.x), t = (gv - A.x) / dx; opts.push({ x: gv, y: A.y + dy * t, t, axis: 'x' }); }
       if (Math.abs(dy) > 1e-9) { const gv = onGrid(on.y, st, was?.y), t = (gv - A.y) / dy; opts.push({ x: A.x + dx * t, y: gv, t, axis: 'y' }); }
       const pick = opts
-        .filter(c => { const [qx, qy] = S(T, c.x, c.y); return c.t >= 0 && c.t <= 1 && hyp(qx - sx, qy - sy) < tol * 1.5; })
+        .filter(c => { const [qx, qy] = S(T, c.x, c.y); return c.t >= t0 && c.t <= t1 && hyp(qx - sx, qy - sy) < tol * 1.5; })
         .sort((a, b) => near2(a) - near2(b))[0];
       if (pick) {
         if (pick.axis === 'x') usedX = pick.x; else usedY = pick.y;
-        return finish({ x: pick.x, y: pick.y, kind: 'online', ref: on.id, label: 'On line', guides: [] });
+        return onIt(pick.x, pick.y, []);
       }
     }
-    return finish({ x: bestL.x, y: bestL.y, kind: 'online', ref: bestL.id, label: 'On line', guides: [] });
+    return onIt(on.x, on.y, []);
   }
   if (gy) { y = gy.y; guides.push({ x1: wx - 1, y1: gy.y, x2: wx + 1, y2: gy.y, kind: 'H', from: gy.from, label: gy.own ? 'Horizontal' : 'Aligned' }); }
   if (gx) { x = gx.x; guides.push({ x1: gx.x, y1: wy - 1, x2: gx.x, y2: wy + 1, kind: 'V', from: gx.from, label: gx.own ? 'Vertical' : 'Aligned' }); }
@@ -186,6 +255,7 @@ function snapRaw(sx: number, sy: number, o: SnapOpts): Snap {
   if (!guides.length) {
     for (const id in sk.circles) {
       const ci = sk.circles[id], o2 = sk.points[ci.c];
+      if (ex.has(ci.c)) continue;
       const d = hyp(wx - o2.x, wy - o2.y);
       if (Math.abs(d - ci.r) * T.s < tol && d > 1e-6) {
         return finish({ x: o2.x + ((wx - o2.x) / d) * ci.r, y: o2.y + ((wy - o2.y) / d) * ci.r, kind: 'oncircle', ref: id, label: 'On circle', guides: [] });

package/src/render/svgPath.ts

@@ -0,0 +1,95 @@
+import type { DrawCtx } from './ctx';
+
+/*
+  An icon kept exactly as Figma exports it (render/figmaIcons.ts, render/tileIcons.ts), drawn on the canvas, where there's
+  no SVG: its paths' `d` replayed as canvas calls, each filled in its own colour, and stroked over its fill where it has a
+  stroke too (the CAD badge). Figma writes absolute M, L, H, V, C and Z, and that's all this reads: any other command, or
+  a path with no fill, throws, so an icon exported some other way fails rather than drawing wrong — when the renderer
+  loads (it reads them then), and in tests/unit/linked-chip.test.ts and links-badges.test.ts. Not read: a <rect> (an
+  icon's tile behind its glyph: the caller draws that) and a fill rule (none of these icons has one).
+*/
+
+export type PathOp = ['M' | 'L', number, number] | ['C', number, number, number, number, number, number] | ['Z'];
+
+export interface SvgIcon {
+  /** the viewBox: its origin and size */
+  x: number; y: number; w: number; h: number;
+  paths: { ops: PathOp[]; fill: string; stroke?: { color: string; width: number } }[];
+}
+
+const TOKEN = /[A-Za-z]|-?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?/g;
+const COMMANDS = new Set(['M', 'L', 'H', 'V', 'C', 'Z']);
+
+/** A path's `d` as moves, lines and cubic curves (H and V become lines). */
+export function parsePath(d: string): PathOp[] {
+  const tk = d.match(TOKEN) ?? [], out: PathOp[] = [];
+  let i = 0, x = 0, y = 0, sx = 0, sy = 0;
+  const num = (): number => {
+    const n = Number(tk[i++]);
+    if (!Number.isFinite(n)) throw new Error('svgPath: a number expected in "' + d + '"');
+    return n;
+  };
+  while (i < tk.length) {
+    const cmd = tk[i++];
+    if (!COMMANDS.has(cmd)) throw new Error('svgPath: unsupported command ' + cmd);
+    if (cmd === 'Z') { out.push(['Z']); x = sx; y = sy; continue; }
+    // (a command's numbers can repeat it: pairs after M's first are lines)
+    let first = true;
+    do {
+      if (cmd === 'M' || cmd === 'L') {
+        x = num(); y = num();
+        if (cmd === 'M' && first) { out.push(['M', x, y]); sx = x; sy = y; } else out.push(['L', x, y]);
+      } else if (cmd === 'H') { x = num(); out.push(['L', x, y]); }
+      else if (cmd === 'V') { y = num(); out.push(['L', x, y]); }
+      else {
+        const a = num(), b = num(), c = num(), e = num();
+        x = num(); y = num();
+        out.push(['C', a, b, c, e, x, y]);
+      }
+      first = false;
+    } while (i < tk.length && !/^[A-Za-z]$/.test(tk[i]));
+  }
+  return out;
+}
+
+/** Trace parsed path ops on `c` (the caller begins the path, then fills it). */
+export function tracePath(c: DrawCtx, ops: PathOp[]): void {
+  for (const o of ops) {
+    if (o[0] === 'M') c.moveTo(o[1], o[2]);
+    else if (o[0] === 'L') c.lineTo(o[1], o[2]);
+    else if (o[0] === 'C') c.bezierCurveTo(o[1], o[2], o[3], o[4], o[5], o[6]);
+    else c.closePath();
+  }
+}
+
+/** An exported SVG, read once: its viewBox and its filled paths (and their strokes), in order. */
+export function svgIcon(svg: string): SvgIcon {
+  const vb = /<svg\b[^>]*\sviewBox="([^"]*)"/.exec(svg)?.[1].trim().split(/[\s,]+/).map(Number);
+  if (!vb || vb.length !== 4 || vb.some(n => !Number.isFinite(n))) throw new Error('svgPath: an SVG without a viewBox');
+  const paths = [...svg.matchAll(/<path\b([^>]*)>/g)].map(([, attrs]) => {
+    const d = /\sd="([^"]*)"/.exec(attrs)?.[1], fill = /\sfill="([^"]*)"/.exec(attrs)?.[1];
+    if (!d || !fill || fill === 'none') throw new Error('svgPath: only filled paths are drawn');
+    const stroke = /\sstroke="([^"]*)"/.exec(attrs)?.[1], width = Number(/\sstroke-width="([^"]*)"/.exec(attrs)?.[1] ?? 1);
+    return { ops: parsePath(d), fill, ...(stroke && stroke !== 'none' ? { stroke: { color: stroke, width } } : {}) };
+  });
+  return { x: vb[0], y: vb[1], w: vb[2], h: vb[3], paths };
+}
+
+/**
+ * An icon `size` across (its longer side), its top left at x, y: each path filled (and stroked, where it is) in its own
+ * colour, or all in `color`. `key` names it where the engine keeps shapes (each path is described once, then moved into
+ * place): one key to an icon.
+ */
+export function drawSvgIcon(c: DrawCtx, icon: SvgIcon, key: string, x: number, y: number, size: number, color?: string): void {
+  const u = size / Math.max(icon.w, icon.h);
+  c.save();
+  c.translate(x, y); c.scale(u, u); c.translate(-icon.x, -icon.y);
+  icon.paths.forEach(({ ops, fill, stroke }, i) => {
+    if (c.shape) c.shape('svg ' + key + ' ' + i, 0, 0, cc => tracePath(cc, ops));
+    else { c.beginPath(); tracePath(c, ops); }
+    c.fillStyle = color ?? fill; c.fill();
+    // (its width in the icon's own units: the context is scaled to it; SVG's own joins and caps)
+    if (stroke) { c.lineWidth = stroke.width; c.lineJoin = 'miter'; c.lineCap = 'butt'; c.strokeStyle = color ?? stroke.color; c.stroke(); }
+  });
+  c.restore();
+}

package/src/render/tileIcons.ts

@@ -0,0 +1,75 @@
+/*
+  The object tiles' icons, exactly as Figma exports them (render/svgPath.ts draws them from their own paths): the
+  badge glyphs of "Object Tile Icons" (Figma 704:23628, used by the tiles 657:8732) and, for kinds with no badge there,
+  the add-object sheet's own (1059:79267). Each badge is a coloured square with one of these in white; the hues are the
+  sheet's (the app's ActionBottomSheet ACTION map), so an object type's colour is the same everywhere.
+*/
+
+/** File (a PDF or any other document): 2803:81886. */
+export const BADGE_FILE_SVG = `<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="10" height="12.7932" viewBox="0 0 10 12.7932" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M9.58955 2.56397L8.15032 1.12473C7.6178 0.676972 7.3049 0 6.43923 0H1.40192C0.628998 0 0 0.628998 0 1.40192V11.3913C0 12.1642 0.628998 12.7932 1.40192 12.7932H8.59808C9.371 12.7932 10 12.1642 10 11.3913V3.56077C10 3.18763 9.85075 2.82516 9.58955 2.56397ZM4.06183 3.37953H5.93817C6.23134 3.37953 6.47122 3.6194 6.47122 3.91258C6.47122 4.21109 6.23134 4.44563 5.93817 4.44563H4.06183C3.76866 4.44563 3.52878 4.21109 3.52878 3.91258C3.52878 3.6194 3.76866 3.37953 4.06183 3.37953ZM7.60128 9.41365H2.39872C2.10554 9.41365 1.86567 9.17377 1.86567 8.8806C1.86567 8.58209 2.10554 8.34755 2.39872 8.34755H7.60128C7.89446 8.34755 8.13433 8.58209 8.13433 8.8806C8.13433 9.17377 7.89446 9.41365 7.60128 9.41365ZM7.60128 6.92964H2.39872C2.10554 6.92964 1.86567 6.68977 1.86567 6.39659C1.86567 6.10341 2.10554 5.86354 2.39872 5.86354H7.60128C7.89446 5.86354 8.13433 6.10341 8.13433 6.39659C8.13433 6.68977 7.89446 6.92964 7.60128 6.92964Z" fill="white"/>
+</svg>`;
+
+/** Construction calculator: 2803:81320. */
+export const BADGE_CON_CALC_SVG = `<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="14.1429" height="11" viewBox="0 0 14.1429 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M0 8.80008C0.529231 8.80008 1.05846 8.80008 1.58769 8.80008C1.98819 8.80008 2.39346 8.80008 2.79396 8.80008C2.97991 8.80008 2.97991 8.80008 2.97991 8.62145C2.97991 7.74242 2.97991 6.8681 2.97991 5.98907C2.97991 5.89505 3.00851 5.88095 3.09433 5.88095C4.01453 5.88095 4.92996 5.88095 5.85015 5.88095C5.9312 5.88095 5.95981 5.85275 5.95981 5.77754C5.95981 5.68352 5.95981 5.58951 5.95981 5.49549C5.95981 4.66817 5.95981 3.84555 5.95981 3.01823C5.95981 2.94772 5.97888 2.93362 6.0504 2.93362C6.97536 2.93362 7.90033 2.93362 8.82529 2.93362C8.90634 2.93362 8.93018 2.91012 8.93018 2.83021C8.93018 1.91827 8.93018 1.01104 8.93018 0.0991062C8.93018 0.0238952 8.94448 0.000391724 9.02554 0.000391724C10.6895 0.000391724 12.3535 0.000391724 14.0175 0.000391724C14.1653 0.000391724 14.1414 -0.0137103 14.1414 0.12731C14.1414 0.790107 14.1414 1.4576 14.1414 2.1204C14.1414 2.19091 14.1128 2.20031 14.0556 2.20031C13.1497 2.20031 12.2486 2.20031 11.3427 2.20031C11.2251 2.20031 11.1663 2.25986 11.1663 2.37894C11.1663 3.25797 11.1663 4.1417 11.1663 5.02073C11.1663 5.10534 11.1425 5.11944 11.0614 5.11944C10.1412 5.11944 9.21625 5.11944 8.29606 5.11944C8.20547 5.11944 8.1864 5.14764 8.1864 5.22756C8.1864 6.05958 8.1864 6.8963 8.1864 7.72832C8.1864 7.78003 8.1864 7.83174 8.1864 7.88344C8.18957 7.99939 8.13395 8.05737 8.01952 8.05737C7.1184 8.05737 6.21727 8.05737 5.31615 8.05737C5.2351 8.05737 5.21126 8.08087 5.21126 8.16078C5.21126 9.04921 5.21126 9.93764 5.21126 10.8261C5.21126 10.8825 5.22079 10.9436 5.19695 11C3.49007 11 1.78318 11 0.0810534 11C0.0238392 11 0 10.9953 0 10.9248C0 10.215 0 9.50518 0 8.79068L0 8.80008Z" fill="white"/>
+</svg>`;
+
+/** Conversion: 704:23616. */
+export const BADGE_CONVERSION_SVG = `<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="12" height="10.5869" viewBox="0 0 12 10.5869" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M11.1895 4.50438H0.336525C0.151436 4.50438 0 4.34136 0 4.14212V2.78363C0 2.58439 0.151436 2.42137 0.336525 2.42137H7.3497L7.34299 0.363716C7.34299 0.0413019 7.70307 -0.121716 7.91509 0.10651L11.425 3.88491C11.6371 4.11314 11.4856 4.50076 11.1895 4.50076V4.50438Z" fill="white"/>
+<path id="Vector_2" d="M0.810528 6.08256H11.6635C11.8486 6.08256 12 6.24558 12 6.44483V7.80331C12 8.00256 11.8486 8.16557 11.6635 8.16557H4.65029L4.65701 10.2232C4.65701 10.5456 4.29695 10.7087 4.08493 10.4804L0.574976 6.70203C0.362965 6.47381 0.514385 6.08619 0.810528 6.08619V6.08256Z" fill="white"/>
+</g>
+</svg>`;
+
+/** Note: 2803:80267. */
+export const BADGE_NOTE_SVG = `<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M9.28791 4.67696C8.86519 4.67696 8.52701 4.31881 8.52701 3.8806V0H5.18546C4.64196 0 4.20312 0.459245 4.20312 1.02807V2.65871L7.7661 6.38763L7.9835 6.61515L7.99961 6.9396L8.0761 8.46488C8.0922 8.73876 7.99558 9.01264 7.81441 9.21489C7.63324 9.41714 7.37558 9.5309 7.1139 9.5309H7.08571H7.06558L5.60818 9.45085L5.29819 9.43398L5.08078 9.20646L4.20312 8.28792V10.9719C4.20312 11.5407 4.64196 12 5.18546 12H12.0175C12.561 12 12.9998 11.5407 12.9998 10.9719V4.68118H9.29194L9.28791 4.67696Z" fill="white"/>
+<path id="Vector_2" d="M10.0246 3.59367H12.8468L9.55762 0.151263V3.10492C9.55762 3.37458 9.76697 3.59367 10.0246 3.59367Z" fill="white"/>
+<path id="Vector_3" d="M1.36816 4.12827L4.19841 7.09034V3.84595L2.91816 2.50607L1.3883 4.10721L1.36816 4.12827Z" fill="white"/>
+<path id="Vector_4" d="M5.64405 8.60391L7.10145 8.68396C7.10145 8.68396 7.10548 8.68396 7.1095 8.68396C7.2021 8.68396 7.27457 8.60389 7.27054 8.50698L7.19405 6.9817L4.19873 3.85108V7.09547L5.64405 8.60813V8.60391Z" fill="white"/>
+<path id="Vector_5" d="M1.48558 1.04862C1.44934 1.04862 1.41311 1.06547 1.3809 1.09918L0.0442827 2.47698C-2.8256e-06 2.52332 0 2.56547 0 2.59075C0 2.61603 -2.8256e-06 2.65817 0.0442827 2.70452L0.797139 3.49244L2.327 1.89132L1.57415 1.1034C1.55402 1.06969 1.52181 1.05284 1.48558 1.05284V1.04862Z" fill="white"/>
+<path id="Vector_6" d="M0.796875 3.48782L0.82103 3.5131L2.3509 1.91198L2.32674 1.8867L0.796875 3.48782Z" fill="white"/>
+</g>
+</svg>`;
+
+/** CAD drawing: 2803:81241 (filled, and stroked over its fill). */
+export const BADGE_CAD_SVG = `<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="13.4887" height="14.4887" viewBox="0 0 13.4887 14.4887" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M11.6357 2.49703L8.21928 0.62548C7.76732 0.376265 7.25704 0.244328 6.7419 0.244328C6.22676 0.244328 5.71648 0.376265 5.26452 0.62548L1.85293 2.49703C0.856667 3.03944 0.244328 4.08517 0.244328 5.22373V9.26981C0.244328 10.4035 0.856667 11.4492 1.85293 11.9916L5.26452 13.8681C5.71648 14.1124 6.22676 14.2443 6.7419 14.2443C7.25704 14.2443 7.76732 14.1124 8.21928 13.8681L11.6357 11.9916C12.6271 11.4492 13.2443 10.4035 13.2443 9.26981V5.22373C13.2443 4.08517 12.6271 3.03944 11.6357 2.49703ZM6.2948 13.4136L2.28059 11.2049C1.57106 10.8188 1.13367 10.0761 1.13367 9.26981V4.28551L6.2948 7.48621V13.4136ZM1.71685 3.59162L5.69218 1.41222C6.01293 1.2363 6.37741 1.14346 6.7419 1.14346C7.10639 1.14346 7.46601 1.2363 7.78676 1.41222L11.7621 3.59162L6.7419 6.70925L1.71685 3.59162ZM12.3501 9.26981C12.3501 10.0761 11.9127 10.8188 11.2081 11.2049L7.189 13.4136V7.48621L12.3501 4.28551V9.26981Z" fill="white" stroke-width="0.488656" stroke-miterlimit="10" stroke="white"/>
+</svg>`;
+
+/** Label printer: 2803:81633. */
+export const BADGE_LABEL_SVG = `<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="13" height="12.5" viewBox="0 0 13 12.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M10.9488 0H2.06055V2.70494H10.9488V0Z" fill="white"/>
+<path id="Vector_2" d="M12.1295 3.67403H0.870457C0.389299 3.67403 0 4.06232 0 4.54222V9.3326C0 9.81251 0.489906 10.2008 0.971064 10.2008H2.05585V12.5H10.9441V10.2008H12.1295C12.6063 10.2008 13 9.81251 13 9.3326V4.54222C13 4.06668 12.6107 3.67403 12.1295 3.67403ZM9.58378 11.1344H3.42497V7.9234H9.58378V11.1344ZM11.4166 5.74636C11.141 5.74636 10.9179 5.52385 10.9179 5.249C10.9179 4.97414 11.1454 4.75166 11.4166 4.75166C11.6878 4.75166 11.9152 4.97414 11.9152 5.249C11.9152 5.52385 11.6921 5.74636 11.4166 5.74636Z" fill="white"/>
+</g>
+</svg>`;
+
+/** The sheet's Sketch, on its 70 tile (the tile's rect is drawn apart). */
+export const KEY_SKETCH_SVG = `<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Drawer Tiles">
+<rect width="70" height="70" rx="10" fill="#EFB107"/>
+<path id="Vector" d="M45.6741 49.9898L44.8257 46.0647L35.3709 49.3151C34.4203 49.6422 33.3777 49.356 32.7235 48.5894C32.0693 47.8228 31.9569 46.7393 32.4271 45.8603L35.1869 40.6576L27.0302 45.155C24.8019 46.3918 21.991 45.7581 20.4884 43.7036C18.9756 41.6286 19.3334 38.7053 21.2959 37.0494L41.5651 20L44.7031 23.7308L24.4339 40.7802L40.0114 32.4293C40.962 31.908 42.1273 32.0715 42.9041 32.8279C43.6707 33.5843 43.8547 34.7598 43.3436 35.7104L39.6332 42.6916L45.8377 40.5553C46.4918 40.3203 47.2176 40.3918 47.8308 40.7393C48.4441 41.0869 48.8734 41.6695 49.0165 42.3543L50.4475 48.9676L45.6741 50V49.9898Z" fill="white"/>
+</g>
+</svg>`;
+
+/** The sheet's Camera: black lens over a white body. */
+export const KEY_CAMERA_SVG = `<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="36" height="26.8881" viewBox="0 0 36 26.8881" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M22.2038 14.9415C22.2038 17.2728 20.3321 19.1445 18.0008 19.1445C15.6696 19.1445 13.7866 17.2616 13.7978 14.9303C13.7978 12.6215 15.692 10.7497 18.0008 10.7497C20.3097 10.7497 22.215 12.6439 22.2038 14.9415Z" fill="black"/>
+<path id="Vector_2" d="M33.6912 3.46344H29.3313C28.4682 3.46344 27.6949 2.98152 27.2914 2.21937L26.7758 1.24425C26.3836 0.48211 25.599 0.000183947 24.736 0.000183947H11.2304C10.3786 0.000183947 9.59402 0.482133 9.19054 1.23307L8.67497 2.23056C8.27148 2.98149 7.49813 3.45223 6.64633 3.46344H2.30884C1.03113 3.46344 0 4.50579 0 5.7835L0.0224159 24.5456C0.0224159 25.8345 1.07596 26.8881 2.36488 26.8881H33.6687C34.9577 26.8881 36 25.8345 36 24.5456V5.77228C36 4.49457 34.9689 3.46344 33.6912 3.46344ZM18 22.4385C13.8643 22.4385 10.5131 19.0874 10.5131 14.9516C10.5131 10.8159 13.8643 7.45348 18 7.45348C22.1357 7.45348 25.4869 10.8159 25.4869 14.9516C25.4869 19.0874 22.1357 22.4385 18 22.4385Z" fill="white"/>
+<path id="Vector_3" d="M22.2038 14.9415C22.2038 17.2728 20.3321 19.1445 18.0008 19.1445C15.6696 19.1445 13.7866 17.2616 13.7978 14.9303C13.7978 12.6215 15.692 10.7497 18.0008 10.7497C20.3097 10.7497 22.215 12.6439 22.2038 14.9415Z" fill="black"/>
+<path id="Vector_4" d="M22.2038 14.9415C22.2038 17.2728 20.3321 19.1445 18.0008 19.1445C15.6696 19.1445 13.7866 17.2616 13.7978 14.9303C13.7978 12.6215 15.692 10.7497 18.0008 10.7497C20.3097 10.7497 22.215 12.6439 22.2038 14.9415Z" fill="black"/>
+</g>
+</svg>`;
+
+/** The sheet's Measurement, on its 70 tile (the tile's rect is drawn apart). */
+export const KEY_MEASUREMENT_SVG = `<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Drawer Tiles">
+<rect width="70" height="70" rx="10" fill="#0066FF"/>
+<path id="Vector" d="M51.109 29.5365L29.5248 51.1207C28.3524 52.2931 26.4414 52.2931 25.2572 51.1207L18.8793 44.7428C17.7069 43.5703 17.7069 41.6593 18.8793 40.4752L19.7938 39.5607L25.1166 44.8834L26.6407 43.3593L21.3179 38.0365L24.3545 35L26.6407 37.2862L28.1648 35.7621L25.8786 33.4759L28.9152 30.4393L34.2379 35.7621L35.7621 34.2379L30.4393 28.9152L33.4759 25.8786L35.7621 28.1648L37.2862 26.6407L35 24.3545L38.0366 21.3179L43.3593 26.6407L44.8834 25.1165L39.5607 19.7938L40.4752 18.8793C41.6476 17.7069 43.5586 17.7069 44.7428 18.8793L51.1207 25.2572C52.2931 26.4297 52.2931 28.3407 51.1207 29.5248L51.109 29.5365Z" fill="white"/>
+</g>
+</svg>`;

package/src/render/view.ts

@@ -3,7 +3,7 @@ import { faceEdit } from '../model/faces';
 import { page, SK } from '../model/store';
 import type { Note, Sketch, Underlay, View } from '../model/types';
 import { CLOSED_SHAPES, isSegment, NOTE_TEXT_SIZE, noteTextIn } from '../model/markup';
-import { LINK_FULL_PX, LINK_PIN_PX, LINK_TILE_PX, linkSide } from '../model/links';
+import { LINK_FULL_PX, LINK_PIN_PX, LINK_TILE_PX, linkInfoOf, linkSide } from '../model/links';
 import { draw } from './draw';
 import { onSessionReset, sessionState } from '../model/session';
 import { refreshDrawerSoon } from '../editor/ports';
@@ -117,10 +117,13 @@ export function fitView(): void {
 /** Size of the wall view's key plan (top right), pixels. */
 export const keyPlanSize = (W: number): number => Math.min(150, Math.max(96, W * 0.16));
 
+/** Where an image's picture is: its own, or a photo of the job's expanded from its tile, the one the host shows it as. */
+export const underlaySrc = (u: Underlay): string => (u.link ? linkInfoOf(u.link)?.thumbUrl ?? '' : u.src);
+
 /** Height of an image underlay in inches: its own, or from the picture's aspect ratio. */
 export function underlayH(u: Underlay): number {
   if (u.h) return u.h;
-  const img = imgCache(u.src);
+  const img = imgCache(underlaySrc(u));
   return img && img.naturalWidth ? (u.w * img.naturalHeight) / img.naturalWidth : u.w * 0.7;
 }
 
@@ -162,6 +165,20 @@ export function underlayHandles(T: Xform, u: Underlay): { part: HandlePart; x: n
   return HANDLES.map(([part, i, j]) => { const p = underlayAt(u, i * hw, j * hh), [x, y] = S(T, p.x, p.y); return { part, x, y, ang }; });
 }
 
+/**
+ * An expanded photo's badge (its link icon, in a white disc, 2r in from its top-right corner, as Skia's): its middle
+ * and radius on the screen. One size at any zoom, as the editor's chrome is (the user's call, 2026-10-26), smaller on a
+ * photo too small for it, and none on one smaller still. Whole pixels, so a device keeps a few shapes, not one a step.
+ */
+export function imageLinkBadge(T: Xform, u: Underlay): { x: number; y: number; r: number } | null {
+  if (!u.link) return null;
+  const h = underlayH(u), r = Math.min(IMAGE_BADGE_R, Math.floor(Math.min(u.w, h) * T.s * 0.1));
+  if (r < IMAGE_BADGE_MIN) return null;
+  const p = underlayAt(u, u.w / 2 - (2 * r) / T.s, h / 2 - (2 * r) / T.s), [x, y] = S(T, p.x, p.y);
+  return { x, y, r };
+}
+const IMAGE_BADGE_R = 15, IMAGE_BADGE_MIN = 7;
+
 /** A world-space box (y up: top > bottom). */
 export interface Box { left: number; right: number; top: number; bottom: number }
 
@@ -218,16 +235,28 @@ export function noteTextBox(T: Xform, n: Note, c: TextMeasure = textMeasure()) {
   return { x, y: mid - 14 * k, w, h: 28 * k, mid, k, size };
 }
 
-/** How much a link's tile shows on the screen: all of it, its picture or icon alone, or a pin. */
+/**
+ * How much a link's tile shows on the screen: all of it — or, once its name won't fit (under LINK_FULL_PX), a file's
+ * goes straight to its icon alone, a pin (the user's call, 2026-10-29: "this middle stage is not needed for object
+ * tiles - it can just jump straight to icon only"); a photo's or a sketch's is its picture alone down to the pin's
+ * size (it has only its size to lose), then a pin.
+ */
 export type LinkLod = 'full' | 'compact' | 'pin';
 
 /** A tile on the screen: its square (top left, side), its middle, how much it shows, and its scale from the layout. */
 export interface LinkBox { x: number; y: number; s: number; cx: number; cy: number; lod: LinkLod; k: number }
 
+/** A photo's or a sketch's tile: its picture is the tile (tileTypeOf's 'image' and 'sketch' in render/linkTile.ts). */
+const picturesItself = (n: Note): boolean => {
+  const t = n.link, ft = t && (linkInfoOf(t)?.fileType ?? t.fileType);
+  return t?.kind === 'file' && (ft === 'photo' || ft === 'drawing');
+};
+
 export function linkBox(T: Xform, n: Note): LinkBox {
   const [cx, cy] = S(T, n.x ?? 0, n.y ?? 0), side = linkSide(n) * T.s;
-  const lod: LinkLod = side >= LINK_FULL_PX ? 'full' : side >= LINK_PIN_PX ? 'compact' : 'pin';
-  const s = Math.max(LINK_PIN_PX, side);
+  const lod: LinkLod = side >= LINK_FULL_PX ? 'full' : side >= LINK_PIN_PX && picturesItself(n) ? 'compact' : 'pin';
+  // (a pin is its own size, however big the tile is on the drawing: what's tapped and where a leader starts are it)
+  const s = lod === 'pin' ? LINK_PIN_PX : side;
   return { x: cx - s / 2, y: cy - s / 2, s, cx, cy, lod, k: s / LINK_TILE_PX };
 }
 
@@ -332,6 +361,9 @@ export function linkThumb(src: string): ImageLike {
 export function imgCache(src: string | undefined): ImageLike | null {
   if (!src) return null;
   let im = imgs.get(src);
+  // (a picture a tile has already loaded, as its photo's expanded: that one, not a flash of nothing while it loads again)
+  const thumb = !im ? thumbs.get(src)?.im : undefined;
+  if (thumb?.complete && thumb.naturalWidth) imgs.set(src, (im = thumb));
   if (!im) {
     const loaded = () => { requestDraw(); refreshDrawerSoon(); };
     if (isStoredRef(src)) {
@@ -434,11 +466,15 @@ export function setViewSize(W: number, H: number): void {
 }
 
 export function resize(): void {
-  const r = cvs.cv.getBoundingClientRect();
+  const r = cvs.cv.getBoundingClientRect(), dpr = Math.min(window.devicePixelRatio || 1, 2.5);
+  // (sized again to the same size, a canvas is cleared all the same: it showed blank until the next frame)
+  if (r.width === cvs.W && r.height === cvs.H && dpr === cvs.dpr) return;
   cvs.W = r.width;
   cvs.H = r.height;
-  cvs.dpr = Math.min(window.devicePixelRatio || 1, 2.5);
+  cvs.dpr = dpr;
   cvs.cv.width = Math.max(1, Math.round(cvs.W * cvs.dpr));
   cvs.cv.height = Math.max(1, Math.round(cvs.H * cvs.dpr));
+  // drawn now: left for the next frame, the cleared canvas flickered as a split view's divider was dragged
   requestDraw();
+  paintPending();
 }

package/src/skia/SkiaDrawCtx.ts

@@ -254,7 +254,14 @@ export class SkiaDrawCtx implements DrawCtx {
   fill(): void { this.drawCurrent(this.paint(false)); }
   stroke(): void { this.drawCurrent(this.paint(true)); }
   clip(): void {
-    if (this.placed) this.changing();
+    const pl = this.placed;
+    if (pl) {
+      // a kept shape: clipped to where it's placed, as it is (made into path commands again, it'd be a new path a frame)
+      if (pl.x || pl.y) this.canvas.translate(pl.x, pl.y);
+      this.canvas.clipPath(pl.path, INTERSECT, true);
+      if (pl.x || pl.y) this.canvas.translate(-pl.x, -pl.y);
+      return;
+    }
     this.canvas.clipPath(this.built ??= this.path.build(), INTERSECT, true);
   }
   private drawCurrent(paint: SkPaint): void {
@@ -353,10 +360,10 @@ export class SkiaDrawCtx implements DrawCtx {
       const { weight, size } = parseFont(key);
       const ws = Object.keys(this.typefaces.weights).map(Number);
       const near = ws.sort((a, b) => Math.abs(a - weight) - Math.abs(b - weight))[0];
-      const main = this.Skia.Font(this.typefaces.weights[near]!, size), m = main.getMetrics();
+      const main = this.makeFont(this.typefaces.weights[near]!, size), m = main.getMetrics();
       f = {
         main,
-        fb: this.typefaces.fallback ? this.Skia.Font(this.typefaces.fallback, size) : null,
+        fb: this.typefaces.fallback ? this.makeFont(this.typefaces.fallback, size) : null,
         metrics: { ascent: m.ascent, descent: m.descent, size: main.getSize() },
       };
       remember(this.fonts, key, f);
@@ -364,6 +371,19 @@ export class SkiaDrawCtx implements DrawCtx {
     return f;
   }
 
+  /**
+   * A font that lays text out as the browser does: each character as wide as the typeface says at any size (linear
+   * metrics). Skia's own rounds every width to a whole pixel at the font's size. On Android (FreeType) that was a
+   * tile's text, set at 4 to 9 px and scaled up with the card, with a space gone or one put inside a word ("ToDoList",
+   * "Lis t"), and the scale made each gap as much bigger. (Nothing else is set: the app's React Native Skia, 2.8, reads
+   * setSubpixel's flag as a number and throws on true — and a later one throws on a number.)
+   */
+  private makeFont(face: SkTypeface, size: number): SkFont {
+    const f = this.Skia.Font(face, size);
+    f.setLinearMetrics(true);
+    return f;
+  }
+
   /** Split text into runs the main font can draw and runs that need the fallback, with their widths (cached). */
   private runs(text: string, f: FontPair): Run[] {
     const css = this.st.font;
@@ -380,7 +400,9 @@ export class SkiaDrawCtx implements DrawCtx {
         if (last && last.font === font) last.text += ch; else out.push({ text: ch, font, width: 0 });
       });
     }
-    for (const r of out) r.width = r.font.getTextWidth(r.text);
+    // (each character's width, added up here: a device's getTextWidth adds them as whole numbers, each one's fraction
+    // dropped, so text was measured short of what's drawn)
+    for (const r of out) r.width = r.font.getGlyphWidths(r.font.getGlyphIDs(r.text, Array.from(r.text).length)).reduce((w, g) => w + g, 0);
     // (kept: measuring and drawing a label again — every frame — asks native code nothing)
     return remember(byText, text, out);
   }