@reekon-tools/boldr-cad 0.1.0 → 1.1.0

package/src/model/planGeom.ts

@@ -1,16 +1,31 @@
-import { clamp, hyp, norm2, pointInPoly } from './geom';
-import { roomValid } from './sketch';
-import type { Arc, Sketch, XY } from './types';
+import { clamp, hyp, norm2, normAng, pointInPoly } from './geom';
+import { roomGeom } from './rooms';
+import { frameMemo, roomValid } from './sketch';
+import type { Arc, Constraint, LineKind, Sketch, XY } from './types';
+import { faceCorner } from './wallfaces';
+import { getUnitPrefs, isMetric, type Unit } from '../units';
 
 /*
   Plan geometry shared by drawing, hit testing, snapping and the tools: grid steps, where a door/window sits on
   its wall, arc angles, and which side of a wall faces out. Pure (no view, no canvas).
 */
 
-export function gridSteps(s: number): { minor: number; major: number } {
-  const list = [1 / 16, 1 / 8, 1 / 4, 1 / 2, 1, 2, 6, 12, 24, 60, 120, 240, 600, 1200, 2400, 6000];
-  const minor = list.find(v => v * s >= 11) || 6000;
-  const major = [12, 60, 120, 600, 1200, 6000].find(v => v >= minor * 4) || minor * 5;
+/**
+ * The grid at a zoom (`s` px per inch): its finest lines (`minor`, what snapping uses) and its heavier ones (`major`),
+ * in inches. It follows the zoom in the drawing's units — 1/16", 1/8" … 6", 1', 2', 5'; or 1, 2, 5, 10 mm … — as fine
+ * as keeps its lines at least GRID_MIN_PX apart: what's drawn is exactly what's snapped to, spaced so each line can be
+ * picked out with a finger.
+ */
+export const GRID_MIN_PX = 16;
+const IMPERIAL = [1 / 16, 1 / 8, 1 / 4, 1 / 2, 1, 2, 6, 12, 24, 60, 120, 240, 600, 1200, 2400, 6000];
+const IMPERIAL_MAJOR = [12, 60, 120, 600, 1200, 6000];
+const MM = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000, 50000, 100000].map(v => v / 25.4);
+const MM_MAJOR = [10, 50, 100, 500, 1000, 5000, 10000, 50000, 100000, 500000].map(v => v / 25.4);
+
+export function gridSteps(s: number, unit: Unit = getUnitPrefs().unit): { minor: number; major: number } {
+  const metric = isMetric(unit), list = metric ? MM : IMPERIAL;
+  const minor = list.find(v => v * s >= GRID_MIN_PX) || list[list.length - 1];
+  const major = (metric ? MM_MAJOR : IMPERIAL_MAJOR).find(v => v >= minor * 4 - 1e-9) || minor * 5;
   return { minor, major };
 }
 
@@ -47,6 +62,157 @@ export function outsideSide(sk: Sketch, lid: string): number {
   const l = sk.lines[lid], a = sk.points[l.a], b = sk.points[l.b];
   const n = norm2(-(b.y - a.y), b.x - a.x);
   const m = { x: (a.x + b.x) / 2 + n[0] * 12, y: (a.y + b.y) / 2 + n[1] * 12 };
-  for (const id in sk.rooms) { const r = sk.rooms[id]; if (roomValid(sk, r) && pointInPoly(m, r.loop.map(p => sk.points[p]))) return -1; }
+  // (asked for every door and window on every frame: the rooms' outlines, and the boxes around them, are worked out
+  // once a frame — a room the box rules out isn't looked at more closely)
+  const rooms = frameMemo(sk, 'roomOutlines', () => Object.values(sk.rooms).filter(r => roomValid(sk, r)).map(r => {
+    const poly = r.loop.map(p => sk.points[p]), xs = poly.map(p => p.x), ys = poly.map(p => p.y);
+    return { poly, x0: Math.min(...xs), x1: Math.max(...xs), y0: Math.min(...ys), y1: Math.max(...ys) };
+  }));
+  for (const r of rooms) if (m.x >= r.x0 && m.x <= r.x1 && m.y >= r.y0 && m.y <= r.y1 && pointInPoly(m, r.poly)) return -1;
   return 1;
 }
