@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/tools/shapes.ts

@@ -3,46 +3,78 @@ import { ed, type Snap } from '../app/state';
 import { circum, hyp, normAng } from '../model/geom';
 import { pushHistory } from '../model/history';
 import { uid } from '../model/ids';
-import { addLine, addPoint } from '../model/sketch';
+import { addLine, addPoint, WALL_THICK } from '../model/sketch';
+import { settings } from '../model/settings';
+import { gridSteps } from '../model/planGeom';
 import { SK } from '../model/store';
 import type { XY } from '../model/types';
 import { chip } from '../render/draw';
 import { snapAt } from '../render/snap';
 import { TH } from '../render/theme';
-import { requestDraw, S } from '../render/view';
+import { mainT, requestDraw, requestOverlayDraw, S } from '../render/view';
 import { fmtLen } from '../units';
-import { applyPending, commitPoint, lengthPreview, PT, rememberHover, type PEv } from './registry';
+import { anchorMark, applyPending, commitPoint, lengthPreview, PT, rememberHover, wallBand, type PEv } from './registry';
 import { toast, updateHint } from '../editor/ports';
+import { wallBounds } from '../editor/elevation';
+import { drawsWalls } from '../editor/mode';
+import { splitWallsAtEnds } from './modify';
 
 const wasDrag = (down: { sx: number; sy: number } | null, ev: PEv) => !!down && hyp(ev.sx - down.sx, ev.sy - down.sy) > 12;
 
