@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/editor/face.ts

@@ -0,0 +1,227 @@
+import { afterEdit, tryAddConstraint } from '../app/edit';
+import { ed } from '../app/state';
+import { measure } from '../model/constraints';
+import { cabPoints, cornerAnchor, endEdge } from '../model/faces';
+import { dropHistory, pushHistory } from '../model/history';
+import { uid } from '../model/ids';
+import { settings } from '../model/settings';
+import { addLine, addPoint } from '../model/sketch';
+import { planSK, SK } from '../model/store';
+import { elevOpenings } from '../model/elevation';
+import type { Cabinet, Constraint, WallFace } from '../model/types';
+import { requestDraw } from '../render/view';
+import { editDim } from '../tools/dim';
+import { fmtLen } from '../units';
+import { elev } from './elevation';
+import { openKeypad, toast, updateCtx } from './ports';
+
+/*
+  Things the wall view adds to a wall face beyond what the plan's tools draw: cabinets, height lines, and the
+  dimensions behind the wall view's chips (along the floor, off the floor, a cabinet's size). The face is the sketch
+  being edited (SK()) while the wall view is open; x runs across the wall as seen, y up from the floor.
+*/
+
+/** A new cabinet: one standard size (24" wide, 34½" high, 24" deep) — change it once it's placed. */
+export const CAB = { w: 24, h: 34.5, d: 24 };
+
+/** The wall face being edited. */
+export const curFace = (): WallFace => SK() as WallFace;
+
+const q = () => 1 / settings.denom;
+const round = (v: number) => Math.round(v / q()) * q();
+
+/** The cabinets on the face with their extent. */
+export function cabExtents(face: WallFace = curFace()): { id: string; u0: number; u1: number; z0: number; z1: number }[] {
+  return Object.entries(face.cabs ?? {}).map(([id, cb]) => {
+    const ps = cabPoints(cb).map(p => face.points[p]).filter(Boolean);
+    return { id, u0: Math.min(...ps.map(p => p.x)), u1: Math.max(...ps.map(p => p.x)), z0: Math.min(...ps.map(p => p.y)), z1: Math.max(...ps.map(p => p.y)) };
+  });
+}
+
+/**
+ * Where a new cabinet goes for a tap at (u, z): centred on it, inside the wall, and pulled against a corner or the
+ * side of a cabinet within 8" (and onto the floor, the ceiling or a cabinet's top or bottom within 6"). Nothing holds
+ * it there: like a door or window, it's placed, and its dimensions lock it.
+ */
+export function cabinetSpot(u: number, z: number): { u0: number; z0: number } | null {
+  const f = elev.frame;
+  if (!f || f.face[1] - f.face[0] < CAB.w - 1e-6 || f.H < CAB.h - 1e-6) return null;
+  let u0 = Math.min(Math.max(round(u - CAB.w / 2), f.face[0]), f.face[1] - CAB.w);
+  let z0 = Math.min(Math.max(round(z - CAB.h / 2), 0), f.H - CAB.h);
+  const cabs = settings.layers.objSnap ? cabExtents() : [], ops = settings.layers.objSnap ? elevOpenings(planSK(), f) : [];
+  // its sides against the corners and other cabinets, or in line with a door's or window's sides
+  const sides = [f.face[0], ...cabs.map(c => c.u1), ...ops.flatMap(o => [o.u0, o.u1])], ends = [f.face[1], ...cabs.map(c => c.u0), ...ops.flatMap(o => [o.u0, o.u1])];
+  let best = settings.layers.objSnap ? 8 : 0, nu = u0;
+  for (const x of sides) if (Math.abs(u0 - x) < best) { best = Math.abs(u0 - x); nu = x; }
+  for (const x of ends) if (Math.abs(u0 + CAB.w - x) < best) { best = Math.abs(u0 + CAB.w - x); nu = x - CAB.w; }
+  u0 = nu;
+  // its bottom on the floor or another cabinet (or just over a window's head); its top under a cabinet, or a window's sill
+  const floors = [0, ...cabs.map(c => c.z1), ...ops.filter(o => o.type === 'window').map(o => o.head)];
+  const ceilings = [f.H, ...cabs.map(c => c.z0), ...ops.filter(o => o.type === 'window').map(o => o.sill)];
+  let nz = z0;
+  best = settings.layers.objSnap ? 6 : 0;
+  for (const y of floors) if (Math.abs(z0 - y) < best) { best = Math.abs(z0 - y); nz = y; }
+  for (const y of ceilings) if (Math.abs(z0 + CAB.h - y) < best) { best = Math.abs(z0 + CAB.h - y); nz = y - CAB.h; }
+  return { u0, z0: nz };
+}
+
+/**
+ * Snap a cabinet being dragged (by du, dz from where its box started): its sides to the wall's corners, other cabinets'
+ * sides and doors' and windows' edges, its bottom and top to the floor, the ceiling, other cabinets' tops and bottoms
+ * and windows' sills and heads — whichever is nearest within `tol` inches, across and up separately.
+ */
+export function snapCabinetMove(id: string, box: { u0: number; u1: number; z0: number; z1: number }, du: number, dz: number, tol: number): [number, number] {
+  return snapObjectMove({ cab: id }, box, du, dz, tol);
+}
+
+/**
+ * Snap anything being dragged on the wall (a cabinet, a door or window — `self`, left out of the targets): its sides to
+ * the wall's corners and the other objects' sides, its bottom and top to the floor, the ceiling and the other objects'
+ * tops and bottoms (sills and heads), whichever is nearest within `tol` inches, across and up separately. Off when
+ * Object snapping is (Layers).
+ */
+export function snapObjectMove(self: { cab?: string; op?: string }, box: { u0: number; u1: number; z0: number; z1: number }, du: number, dz: number, tol: number): [number, number] {
+  const f = elev.frame;
+  if (!f || !settings.layers.objSnap) return [du, dz];
+  const others = cabExtents().filter(c => c.id !== self.cab), ops = elevOpenings(planSK(), f).filter(o => o.id !== self.op);
+  const xs = [f.face[0], f.face[1], ...others.flatMap(c => [c.u0, c.u1]), ...ops.flatMap(o => [o.u0, o.u1])];
+  const zs = [0, f.H, ...others.flatMap(c => [c.z0, c.z1]), ...ops.flatMap(o => [o.sill, o.head])];
+  const pull = (edges: number[], targets: number[]) => {
+    let best: number | null = null;
+    for (const e of edges) for (const t of targets) if (Math.abs(t - e) < tol && (best == null || Math.abs(t - e) < Math.abs(best))) best = t - e;
+    return best ?? 0;
+  };
+  return [du + pull([box.u0 + du, box.u1 + du], xs), dz + pull([box.z0 + dz, box.z1 + dz], zs)];
+}
+
+/** Place a cabinet (the standard size) for a tap at (u, z), and select it. Returns its id. */
+export function addCabinet(u: number, z: number): string | null {
+  const spot = cabinetSpot(u, z);
+  if (!spot) { toast('That wall is too small for a ' + fmtLen(CAB.w) + ' × ' + fmtLen(CAB.h) + ' cabinet.', { warn: true }); return null; }
+  pushHistory();
+  const face = curFace(), id = uid('cab'), { u0, z0 } = spot;
+  const cb: Cabinet = {
+    bl: addPoint(face, u0, z0), br: addPoint(face, u0 + CAB.w, z0), tr: addPoint(face, u0 + CAB.w, z0 + CAB.h), tl: addPoint(face, u0, z0 + CAB.h), depth: CAB.d,
+  };
+  face.cabs = face.cabs ?? {};
+  face.cabs[id] = cb;
+  for (const [a, b] of [[cb.bl, cb.br], [cb.br, cb.tr], [cb.tr, cb.tl], [cb.tl, cb.bl]]) face.lines[addLine(face, a, b)].cab = id;
+  // square, and its standard size (not a measurement until it's entered)
+  const shape: Constraint[] = [
+    { type: 'h', a: cb.bl, b: cb.br, elev: true }, { type: 'h', a: cb.tl, b: cb.tr, elev: true },
+    { type: 'v', a: cb.bl, b: cb.tl, elev: true }, { type: 'v', a: cb.br, b: cb.tr, elev: true },
+  ];
+  for (const c of shape) tryAddConstraint(c, { silent: true });
+  const w = tryAddConstraint({ type: 'dist', kind: 'h', a: cb.bl, b: cb.br, value: CAB.w, driving: true, sign: 1, auto: true, elev: true }, { silent: true });
+  const h = tryAddConstraint({ type: 'dist', kind: 'v', a: cb.br, b: cb.tr, value: CAB.h, driving: true, sign: 1, auto: true, elev: true }, { silent: true });
+  if (w.ok && w.id) cb.w = w.id;
+  if (h.ok && h.id) cb.h = h.id;
+  // (placed, not selected: tap it to size it)
+  ed.sel = [];
+  afterEdit();
+  return id;
+}
+
+/** A level line all the way across the wall, `z` above the floor (a counter, a chair rail), held there by a height dimension. */
+export function addHeightLine(z: number): string | null {
+  const f = elev.frame;
+  if (!f) return null;
+  if (z <= 0 || z >= f.H) { toast('Enter a height between the floor and the ceiling (' + fmtLen(f.H) + ').', { warn: true }); return null; }
+  pushHistory();
+  const face = curFace(), right = f.leftEnd === 'a' ? 'b' : 'a';
+  const pa = addPoint(face, f.face[0], z), pb = addPoint(face, f.face[1], z), id = addLine(face, pa, pb);
+  for (const c of [
+    { type: 'online', p: pa, l: endEdge(f.leftEnd) }, { type: 'online', p: pb, l: endEdge(right) }, { type: 'h', a: pa, b: pb },
+    { type: 'dist', kind: 'v', a: cornerAnchor(f.leftEnd), b: pa, value: z, driving: true, sign: 1 },
+  ] as Constraint[]) tryAddConstraint(c, { silent: true });
+  ed.sel = [];
+  afterEdit();
+  return id;
+}
+
+/** The face dimension between two points across ('h') or up ('v') the wall, if there is one. */
+export function faceDimBetween(face: WallFace, kind: 'h' | 'v', a: string, b: string): string | null {
+  for (const [id, c] of Object.entries(face.cons)) {
+    if (c.type === 'dist' && c.kind === kind && ((c.a === a && c.b === b) || (c.a === b && c.b === a))) return id;
+  }
+  return null;
+}
+
+/**
+ * Dimension from `a` to `b`, across or up the wall: the keypad, then it's set — a driving dimension the wall view
+ * draws (along the floor or beside what it measures). An existing one between them is changed instead.
+ */
+export function dimensionFace(kind: 'h' | 'v', a: string, b: string, title: string): void {
+  const face = curFace(), had = faceDimBetween(face, kind, a, b);
+  if (had) { editDim(had); return; }
+  if (!face.points[a] || !face.points[b]) return;
+  const cur = measure(face, { type: 'dist', kind, a, b });
+  openKeypad({
+    title, initial: fmtLen(cur), selectAll: true, laser: true,
+    onDone: v => {
+      if (v < 0) return;
+      const face = curFace(), pa = face.points[a], pb = face.points[b];
+      if (!pa || !pb) return;
+      pushHistory();
+      const sign = (kind === 'h' ? pb.x - pa.x : pb.y - pa.y) < -1e-9 ? -1 : 1;
+      const r = tryAddConstraint({ type: 'dist', kind, a, b, value: v, driving: true, sign, elev: true }, { onResolved: () => afterEdit() });
+      if (!r.ok) dropHistory();
+      // a grey chip that was selected is this dimension now (a selected cabinet stays selected)
+      else if (r.id && ed.sel.length === 1 && ed.sel[0].type === 'elev') ed.sel = [{ type: 'dim', id: r.id }];
+      afterEdit();
+    },
+  });
+}
+
+/** The floor point a cabinet's height above the floor is measured from. */
+const floorAnchor = (): string => cornerAnchor(elev.frame?.leftEnd ?? 'a');
+
+/** A cabinet's dimension that sets its width, height, or height off the floor (null if there's none). */
+export function cabDim(face: WallFace, cabId: string, part: 'w' | 'h' | 'z'): string | null {
+  const cb = face.cabs?.[cabId];
+  if (!cb) return null;
+  if (part !== 'z') return cb[part] && face.cons[cb[part]!] ? cb[part]! : null;
+  for (const [id, c] of Object.entries(face.cons)) {
+    const ends = [c.a, c.b];
+    if (c.type === 'dist' && c.kind === 'v' && ends.some(v => !!v && !!face.points[v]?.anchor && face.points[v].y === 0) && ends.some(v => v === cb.bl || v === cb.br)) return id;
+  }
+  return null;
+}
+
+/** The keypad for a cabinet's width, height or height off the floor (its standard size until it's entered). */
+export function editCabinet(cabId: string, part: 'w' | 'h' | 'z'): void {
+  const face = curFace(), cb = face.cabs?.[cabId];
+  if (!cb) return;
+  const had = cabDim(face, cabId, part);
+  if (had) { const keep = ed.sel; editDim(had); ed.sel = keep; updateCtx(); return; }
+  if (part === 'z') { dimensionFace('v', floorAnchor(), cb.bl, 'Cabinet off the floor'); return; }
+  const [a, b] = part === 'w' ? [cb.bl, cb.br] : [cb.br, cb.tr];
+  dimensionFace(part === 'w' ? 'h' : 'v', a, b, part === 'w' ? 'Cabinet width' : 'Cabinet height');
+}
+
+/** A cabinet's depth (out from the wall): a note on it, not drawn in the elevation. */
+export function editCabinetDepth(cabId: string): void {
+  const cb = curFace().cabs?.[cabId];
+  if (!cb) return;
+  openKeypad({
+    title: 'Cabinet depth', sub: 'From the wall out into the room', initial: fmtLen(cb.depth), selectAll: true, laser: true,
+    onDone: v => { if (v <= 0) return; pushHistory(); cb.depth = v; cb.depthSet = true; afterEdit(); },
+  });
+}
+
+/** Delete cabinets (their corners, edges, shape and size go with them). */
+export function deleteCabinets(ids: string[]): void {
+  const face = curFace();
+  for (const id of ids) {
+    const cb = face.cabs?.[id];
+    if (!cb) continue;
+    for (const p of cabPoints(cb)) delete face.points[p];
+    delete face.cabs[id];
+  }
+}
+
+/** Select a cabinet. */
+export function selectCabinet(id: string): void {
+  ed.sel = [{ type: 'cab', id }];
+  updateCtx(); requestDraw();
+}