+
+/** A wall's own record — a straight one's line, a curved one's circle or arc — when `id` is a wall (not a guide). */
+export function wallOf(sk: Sketch, id: string): { kind?: LineKind; thick?: number; constr?: boolean } | null {
+  const o = sk.lines[id] ?? sk.circles[id] ?? sk.arcs[id];
+  return o && o.kind === 'wall' && !o.constr ? o : null;
+}
+
+/** How thick a wall is (a curved one with none set: 4½", as it's drawn); 0 for a line. */
+export const wallThick = (o: { kind?: LineKind; thick?: number }): number => (o.kind === 'wall' ? o.thick || 4.5 : 0);
+
+/** A circle's or arc's centre and centreline radius; an arc's angles too (it runs counter-clockwise from a to b). */
+export function curveFrame(sk: Sketch, id: string): { o: XY; r: number; arc?: { t0: number; t1: number } } | null {
+  const ci = sk.circles[id];
+  if (ci) { const o = sk.points[ci.c]; return o ? { o, r: ci.r } : null; }
+  const a = sk.arcs[id];
+  if (!a || !sk.points[a.c] || !sk.points[a.a] || !sk.points[a.b]) return null;
+  const g = arcAngles(sk, a);
+  return { o: g.o, r: g.r, arc: { t0: g.t0, t1: g.t1 } };
+}
+
+/**
+ * The space against one side of a wall, if any (a point just past its face there is inside it): its id. A straight
+ * wall's sides are the left (+1) and right (−1) of its A → B; a curved one's, its outer (+1) and inner (−1) faces —
+ * nothing is inside a circle (a space has corners: it can't be bounded by one).
+ */
+export function spaceBeside(sk: Sketch, id: string, side: 1 | -1): string | null {
+  const l = sk.lines[id];
+  if (!l) return curveSpaceBeside(sk, id, side);
+  const a = sk.points[l.a], b = sk.points[l.b];
+  if (!a || !b) return null;
+  const n = norm2(-(b.y - a.y), b.x - a.x), k = side * ((l.kind === 'wall' ? l.thick / 2 : 0) + 1);
+  const m = { x: (a.x + b.x) / 2 + n[0] * k, y: (a.y + b.y) / 2 + n[1] * k };
+  for (const rid in sk.rooms) {
+    const r = sk.rooms[rid];
+    if (roomValid(sk, r) && pointInPoly(m, r.loop.map(p => sk.points[p]))) return rid;
+  }
+  return null;
+}
+
+function curveSpaceBeside(sk: Sketch, id: string, side: 1 | -1): string | null {
+  const f = curveFrame(sk, id), w = sk.circles[id] ?? sk.arcs[id];
+  if (!f || !w || (side === -1 && !f.arc)) return null;
+  // (just past the face at the middle of the arc, or anywhere around a circle)
+  const at = f.arc ? f.arc.t0 + normAng(f.arc.t1 - f.arc.t0) / 2 : 0, rr = f.r + side * (wallThick(w) / 2 + 1);
+  if (rr <= 0) return null;
+  const m = { x: f.o.x + Math.cos(at) * rr, y: f.o.y + Math.sin(at) * rr };
+  // (a space's outline as it's drawn: its arcs as arcs, not chords)
+  for (const rid in sk.rooms) {
+    const r = sk.rooms[rid];
+    if (roomValid(sk, r) && pointInPoly(m, roomGeom(sk, r).poly)) return rid;
+  }
+  return null;
+}
+
+/**
+ * The face a wall is measured on unless one is picked (a straight wall's length, a curved one's diameter): the side a
+ * space is on — the side it was tapped on (`tapped`), when there are spaces both sides — or none (its centreline) when
+ * there's no space beside it, or it isn't a wall.
+ */
+export function defaultFace(sk: Sketch, id: string, tapped?: 1 | -1): 1 | -1 | undefined {
+  if (!wallOf(sk, id)) return undefined;
+  const left = spaceBeside(sk, id, 1), right = spaceBeside(sk, id, -1);
+  if (left && right) return tapped ?? 1;
+  return left ? 1 : right ? -1 : undefined;
+}
+
+/**
+ * What one face of a wall is called. A straight wall's: its space's side between two spaces, inside or outside one —
+ * or, with no space against it (or one space either side of it: a wall standing in a room; or two spaces of one name),
+ * which way it faces on the page (Top, Bottom, Left, Right). A curved wall's: Outer or Inner, whatever is beside it.
+ */
+export function faceName(sk: Sketch, lid: string, side: 1 | -1): string {
+  if (!sk.lines[lid]) return side === 1 ? 'Outer' : 'Inner';
+  const here = spaceBeside(sk, lid, side), there = spaceBeside(sk, lid, side === 1 ? -1 : 1);
+  if (here && there) { if (sk.rooms[here].name !== sk.rooms[there].name) return sk.rooms[here].name + ' side'; }
+  else if (here) return 'Inside';
+  else if (there) return 'Outside';
+  const l = sk.lines[lid], a = sk.points[l.a], b = sk.points[l.b];
+  // (the face's outward direction: the left of A → B for +1; y is up)
+  const nx = -(b.y - a.y) * side, ny = (b.x - a.x) * side;
+  return Math.abs(ny) >= Math.abs(nx) ? (ny > 0 ? 'Top' : 'Bottom') : nx > 0 ? 'Right' : 'Left';
+}
+
+/**
+ * Where a length dimension's two ends are: its points — or, measured on walls' faces, the faces': along a wall, its
+ * face's two corners (what the number measures); between two walls, the foot on each face. Null if it isn't a length
+ * dimension or what it measures is gone.
+ */
+export function dimEnds(sk: Sketch, c: Constraint): { a: XY; b: XY } | null {
+  const P = (id?: string) => (id ? sk.points[id] : undefined);
+  if (c.type === 'dist') {
+    const a = P(c.a), b = P(c.b);
+    if (!a || !b) return null;
+    const w = c.face && c.line ? sk.lines[c.line] : undefined;
+    if (w && w.kind === 'wall' && (!c.kind || c.kind === 'al')) {
+      const fa = faceCorner(sk, c.line!, c.face!, 'a'), fb = faceCorner(sk, c.line!, c.face!, 'b');
+      if (fa && fb) return c.a === w.a ? { a: fa, b: fb } : { a: fb, b: fa };
+    }
+    return { a, b };
+  }
+  if (c.type === 'pldist') {
+    const l = c.l ? sk.lines[c.l] : undefined, p = P(c.p);
+    if (!l || !p) return null;
+    const A = sk.points[l.a], B = sk.points[l.b], len2 = (B.x - A.x) ** 2 + (B.y - A.y) ** 2 || 1;
+    const t = ((p.x - A.x) * (B.x - A.x) + (p.y - A.y) * (B.y - A.y)) / len2;
+    const f = { x: A.x + (B.x - A.x) * t, y: A.y + (B.y - A.y) * t };
+    if (!c.faces) return { a: p, b: f };
+    // each end moved onto its face: toward the other for a face toward it, away for a far face
+    const d = hyp(p.x - f.x, p.y - f.y), L = Math.sqrt(len2);
+    const [ux, uy] = d > 1e-9 ? [(p.x - f.x) / d, (p.y - f.y) / d] : [-(B.y - A.y) / L, (B.x - A.x) / L];
+    const th = (id?: string) => { const w = id ? sk.lines[id] : undefined; return w && w.kind === 'wall' ? w.thick : 0; };
+    const kl = (c.faces[0] * th(c.l)) / 2, kp = (c.faces[1] * th(c.l2)) / 2;
+    return { a: { x: p.x - ux * kp, y: p.y - uy * kp }, b: { x: f.x + ux * kl, y: f.y + uy * kl } };
+  }
+  return null;
+}
+
+/**
+ * Where a diameter (or radius) dimension's arrows go: its curve's centre, and the radius it measures at — the
+ * centreline's, or on a curved wall's face, that face's.
+ */
+export function dimRadius(sk: Sketch, c: Constraint): { o: XY; r: number } | null {
+  const f = c.c ? curveFrame(sk, c.c) : null, w = c.c ? sk.circles[c.c] ?? sk.arcs[c.c] : undefined;
+  if (!f || !w) return null;
+  return { o: f.o, r: f.r + (c.face && w.kind === 'wall' ? (c.face * wallThick(w)) / 2 : 0) };
+}
+
+/** A wall's edge as said to people: 'Inside edge', 'Outside edge', 'Kitchen side', 'Top edge', 'Inner edge'. */
+export function edgeLabel(sk: Sketch, lid: string, side: 1 | -1): string {
+  const n = faceName(sk, lid, side);
+  return n.endsWith(' side') ? n : n + ' edge';
+}
+
+/** A wall edge's selection id, and back: '<line id>|1' or '<line id>|-1'. */
+export const edgeId = (lid: string, side: 1 | -1): string => lid + '|' + side;
+export function edgeOf(id: string): [string, 1 | -1] {
+  const i = id.lastIndexOf('|');
+  return [id.slice(0, i), id.slice(i + 1) === '-1' ? -1 : 1];
+}
+
+/** Which side of line `lid` a point is on: +1 the left of its A → B, −1 the right. */
+export function sideOf(sk: Sketch, lid: string, p: XY): 1 | -1 {
+  const l = sk.lines[lid], a = sk.points[l.a], b = sk.points[l.b];
+  return (b.x - a.x) * (p.y - a.y) - (b.y - a.y) * (p.x - a.x) >= 0 ? 1 : -1;
+}