+/**
+ * A circle's radius out to a snap: with Snap to grid, a whole number of the grid's steps (round sizes, as its centre
+ * and the grid's points are) — unless the edge snapped onto something, which it then goes through.
+ */
+function radiusTo(c: XY, s: Snap): number {
+  const r = hyp(s.x - c.x, s.y - c.y);
+  if (!settings.snapGrid || (s.kind !== 'grid' && s.kind !== 'free')) return r;
+  const st = gridSteps(mainT().s).minor;
+  return Math.max(st, Math.round(r / st) * st);
+}
+
+/** A new circle's or arc's kind: a wall with the Walls toggle on (never a guide), otherwise a line or a guide. */
+const asDrawn = () => (drawsWalls() ? { constr: false, kind: 'wall' as const, thick: WALL_THICK } : { constr: ed.drawConstr });
+
+/**
+ * Rectangle: two opposite corners, tapped one then the other or dragged from one to the other. As with the arc, each
+ * corner is marked as it's placed — the first the moment a finger lands and still once it lifts, the second under the
+ * finger as it goes down — so on a touch screen, where nothing hovers between taps, it's clear where it starts.
+ */
 export const rectTool = {
-  st: { p1: null as Snap | null, down: null as { sx: number; sy: number } | null, anchor: null as Snap | null },
-  reset() { this.st = { p1: null, down: null, anchor: null }; ed.preview = null; ed.snapState = null; },
+  st: { p1: null as Snap | null, down: null as { sx: number; sy: number } | null, anchor: null as Snap | null, pressing: false },
+  reset() { this.st = { p1: null, down: null, anchor: null, pressing: false }; ed.preview = null; ed.snapState = null; },
   busy() { return !!this.st.p1; },
   hover(ev: PEv) {
     ed.snapState = snapAt(ev.sx, ev.sy, { touch: ev.touch });
     rememberHover(ed.snapState);
+    const pressing = this.st.pressing, p2: XY = { x: ed.snapState.x, y: ed.snapState.y };
     // first corner: the one already placed, or (press-and-drag) where the drag started
     const p1 = this.st.p1 ?? (wasDrag(this.st.down, ev) ? this.st.anchor : null);
-    if (p1) {
-      const p2 = { x: ed.snapState.x, y: ed.snapState.y };
-      ed.preview = (c, T) => {
-        const [x1, y1] = S(T, p1.x, p1.y), [x2, y2] = S(T, p2.x, p2.y);
+    // (nothing yet: a mark only once a corner is being placed — a mouse just moving about gets the snap marker)
+    if (!p1 && !pressing) { ed.preview = null; requestOverlayDraw(); return; }
+    ed.preview = (c, T) => {
+      if (p1) {
+        const [x1, y1] = S(T, p1.x, p1.y), [x2, y2] = S(T, p2.x, p2.y), wall = drawsWalls();
+        const box = [Math.min(x1, x2), Math.min(y1, y2), Math.abs(x2 - x1), Math.abs(y2 - y1)] as const;
+        if (wall) wallBand(c, T, () => c.rect(...box));
         c.save(); c.strokeStyle = TH.blue; c.lineWidth = 2;
-        if (ed.drawConstr) c.setLineDash([6, 5]);
-        c.strokeRect(Math.min(x1, x2), Math.min(y1, y2), Math.abs(x2 - x1), Math.abs(y2 - y1));
+        if (ed.drawConstr && !wall) c.setLineDash([6, 5]);
+        c.strokeRect(...box);
         c.restore();
         lengthPreview(c, T, { x: p1.x, y: Math.max(p1.y, p2.y) }, { x: p2.x, y: Math.max(p1.y, p2.y) });
         lengthPreview(c, T, { x: Math.max(p1.x, p2.x), y: p1.y }, { x: Math.max(p1.x, p2.x), y: p2.y });
-      };
-    }
-    requestDraw();
+        anchorMark(c, x1, y1);
+      }
+      // the corner going down: marked under the finger as it's placed
+      if (pressing) { const [x, y] = S(T, p2.x, p2.y); anchorMark(c, x, y); }
+    };
+    requestOverlayDraw();
   },
-  down(ev: PEv) { this.st.down = { sx: ev.sx, sy: ev.sy }; if (!this.st.p1) this.st.anchor = snapAt(ev.sx, ev.sy, { touch: ev.touch }); this.hover(ev); },
+  down(ev: PEv) { this.st.pressing = true; this.st.down = { sx: ev.sx, sy: ev.sy }; if (!this.st.p1) this.st.anchor = snapAt(ev.sx, ev.sy, { touch: ev.touch }); this.hover(ev); },
   move(ev: PEv) { this.hover(ev); },
   up(ev: PEv) {
     const st = this.st, dragged = wasDrag(st.down, ev);
+    st.pressing = false;
     const s = snapAt(ev.sx, ev.sy, { touch: ev.touch });
     if (!st.p1) {
       st.p1 = dragged ? st.anchor ?? snapAt(st.down!.sx, st.down!.sy, { touch: ev.touch }) : s;
@@ -55,12 +87,16 @@ export const rectTool = {
     const a = commitPoint(s1), c = commitPoint(s);
     const pa = PT(a.id), pc = PT(c.id);
     const b = addPoint(sk, pc.x, pa.y), d = addPoint(sk, pa.x, pc.y);
-    const o = { constr: ed.drawConstr };
-    const L = [addLine(sk, a.id, b, o), addLine(sk, b, c.id, o), addLine(sk, c.id, d, o), addLine(sk, d, a.id, o)];
+    // (walls with the Walls toggle on; a wall is never a guide)
+    const wall = drawsWalls(), o = { kind: wall ? 'wall' as const : 'line' as const, constr: !wall && ed.drawConstr };
+    const sides = [addLine(sk, a.id, b, o), addLine(sk, b, c.id, o), addLine(sk, c.id, d, o), addLine(sk, d, a.id, o)];
+    // (a wall corner placed partway along another wall splits that one there)
+    if (wall) for (const id of sides) splitWallsAtEnds(sk, id);
     applyPending(a.cons); applyPending(c.cons);
     for (const k of [{ type: 'h' as const, a: a.id, b }, { type: 'v' as const, a: b, b: c.id }, { type: 'h' as const, a: d, b: c.id }, { type: 'v' as const, a: a.id, b: d }]) tryAddConstraint(k, { silent: true });
     this.reset();
-    ed.sel = L.map(id => ({ type: 'line' as const, id }));
+    // (drawn, not selected: nothing new is highlighted — tap it to select it)
+    ed.sel = [];
     afterEdit();
   },
   hint() { return this.st.p1 ? 'Tap the opposite corner.' : 'Tap or drag two opposite corners. Edges stay square.'; },
@@ -75,27 +111,27 @@ export const circleTool = {
     // centre: the one already placed, or (press-and-drag) where the drag started
     const c0 = this.st.c ?? (this.st.down ? this.st.anchor : null);
     if (c0) {
-      const edge = { x: ed.snapState.x, y: ed.snapState.y };
-      const r = hyp(edge.x - c0.x, edge.y - c0.y);
+      const r = radiusTo(c0, ed.snapState), raw = hyp(ed.snapState.x - c0.x, ed.snapState.y - c0.y) || 1;
+      // (the edge where the circle is: toward the pointer, at the radius it'll have)
+      const edge = { x: c0.x + ((ed.snapState.x - c0.x) * r) / raw, y: c0.y + ((ed.snapState.y - c0.y) * r) / raw };
       ed.preview = (c, T) => {
-        const [x, y] = S(T, c0.x, c0.y), [ex, ey] = S(T, edge.x, edge.y);
+        const [x, y] = S(T, c0.x, c0.y), [ex, ey] = S(T, edge.x, edge.y), wall = drawsWalls();
+        if (wall) wallBand(c, T, () => c.arc(x, y, Math.max(0.5, r * T.s), 0, Math.PI * 2));
         c.save();
         c.strokeStyle = TH.blue; c.lineWidth = 2;
-        if (ed.drawConstr) c.setLineDash([6, 5]);
+        if (ed.drawConstr && !wall) c.setLineDash([6, 5]);
         c.beginPath(); c.arc(x, y, Math.max(0.5, r * T.s), 0, Math.PI * 2); c.stroke();
         // radius from the centre to the pointer
         c.setLineDash([4, 4]); c.lineWidth = 1.2;
         c.beginPath(); c.moveTo(x, y); c.lineTo(ex, ey); c.stroke();
         c.setLineDash([]);
-        // centre marker: crosshair + dot, always visible
-        c.lineWidth = 1.5;
-        c.beginPath(); c.moveTo(x - 9, y); c.lineTo(x + 9, y); c.moveTo(x, y - 9); c.lineTo(x, y + 9); c.stroke();
-        c.beginPath(); c.arc(x, y, 3.5, 0, Math.PI * 2); c.fillStyle = TH.blue; c.fill();
         c.restore();
+        // centre marker: crosshair + dot, always visible
+        anchorMark(c, x, y);
         chip(c, 'Ø ' + fmtLen(2 * r), x, y - r * T.s - 16, { bg: '#fff', fg: '#0066FF', border: ['#0066FF', 1.5] });
       };
     } else ed.preview = null;
-    requestDraw();
+    requestOverlayDraw();
   },
   down(ev: PEv) { this.st.down = { sx: ev.sx, sy: ev.sy }; if (!this.st.c) this.st.anchor = snapAt(ev.sx, ev.sy, { touch: ev.touch }); this.hover(ev); },
   move(ev: PEv) { this.hover(ev); },
@@ -105,60 +141,85 @@ export const circleTool = {
       st.c = dragged ? st.anchor ?? snapAt(st.down!.sx, st.down!.sy, { touch: ev.touch }) : s;
       if (!dragged) { this.hover(ev); return; }
     }
-    const r = hyp(s.x - st.c!.x, s.y - st.c!.y);
+    let r = radiusTo(st.c!, s);
+    // in the wall view, a circle stays inside the wall
+    const b = wallBounds(), o = st.c!;
+    if (b) r = Math.min(r, o.x - b.x0, b.x1 - o.x, o.y - b.y0, b.y1 - o.y);
     if (r < 0.25) { this.reset(); return; }
     pushHistory();
     const cp = commitPoint(st.c!);
     applyPending(cp.cons);
     const id = uid('ci');
-    SK().circles[id] = { c: cp.id, r, constr: ed.drawConstr };
+    SK().circles[id] = { c: cp.id, r, ...asDrawn() };
     if (s.kind === 'point') tryAddConstraint({ type: 'oncircle', p: s.ref!, c: id }, { silent: true });
     this.reset();
-    ed.sel = [{ type: 'circle', id }];
+    ed.sel = [];
     afterEdit();
   },
   hint() { return this.st.c ? 'Tap the edge, or use Diameter after.' : 'Tap the center, then the edge. Good for columns and core holes.'; },
 };
 
 /** Three-point arc: start, end, then a point it passes through. */
+/**
+ * Arc: where it starts, where it ends, then a point it passes through. Each point is marked as it's placed — the
+ * start the moment a finger lands, the end beside it, the two joined by a dashed line once both are down — so on a
+ * touch screen, where nothing hovers between taps, it's always clear what's placed and where the arc will span. The
+ * third press bends the arc through the finger from the moment it lands: a tap places it there, a drag reshapes it
+ * until the finger lifts.
+ */
 export const arcTool = {
-  st: { pts: [] as Snap[] },
-  reset() { this.st = { pts: [] }; ed.preview = null; ed.snapState = null; },
+  st: { pts: [] as Snap[], pressing: false },
+  reset() { this.st = { pts: [], pressing: false }; ed.preview = null; ed.snapState = null; },
   busy() { return this.st.pts.length > 0; },
   hover(ev: PEv) {
     ed.snapState = snapAt(ev.sx, ev.sy, { touch: ev.touch });
-    const p = this.st.pts, m: XY = { x: ed.snapState.x, y: ed.snapState.y };
-    ed.preview = p.length
-      ? (c, T) => {
-        c.save(); c.strokeStyle = TH.blue; c.lineWidth = 2; c.beginPath();
-        if (p.length === 1) {
-          const [x1, y1] = S(T, p[0].x, p[0].y), [x2, y2] = S(T, m.x, m.y);
-          c.setLineDash([4, 4]); c.moveTo(x1, y1); c.lineTo(x2, y2);
-        } else {
-          const o = circum(p[0], p[1], m);
-          if (o) {
-            const r = hyp(p[0].x - o.x, p[0].y - o.y);
-            let t0 = Math.atan2(p[0].y - o.y, p[0].x - o.x), t1 = Math.atan2(p[1].y - o.y, p[1].x - o.x);
-            const tm = Math.atan2(m.y - o.y, m.x - o.x);
-            if (normAng(tm - t0) > normAng(t1 - t0)) { const t = t0; t0 = t1; t1 = t; }
-            const [x, y] = S(T, o.x, o.y);
-            c.arc(x, y, r * T.s, -t0, -t1, true);
-          }
-        }
-        c.stroke(); c.restore();
+    const p = this.st.pts, m: XY = { x: ed.snapState.x, y: ed.snapState.y }, pressing = this.st.pressing;
+    // (nothing yet: a mark only once a point is being placed — a mouse just moving about gets the snap marker)
+    if (!p.length && !pressing) { ed.preview = null; requestOverlayDraw(); return; }
+    // the arc through the pointer, once both ends are placed (null while it's in line with them)
+    const o = p.length === 2 ? circum(p[0], p[1], m) : null;
+    ed.preview = (c, T) => {
+      const at = (q: XY) => S(T, q.x, q.y);
+      // the arc through the pointer, on screen (as a wall, over the band it'll fill)
+      let bend: (() => void) | null = null;
+      if (p.length === 2 && o) {
+        const r = hyp(p[0].x - o.x, p[0].y - o.y);
+        let t0 = Math.atan2(p[0].y - o.y, p[0].x - o.x), t1 = Math.atan2(p[1].y - o.y, p[1].x - o.x);
+        const tm = Math.atan2(m.y - o.y, m.x - o.x);
+        if (normAng(tm - t0) > normAng(t1 - t0)) { const t = t0; t0 = t1; t1 = t; }
+        const [x, y] = at(o);
+        bend = () => c.arc(x, y, r * T.s, -t0, -t1, true);
+        if (drawsWalls()) wallBand(c, T, bend);
+      }
+      c.save(); c.strokeStyle = TH.blue; c.lineWidth = 2; c.beginPath();
+      if (p.length === 1) {
+        // the start to the pointer: where the end will go
+        const [x1, y1] = at(p[0]), [x2, y2] = at(m);
+        c.setLineDash([4, 4]); c.moveTo(x1, y1); c.lineTo(x2, y2);
+      } else if (bend) {
+        bend();
+      } else if (p.length === 2) {
+        // both ends placed, no bend yet: the span it'll bend across
+        const [x1, y1] = at(p[0]), [x2, y2] = at(p[1]);
+        c.setLineDash([4, 4]); c.moveTo(x1, y1); c.lineTo(x2, y2);
       }
-      : null;
-    requestDraw();
+      c.stroke(); c.restore();
+      for (const q of p) { const [x, y] = at(q); anchorMark(c, x, y); }
+      // the point going down: marked under the finger as it's placed (not the third: that's the arc itself)
+      if (pressing && p.length < 2) { const [x, y] = at(m); anchorMark(c, x, y); }
+    };
+    requestOverlayDraw();
   },
-  down(ev: PEv) { this.hover(ev); },
+  down(ev: PEv) { this.st.pressing = true; this.hover(ev); },
   move(ev: PEv) { this.hover(ev); },
   up(ev: PEv) {
+    this.st.pressing = false;
     const s = snapAt(ev.sx, ev.sy, { touch: ev.touch });
     this.st.pts.push(s);
     if (this.st.pts.length < 3) { this.hover(ev); updateHint(); return; }
     const [p0, p1, pm] = this.st.pts;
     const o = circum(p0, p1, pm);
-    if (!o) { toast('Those points are in a line — pick a point off the line.', { warn: true }); this.st.pts.pop(); return; }
+    if (!o) { toast('Those points are in a line — pick a point off the line.', { warn: true }); this.st.pts.pop(); this.hover(ev); return; }
     pushHistory();
     let a = commitPoint(p0), b = commitPoint(p1);
     const t0 = Math.atan2(PT(a.id).y - o.y, PT(a.id).x - o.x), t1 = Math.atan2(PT(b.id).y - o.y, PT(b.id).x - o.x), tm = Math.atan2(pm.y - o.y, pm.x - o.x);
@@ -166,11 +227,11 @@ export const arcTool = {
     const sk = SK();
     const cid = addPoint(sk, o.x, o.y);
     const id = uid('ar');
-    sk.arcs[id] = { c: cid, a: a.id, b: b.id, constr: ed.drawConstr };
+    sk.arcs[id] = { c: cid, a: a.id, b: b.id, ...asDrawn() };
     applyPending(a.cons); applyPending(b.cons);
     this.reset();
-    ed.sel = [{ type: 'arc', id }];
+    ed.sel = [];
     afterEdit();
   },
-  hint() { return ['Tap where the arc starts.', 'Tap where the arc ends.', 'Tap a point the arc passes through.'][this.st.pts.length]; },
+  hint() { return ['Tap where the arc starts.', 'Tap where the arc ends.', 'Tap where the arc passes through, or drag to bend it.'][this.st.pts.length]; },
 };

package/src/ui/ctx.ts

@@ -1,4 +1,5 @@
 import { ed } from '../app/state';
+import { markupTarget } from '../editor/markup';
 import { applyCtxAction, barItems, deleteSelection, plusAction, plusLabel, plusVisible } from '../editor/actions';
 import { selInfo, selectionHint } from '../editor/selection';
 import { $ } from './dom';
@@ -17,7 +18,7 @@ export function updateCtx(): void {
     const b = document.createElement('button');
     b.className = 'cb' + (it.on ? ' on' : '') + (it.locked ? ' locked' : '');
     b.innerHTML = (it.ic === 'color'
-      ? `<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8" fill="${ed.noteColor}" stroke="#fff" stroke-width="2"/></svg>`
+      ? `<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8" fill="${markupTarget().color}" stroke="#fff" stroke-width="2"/></svg>`
       : icon(it.ic)) + '<span>' + it.label + '</span>';
     b.setAttribute('aria-label', it.label);
     if (it.on != null) b.setAttribute('aria-pressed', String(!!it.on));

package/src/ui/domPorts.ts

@@ -8,17 +8,29 @@ import { renderTray } from './laser';
 import { doSave, download } from './menu';
 import { $ } from './dom';
 import { hideNoteInput, showNoteInput } from './noteinput';
-import { closePopovers, openPalette } from './palette';
+import { closePopovers, openPalette, refreshPalette } from './palette';
+import { closeOpacity, refreshOpacity, toggleOpacity, toggleRotation } from './opacity';
 import { renderModes, updateRail } from './rail';
 import { updateHint, updateStatus } from './status';
 import { toast } from './toast';
 import { updateTopBar } from './topbar';
 import { cvs } from '../render/view';
+import { confirmCancel, confirmChoose, confirmSeq, confirmSpec } from '../editor/confirm';
 
 /* The browser DOM interface as the editor's ports (see editor/ports.ts). */
 
+/** This interface has no sheet for the editor's questions (editor/confirm.ts): the browser's own — OK the first choice. */
+function askInBrowser(): void {
+  const c = confirmSpec(), seq = confirmSeq();
+  if (!c) return;
+  setTimeout(() => {
+    if (confirmSeq() !== seq || confirmSpec() !== c) return;
+    if (window.confirm(c.title + (c.msg ? '\n\n' + c.msg : ''))) confirmChoose(0); else confirmCancel();
+  }, 0);
+}
+
 const REFRESH: Record<ChromePart, () => void> = {
-  ctx: updateCtx,
+  ctx: () => { updateCtx(); updateRail(); refreshPalette(); refreshOpacity(); },
   hint: updateHint,
   status: updateStatus,
   rail: updateRail,
@@ -28,6 +40,7 @@ const REFRESH: Record<ChromePart, () => void> = {
   topbar: () => { updateTopBar(); updateCrumb(); },
   keypad: kpSync,
   tray: renderTray,
+  confirm: askInBrowser,
 };
 
 /** Open the Spaces tab and put the cursor in the space's name, once the drawer has slid in. */
@@ -50,12 +63,18 @@ export const domPorts: EditorPorts = {
   showNoteInput,
   hideNoteInput,
   openPalette: anchor => { if (anchor) openPalette(anchor as HTMLElement); },
+  toggleImageOpacity: anchor => toggleOpacity(anchor as HTMLElement | undefined),
+  toggleImageRotation: anchor => toggleRotation(anchor as HTMLElement | undefined),
+  // (this interface has no link tiles: no host links)
+  toggleTileSize: () => {},
   editRoomName,
-  setCursor: (cursor, where) => { (where === 'elevation' ? $<HTMLCanvasElement>('#elevCv') : cvs.cv).style.cursor = cursor; },
+  setCursor: cursor => { cvs.cv.style.cursor = cursor; },
+  // (this page's chrome stays put while a gesture moves)
+  interacting() {},
   dismissPopovers: () => {
     const open = $('#menu').classList.contains('show') || $('#palette').classList.contains('show');
     closePopovers();
-    return open;
+    return closeOpacity() || open;
   },
   dismissConflict: () => {
     if (!cfOpen()) return false;

package/src/ui/drawer.ts

@@ -1,12 +1,11 @@
-import { addPage, calibrateUnderlay, deletePage, deletePending, duplicatePage, focusSpace, LAYER_ROWS, layerOn, removeUnderlay, renamePage, renameProject, renameSpace, setUnderlayOpacity, spaceSchedule, switchPage as switchPageIn, toggleLayer, toggleUnderlayLock, type LayerKey } from '../editor/project';
-import { settings } from '../model/settings';
+import { addPage, deletePage, deletePending, duplicatePage, focusSpace, renamePage, renameProject, renameSpace, spaceSchedule, switchPage as switchPageIn } from '../editor/project';
 import { allPages, page, store } from '../model/store';
 import { drawThumb } from '../render/draw';
 import { fmtArea, fmtLen } from '../units';
 import { $, esc } from './dom';
 import { onSessionReset } from '../model/session';
 
-type Tab = 'pages' | 'layers' | 'rooms';
+type Tab = 'pages' | 'rooms';
 let drawerTab: Tab = 'pages';
 let drawerT: ReturnType<typeof setTimeout> | undefined;
 onSessionReset(() => { drawerTab = 'pages'; clearTimeout(drawerT); });
@@ -19,6 +18,7 @@ export function openDrawer(tab?: Tab): void {
 
 export function closeDrawer(): void {
   $('#drawer').classList.remove('show');
+  $('#btnLayers').setAttribute('aria-expanded', 'false');
 }
 
 export function refreshDrawerSoon(): void {
@@ -33,7 +33,7 @@ export function switchPage(id: string): void {
   updateCrumb(); renderDrawer();
 }
 
-/** Project → Page navigator, layer switches, and the space schedule. */
+/** Project → Page navigator and the space schedule (tabs). */
 export function renderDrawer(): void {
   document.querySelectorAll<HTMLElement>('.tabs button').forEach(b => b.setAttribute('aria-selected', String(b.dataset.tab === drawerTab)));
   const body = $('#dbody'), project = store.project;
@@ -54,27 +54,6 @@ export function renderDrawer(): void {
     $<HTMLInputElement>('#pgName').onchange = e => { renamePage((e.target as HTMLInputElement).value); updateCrumb(); renderDrawer(); };
     $('#pgDup').onclick = () => { duplicatePage(); updateCrumb(); renderDrawer(); };
     $('#pgDel').onclick = () => { deletePage(); updateCrumb(); renderDrawer(); };
-  } else if (drawerTab === 'layers') {
-    const ul = page().underlay;
-    const sw = (key: string, label: string, sub: string, val: boolean) =>
-      `<div class="row"><div>${label}${sub ? `<small>${sub}</small>` : ''}</div><button class="switch" role="switch" aria-label="${label}" aria-checked="${val}" data-sw="${key}"></button></div>`;
-    let h = sw('underlay', 'Photo or plan underlay', ul ? 'Traced image under the drawing' : 'None on this page', settings.layers.underlay);
-    if (ul) h += `<div class="row"><div>Image opacity</div><input type="range" id="ulOp" min="10" max="100" value="${Math.round((ul.opacity ?? 0.6) * 100)}"></div><div class="thispage"><button class="smallbtn" id="ulLock">${ul.locked ? 'Unlock image' : 'Lock image'}</button><button class="smallbtn" id="ulCal">Set scale</button><button class="smallbtn" id="ulDel" style="color:#FFB4AE">Remove image</button></div>`;
-    h += LAYER_ROWS.map(([k, label, sub]) => sw(k, label, sub, layerOn(k))).join('');
-    body.innerHTML = h;
-    body.querySelectorAll<HTMLElement>('[data-sw]').forEach(b => (b.onclick = () => {
-      const k = b.dataset.sw as LayerKey;
-      toggleLayer(k);
-      b.setAttribute('aria-checked', String(layerOn(k)));
-    }));
-    const op = document.querySelector<HTMLInputElement>('#ulOp');
-    if (op) op.oninput = () => setUnderlayOpacity(+op.value / 100);
-    const ul2 = document.querySelector<HTMLElement>('#ulLock');
-    if (ul2) ul2.onclick = () => { toggleUnderlayLock(); renderDrawer(); };
-    const uc = document.querySelector<HTMLElement>('#ulCal');
-    if (uc) uc.onclick = () => { closeDrawer(); calibrateUnderlay(); };
-    const ud = document.querySelector<HTMLElement>('#ulDel');
-    if (ud) ud.onclick = () => { removeUnderlay(); renderDrawer(); };
   } else {
     const sched = spaceSchedule(), total = sched.total;
     if (!sched.rows.length) { body.innerHTML = '<p class="empty">No spaces on this page yet. Close a loop of walls or lines, or pick the Space tool and tap inside a closed shape.</p>'; return; }
@@ -101,6 +80,7 @@ export function initDrawer(): void {
   $('#drawerClose').onclick = closeDrawer;
   $('#btnPages').onclick = () => openDrawer('pages');
   $('#crumb').onclick = () => openDrawer('pages');
-  $('#btnLayers').onclick = () => { if ($('#drawer').classList.contains('show') && drawerTab === 'layers') closeDrawer(); else openDrawer('layers'); };
+  // the stack: pages and spaces (tabs), or closed if that's what's open
+  $('#btnProject').onclick = () => { if ($('#drawer').classList.contains('show')) closeDrawer(); else openDrawer(drawerTab); };
   document.querySelectorAll<HTMLElement>('.tabs button').forEach(b => (b.onclick = () => { drawerTab = b.dataset.tab as Tab; renderDrawer(); }));
 }

package/src/ui/elevation.ts

@@ -1,108 +1,26 @@
-import { redo, undo } from '../app/edit';
-import {
-  closeElevation, deleteSelectedElevDim, editSelected, elev, elevAfterRender, elevBar, ELEV_RAIL, elevOpen, elevPointerCancel,
-  elevPointerDown, elevPointerLeave, elevPointerMove, elevPointerUp, elevSyncFrame, elevTitle, elevTrashEnabled, elevWheel,
-  fitElevation, flipElevation, setElevTool, type ElevTool,
-} from '../editor/elevation';
-import type { PointerIn } from '../editor/gestures';
+import { closeElevation, elevOpen, elevSyncFrame, elevTitle, fitElevation, flipElevation } from '../editor/elevation';
 import { onSessionReset } from '../model/session';
-import type { ElevAct } from '../render/elevation';
-import { drawElevationView } from '../render/elevationView';
 import { $ } from './dom';
-import { icon } from './icons';
 import { bindTip } from './tip';
 
-/* The wall elevation sheet in the DOM. The view's state, tools and rules live in editor/elevation.ts; this shows the
-   sheet while the editor has a wall open, draws it, and builds its toolbar and bar. */
+/* The wall view in the DOM: the plan's own canvas, rail and bar edit the wall's face (editor/elevation.ts); this shows
+   the header over the top bar — back to the plan, the wall and the side it's seen from, Flip and Fit. */
 
-let shown = false, railTool: ElevTool | null = null;
-onSessionReset(() => { shown = false; railTool = null; });
+let shown = false;
+onSessionReset(() => { shown = false; });
 
-/** Redraw the elevation (and its title and bar) from the live drawing; show or hide the sheet to match. */
+/** Show or hide the wall view's header, and keep its title up to date. */
 export function renderElevation(): void {
-  const sheet = $('#elev');
+  const sheet = $('#elev'), modes = document.querySelector<HTMLElement>('.modes');
   if (!elevOpen()) {
-    if (shown) {
-      shown = false;
-      sheet.classList.remove('show');
-      sheet.setAttribute('aria-hidden', 'true');
-      ($('#cv') as HTMLCanvasElement).focus({ preventScroll: true });
-    }
+    if (shown) { shown = false; sheet.classList.remove('show'); sheet.setAttribute('aria-hidden', 'true'); if (modes) modes.hidden = false; }
     return;
   }
-  const opening = !shown;
-  if (opening) { shown = true; sheet.classList.add('show'); sheet.setAttribute('aria-hidden', 'false'); }
+  if (!shown) { shown = true; sheet.classList.add('show'); sheet.setAttribute('aria-hidden', 'false'); if (modes) modes.hidden = true; }
   if (!elevSyncFrame()) return;
-  if (railTool !== elev.tool) {
-    railTool = elev.tool;
-    $('#elevRail').querySelectorAll<HTMLElement>('[data-tool]').forEach(b => b.classList.toggle('on', b.dataset.tool === elev.tool));
-    $<HTMLCanvasElement>('#elevCv').style.cursor = elev.tool === 'select' ? '' : 'crosshair';
-  }
-  const cv = $<HTMLCanvasElement>('#elevCv'), box = cv.parentElement!.getBoundingClientRect(), dpr = window.devicePixelRatio || 1;
-  elev.W = box.width; elev.H = box.height;
-  if (cv.width !== Math.round(elev.W * dpr) || cv.height !== Math.round(elev.H * dpr)) { cv.width = Math.round(elev.W * dpr); cv.height = Math.round(elev.H * dpr); }
-  const c = cv.getContext('2d')!;
-  c.setTransform(dpr, 0, 0, dpr, 0, 0);
-  const on = elevAfterRender(drawElevationView(c));
-  ($('#elevTrash') as HTMLButtonElement).disabled = !elevTrashEnabled(on);
-  renderBar(on ? on.act : null);
   const t = elevTitle();
   $('#elevTitle').textContent = t.title;
   $('#elevSub').textContent = t.sub;
-  cv.setAttribute('aria-label', 'Elevation of the wall, ' + t.sub.toLowerCase());
-  if (opening) $<HTMLButtonElement>('#elevClose').focus({ preventScroll: true });
-}
-
-function renderBar(dimAct: ElevAct | null): void {
-  const bar = $('#elevBar'), acts = $('#elevActs'), m = elevBar(dimAct);
-  acts.innerHTML = '';
-  bar.hidden = !m;
-  ($('#elevAdd') as HTMLElement).hidden = !!dimAct && dimAct.k === 'len';
-  if (!m) return;
-  $('#elevSel').textContent = m.label;
-  for (const a of m.actions) {
-    const b = document.createElement('button');
-    b.className = 'cb'; b.innerHTML = icon(a.icon) + '<span>' + a.label + '</span>'; b.setAttribute('aria-label', a.label); b.onclick = a.run;
-    acts.appendChild(b);
-  }
-}
-
-function buildElevRail(): void {
-  const rail = $('#elevRail');
-  rail.innerHTML = '';
-  const add = (id: string, label: string, key: string, ic: string, fn: () => void) => {
-    const b = document.createElement('button');
-    b.dataset.tool = id; b.setAttribute('aria-label', label); b.innerHTML = icon(ic); b.onclick = fn;
-    bindTip(b, label, key);
-    rail.appendChild(b);
-  };
-  for (const it of ELEV_RAIL) {
-    if (it === '|') { const d = document.createElement('div'); d.className = 'div'; rail.appendChild(d); continue; }
-    const [id, label, key, ic] = it;
-    add(id, label, key, ic, () => setElevTool(id));
-  }
-  add('undo', 'Undo', '⌘Z', 'undo', () => undo());
-  add('redo', 'Redo', '⇧⌘Z', 'redo', () => redo());
-}
-
-function bindGestures(cv: HTMLCanvasElement): void {
-  const pin = (e: PointerEvent): PointerIn => {
-    const r = cv.getBoundingClientRect();
-    return {
-      id: e.pointerId, kind: e.pointerType, x: e.clientX - r.left, y: e.clientY - r.top, t: performance.now(),
-      button: e.button, shift: e.shiftKey, mod: e.metaKey || e.ctrlKey, cx: e.clientX, cy: e.clientY,
-    };
-  };
-  cv.addEventListener('pointerdown', e => { cv.setPointerCapture(e.pointerId); elevPointerDown(pin(e)); });
-  cv.addEventListener('pointermove', e => elevPointerMove(pin(e)));
-  cv.addEventListener('pointerup', e => elevPointerUp(pin(e)));
-  cv.addEventListener('pointercancel', e => elevPointerCancel(pin(e)));
-  cv.addEventListener('pointerleave', e => elevPointerLeave(e.pointerType));
-  cv.addEventListener('wheel', e => {
-    e.preventDefault();
-    const r = cv.getBoundingClientRect();
-    elevWheel(e.clientX - r.left, e.clientY - r.top, e.deltaY);
-  }, { passive: false });
 }
 
 export function initElevation(): void {
@@ -111,14 +29,5 @@ export function initElevation(): void {
   $('#elevFit').onclick = fitElevation;
   bindTip($('#elevClose'), 'Back to the plan', 'Esc');
   bindTip($('#elevFlip'), 'Look from the other side', '');
-  bindTip($('#elevFit'), 'Fit to screen', '');
-  bindGestures($<HTMLCanvasElement>('#elevCv'));
-  buildElevRail();
-  $('#elevAdd').innerHTML = icon('plus');
-  $('#elevAdd').onclick = editSelected;
-  $('#elevTrash').onclick = deleteSelectedElevDim;
-  bindTip($('#elevTrash'), 'Delete the selected door/window — or free a locked dimension', 'Del');
-  bindTip($('#elevAdd'), 'Change this measurement', '');
-  window.addEventListener('resize', () => { if (elevOpen()) fitElevation(); });
-  matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setTimeout(renderElevation));
+  bindTip($('#elevFit'), 'Fit to screen', 'F');
 }

package/src/ui/keypad.ts

@@ -1,15 +1,13 @@
 import { ed } from '../app/state';
 import {
-  FRACTIONS, fractionRowShown, fractionText, keyLayout, keypadBackspace, keypadDeleteLast, keypadEnd, keypadFresh, keypadInsert,
-  keypadOpen, keypadPreview, keypadSetReading, keypadSetText, keypadSpec, keypadStart, keypadTakeLaser as takeLaserReading,
+  FRACTIONS, fractionRowShown, fractionText, keyLayout, keySpan, keypadBackspace, keypadDeleteLast, keypadEnd, keypadFresh, keypadInsert,
+  keypadOpen, keypadPreview, keypadSetText, keypadSpec, keypadStart, keypadTakeLaser as takeLaserReading,
   keypadApply, keypadText, keypadTyped, parenText,
 } from '../editor/keypad';
 import type { KeypadSpec } from '../editor/ports';
 import { cvs, requestDraw } from '../render/view';
 import { closeConflict, cfOpen } from './conflict';
 import { $ } from './dom';
-import { icon } from './icons';
-import { laser, takeReading } from './laser';
 import { markSheetOpened } from './sheets';
 
 /* The fraction keypad in the DOM (Board Optimizer style). Its state and rules live in editor/keypad.ts. */
@@ -53,23 +51,19 @@ export function openKeypad(o: KeypadSpec): void {
     const b = document.createElement('button');
     b.className = 'key';
     if (k === '⌫') {
-      b.classList.add('alt');
+      b.classList.add('del');
       b.setAttribute('aria-label', 'Backspace');
-      b.textContent = '⌫';
+      b.textContent = 'Del';
       b.onclick = () => { keypadBackspace(); kpSync(); };
     } else if (k === 'space') {
       b.classList.add('alt'); b.textContent = 'space'; b.onclick = () => kpInsert(' ');
-    } else if (k === 'laser') {
-      b.classList.add('laser');
-      b.innerHTML = icon('bt', 18) + 'Laser';
-      b.disabled = !laser.on || o.laser === false;
-      b.setAttribute('aria-label', 'Use laser reading');
-      b.onclick = () => { const v = takeReading(true); if (v != null) { keypadSetReading(v); kpSync(); } };
     } else if (k === '( )') {
       b.classList.add('alt'); b.textContent = '( )';
       b.onclick = () => kpInsert(parenText());
     } else {
-      if (k === "'" || k === '"') b.classList.add('alt');
+      // digits slate; units and symbols a lighter slate; the 0 two keys wide in lengths
+      if (!/^\d$/.test(k)) b.classList.add('alt');
+      if (keySpan(k, o.numeric) === 3) b.classList.add('wide');
       b.textContent = k;
       b.onclick = () => kpInsert(k);
     }
@@ -91,7 +85,7 @@ export function openKeypad(o: KeypadSpec): void {
   };
   refresh();
   $('#kp').classList.add('show');
-  $('#backdrop').classList.add('show');
+  if (!o.modeless) $('#backdrop').classList.add('show');
   markSheetOpened();
   kpPreview();
   if (!isTouchUI()) { inp.focus({ preventScroll: true }); if (o.selectAll) inp.select(); }

package/src/ui/laser.ts

@@ -41,8 +41,8 @@ function startChipDrag(e: PointerEvent, r: Reading, el: HTMLElement): void {
   const x0 = e.clientX, y0 = e.clientY;
   const lineUnder = (ev: PointerEvent) => {
     const cr = cvs.cv.getBoundingClientRect();
-    const h = hitAny(ev.clientX - cr.left, ev.clientY - cr.top, { touch: true, only: 'geom' });
-    return h && h.type === 'line' ? h : null;
+    const h = hitAny(ev.clientX - cr.left, ev.clientY - cr.top, { touch: true, only: 'geom', faces: true });
+    return h && (h.type === 'line' || h.type === 'wface') ? h : null;
   };
   const mv = (ev: PointerEvent) => {
     if (!moved && hyp(ev.clientX - x0, ev.clientY - y0) > 6) {