package/src/editor/files.ts

@@ -6,22 +6,26 @@ import { seedProject } from '../model/demo';
 import { clearAllHistory } from '../model/history';
 import { projectFileName, projectFromFile, projectToFile } from '../model/projectfile';
 import { sessionState } from '../model/session';
-import { page, saveSoon, SK, store } from '../model/store';
+import { settings } from '../model/settings';
+import { page, planSK, saveSoon, store } from '../model/store';
 import type { Project } from '../model/types';
 import { fitView } from '../render/view';
-import { saveFile, toast, updateTopBar } from './ports';
+import { refreshDrawerSoon, saveFile, toast, updateTopBar } from './ports';
+import { closeElevation } from './elevation';
+import { switchPage } from './project';
+import { uid } from '../model/ids';
 
 /* Files in and out: PDF and DXF of the page, the whole project as a .boldr.json file, and starting over. */
 
 export function exportPdf(): void {
   const name = pdfFileName(store.project.name, page().name);
-  saveFile(name, 'application/pdf', sketchToPdf(SK(), { project: store.project.name, subtitle: page().name }));
+  saveFile(name, 'application/pdf', sketchToPdf(planSK(), { project: store.project.name, subtitle: page().name, cabinets: settings.layers.cabinets }));
   toast('Exported ' + name);
 }
 
 export function exportDxf(): void {
   const name = dxfFileName(store.project.name, page().name);
-  saveFile(name, 'application/dxf', sketchToDxf(SK()));
+  saveFile(name, 'application/dxf', sketchToDxf(planSK(), { cabinets: settings.layers.cabinets }));
   toast('Exported ' + name + ' (inches)');
 }
 