package/src/model/project.ts

@@ -1,3 +1,4 @@
+import { normalizeImages } from './images';
 import { newPage } from './demo';
 import type { Page, Project } from './types';
 
@@ -6,9 +7,9 @@ import type { Page, Project } from './types';
  * name appears in more than one level, it's prefixed with the level's name ("Level 2 · Floor plan").
  */
 export function migrateProject(p: { name: string; pages?: Page[]; spaces?: { name: string; pages: Page[] }[] }): Project {
-  if (p.pages) return { name: p.name, pages: p.pages };
+  if (p.pages) return { name: p.name, pages: p.pages.map(normalizeImages) };
   const spaces = p.spaces || [], count: Record<string, number> = {};
   for (const s of spaces) for (const pg of s.pages) count[pg.name] = (count[pg.name] || 0) + 1;
-  const pages = spaces.flatMap(s => s.pages.map(pg => (count[pg.name] > 1 ? { ...pg, name: s.name + ' · ' + pg.name } : pg)));
+  const pages = spaces.flatMap(s => s.pages.map(pg => normalizeImages(count[pg.name] > 1 ? { ...pg, name: s.name + ' · ' + pg.name } : pg)));
   return { name: p.name, pages: pages.length ? pages : [newPage('Floor plan')] };
 }

