@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/render/snap.ts

@@ -4,6 +4,7 @@ import { settings } from '../model/settings';
 import { SK } from '../model/store';
 import { gridSteps } from '../model/planGeom';
 import { mainT, S, s2w } from './view';
+import { intoWall } from '../editor/elevation';
 
 export interface SnapOpts {
   touch?: boolean;
@@ -15,11 +16,61 @@ export interface SnapOpts {
   prevLine?: string | null;
 }
 
-/** Snap a screen point: endpoints > midpoints/intersections > H/V/perp guides > on line/circle > grid. */
+/** Snap a screen point: endpoints > midpoints/intersections > on line > H/V/perp guides > on circle > grid. In the wall view, never past the wall. */
+/**
+ * Shift held: from `a`, the direction to `p` locked to the nearest 45° — level, plumb or a diagonal — keeping how
+ * far along it `p` is. `dir`: which (H level, V plumb, D diagonal).
+ */
+export function snap45(a: { x: number; y: number }, p: { x: number; y: number }): { x: number; y: number; dir: 'H' | 'V' | 'D' } {
+  const dx = p.x - a.x, dy = p.y - a.y, L = hyp(dx, dy);
+  if (L < 1e-9) return { x: a.x, y: a.y, dir: 'H' };
+  const k = Math.round(Math.atan2(dy, dx) / (Math.PI / 4)), th = k * (Math.PI / 4);
+  const ux = Math.round(Math.cos(th) * 1e12) / 1e12, uy = Math.round(Math.sin(th) * 1e12) / 1e12, t = dx * ux + dy * uy;
+  return { x: a.x + ux * t, y: a.y + uy * t, dir: k % 4 === 0 ? 'H' : Math.abs(k % 4) === 2 ? 'V' : 'D' };
+}
+
+/** A drawing snap with Shift held, from point `from`: locked to the nearest 45°; level or plumb comes with its guide (auto-constrain adds it). */
+export function shiftSnap(from: string, s: Snap): Snap {
+  const a = SK().points[from];
+  if (!a) return s;
+  const q = snap45(a, s), [x, y] = intoWall(q.x, q.y);
+  const guides: Guide[] = q.dir === 'D' ? [] : [{ kind: q.dir, from, x1: a.x, y1: a.y, x2: x, y2: y }];
+  return { x, y, kind: 'free', guides };
+}
+
 export function snapAt(sx: number, sy: number, o: SnapOpts = {}): Snap {
+  const s = snapRaw(sx, sy, o), [x, y] = intoWall(s.x, s.y);
+  return x === s.x && y === s.y ? s : { ...s, x, y, kind: s.kind === 'grid' ? 'grid' : 'free', ref: null, refs: undefined };
+}
+
+/*
+  The grid: with Snap to grid on, whatever a snap leaves free goes on the grid that's drawn (gridSteps: what's seen is
+  what's snapped to) — the whole point in open space; the other direction when a guide holds one (drawn level from a
+  point on the grid: a whole number of steps long); along a line, where it crosses a grid line; along a perpendicular,
+  whole steps from where it starts. Endpoints, midpoints and intersections still come first. And it's steady: as the
+  pointer moves, the snap holds the grid line it's on until the pointer is well past halfway to the next, so a
+  finger's wobble at the halfway point doesn't flick it back and forth.
+*/
+const HOLD = 0.15;
+/** The last snap's grid lines, while the pointer moves on from it (each axis, if it went on the grid). */
+let held: { st: number; x?: number; y?: number; sx: number; sy: number; t: number } | null = null;
+
+/** The grid line nearest v — or, `last` (the one it was on) while v isn't yet well past halfway to the next. */
+export function onGrid(v: number, st: number, last?: number): number {
+  const r = Math.round(v / st) * st;
+  return last !== undefined && Math.abs(v - last) <= st * (0.5 + HOLD) ? last : r;
+}
+
+function snapRaw(sx: number, sy: number, o: SnapOpts): Snap {
   const sk = SK(), T = mainT(), tol = o.touch ? 22 : 12;
   const [wx, wy] = s2w(sx, sy);
   const ex = o.exclude || new Set<string>();
+  const st = settings.snapGrid ? gridSteps(T.s).minor : 0, now = performance.now();
+  // (the same pointer moving on: not a new tap somewhere else, nor one after a pause)
+  const was = held && held.st === st && now - held.t < 250 && hyp(sx - held.sx, sy - held.sy) < 48 ? held : null;
+  let usedX: number | undefined, usedY: number | undefined;
+  const gridX = (v: number) => (usedX = onGrid(v, st, was?.x)), gridY = (v: number) => (usedY = onGrid(v, st, was?.y));
+  const finish = (snap: Snap): Snap => { held = st ? { st, x: usedX, y: usedY, sx, sy, t: now } : null; return snap; };
   let best: (Snap & { sc: number }) | null = null;
   const cand = (x: number, y: number, kind: Snap['kind'], ref: string | [string, string], prio: number, label: string) => {
     const [px, py] = S(T, x, y);
@@ -62,7 +113,19 @@ export function snapAt(sx: number, sy: number, o: SnapOpts = {}): Snap {
   }
   if (best) {
     const { sc: _sc, ...snap } = best as Snap & { sc: number };
-    return snap;
+    return finish(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;
+  for (const id of near) {
+    const l = sk.lines[id], A = sk.points[l.a], B = sk.points[l.b];
+    const t = projT(A, B, { x: wx, y: wy });
+    if (t < 0 || t > 1) 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 };
   }
   let x = wx, y = wy, kind: Snap['kind'] = 'free';
   const guides: Guide[] = [];
@@ -77,42 +140,62 @@ export function snapAt(sx: number, sy: number, o: SnapOpts = {}): Snap {
     if (gy == null && Math.abs(sy - py) < tol) gy = { y: r.p.y, from: r.id, own: r.own };
     if (gx == null && Math.abs(sx - px) < tol) gx = { x: r.p.x, from: r.id, own: r.own };
   }
+  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 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) {
+      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' }] });
+      }
+    }
+    // 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 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; })
+        .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 finish({ x: bestL.x, y: bestL.y, kind: 'online', ref: bestL.id, label: 'On line', guides: [] });
+  }
   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' }); }
   if (!guides.length && from && o.prevLine && sk.lines[o.prevLine]) {
     const l = sk.lines[o.prevLine], A = sk.points[l.a], B = sk.points[l.b];
     const d = norm2(B.x - A.x, B.y - A.y), n = [-d[1], d[0]];
-    const t = (wx - from.x) * n[0] + (wy - from.y) * n[1];
+    const t0 = (wx - from.x) * n[0] + (wy - from.y) * n[1];
+    // (with the grid: whole steps of it from where it starts)
+    const t = st ? onGrid(t0, st) : t0;
     const px = from.x + n[0] * t, py = from.y + n[1] * t;
-    const [qx, qy] = S(T, px, py);
-    if (hyp(qx - sx, qy - sy) < tol && Math.abs(t) * T.s > tol) {
+    const [qx, qy] = S(T, from.x + n[0] * t0, from.y + n[1] * t0);
+    if (hyp(qx - sx, qy - sy) < tol && Math.abs(t0) * T.s > tol) {
       x = px; y = py;
       guides.push({ x1: from.x, y1: from.y, x2: px, y2: py, kind: 'perp', label: 'Perpendicular' });
     }
   }
   if (!guides.length) {
-    let bestL: { d: number; x: number; y: number; id: string } | null = null;
-    for (const id of near) {
-      const l = sk.lines[id], A = sk.points[l.a], B = sk.points[l.b];
-      const t = projT(A, B, { x: wx, y: wy });
-      if (t < 0 || t > 1) 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 (bestL) return { x: bestL.x, y: bestL.y, kind: 'online', ref: bestL.id, label: 'On line', guides: [] };
     for (const id in sk.circles) {
       const ci = sk.circles[id], o2 = sk.points[ci.c];
       const d = hyp(wx - o2.x, wy - o2.y);
       if (Math.abs(d - ci.r) * T.s < tol && d > 1e-6) {
-        return { 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: [] };
+        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: [] });
       }
     }
-    if (settings.snapGrid) {
-      const st = gridSteps(T.s).minor;
-      x = Math.round(wx / st) * st; y = Math.round(wy / st) * st; kind = 'grid';
-    }
+    if (st) { x = gridX(wx); y = gridY(wy); kind = 'grid'; }
+  } else if (st && !guides.some(g => g.kind === 'perp')) {
+    // a guide holds one direction: the other goes on the grid
+    if (!gx) x = gridX(wx);
+    if (!gy) y = gridY(wy);
   }
-  return { x, y, kind, ref: null, label: '', guides };
+  return finish({ x, y, kind, ref: null, label: '', guides });
 }

