@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/dist/render/squircle.js

@@ -0,0 +1,71 @@
+/*
+  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) => (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, smoothing, budget) {
+    // 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, x, y, w, h, r, smoothing = CORNER_SMOOTHING) {
+    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: 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, v) => [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();
+}
+//# sourceMappingURL=squircle.js.map

package/dist/render/squircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"squircle.js","sourceRoot":"","sources":["../../src/render/squircle.ts"],"names":[],"mappings":"AAEA;;;;;EAKE;AAEF,mFAAmF;AACnF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAEpC,MAAM,GAAG,GAAG,CAAC,GAAW,EAAU,EAAE,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;AAE3D,uHAAuH;AACvH,SAAS,YAAY,CAAC,CAAS,EAAE,SAAiB,EAAE,MAAc;IAChE,2GAA2G;IAC3G,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC3D,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,CAAC;IACxC,MAAM,UAAU,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAChC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;IAClE,MAAM,KAAK,GAAG,CAAC,EAAE,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;IACpC,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC;IACpB,MAAM,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IACvC,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IAClC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IACvC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;AACrD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,CAAU,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,SAAS,GAAG,gBAAgB;IAC5H,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;IAClC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC,SAAS,EAAE,CAAC;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,SAAS,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,GAAG,IAAI,EAAE,CAAC;QACnD,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QACnB,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QACnC,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QACnC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3B,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3B,CAAC,CAAC,SAAS,EAAE,CAAC;QACd,OAAO;IACT,CAAC;IACD,MAAM,CAAC,GAAG,YAAY,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;IAC7C,iHAAiH;IACjH,gFAAgF;IAChF,MAAM,OAAO,GAA2F;QACtG,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;QACrD,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,GAAG,CAAC,EAAE;QACpE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE;QAC7D,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE;KACnE,CAAC;IACF,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IACvC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACvB,MAAM,EAAE,GAAG,CAAC,CAAS,EAAE,CAAS,EAAoB,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAC5H,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3B,IAAI,CAAC,KAAK,CAAC;YAAE,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;;YAAM,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QACrD,+BAA+B;QAC/B,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;QACtG,CAAC,CAAC,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAC9C,qGAAqG;QACrG,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3B,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACxE,6FAA6F;QAC7F,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACpF,CAAC,CAAC,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IACH,CAAC,CAAC,SAAS,EAAE,CAAC;AAChB,CAAC"}

package/dist/render/view.d.ts

@@ -13,6 +13,7 @@ export declare const cvs: {
     dpr: number;
 };
 export declare function initCanvas(el: HTMLCanvasElement): void;
+/** The view of what's being edited: the page's plan, or the wall face open. */
 export declare function V(): View;
 export declare function mainT(): Xform;
 export declare const S: (T: Xform, x: number, y: number) => [number, number];
@@ -25,15 +26,49 @@ export declare function sketchBounds(sk: Sketch, inclOrigin?: boolean): {
     x1: number;
     y1: number;
 } | null;
+/** The open wall's face, for the wall view to fit (registered by editor/elevation.ts; null on the plan). */
+declare let wallBox: () => {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+} | null;
+export declare function setWallBox(fn: typeof wallBox): void;
 export declare function fitView(): void;
+/** Size of the wall view's key plan (top right), pixels. */
+export declare const keyPlanSize: (W: number) => number;
 /** Height of an image underlay in inches: its own, or from the picture's aspect ratio. */
 export declare 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. */