package/src/model/projectfile.ts

@@ -1,3 +1,4 @@
+import { normalizeImages } from './images';
 import { migrateProject } from './project';
 import type { Project } from './types';
 
@@ -38,7 +39,7 @@ export function projectFromFile(text: string): Project {
     for (const k of ['circles', 'arcs', 'cons', 'rooms', 'openings']) if (!sk[k] || typeof sk[k] !== 'object') sk[k] = {};
     if (!Array.isArray(sk.notes)) sk.notes = [];
     if (!sk.seq) sk.seq = { room: 1 };
-    pg.underlay = pg.underlay ?? null;
+    normalizeImages(pg);
     pg.view = pg.view ?? null;
   }
   return p;

package/src/model/rooms.ts

@@ -171,7 +171,7 @@ export function roomGeom(sk: Sketch, r: Room): RoomGeom {
  * leave it out for loops of straight lines. Null if it's under 1 sq ft.
  */
 export function maybeRoom(sk: Sketch, loop: string[], edges?: string[]): string | null {
-  if (loop.length < 2) return null;
+  if (loop.length < 2 || 'cabs' in sk) return null; // spaces are the plan's: not on a wall face
   const es = edges || roomEdges(sk, { loop, name: '' });
   if (!es) return null;
   if (Math.abs(polyArea(outline(sk, loop, es).pts)) < 144) return null;

package/src/model/settings.ts

@@ -8,11 +8,17 @@ export interface Layers {
   print: boolean;
   rooms: boolean;
   annot: boolean;
+  /** cabinets, doors and windows snap to corners and each other as they're placed and dragged */
+  objSnap: boolean;
+  /** cabinets' footprints in the plan */
+  cabinets: boolean;
 }
 
 export interface Settings extends UnitPrefs {
   snapGrid: boolean;
   autoCons: boolean;
+  /** picking a tool says in a line what it does (under the tabs, for a moment) */
+  toolTips: boolean;
   showCons: boolean;
   theme: 'system' | 'light' | 'dark';
   welcomed: boolean;
@@ -21,10 +27,10 @@ export interface Settings extends UnitPrefs {
   wallH: number;
 }
 
-export const defaultLayers = (): Layers => ({ underlay: true, construction: true, dims: true, print: true, rooms: true, annot: true });
+export const defaultLayers = (): Layers => ({ underlay: true, construction: true, dims: true, print: true, rooms: true, annot: true, cabinets: true, objSnap: true });
 
 export const settings = sessionState((): Settings => ({
-  unit: 'ftin', denom: 16, snapGrid: false, autoCons: true, showCons: true, theme: 'system', welcomed: false,
+  unit: 'ftin', denom: 16, snapGrid: false, autoCons: true, toolTips: true, showCons: true, theme: 'system', welcomed: false,
   layers: defaultLayers(), wallH: 96,
 }));
 

package/src/model/sketch.ts

@@ -1,7 +1,8 @@
 import { hyp } from './geom';
+import { faceEdit, faceEmpty, faceKeyParts, gcCabinets } from './faces';
 import { uid } from './ids';
 import { pruneOpeningDims } from './openings';
-import type { Arc, Circle, Constraint, Line, LineKind, Pt, Room, SelItem, Sketch } from './types';
+import type { Arc, Circle, Constraint, Line, LineKind, Pt, Room, SelItem, Sketch, WallFace } from './types';
 import { onSessionReset } from './session';
 
 export function emptySketch(): Sketch {
@@ -23,9 +24,12 @@ export function addPoint(sk: Sketch, x: number, y: number, extra?: Partial<Pt>):
   return id;
 }
 
+/** A new wall's thickness, inches (4 1/2": a stud wall with drywall both sides), until it's changed. */
+export const WALL_THICK = 4.5;
+
 export function addLine(sk: Sketch, a: string, b: string, props: { kind?: LineKind; constr?: boolean; thick?: number } = {}): string {
   const id = uid('l');
-  sk.lines[id] = { a, b, kind: props.kind || 'line', constr: !!props.constr, thick: props.thick || 4.5 };
+  sk.lines[id] = { a, b, kind: props.kind || 'line', constr: !!props.constr, thick: props.thick || WALL_THICK };
   return id;
 }
 
@@ -72,14 +76,17 @@ export function gc(sk: Sketch): void {
       for (const k of REFKEYS) {
         const v = c[k];
         if (v != null && typeof v === 'string' && !refExists(sk, v)) {
-          if (k === 'line') c.line = null;
+          if (k === 'line') {
+            c.line = null;
+            // (measured on its wall's face, the wall gone: end to end, as it is now — nothing moves)
+            if (c.face) { delete c.face; const a = sk.points[c.a!], b = sk.points[c.b!]; if (a && b && c.driving !== false) c.value = Math.hypot(b.x - a.x, b.y - a.y); }
+          }
           else { delete sk.cons[id]; changed = true; break; }
         }
       }
       if (sk.cons[id] && (c.type === 'h' || c.type === 'v' || c.type === 'dist') && c.a === c.b) { delete sk.cons[id]; changed = true; }
     }
     for (const id in sk.openings) if (!sk.lines[sk.openings[id].line]) { delete sk.openings[id]; changed = true; }
-    if (sk.elev) for (const k in sk.elev) if (!sk.lines[k.split('|')[0]] || !sk.elev[k].length) delete sk.elev[k];
     if (pruneOpeningDims(sk)) changed = true;
     const used = new Set<string>();
     for (const id in sk.lines) { used.add(sk.lines[id].a); used.add(sk.lines[id].b); }
@@ -88,13 +95,70 @@ export function gc(sk: Sketch): void {
     for (const id in sk.openings) for (const d of sk.openings[id].dims || []) if ('pt' in d.ref) used.add(d.ref.pt);
     for (const id in sk.points) {
       const p = sk.points[id];
-      if (!used.has(id) && !p.origin && !p.datum && !pinnedPoints.has(id)) { delete sk.points[id]; changed = true; }
+      if (!used.has(id) && !p.origin && !p.datum && !p.anchor && !pinnedPoints.has(id)) { delete sk.points[id]; changed = true; }
     }
   }
-  for (const id in sk.rooms) if (!roomValid(sk, sk.rooms[id])) delete sk.rooms[id];
+  // (each room's edges looked up by their ends, not by scanning every line for each edge: this runs after every edit)
+  withLineIndex(sk, () => { for (const id in sk.rooms) if (!roomValid(sk, sk.rooms[id])) delete sk.rooms[id]; });
+  if (sk.faces) gcFaces(sk);
+}
+
+/** Wall faces: each goes with its wall, and one with nothing drawn on it isn't kept (unless it's open); each is cleaned up as a sketch. */
+function gcFaces(sk: Sketch): void {
+  for (const key in sk.faces!) {
+    const face = sk.faces![key];
+    if (!sk.lines[faceKeyParts(key).lid]) { delete sk.faces![key]; continue; }
+    gc(face);
+    gcCabinets(face);
+    if (key !== faceEdit.key && faceEmpty(face)) delete sk.faces![key];
+  }
+  if (!Object.keys(sk.faces!).length) delete sk.faces;
+}
+
+/*
+  While a frame is drawn the sketch can't change, so its lines are indexed by their two ends once for the frame
+  (withLineIndex) rather than scanned on every lookup: drawing asks which lines join two points for every room edge,
+  for every door and window (which side of its wall faces out) and for every H/V badge — rooms × edges × lines per
+  opening — which on a 20-room plan was most of a frame's time.
+*/
+/** each end → the other end → the lines joining them (one list for both ways round) */
+let lineIndex: { sk: Sketch; pairs: Map<string, Map<string, string[]>>; memo: Map<string, unknown> } | null = null;
+
+/** Run `fn` with `sk`'s lines indexed by their ends (nothing in `fn` may change the sketch). */
+export function withLineIndex<T>(sk: Sketch, fn: () => T): T {
+  if (lineIndex) return fn();
+  const pairs = new Map<string, Map<string, string[]>>();
+  const from = (p: string) => pairs.get(p) ?? pairs.set(p, new Map()).get(p)!;
+  for (const id in sk.lines) {
+    const l = sk.lines[id];
+    let ids = pairs.get(l.a)?.get(l.b);
+    if (!ids) { ids = []; from(l.a).set(l.b, ids); from(l.b).set(l.a, ids); }
+    ids.push(id);
+  }
+  lineIndex = { sk, pairs, memo: new Map() };
+  try { return fn(); } finally { lineIndex = null; }
+}
+
+/** Inside withLineIndex, what `compute` gives is worked out once for the frame; outside it, every time. */
+export function frameMemo<T>(sk: Sketch, key: string, compute: () => T): T {
+  if (!lineIndex || lineIndex.sk !== sk) return compute();
+  const memo = lineIndex.memo;
+  if (!memo.has(key)) memo.set(key, compute());
+  return memo.get(key) as T;
+}
+
+/** The first line joining two points, if any (linesBetween(…)[0], without making a list for it). */
+export function lineBetween(sk: Sketch, a: string, b: string): string | undefined {
+  if (lineIndex && lineIndex.sk === sk) return lineIndex.pairs.get(a)?.get(b)?.[0];
+  for (const id in sk.lines) {
+    const l = sk.lines[id];
+    if ((l.a === a && l.b === b) || (l.a === b && l.b === a)) return id;
+  }
+  return undefined;
 }
 
 export function linesBetween(sk: Sketch, a: string, b: string): string[] {
+  if (lineIndex && lineIndex.sk === sk) return lineIndex.pairs.get(a)?.get(b)?.slice() ?? [];
   const out: string[] = [];
   for (const id in sk.lines) {
     const l = sk.lines[id];
@@ -113,18 +177,20 @@ export function roomValid(sk: Sketch, r: Room): boolean {
       const id = r.edges[i], l = sk.lines[id], ar = sk.arcs[id];
       const ends = l ? [l.a, l.b] : ar ? [ar.a, ar.b] : null;
       if (!ends || !((ends[0] === a && ends[1] === b) || (ends[0] === b && ends[1] === a))) return false;
-    } else if (!linesBetween(sk, a, b).length) return false;
+    } else if (!lineBetween(sk, a, b)) return false;
   }
   return true;
 }
 
 export function deleteSel(sk: Sketch, items: SelItem[]): void {
+  const cabCorners = new Set(Object.values((sk as WallFace).cabs ?? {}).flatMap(cb => [cb.bl, cb.br, cb.tr, cb.tl]));
   for (const it of items) {
-    if (it.type === 'point') { const p = sk.points[it.id]; if (p && !p.origin) delete sk.points[it.id]; }
-    else if (it.type === 'line') delete sk.lines[it.id];
+    // (a cabinet's corner goes with its cabinet, not on its own)
+    if (it.type === 'point') { const p = sk.points[it.id]; if (p && !p.origin && !p.anchor && !cabCorners.has(it.id)) delete sk.points[it.id]; }
+    else if (it.type === 'line') { if (!sk.lines[it.id]?.anchor && !sk.lines[it.id]?.cab) delete sk.lines[it.id]; } // (a cabinet's edge goes with it)
     else if (it.type === 'circle') delete sk.circles[it.id];
     else if (it.type === 'arc') delete sk.arcs[it.id];
-    else if (it.type === 'cons' || it.type === 'dim') delete sk.cons[it.id];
+    else if (it.type === 'cons' || it.type === 'dim') { if (!sk.cons[it.id]?.anchor) delete sk.cons[it.id]; }
     else if (it.type === 'room') delete sk.rooms[it.id];
     else if (it.type === 'opening') delete sk.openings[it.id];
     else if (it.type === 'odim') {
@@ -136,9 +202,26 @@ export function deleteSel(sk: Sketch, items: SelItem[]): void {
   gc(sk);
 }
 
+/**
+ * Join two points: one takes the other's place (a shared id) — or, two of a wall face's anchors (named by the plan,
+ * so neither can go), they're held together where they are (level and plumb with each other, hidden). False if they
+ * can't be (two the plan fixes).
+ */
+export function joinPoints(sk: Sketch, keep: string, drop: string): boolean {
+  const A = sk.points[keep], B = sk.points[drop];
+  if (!A || !B || keep === drop) return false;
+  if (!(A.anchor && B.anchor)) return mergePoints(sk, keep, drop);
+  if (A.fixed && B.fixed) return false;
+  addCons(sk, { type: 'h', a: keep, b: drop, elev: true });
+  addCons(sk, { type: 'v', a: keep, b: drop, elev: true });
+  return true;
+}
+
 /** Replace every reference to `drop` with `keep`. Coincidence = shared id. */
 export function mergePoints(sk: Sketch, keep: string, drop: string): boolean {
   if (keep === drop || !sk.points[keep] || !sk.points[drop]) return false;
+  // a wall face's anchor (set by the plan) is the one that stays
+  if (sk.points[drop].anchor) { if (sk.points[keep].anchor) return false; [keep, drop] = [drop, keep]; }
   for (const id of linesBetween(sk, keep, drop)) delete sk.lines[id];
   const rep = (v: string) => (v === drop ? keep : v);
   for (const id in sk.lines) { const l = sk.lines[id]; l.a = rep(l.a); l.b = rep(l.b); }
@@ -150,6 +233,8 @@ export function mergePoints(sk: Sketch, keep: string, drop: string): boolean {
   }
   for (const id in sk.rooms) sk.rooms[id].loop = sk.rooms[id].loop.map(rep);
   for (const id in sk.openings) for (const d of sk.openings[id].dims || []) if ('pt' in d.ref) d.ref.pt = rep(d.ref.pt);
+  // a wall face's cabinets: a corner joined to another point is that point now (else the cabinet would lose a corner and go)
+  for (const cb of Object.values((sk as WallFace).cabs ?? {})) { cb.bl = rep(cb.bl); cb.br = rep(cb.br); cb.tr = rep(cb.tr); cb.tl = rep(cb.tl); }
   if (sk.points[drop].fixed) sk.points[keep].fixed = true;
   delete sk.points[drop];
   // drop duplicate lines
@@ -194,19 +279,21 @@ export function restorePos(sk: Sketch, s: PosSnapshot): void {
 
 /** Every line and arc joined end to end with the given ones (through shared points), including them. */
 export function connectedGeometry(sk: Sketch, lineIds: string[], arcIds: string[] = []): { lines: string[]; arcs: string[] } {
+  // on a wall face, the plan's corners and edges aren't part of a shape: nothing joins through them
   const pts = new Set<string>(), lines = new Set(lineIds), arcs = new Set(arcIds);
-  lineIds.forEach(id => { const l = sk.lines[id]; if (l) { pts.add(l.a); pts.add(l.b); } });
-  arcIds.forEach(id => { const a = sk.arcs[id]; if (a) { pts.add(a.a); pts.add(a.b); } });
+  const join = (p: string) => { if (!sk.points[p]?.anchor) pts.add(p); };
+  lineIds.forEach(id => { const l = sk.lines[id]; if (l) { join(l.a); join(l.b); } });
+  arcIds.forEach(id => { const a = sk.arcs[id]; if (a) { join(a.a); join(a.b); } });
   let grow = true;
   while (grow) {
     grow = false;
     for (const id in sk.lines) {
       const l = sk.lines[id];
-      if (!lines.has(id) && (pts.has(l.a) || pts.has(l.b))) { lines.add(id); pts.add(l.a); pts.add(l.b); grow = true; }
+      if (!lines.has(id) && !l.anchor && !l.cab && (pts.has(l.a) || pts.has(l.b))) { lines.add(id); join(l.a); join(l.b); grow = true; }
     }
     for (const id in sk.arcs) {
       const a = sk.arcs[id];
-      if (!arcs.has(id) && (pts.has(a.a) || pts.has(a.b))) { arcs.add(id); pts.add(a.a); pts.add(a.b); grow = true; }
+      if (!arcs.has(id) && (pts.has(a.a) || pts.has(a.b))) { arcs.add(id); join(a.a); join(a.b); grow = true; }
     }
   }
   return { lines: [...lines], arcs: [...arcs] };

package/src/model/smooth.ts

@@ -0,0 +1,51 @@
+type P = [number, number];
+
+/*
+  A pen stroke is drawn as a smooth curve through the points it was sampled at, not straight from one to the next —
+  which shows a corner at every sample wherever they're far apart (a quick stroke, a finger's coarser samples, or just
+  zoomed in). Centripetal Catmull-Rom, as cubic Béziers: it passes through every point, doesn't loop or overshoot where
+  the spacing changes, and is the same curve at any zoom — so the screen, a tap on it and an export all agree.
+*/
+
+/** The curve through `pts` as one cubic Bézier per span, [first control, second control, end], from the first point. */
+export function smoothSpans(pts: P[]): [P, P, P][] {
+  // (a repeated point makes no span)
+  const q: P[] = [];
+  for (const p of pts) { const l = q[q.length - 1]; if (!l || p[0] !== l[0] || p[1] !== l[1]) q.push(p); }
+  const n = q.length, out: [P, P, P][] = [];
+  // past each end, the point mirrored through it: the curve leaves along its first span and arrives along its last
+  const at = (i: number): P =>
+    i < 0 ? [2 * q[0][0] - q[1][0], 2 * q[0][1] - q[1][1]] : i >= n ? [2 * q[n - 1][0] - q[n - 2][0], 2 * q[n - 1][1] - q[n - 2][1]] : q[i];
+  // (centripetal: each span weighs in by the square root of its length)
+  const w = (a: P, b: P) => Math.sqrt(Math.hypot(b[0] - a[0], b[1] - a[1]));
+  for (let i = 0; i + 1 < n; i++) {
+    const p0 = at(i - 1), p1 = q[i], p2 = q[i + 1], p3 = at(i + 2);
+    const a = w(p0, p1), b = w(p1, p2), c = w(p2, p3);
+    const k1 = 3 * a * (a + b), k2 = 3 * c * (c + b), m1 = 2 * a * a + 3 * a * b + b * b, m2 = 2 * c * c + 3 * c * b + b * b;
+    out.push([
+      [(a * a * p2[0] - b * b * p0[0] + m1 * p1[0]) / k1, (a * a * p2[1] - b * b * p0[1] + m1 * p1[1]) / k1],
+      [(c * c * p1[0] - b * b * p3[0] + m2 * p2[0]) / k2, (c * c * p1[1] - b * b * p3[1] + m2 * p2[1]) / k2],
+      p2,
+    ]);
+  }
+  return out;
+}
+
+/** The same curve as straight pieces, never more than `tol` off it — for whatever draws only lines (an export, a tap). */
+export function smoothPolyline(pts: P[], tol: number): P[] {
+  if (pts.length < 3) return pts.slice();
+  const out: P[] = [pts[0]];
+  let from = pts[0];
+  for (const [c1, c2, to] of smoothSpans(pts)) {
+    // how many pieces keep within `tol` (Wang’s bound, from how sharply the controls turn; the cap only stops a runaway)
+    const dd = Math.max(Math.hypot(from[0] - 2 * c1[0] + c2[0], from[1] - 2 * c1[1] + c2[1]), Math.hypot(c1[0] - 2 * c2[0] + to[0], c1[1] - 2 * c2[1] + to[1]));
+    const k = Math.min(256, Math.max(1, Math.ceil(Math.sqrt((0.75 * dd) / tol))));
+    for (let j = 1; j < k; j++) {
+      const t = j / k, s = 1 - t, A = s * s * s, B = 3 * s * s * t, C = 3 * s * t * t, D = t * t * t;
+      out.push([A * from[0] + B * c1[0] + C * c2[0] + D * to[0], A * from[1] + B * c1[1] + C * c2[1] + D * to[1]]);
+    }
+    out.push(to);
+    from = to;
+  }
+  return out;
+}

package/src/model/store.ts

@@ -2,7 +2,8 @@ import { seedProject } from './demo';
 import { deep } from './ids';
 import { defaultLayers, settings } from './settings';
 import { migrateProject } from './project';
-import type { Page, Project, Sketch } from './types';
+import { faceEdit, faceOf } from './faces';
+import type { Page, Project, Sketch, WallFace } from './types';
 import { onSessionReset, sessionState } from './session';
 
 export { migrateProject };
@@ -18,16 +19,29 @@ export interface Persistence {
   load(): void;
   /** Save the project now. Returns false if images had to be left out. */
   save(): boolean;
+  /** It keeps where each page was viewed from, so a pan or zoom alone is worth saving (not so a drawing synced to a job). */
+  keepsView?: boolean;
 }
 
 export const store = sessionState((): { project: Project; curPageId: string } => ({ project: null as unknown as Project, curPageId: '' }));
 
 export const allPages = (): Page[] => store.project.pages;
 export const page = (): Page => allPages().find(p => p.id === store.curPageId)!;
-export const SK = (): Sketch => page().sk;
+/** The page's floor plan (whatever is being edited). */
+export const planSK = (): Sketch => page().sk;
+/** The sketch being edited: the floor plan, or the wall face open in the wall view (see model/faces.ts faceEdit). */
+export const SK = (): Sketch => (faceEdit.key ? faceOf(page().sk, faceEdit.key, true) : page().sk);
+/** Whether a wall face is being edited (the wall view is open). */
+export const editingFace = (): boolean => faceEdit.key != null;
+/** Put back a copy of the sketch being edited (a change that couldn't be made). */
+export function replaceSK(next: Sketch): void {
+  if (faceEdit.key) page().sk.faces![faceEdit.key] = next as WallFace;
+  else page().sk = next;
+}
 
 /** This browser's localStorage (the default). */
 export const localPersistence: Persistence = {
+  keepsView: true,
   load() {
     try {
       const raw = localStorage.getItem(STORE_KEY);
@@ -50,7 +64,7 @@ export const localPersistence: Persistence = {
     } catch {
       try {
         const p = deep(store.project);
-        p.pages.forEach(pg => (pg.underlay = null));
+        p.pages.forEach(pg => (pg.underlays = []));
         localStorage.setItem(STORE_KEY, payload(p));
       } catch { /* nothing more we can do */ }
       return false;
@@ -75,9 +89,26 @@ export function load(): void {
 
 let saveT: ReturnType<typeof setTimeout> | undefined;
 onSessionReset(() => clearTimeout(saveT));
+
+/**
+ * Whether nothing is being done on the drawing just now (no finger or pointer down): a save waits for that — saving
+ * takes the JavaScript thread a moment, felt as a hitch in a drag or a stroke started just after an edit. (Never for
+ * long: a lift that was lost mustn't hold saving back.)
+ */
+let idle: () => boolean = () => true;
+export function setSaveIdle(fn: (() => boolean) | null): void { idle = fn ?? (() => true); }
+const SAVE_MS = 700, WAIT_MS = 300, WAITS = 10;
+
 export function saveSoon(): void {
   clearTimeout(saveT);
-  saveT = setTimeout(saveNow, 700);
+  let waits = 0;
+  const attempt = () => { if (!idle() && waits++ < WAITS) saveT = setTimeout(attempt, WAIT_MS); else saveNow(); };
+  saveT = setTimeout(attempt, SAVE_MS);
+}
+
+/** The view moved (a pan or a zoom): saved only where that's kept (see Persistence.keepsView). */
+export function saveViewSoon(): void {
+  if (persistence.keepsView) saveSoon();
 }
 
 /** Save now. Returns false if underlays had to be left out. */