package/src/render/squircle.ts

@@ -0,0 +1,73 @@
+import type { DrawCtx } from './ctx';
+
+/*
+  Figma's corner smoothing, at the 60% it calls "iOS" (Apple's continuous corners): a corner keeps its circular arc of
+  radius r in the middle, but shorter, and eases into each straight side over a longer run — (1 + smoothing) · r of
+  the side instead of r — so the curvature has no sudden step where the side ends. The construction is Figma's own
+  (as published in its "Desperately seeking squircles", and the MIT figma-squircle package).
+*/
+
+/** How much every rounded corner in the editor is smoothed: Figma's 60%, "iOS". */
+export const CORNER_SMOOTHING = 0.6;
+
+const rad = (deg: number): number => (deg * Math.PI) / 180;
+
+/** One corner's measures: the run along each side (p), the two Béziers' (a, b, c, d), the arc's half-sweep (alpha). */
+function cornerParams(r: number, smoothing: number, budget: number) {
+  // a corner can't run further along its sides than half the shorter side: less smoothing where it can't fit
+  const s = Math.max(0, Math.min(smoothing, budget / r - 1));
+  const p = Math.min((1 + s) * r, budget);
+  const arcMeasure = 90 * (1 - s);
+  const arcSection = Math.sin(rad(arcMeasure / 2)) * r * Math.SQRT2;
+  const alpha = (90 - arcMeasure) / 2;
+  const p3ToP4 = r * Math.tan(rad(alpha / 2));
+  const beta = 45 * s;
+  const c = p3ToP4 * Math.cos(rad(beta));
+  const d = c * Math.tan(rad(beta));
+  const b = (p - arcSection - c - d) / 3;
+  return { p, a: 2 * b, b, c, d, alpha: rad(alpha) };
+}
+
+/**
+ * A rounded rectangle's path with smoothed corners (x, y its top left; r each corner's radius). A pill or a circle —
+ * r at least half the shorter side — is left round: smoothing has nothing to ease into there, as in Figma.
+ */
+export function smoothRectPath(c: DrawCtx, x: number, y: number, w: number, h: number, r: number, smoothing = CORNER_SMOOTHING): void {
+  const budget = Math.min(w, h) / 2;
+  r = Math.max(0, Math.min(r, budget));
+  c.beginPath();
+  if (r <= 0 || smoothing <= 0 || r >= budget - 1e-6) {
+    c.moveTo(x + r, y);
+    c.arcTo(x + w, y, x + w, y + h, r);
+    c.arcTo(x + w, y + h, x, y + h, r);
+    c.arcTo(x, y + h, x, y, r);
+    c.arcTo(x, y, x + w, y, r);
+    c.closePath();
+    return;
+  }
+  const k = cornerParams(r, smoothing, budget);
+  // each corner drawn in its own frame: u along the side coming into it, v along the side leaving it, the corner's
+  // vertex at the origin — then turned to its place, clockwise from the top right
+  const corners: { ox: number; oy: number; ux: [number, number]; vx: [number, number]; turn: number }[] = [
+    { ox: x + w, oy: y, ux: [1, 0], vx: [0, 1], turn: 0 },
+    { ox: x + w, oy: y + h, ux: [0, 1], vx: [-1, 0], turn: Math.PI / 2 },
+    { ox: x, oy: y + h, ux: [-1, 0], vx: [0, -1], turn: Math.PI },
+    { ox: x, oy: y, ux: [0, -1], vx: [1, 0], turn: (3 * Math.PI) / 2 },
+  ];
+  const { p, a, b, c: cc, d, alpha } = k;
+  corners.forEach((q, i) => {
+    const at = (u: number, v: number): [number, number] => [q.ox + q.ux[0] * u + q.vx[0] * v, q.oy + q.ux[1] * u + q.vx[1] * v];
+    const [sx, sy] = at(-p, 0);
+    if (i === 0) c.moveTo(sx, sy); else c.lineTo(sx, sy);
+    // into the arc, along the side
+    const [c1x, c1y] = at(-p + a, 0), [c2x, c2y] = at(-p + a + b, 0), [e1x, e1y] = at(-p + a + b + cc, d);
+    c.bezierCurveTo(c1x, c1y, c2x, c2y, e1x, e1y);
+    // the arc: radius r about (−r, r), its middle (90° less twice alpha) — angles turned with the corner
+    const [cx, cy] = at(-r, r);
+    c.arc(cx, cy, r, -Math.PI / 2 + alpha + q.turn, -alpha + q.turn, false);
+    // out of the arc onto the next side (the first Bézier mirrored across the corner's diagonal)
+    const [c3x, c3y] = at(0, p - a - b), [c4x, c4y] = at(0, p - a), [ex, ey] = at(0, p);
+    c.bezierCurveTo(c3x, c3y, c4x, c4y, ex, ey);
+  });
+  c.closePath();
+}