@@ -47,6 +51,38 @@ export function openProject(p: Project): void {
   toast('Opened ' + p.name, { action: { label: 'Undo', fn: () => { show(before.project, before.page); toast('Back to ' + before.project.name); } } });
 }
 
+/**
+ * Open file (the ⋯ menu): a project file's pages are added to the drawing that's open — nothing in it is replaced —
+ * and the first one is shown. A page named like one already here takes the file's project name in front (and a
+ * number if it still clashes). The message's Undo takes them out again. Saved with the rest when the drawing is.
+ */
+export function importPagesText(text: string): void {
+  let p: Project;
+  try { p = projectFromFile(text); } catch (e) { toast((e as Error).message, { warn: true }); return; }
+  closeElevation();
+  const names = new Set(store.project.pages.map(x => x.name)), from = p.name && p.name !== store.project.name ? p.name + ' · ' : '';
+  const added = p.pages.map(pg => {
+    let name = names.has(pg.name) ? from + pg.name : pg.name;
+    for (let n = 2, base = name; names.has(name); n++) name = base + ' ' + n;
+    names.add(name);
+    return { ...pg, id: uid('pg'), name, view: null };
+  });
+  const back = store.curPageId, ids = new Set(added.map(x => x.id));
+  store.project.pages.push(...added);
+  switchPage(added[0].id);
+  refreshDrawerSoon();
+  const n = added.length;
+  toast('Added ' + (n === 1 ? 'a page' : n + ' pages') + ' from ' + p.name, {
+    action: { label: 'Undo', fn: () => {
+      if (!store.project.pages.some(x => !ids.has(x.id))) return;
+      if (ids.has(store.curPageId)) switchPage(store.project.pages.some(x => x.id === back) ? back : store.project.pages.find(x => !ids.has(x.id))!.id);
+      store.project.pages = store.project.pages.filter(x => !ids.has(x.id));
+      updateTopBar(); refreshDrawerSoon(); saveSoon();
+      toast('Import taken out');
+    } },
+  });
+}
+
 /** Open a project file's text; a message says what's wrong if it isn't one. */
 export function openProjectText(text: string): void {
   try { openProject(projectFromFile(text)); }

package/src/editor/gestures.ts

@@ -1,18 +1,26 @@
 import { redo, undo } from '../app/edit';
-import { ed } from '../app/state';
+import { ed, type Preview, type Snap } from '../app/state';
 import { hyp } from '../model/geom';
 import { revertLast } from '../model/history';
 import { onSessionReset } from '../model/session';
-import { saveSoon } from '../model/store';
-import { panBy, requestDraw, s2w, zoomAt } from '../render/view';
+import { saveViewSoon, setSaveIdle } from '../model/store';
+import { paintPending, panBy, requestDraw, s2w, zoomAt } from '../render/view';
 import { tools, type PEv } from '../tools/registry';
-import { dismissPopovers, setCursor } from './ports';
+import { closeKeypad, dismissConflict, dismissPopovers, interacting, setCursor, updateCtx, updateHint } from './ports';
+import { intoWall } from './elevation';
+import { keypadOnHost, keypadOpen, keypadSpec } from './keypad';
+import { conflictOpen } from './conflict';
+import { confirmCancel, confirmOpen } from './confirm';
+import { readOnlyTap } from './linkActions';
+import type { SelItem } from '../model/types';
 
 /*
   Pointer routing for the plan canvas, whatever delivers the pointers (DOM pointer events, React Native touches).
   Pen draws, fingers navigate: once a pen has been seen, touch only pans and zooms. Without a pen, one finger drives
   the tool and a second finger turns the action into a pan/pinch. Two-finger tap undoes, three-finger tap redoes.
   Mouse: middle or right button, or Space held, drags to pan; the wheel zooms.
+  With a sheet up over the drawing (the keypad, a conflict, a question), the drawing only pans and zooms, by any
+  pointer, and a tap on it closes the sheet. View only, a tap on a link's tile asks to open what it's for.
 */
 
 /**
@@ -28,17 +36,69 @@ export interface PointerIn {
 interface Gesture { t0: number; max: number; moved: number; last: GState | null }
 interface GState { x: number; y: number; d: number; n: number }
 
+/**
+ * A host that pans and zooms the view itself (a device does it on its UI thread, so a pinch never waits for this
+ * thread): fingers still end a tool's action and two- and three-finger taps still undo and redo here, but the view is
+ * left to the host, which hands it back with setViewFromHost.
+ */
+let hostNavigates = false;
+export function setHostNavigation(on: boolean): void { hostNavigates = on; }
+
+/**
+ * Past this far (screen px) pointers on the drawing are moving — a stroke, a drag, a pan or a pinch — not tapping. It
+ * tells a two-finger tap (undo) from a pan or pinch, and it's when the interface hears that a gesture is in motion
+ * (the `interacting` port: a phone's chrome steps aside) until the last pointer lifts — so the chrome never blinks on
+ * a tap.
+ */
+const MOTION_PX = 14;
+
 const ptrs = new Map<number, PointerIn>();
-let penSeen = false, gesture: Gesture | null = null, primary: PointerIn | null = null, panDrag: { x: number; y: number; id: number } | null = null;
+let penSeen = false, gesture: Gesture | null = null, primary: PointerIn | null = null;
+/** close: a press under a sheet (see sheetUp) — a tap closes it; open: a view-only press — a tap opens a link's tile */
+let panDrag: { x: number; y: number; id: number; moved: number; close?: boolean; open?: boolean } | null = null;
+/** where the primary pointer went down, and whether a gesture on the drawing is in motion */
+let primaryAt: { x: number; y: number } | null = null, inMotion = false;
+/**
+ * What a press can change, as it was before the primary pointer went down: if a second finger turns the press into a
+ * pan or pinch, it's put back (see cancelPrimary). A tool's own state is kept a level deep — its presses set its fields,
+ * they don't change what's in them.
+ */
+let beforePress: { tool: string; st: unknown; sel: SelItem[]; preview: Preview | null; snap: Snap | null } | null = null;
 let wheelT: ReturnType<typeof setTimeout> | undefined;
 export const keys = { spaceDown: false };
 onSessionReset(() => {
-  ptrs.clear(); penSeen = false; gesture = null; primary = null; panDrag = null; keys.spaceDown = false;
+  ptrs.clear(); penSeen = false; gesture = null; primary = null; panDrag = null; keys.spaceDown = false; primaryAt = null; beforePress = null;
+  setMotion(false);
   clearTimeout(wheelT);
 });
 
+// (a save waits until nothing is pressed on the drawing: see setSaveIdle)
+setSaveIdle(() => ptrs.size === 0);
+
+/**
+ * A sheet is up over the drawing: the keypad (not one that leaves the drawing live, nor the host's own, which covers
+ * it) or a conflict to resolve. On a tablet or a computer the drawing stays in reach around it (react/CadEditor.tsx):
+ * it can be panned and zoomed to see what's being measured, and a tap on it closes the sheet — nothing on it is
+ * picked or changed meanwhile. (A phone's sheet has a backdrop: the drawing gets no pointers at all.)
+ */
+export const sheetUp = (): boolean => (keypadOpen() && !keypadSpec()?.modeless && !keypadOnHost()) || conflictOpen() || confirmOpen();
+
+/** Pointers only move the view: a drawing that can't be edited, or one with a sheet up over it. */
+export const navigationOnly = (): boolean => ed.readOnly || sheetUp();
+
+function closeSheet(): void {
+  if (keypadOpen()) closeKeypad(); else if (confirmOpen()) confirmCancel(); else dismissConflict();
+}
+
+function setMotion(on: boolean): void {
+  if (on === inMotion) return;
+  inMotion = on;
+  interacting(on);
+}
+
 function evOf(p: PointerIn): PEv {
-  const [wx, wy] = s2w(p.x, p.y);
+  // in the wall view, tools work inside the wall
+  const [wx, wy] = intoWall(...s2w(p.x, p.y));
   return { sx: p.x, sy: p.y, wx, wy, touch: p.kind !== 'mouse', shift: !!p.shift };
 }
 
@@ -62,10 +122,14 @@ function updateGesture(): void {
   const s = gState(ts), L = g.last;
   if (!s || !L) { g.last = s; return; }
   if (s.n !== L.n) { g.last = s; return; }
-  const dx = s.x - L.x, dy = s.y - L.y;
-  g.moved += hyp(dx, dy);
-  panBy(dx, dy);
-  if (s.n >= 2 && L.d > 0 && s.d > 0) { g.moved += Math.abs(s.d - L.d); zoomAt(s.x, s.y, s.d / L.d); }
+  const dx = s.x - L.x, dy = s.y - L.y, pinch = s.n >= 2 && L.d > 0 && s.d > 0;
+  // (how far the fingers went tells a tap — undo, redo — from a pan or pinch, whoever moves the view)
+  g.moved += hyp(dx, dy) + (pinch ? Math.abs(s.d - L.d) : 0);
+  if (g.moved >= MOTION_PX) setMotion(true);
+  if (!hostNavigates) {
+    panBy(dx, dy);
+    if (pinch) zoomAt(s.x, s.y, s.d / L.d);
+  }
   g.last = s;
 }
 
@@ -73,25 +137,43 @@ function endGesture(t: number): void {
   const g = gesture;
   gesture = null;
   if (!g) return;
-  if (g.moved < 14 && t - g.t0 < 380 && !ed.readOnly) { if (g.max === 2) undo(); else if (g.max >= 3) redo(); }
-  saveSoon();
+  // (under a sheet a tap closes it, however many fingers: nothing is undone under it)
+  if (g.moved < MOTION_PX && sheetUp()) closeSheet();
+  // (view only: a finger's tap on a link's tile opens it, once the person says so)
+  else if (g.moved < MOTION_PX && ed.readOnly && g.max === 1 && g.last && t - g.t0 < 500) readOnlyTap(g.last.x, g.last.y, true);
+  else if (g.moved < MOTION_PX && t - g.t0 < 380 && !ed.readOnly) { if (g.max === 2) undo(); else if (g.max >= 3) redo(); }
+  saveViewSoon();
 }
 
-/** A second finger landed mid-action: abandon the primary pointer (reverting a drag in progress). */
+/**
+ * A second finger landed mid-action: the first finger's press never happened. A drag in progress is reverted, and the
+ * tool, the selection and what's shown go back to how they were before it — so a shape being drawn keeps the points
+ * already placed (a rectangle's first corner, an arc's ends, a line's last point), nothing is left where the first
+ * finger landed (a line or rectangle to it, a mark under it), and the next tap carries on where it was.
+ */
 function cancelPrimary(): void {
-  const t = curTool();
+  const t = curTool(), was = beforePress;
   if (t && t.st && t.st.dragging && t.st.drag) revertLast();
-  if (t && t.st && t.st.down) t.st = {};
+  if (t && was && was.tool === ed.tool) {
+    t.st = was.st;
+    ed.sel = was.sel; ed.preview = was.preview; ed.snapState = was.snap;
+  } else if (t && t.reset) t.reset();
+  beforePress = null;
   primary = null;
   ed.boxSel = null;
-  ed.preview = ed.tool === 'line' || ed.tool === 'wall' ? ed.preview : null;
-  requestDraw();
+  updateCtx(); updateHint(); requestDraw();
 }
 
 function endPtr(e: PointerIn, cancel: boolean): void {
   const p = ptrs.get(e.id);
   ptrs.delete(e.id);
-  if (panDrag && panDrag.id === e.id) { panDrag = null; setCursor(''); saveSoon(); return; }
+  if (panDrag && panDrag.id === e.id) {
+    const still = panDrag.moved < MOTION_PX && !cancel, close = !!panDrag.close && still, open = !!panDrag.open && still;
+    panDrag = null; setCursor(''); saveViewSoon();
+    if (close && sheetUp()) closeSheet();
+    else if (open) readOnlyTap(e.x, e.y, e.kind !== 'mouse');
+    return;
+  }
   if (gesture && p && p.kind === 'touch') { if (!touchList().length) endGesture(e.t); return; }
   if (primary && e.id === primary.id) {
     primary = null;
@@ -107,40 +189,74 @@ export function pointerDown(e: PointerIn): void {
   ed.lastPointerTouch = e.kind !== 'mouse';
   const p = { ...e };
   ptrs.set(e.id, p);
-  if (e.kind === 'mouse' && (e.button === 1 || e.button === 2 || keys.spaceDown || ed.readOnly)) { panDrag = { x: p.x, y: p.y, id: e.id }; setCursor('grabbing'); return; }
+  // (under a sheet a pen moves the view as a mouse does, and a plain press of either that doesn't move closes it)
+  const under = sheetUp(), navOnly = under || ed.readOnly;
+  if ((e.kind === 'mouse' && (e.button === 1 || e.button === 2 || keys.spaceDown || navOnly)) || (e.kind === 'pen' && (under || ed.readOnly))) {
+    panDrag = { x: p.x, y: p.y, id: e.id, moved: 0, close: under && !e.button, open: ed.readOnly && !under && !e.button && !keys.spaceDown };
+    setCursor('grabbing');
+    return;
+  }
   if (e.kind === 'touch') {
     const touches = touchList();
-    if (penSeen || touches.length >= 2 || ed.readOnly) {
+    if (penSeen || touches.length >= 2 || navOnly) {
       if (primary && primary.kind === 'touch') cancelPrimary();
-      if (!gesture) startGesture(e.t); else gesture.max = Math.max(gesture.max, touches.length);
+      // (a finger joining one already moving the view: the pinch is measured from here, none of its first move lost)
+      if (!gesture) startGesture(e.t); else { gesture.max = Math.max(gesture.max, touches.length); gesture.last = gState(touches); }
       return;
     }
   }
-  if (primary || ed.readOnly) return;
+  if (primary || navOnly) return;
   primary = p;
+  primaryAt = { x: e.x, y: e.y };
+  // (what it lands on is picked from the drawing as it is now, not as the last frame painted it)
+  paintPending();
   const t = curTool();
+  beforePress = { tool: ed.tool, st: t && t.st && typeof t.st === 'object' ? { ...t.st } : t?.st, sel: [...ed.sel], preview: ed.preview, snap: ed.snapState };
   if (t && t.down) t.down(evOf(e));
 }
 
 export function pointerMove(e: PointerIn): void {
   const p = ptrs.get(e.id);
-  if (panDrag && panDrag.id === e.id) { panBy(e.x - panDrag.x, e.y - panDrag.y); panDrag.x = e.x; panDrag.y = e.y; return; }
+  if (panDrag && panDrag.id === e.id) {
+    panDrag.moved += hyp(e.x - panDrag.x, e.y - panDrag.y);
+    if (panDrag.moved >= MOTION_PX) setMotion(true);
+    panBy(e.x - panDrag.x, e.y - panDrag.y); panDrag.x = e.x; panDrag.y = e.y;
+    return;
+  }
   if (p) { p.x = e.x; p.y = e.y; }
   if (gesture && p && p.kind === 'touch') { updateGesture(); return; }
   const t = curTool();
   if (!t) return;
-  if (primary && e.id === primary.id) { if (t.move) t.move(evOf(e)); }
-  else if (!primary && e.kind !== 'touch' && !ed.readOnly) { ed.lastPointerTouch = false; if (t.hover) t.hover(evOf(e)); }
+  if (primary && e.id === primary.id) {
+    if (primaryAt && hyp(e.x - primaryAt.x, e.y - primaryAt.y) >= MOTION_PX) setMotion(true);
+    if (t.move) t.move(evOf(e));
+  }
+  else if (!primary && e.kind !== 'touch' && !navigationOnly()) { ed.lastPointerTouch = false; if (t.hover) t.hover(evOf(e)); }
+}
+
+export function pointerUp(e: PointerIn): void { endPtr(e, false); settle(); }
+export function pointerCancel(e: PointerIn): void { endPtr(e, true); settle(); }
+
+/** The last pointer lifted: nothing on the drawing is moving any more. */
+function settle(): void {
+  if (ptrs.size) return;
+  primaryAt = null;
+  setMotion(false);
 }
 
-export const pointerUp = (e: PointerIn): void => endPtr(e, false);
-export const pointerCancel = (e: PointerIn): void => endPtr(e, true);
+/**
+ * Every pointer the host still has down (a device says so as each new one lands): any other was lost — its lift
+ * never came — and is let go now, so it can't hold a gesture, or the chrome, open.
+ */
+export function pointersStill(ids: number[]): void {
+  for (const [id, p] of [...ptrs]) if (!ids.includes(id)) pointerCancel({ ...p, t: Date.now() });
+}
 
-/** A mouse left the canvas: drop hover highlights (the line tools keep their snap marker). */
+/** A mouse left the canvas: drop hover highlights (the Line tool keeps its snap marker). */
 export function pointerLeave(kind: string): void {
   if (kind === 'mouse' && !primary) {
     ed.hover = null;
-    if (ed.tool !== 'line' && ed.tool !== 'wall') ed.snapState = null;
+    if (ed.tool !== 'line') ed.snapState = null;
     requestDraw();
   }
 }
@@ -153,5 +269,5 @@ export function wheelZoom(x: number, y: number, dy: number, pinch: boolean, line
   if (pinch) zoomAt(x, y, Math.exp(-dy * 0.01));
   else zoomAt(x, y, Math.exp(-dy * (lines ? 0.06 : 0.0016)));
   clearTimeout(wheelT);
-  wheelT = setTimeout(saveSoon, 400);
+  wheelT = setTimeout(saveViewSoon, 400);
 }