+/** An image's middle, inches. */
+export declare function underlayMid(u: Underlay): {
+    x: number;
+    y: number;
+};
+/** The point `lx` across and `ly` up from an image's middle in its own (unturned) frame, as it sits turned (inches). */
+export declare function underlayAt(u: Underlay, lx: number, ly: number): {
+    x: number;
+    y: number;
+};
+/** A point (inches) as across and up from an image's middle, in its own unturned frame. */
+export declare function underlayLocal(u: Underlay, x: number, y: number): {
+    x: number;
+    y: number;
+};
+/** An image's corners as it sits turned: top left, top right, bottom right, bottom left (inches). */
+export declare function underlayCorners(u: Underlay): {
+    x: number;
+    y: number;
+}[];
+/**
+ * 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 declare function underlayHandles(T: Xform, u: Underlay): {
     part: HandlePart;
     x: number;
     y: number;
+    ang: number;
 }[];
 /** A world-space box (y up: top > bottom). */
 export interface Box {
@@ -50,7 +85,62 @@ export declare function boxHandles(T: Xform, b: Box): {
 }[];
 /** Bounding box of a pen stroke or revision cloud. */
 export declare function noteBox(n: Note): Box | null;
-/** 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 declare const noteFont: (size: number) => string;
+/** 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;
+    };
+}
+export declare function setTextMeasure(m: TextMeasure | null): void;
+export declare const textMeasure: () => TextMeasure;
+/**
+ * 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 declare function noteTextBox(T: Xform, n: Note, c?: TextMeasure): {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    mid: number;
+    k: number;
+    size: number;
+};
+/** 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 declare function linkBox(T: Xform, n: Note): LinkBox;
+/** Where a leader leaves the tile toward screen point tx, ty: the edge of its square (null: the point's under it). */
+export declare function leaderStart(b: LinkBox, tx: number, ty: number): [number, number] | null;
+/** 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 declare function leaderPath(T: Xform, n: Note, b?: LinkBox): [[number, number], [number, number]] | null;
+/** A tile's handle: its leader's tip (tiles are sized together, by the Tile size slider, not one by one). */
+export declare function linkHandles(T: Xform, n: Note): {
+    part: string;
+    x: number;
+    y: number;
+}[];
+/** A tile's box and leader tip on the screen, for fitting and box selection: left, top, right, bottom. */
+export declare function linkExtent(T: Xform, n: Note): [number, number, number, number];
+/** 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 declare function noteHandles(T: Xform, n: Note): {
     part: string;
     x: number;
@@ -70,10 +160,33 @@ export declare function setImageResolver(fn: ((ref: string) => Promise<string>)
 export declare const isStoredRef: (src: string) => boolean;
 /** `to` is the same picture as `from` (an upload's reference for the local copy): reuse what's loaded, no flicker. */
 export declare function aliasImage(from: string, to: string): void;
+/** 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 declare function nextThumbFrame(): void;
+export declare function linkThumb(src: string): ImageLike;
 export declare function imgCache(src: string | undefined): ImageLike | null;
 export declare function setFrameRenderer(fn: (() => void) | null): void;
+/** Whether the drawing (not only its moving parts) has changed since the host last kept it; the host then marks it kept. */
+export declare const drawingChanged: () => boolean;
+export declare function markDrawingKept(): void;
+/** Whether the photos and plans under the drawing have changed since the host last kept them; it then marks them kept. */
+export declare const imagesChanged: () => boolean;
+export declare function markImagesKept(): void;
+/**
+ * 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 declare function paintPending(): void;
+/**
+ * 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 declare function setViewFromHost(s: number, cx: number, cy: number): void;
 /** Repaint on the next animation frame (several requests in one frame paint once). */
 export declare function requestDraw(): void;
+/** Only the page's photos and plans changed (one turned, faded, moved or sized): the drawing over them can be reused. */
+export declare function requestImageDraw(): void;
+/** Only the moving parts changed (a tool's preview, the snap marker, the selection box): the rest can be reused. */
+export declare function requestOverlayDraw(): void;
 /** The plan's size in display points, where no browser canvas measures it (a device). */
 export declare function setViewSize(W: number, H: number): void;
 export declare function resize(): void;

package/dist/render/view.js

@@ -1,8 +1,13 @@
 import { clamp } from '../model/geom';
+import { faceEdit } from '../model/faces';
 import { page, SK } from '../model/store';
+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';
 export const cvs = sessionState(() => ({
     cv: null,
     ctx: null,
@@ -14,8 +19,13 @@ export function initCanvas(el) {
     cvs.cv = el;
     cvs.ctx = el.getContext('2d');
 }
+/** The pan/zoom of each wall face that's been open, by page and face. */
+const faceViews = sessionState(() => ({}));
+/** The view of what's being edited: the page's plan, or the wall face open. */
 export function V() {
     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;
@@ -32,16 +42,16 @@ export function s2w(sx, sy) {
 export function zoomAt(sx, sy, f) {
     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, dy) {
     const v = V();
     v.cx -= dx / v.s;
     v.cy += dy / v.s;
-    requestDraw();
+    requestViewDraw();
 }
 export function sketchBounds(sk, inclOrigin = true) {
     let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
@@ -62,6 +72,14 @@ export function sketchBounds(sk, inclOrigin = true) {
     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);
     }
@@ -69,14 +87,23 @@ export function sketchBounds(sk, inclOrigin = true) {
         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 = () => null;
+export function setWallBox(fn) { wallBox = fn; }
 export function fitView() {
-    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 };
-        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;
-    }
+    // 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;
@@ -86,8 +113,10 @@ export function fitView() {
         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;
@@ -95,6 +124,8 @@ export function fitView() {
     v.cy = (b.y0 + b.y1) / 2 + (scy - H / 2) / v.s;
     requestDraw();
 }
+/** Size of the wall view's key plan (top right), pixels. */
+export const keyPlanSize = (W) => 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) {
     if (u.h)
@@ -102,9 +133,39 @@ export function underlayH(u) {
     const img = imgCache(u.src);
     return img && img.naturalWidth ? (u.w * img.naturalHeight) / img.naturalWidth : u.w * 0.7;
 }
-/** Screen positions of an underlay's resize handles: corners scale, side handles stretch. */
+/*
+  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) => (-(u.rot ?? 0) * Math.PI) / 180;
+/** An image's middle, inches. */
+export function underlayMid(u) {
+    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, lx, ly) {
+    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, x, y) {
+    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 = [['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) {
+    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, u) {
-    return boxHandles(T, { left: u.x, right: u.x + u.w, top: u.y, bottom: u.y - underlayH(u) });
+    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 }; });
 }
 /** Screen positions of the 4 corner + 4 side handles of a box. */
 export function boxHandles(T, b) {
@@ -122,16 +183,96 @@ export function noteBox(n) {
     const xs = n.pts.map(p => p[0]), ys = n.pts.map(p => p[1]);
     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) => '600 ' + size + 'px ' + FONT;
+/**
+ * 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 = null;
+export function setTextMeasure(m) { hostMeasure = m; }
+const estimate = {
+    font: '',
+    measureText(s) { const size = Number(/([\d.]+)px/.exec(this.font)?.[1] ?? 14); return { width: s.length * size * 0.6 }; },
+};
+export const 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, n, c = 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 };
+}
+export function linkBox(T, n) {
+    const [cx, cy] = S(T, n.x ?? 0, n.y ?? 0), side = linkSide(n) * T.s;
+    const lod = 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, tx, ty) {
+    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, n, b = linkBox(T, n)) {
+    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, n) {
+    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, n) {
+    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, n) {
-    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') {
+    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 [];
 }
 const browserImage = (src, onLoad) => {
@@ -142,7 +283,7 @@ const browserImage = (src, onLoad) => {
 };
 let loadImage = browserImage;
 /** Load pictures some other way from now on (null: the browser's). */
-export function setImageLoader(fn) { loadImage = fn || browserImage; imgs.clear(); }
+export function setImageLoader(fn) { 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 = null;
 export function setImageResolver(fn) { resolveStored = fn; imgs.clear(); }
@@ -154,6 +295,33 @@ export function aliasImage(from, to) {
     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(), 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() {
+    for (const [k, o] of thumbs) {
+        if (thumbs.size <= THUMBS_KEPT || o.used === thumbFrame)
+            break;
+        thumbs.delete(k);
+    }
+    thumbFrame++;
+}
+export function linkThumb(src) {
+    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) {
     if (!src)
         return null;
@@ -179,17 +347,74 @@ let drawFrame = 0;
 /** What paints a frame: the browser canvas by default; a host can draw elsewhere (e.g. Skia on a device). */
 let paint = () => draw();
 export function setFrameRenderer(fn) { paint = fn || (() => draw()); }
-/** Repaint on the next animation frame (several requests in one frame paint once). */
-export function requestDraw() {
+/*
+  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 = () => frame.drawingChanged;
+export function markDrawingKept() { 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 = () => frame.imagesChanged;
+export function markImagesKept() { frame.imagesChanged = false; }
+function schedule() {
     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() {
+    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, cx, cy) {
+    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() {
+    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() {
+    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() { 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() { 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). */
 export function setViewSize(W, H) {