package/src/render/view.ts

@@ -1,9 +1,14 @@
 import { clamp } from '../model/geom';
+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 { draw } from './draw';
 import { onSessionReset, sessionState } from '../model/session';
 import { refreshDrawerSoon } from '../editor/ports';
+import { FONT } from './theme';
+import { ZOOM_MAX, ZOOM_MIN } from './navigate';
 
 /** World (inches, y up) → screen transform. */
 export interface Xform { s: number; ox: number; oy: number }
@@ -21,8 +26,13 @@ export function initCanvas(el: HTMLCanvasElement): void {
   cvs.ctx = el.getContext('2d')!;
 }
 
+/** The pan/zoom of each wall face that's been open, by page and face. */
+const faceViews = sessionState(() => ({} as Record<string, View>));
+
+/** The view of what's being edited: the page's plan, or the wall face open. */
 export function V(): View {
   const pg = page();
+  if (faceEdit.key) return (faceViews[pg.id + '|' + faceEdit.key] ??= { cx: 0, cy: 48, s: 2 });
   if (!pg.view) pg.view = { cx: 84, cy: 120, s: 2 };
   return pg.view;
 }
@@ -42,17 +52,17 @@ export function s2w(sx: number, sy: number): [number, number] {
 export function zoomAt(sx: number, sy: number, f: number): void {
   const v = V();
   const [wx, wy] = s2w(sx, sy);
-  v.s = clamp(v.s * f, 0.04, 400);
+  v.s = clamp(v.s * f, ZOOM_MIN, ZOOM_MAX);
   v.cx = wx - (sx - cvs.W / 2) / v.s;
   v.cy = wy + (sy - cvs.H / 2) / v.s;
-  requestDraw();
+  requestViewDraw();
 }
 
 export function panBy(dx: number, dy: number): void {
   const v = V();
   v.cx -= dx / v.s;
   v.cy += dy / v.s;
-  requestDraw();
+  requestViewDraw();
 }
 
 export function sketchBounds(sk: Sketch, inclOrigin = true): { x0: number; y0: number; x1: number; y1: number } | null {
@@ -60,24 +70,42 @@ export function sketchBounds(sk: Sketch, inclOrigin = true): { x0: number; y0: n
   const add = (x: number, y: number) => { x0 = Math.min(x0, x); y0 = Math.min(y0, y); x1 = Math.max(x1, x); y1 = Math.max(y1, y); };
   for (const id in sk.points) { const p = sk.points[id]; if (p.origin && !inclOrigin) continue; add(p.x, p.y); }
   for (const id in sk.circles) { const c = sk.circles[id], o = sk.points[c.c]; if (o) { add(o.x - c.r, o.y - c.r); add(o.x + c.r, o.y + c.r); } }
-  for (const n of sk.notes) { if (n.pts) n.pts.forEach(p => add(p[0], p[1])); else add(n.x!, n.y!); }
+  for (const n of sk.notes) {
+    if (n.pts) n.pts.forEach(p => add(p[0], p[1]));
+    else if (n.type === 'link') {
+      // its tile, and what its leader points at
+      const h = linkSide(n) / 2, x = n.x ?? 0, y = n.y ?? 0;
+      add(x - h, y - h); add(x + h, y + h);
+      if (n.leader) add(n.leader[0], n.leader[1]);
+    } else add(n.x!, n.y!);
+  }
   if (x0 === Infinity) return null;
   return { x0, y0, x1, y1 };
 }
 
+/** The open wall's face, for the wall view to fit (registered by editor/elevation.ts; null on the plan). */
+let wallBox: () => { x0: number; y0: number; x1: number; y1: number } | null = () => null;
+export function setWallBox(fn: typeof wallBox): void { wallBox = fn; }
+
 export function fitView(): void {
-  const sk = SK(), pg = page();
+  const sk = SK(), pg = page(), wallFace = wallBox();
   let b = sketchBounds(sk);
-  if (pg.underlay) {
-    const u = pg.underlay, h = underlayH(u);
-    const bb = { x0: u.x, y0: u.y - h, x1: u.x + u.w, y1: u.y };
+  // the wall view fits the wall itself (and what's drawn on it); the page's photos and plans are under the plan, not
+  // on the wall — counting them zoomed a wall out to take in a plan nobody could see there
+  if (faceEdit.key && wallFace) b = b ? { x0: Math.min(b.x0, wallFace.x0), y0: Math.min(b.y0, wallFace.y0), x1: Math.max(b.x1, wallFace.x1), y1: Math.max(b.y1, wallFace.y1) } : wallFace;
+  if (!faceEdit.key) for (const u of pg.underlays) {
+    // (as it sits, turned)
+    const cs = underlayCorners(u), xs = cs.map(q => q.x), ys = cs.map(q => q.y);
+    const bb = { x0: Math.min(...xs), y0: Math.min(...ys), x1: Math.max(...xs), y1: Math.max(...ys) };
     b = b ? { x0: Math.min(b.x0, bb.x0), y0: Math.min(b.y0, bb.y0), x1: Math.max(b.x1, bb.x1), y1: Math.max(b.y1, bb.y1) } : bb;
   }
   const v = V();
   if (!b || (b.x1 - b.x0 < 1 && b.y1 - b.y0 < 1)) { v.cx = 0; v.cy = 0; v.s = 3; requestDraw(); return; }
   const { W, H } = cvs;
-  const phone = W < 760;
-  const L = phone ? 78 : 110, R = phone ? 28 : 110, Tp = phone ? 200 : 150, Bt = 120;
+  const phone = W < 760, wall = faceEdit.key != null;
+  // a wall face: room for the dimensions along the floor and beside it, and for the key plan (top right)
+  const L = phone ? 78 : 110, R = wall ? (phone ? 64 : Math.max(110, keyPlanSize(W) + 40)) : phone ? 28 : 110;
+  const Tp = phone ? 200 : wall ? 110 : 150, Bt = wall ? (phone ? 210 : 190) : 120;
   const bw = Math.max(b.x1 - b.x0, 24), bh = Math.max(b.y1 - b.y0, 24);
   v.s = clamp(Math.min((W - L - R) / bw, (H - Tp - Bt) / bh), 0.08, 60);
   const scx = (L + W - R) / 2, scy = (Tp + H - Bt) / 2;
@@ -86,6 +114,9 @@ export function fitView(): void {
   requestDraw();
 }
 
+/** 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));
+
 /** 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;
@@ -95,9 +126,40 @@ export function underlayH(u: Underlay): number {
 
 export type HandlePart = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w';
 
-/** Screen positions of an underlay's resize handles: corners scale, side handles stretch. */
-export function underlayHandles(T: Xform, u: Underlay): { part: HandlePart; x: number; y: number }[] {
-  return boxHandles(T, { left: u.x, right: u.x + u.w, top: u.y, bottom: u.y - underlayH(u) });
+/*
+  An image turned (its `rot`) turns about its middle: x, y, w and h are its box before it's turned. These give its
+  points as they sit turned. The world's y runs up, so a turn clockwise as it's seen is the other way round in it.
+*/
+const turnOf = (u: Underlay): number => (-(u.rot ?? 0) * Math.PI) / 180;
+/** An image's middle, inches. */
+export function underlayMid(u: Underlay): { x: number; y: number } {
+  return { x: u.x + u.w / 2, y: u.y - underlayH(u) / 2 };
+}
+/** The point `lx` across and `ly` up from an image's middle in its own (unturned) frame, as it sits turned (inches). */
+export function underlayAt(u: Underlay, lx: number, ly: number): { x: number; y: number } {
+  const m = underlayMid(u), a = turnOf(u), c = Math.cos(a), s = Math.sin(a);
+  return { x: m.x + lx * c - ly * s, y: m.y + lx * s + ly * c };
+}
+/** A point (inches) as across and up from an image's middle, in its own unturned frame. */
+export function underlayLocal(u: Underlay, x: number, y: number): { x: number; y: number } {
+  const m = underlayMid(u), a = turnOf(u), c = Math.cos(a), s = Math.sin(a), dx = x - m.x, dy = y - m.y;
+  return { x: dx * c + dy * s, y: -dx * s + dy * c };
+}
+/** Where an image's handles sit in its own frame (as fractions of its half width and half height), in boxHandles' order. */
+const HANDLES: [HandlePart, number, number][] = [['nw', -1, 1], ['n', 0, 1], ['ne', 1, 1], ['e', 1, 0], ['se', 1, -1], ['s', 0, -1], ['sw', -1, -1], ['w', -1, 0]];
+/** An image's corners as it sits turned: top left, top right, bottom right, bottom left (inches). */
+export function underlayCorners(u: Underlay): { x: number; y: number }[] {
+  const hw = u.w / 2, hh = underlayH(u) / 2;
+  return [[-1, 1], [1, 1], [1, -1], [-1, -1]].map(([i, j]) => underlayAt(u, i * hw, j * hh));
+}
+
+/**
+ * Screen positions of an underlay's resize handles: corners scale, side handles stretch. `ang`: how far the image is
+ * turned on screen (radians clockwise), for the side handles' bars to lie along its sides.
+ */
+export function underlayHandles(T: Xform, u: Underlay): { part: HandlePart; x: number; y: number; ang: number }[] {
+  const hw = u.w / 2, hh = underlayH(u) / 2, ang = ((u.rot ?? 0) * Math.PI) / 180;
+  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 }; });
 }
 
 /** A world-space box (y up: top > bottom). */
@@ -120,13 +182,100 @@ export function noteBox(n: Note): Box | null {
   return { left: Math.min(...xs), right: Math.max(...xs), top: Math.max(...ys), bottom: Math.min(...ys) };
 }
 
-/** Handles for adjusting markup: arrow ends ('p0', 'p1'), or the box around a cloud or pen stroke. Text has none. */
+/**
+ * A note's text is set at one size (NOTE_TEXT_SIZE px) and the whole note scaled to its size on the drawing: its
+ * letters are `ts` inches tall (NOTE_TEXT_IN unless set, from NOTE_TEXT_MIN_IN to NOTE_TEXT_MAX_IN), so it zooms with
+ * the drawing rather than staying one size on screen. (Set at one size, the text is measured — and on a device its
+ * font made — once, not at every step of a zoom.)
+ */
+export { NOTE_TEXT_SIZE, NOTE_TEXT_IN, NOTE_TEXT_MIN_IN, NOTE_TEXT_MAX_IN, noteTextIn } from '../model/markup';
+export const noteFont = (size: number): string => '600 ' + size + 'px ' + FONT;
+
+/** What measures text: a drawing context, or anything that sets a font and measures with it. */
+export interface TextMeasure { font: string; measureText(s: string): { width: number } }
+
+/**
+ * What measures text outside drawing a frame (picking a note, its handles, a box select): the browser's canvas, or on
+ * a device — which has no browser canvas — the host's (Skia, with the drawing's own fonts: skia/host.ts), so a note
+ * is picked by the same box it's drawn in. Failing both, an estimate rather than a crash.
+ */
+let hostMeasure: TextMeasure | null = null;
+export function setTextMeasure(m: TextMeasure | null): void { hostMeasure = m; }
+const estimate: TextMeasure = {
+  font: '',
+  measureText(s: string) { const size = Number(/([\d.]+)px/.exec(this.font)?.[1] ?? 14); return { width: s.length * size * 0.6 }; },
+};
+export const textMeasure = (): TextMeasure => cvs.ctx ?? hostMeasure ?? estimate;
+
+/**
+ * A note's box on screen at its size: left / top corner, width, height; `mid` is the text's middle line, `k` its scale
+ * from the unscaled size (padding and corners grow with it). Measured with `c` (the drawing's context when drawing).
+ */
+export function noteTextBox(T: Xform, n: Note, c: TextMeasure = textMeasure()) {
+  const size = noteTextIn(n) * T.s, k = size / NOTE_TEXT_SIZE, [x, mid] = S(T, n.x!, n.y!);
+  c.font = noteFont(NOTE_TEXT_SIZE);
+  const w = (c.measureText(n.text!).width + 16) * k;
+  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. */
+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 }
+
+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);
+  return { x: cx - s / 2, y: cy - s / 2, s, cx, cy, lod, k: s / LINK_TILE_PX };
+}
+
+/** Where a leader leaves the tile toward screen point tx, ty: the edge of its square (null: the point's under it). */
+export function leaderStart(b: LinkBox, tx: number, ty: number): [number, number] | null {
+  const dx = tx - b.cx, dy = ty - b.cy, h = b.s / 2, m = Math.max(Math.abs(dx), Math.abs(dy));
+  if (m <= h) return null;
+  return [b.cx + (dx * h) / m, b.cy + (dy * h) / m];
+}
+
+/** A tile's leader on the screen, from the tile's edge to its tip (null: none, or its tip is under the tile). */
+export function leaderPath(T: Xform, n: Note, b: LinkBox = linkBox(T, n)): [[number, number], [number, number]] | null {
+  if (!n.leader) return null;
+  const tip = S(T, n.leader[0], n.leader[1]), start = leaderStart(b, tip[0], tip[1]);
+  return start ? [start, tip] : null;
+}
+
+/** A tile's handle: its leader's tip (tiles are sized together, by the Tile size slider, not one by one). */
+export function linkHandles(T: Xform, n: Note): { part: string; x: number; y: number }[] {
+  if (!n.leader) return [];
+  const [x, y] = S(T, n.leader[0], n.leader[1]);
+  return [{ part: 'tip', x, y }];
+}
+
+/** A tile's box and leader tip on the screen, for fitting and box selection: left, top, right, bottom. */
+export function linkExtent(T: Xform, n: Note): [number, number, number, number] {
+  const b = linkBox(T, n);
+  let l = b.x, t = b.y, r = b.x + b.s, bt = b.y + b.s;
+  if (n.leader) { const [x, y] = S(T, n.leader[0], n.leader[1]); l = Math.min(l, x); r = Math.max(r, x); t = Math.min(t, y); bt = Math.max(bt, y); }
+  return [l, t, r, bt];
+}
+
+/** Handles for adjusting markup: a line's or arrow's ends ('p0', 'p1'), the box around a cloud, shape or pen stroke, a note's corners. */
 export function noteHandles(T: Xform, n: Note): { part: string; x: number; y: number }[] {
-  if (n.type === 'arrow' && n.pts && n.pts.length >= 2) {
+  if (n.type === 'link') return linkHandles(T, n);
+  if (isSegment(n) && n.pts && n.pts.length >= 2) {
     const last = n.pts.length - 1;
     return [{ part: 'p0', p: n.pts[0] }, { part: 'p' + last, p: n.pts[last] }].map(({ part, p }) => { const [x, y] = S(T, p[0], p[1]); return { part, x, y }; });
   }
-  if (n.type === 'cloud' || n.type === 'pen') { const b = noteBox(n); return b ? boxHandles(T, b) : []; }
+  if (n.type === 'cloud' || n.type === 'pen' || CLOSED_SHAPES.has(n.type)) { const b = noteBox(n); return b ? boxHandles(T, b) : []; }
+  if (n.type === 'text' && n.text) {
+    // a note scales as a whole (its text can't stretch): corners only
+    const b = noteTextBox(T, n);
+    return [
+      { part: 'nw', x: b.x, y: b.y }, { part: 'ne', x: b.x + b.w, y: b.y },
+      { part: 'se', x: b.x + b.w, y: b.y + b.h }, { part: 'sw', x: b.x, y: b.y + b.h },
+    ];
+  }
   return [];
 }
 
@@ -142,7 +291,7 @@ const browserImage: ImageLoader = (src, onLoad) => {
 };
 let loadImage: ImageLoader = browserImage;
 /** Load pictures some other way from now on (null: the browser's). */
-export function setImageLoader(fn: ImageLoader | null): void { loadImage = fn || browserImage; imgs.clear(); }
+export function setImageLoader(fn: ImageLoader | null): void { loadImage = fn || browserImage; imgs.clear(); thumbs.clear(); }
 
 /** Turns a stored reference (`stored:…`, kept by a drawing in place of a URL) into a URL to load. */
 let resolveStored: ((ref: string) => Promise<string>) | null = null;
@@ -155,6 +304,31 @@ export function aliasImage(from: string, to: string): void {
   const im = imgs.get(from);
   if (im && !imgs.has(to)) imgs.set(to, im);
 }
+/**
+ * Small pictures of linked files (a link tile's), by address: kept apart from the page's photos and plans, and only the
+ * last few dozen used — a drawing can link many — each drawn again as it arrives. What's let go goes between frames,
+ * and never what the last frame drew (so many on the screen at once don't load each other out, again and again).
+ */
+const thumbs = new Map<string, { im: ImageLike; used: number }>(), THUMBS_KEPT = 64;
+let thumbFrame = 0;
+/** A new frame is being drawn: let go of the least recently used past those kept, if the last frame didn't draw them. */
+export function nextThumbFrame(): void {
+  for (const [k, o] of thumbs) {
+    if (thumbs.size <= THUMBS_KEPT || o.used === thumbFrame) break;
+    thumbs.delete(k);
+  }
+  thumbFrame++;
+}
+export function linkThumb(src: string): ImageLike {
+  let t = thumbs.get(src);
+  // (the most recently used last: the first is the one to let go)
+  if (t) thumbs.delete(src);
+  else t = { im: loadImage(src, () => requestDraw()), used: 0 };
+  t.used = thumbFrame;
+  thumbs.set(src, t);
+  return t.im;
+}
+
 export function imgCache(src: string | undefined): ImageLike | null {
   if (!src) return null;
   let im = imgs.get(src);
@@ -178,15 +352,77 @@ let drawFrame = 0;
 let paint: () => void = () => draw();
 export function setFrameRenderer(fn: (() => void) | null): void { paint = fn || (() => draw()); }
 
-/** Repaint on the next animation frame (several requests in one frame paint once). */
-export function requestDraw(): void {
+/*
+  What the next frame has to redraw, for a host that keeps the drawing as a picture (see PlanCanvas.native): the
+  drawing itself only when something in it changed (requestDraw), or when the view moved (the host compares the view
+  it last drew at); otherwise just the moving parts, as a tool follows the pointer (requestOverlayDraw). The page's
+  photos and plans are kept apart, under it: turning, fading, moving or sizing one redraws only them
+  (requestImageDraw), not every wall and dimension over them. A host that redraws everything each frame (the
+  browser) ignores this.
+*/
+const frame = { drawingChanged: true, imagesChanged: true };
+
+/** Whether the drawing (not only its moving parts) has changed since the host last kept it; the host then marks it kept. */
+export const drawingChanged = (): boolean => frame.drawingChanged;
+export function markDrawingKept(): void { frame.drawingChanged = false; }
+/** Whether the photos and plans under the drawing have changed since the host last kept them; it then marks them kept. */
+export const imagesChanged = (): boolean => frame.imagesChanged;
+export function markImagesKept(): void { frame.imagesChanged = false; }
+
+function schedule(): void {
   if (drawFrame) return;
   drawFrame = requestAnimationFrame(() => { drawFrame = 0; paint(); });
 }
+
+/**
+ * Paint a frame that's waiting, now. A press is tested against the tap targets as last painted (the chips), so one that
+ * comes between an edit and the next frame — a quick tap, a slow frame — would land on where a chip was, not where it is.
+ */
+export function paintPending(): void {
+  if (!drawFrame) return;
+  cancelAnimationFrame(drawFrame);
+  drawFrame = 0;
+  paint();
+}
+
+/**
+ * The view as the host moved it itself — a device pans and zooms on its UI thread, at the screen's rate, and tells
+ * this thread where it got to: take it, and draw the plan there on the next frame.
+ */
+export function setViewFromHost(s: number, cx: number, cy: number): void {
+  const v = V();
+  v.s = s; v.cx = cx; v.cy = cy;
+  schedule();
+}
+
+/** Repaint on the next animation frame (several requests in one frame paint once). */
+export function requestDraw(): void {
+  frame.drawingChanged = true;
+  frame.imagesChanged = true;
+  schedule();
+}
+
+/** Only the page's photos and plans changed (one turned, faded, moved or sized): the drawing over them can be reused. */
+export function requestImageDraw(): void {
+  frame.imagesChanged = true;
+  schedule();
+}
+
+/** Only the moving parts changed (a tool's preview, the snap marker, the selection box): the rest can be reused. */
+export function requestOverlayDraw(): void { schedule(); }
+
+/**
+ * The view panned or zoomed: draw the next frame there. The drawing itself didn't change — a host that keeps it sees
+ * the view moved, and draws it again at the new one, with nothing waiting for the view to settle first.
+ */
+function requestViewDraw(): void { schedule(); }
 onSessionReset(() => {
   if (drawFrame) cancelAnimationFrame(drawFrame);
   drawFrame = 0;
+  frame.drawingChanged = true;
+  frame.imagesChanged = true;
   imgs.clear();
+  thumbs.clear();
 });
 
 /** The plan's size in display points, where no browser canvas measures it (a device). */