@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/dist/tools/select.js

@@ -1,20 +1,72 @@
+import { dimEnds, dimRadius, edgeOf, gridSteps, openingFrame } from '../model/planGeom';
+import { imageById } from '../model/images';
+import { editNoteText } from '../editor/markup';
 import { afterEdit, resolveOpeningsNow, solveSketch, tryAddConstraint } from '../app/edit';
 import { ed, isSel } from '../app/state';
-import { hyp, norm2, projT, segInter } from '../model/geom';
+import { clamp, hyp, norm2, projT, segInter } from '../model/geom';
 import { dropHistory, pushHistory } from '../model/history';
 import { deep } from '../model/ids';
 import { settings } from '../model/settings';
-import { applySlide, openingSpan, slideGroup } from '../model/openings';
-import { connectedGeometry, curveInfo, mergePoints, restorePos, snapshotPos } from '../model/sketch';
-import { page, SK } from '../model/store';
+import { openingSpan, slideGroup } from '../model/openings';
+import { connectedGeometry, joinPoints, mergePoints, restorePos, snapshotPos } from '../model/sketch';
+import { planSK, replaceSK, SK } from '../model/store';
+import { cabOfPoint, cabPoints, faceEdit, openingOfPoint } from '../model/faces';
+import { pushedOut, syncFace } from '../model/facesolve';
+import { snapCabinetMove } from '../editor/face';
+import { openCabinet, slideTargets, snapSlide } from '../editor/elevation';
+import { elevAct, elevOpen, fitState, keepInWall, moveOpeningDrag, overflow, planFit, restoreFit, slideWithinWalls, startOpeningDrag, wallBounds } from '../editor/elevation';
 import { hitAny } from '../render/hit';
-import { snapAt } from '../render/snap';
-import { mainT, noteBox, requestDraw, S, s2w, underlayH } from '../render/view';
+import { onGrid, snap45, snapAt } from '../render/snap';
+import { linkExtent, mainT, NOTE_TEXT_IN, NOTE_TEXT_MAX_IN, NOTE_TEXT_MIN_IN, noteBox, noteTextBox, noteTextIn, paintPending, requestDraw, requestImageDraw, requestOverlayDraw, S, s2w, underlayAt, underlayH, underlayLocal } from '../render/view';
 import { solver } from '../solver';
 import { onSessionReset } from '../model/session';
 import { openDrawer, setCursor, toast, updateCtx, updateHint } from '../editor/ports';
 import { selectionHint } from '../editor/selection';
 const RESIZE_CURSOR = { nw: 'nwse-resize', se: 'nwse-resize', ne: 'nesw-resize', sw: 'nesw-resize', n: 'ns-resize', s: 'ns-resize', e: 'ew-resize', w: 'ew-resize' };
+/**
+ * A drag that keeps up with the pointer. Each move is solved as it comes — until a solve takes a good part of a frame
+ * (a big, well-constrained plan on a device): then moves that arrive meanwhile wait for the next frame and only the
+ * latest is solved. Solving each in turn queued them up behind the solve, and what's constrained to the dragged thing
+ * trailed further and further behind the finger. A lift solves any move still waiting first.
+ */
+export const dragTiming = {
+    /** a solve this slow (ms) and moves wait for the next frame; tests pin it, so a busy machine doesn't change what they see */
+    slowMs: 4,
+};
+const dragMove = { ev: null, drag: null, frame: 0, cost: 0 };
+function solveDrag(d, ev) {
+    const t0 = performance.now();
+    dragTo(d, ev);
+    dragMove.cost = performance.now() - t0;
+}
+function moveDrag(d, ev) {
+    if (dragMove.cost < dragTiming.slowMs && !dragMove.frame) {
+        solveDrag(d, ev);
+        return;
+    }
+    dragMove.ev = ev;
+    dragMove.drag = d;
+    if (!dragMove.frame)
+        dragMove.frame = requestAnimationFrame(flushDrag);
+}
+function flushDrag() {
+    const { ev, drag } = dragMove;
+    dropDrag();
+    if (!ev || !drag)
+        return;
+    solveDrag(drag, ev);
+    // (shown in this frame: asking for one from here — itself a frame's callback — would show it a frame later)
+    paintPending();
+}
+function dropDrag() {
+    if (dragMove.frame)
+        cancelAnimationFrame(dragMove.frame);
+    dragMove.ev = null;
+    dragMove.drag = null;
+    dragMove.frame = 0;
+}
+/** What a finger or pencil can pick several of, one tap at a time. */
+const ADDABLE = new Set(['point', 'line', 'circle', 'arc', 'opening', 'oanchor', 'cab', 'wface']);
 /**
  * The last tap, for double taps: two taps close together in time and place, with no edit between, act on what the
  * first one picked. A finger or pencil gets longer and more room than a mouse: its second tap rarely lands on exactly
@@ -33,28 +85,47 @@ function doubleTapOf(at, h, now) {
 }
 export const selectTool = {
     st: {},
-    reset() { this.st = {}; ed.boxSel = null; },
+    reset() { dropDrag(); this.st = {}; ed.boxSel = null; },
     hover(ev) {
         if (ev.touch)
             return;
-        const h = hitAny(ev.sx, ev.sy, { touch: false });
+        const h = hitAny(ev.sx, ev.sy, { touch: false, faces: true }), was = ed.hover;
         ed.hover = h && !h.weak ? h : null;
         setCursor(!h ? 'default'
             : h.type === 'uhandle' ? RESIZE_CURSOR[h.part]
                 : h.type === 'nhandle' ? RESIZE_CURSOR[h.part] ?? 'crosshair'
-                    : h.type === 'underlay' && page().underlay?.locked ? 'default'
-                        : h.type === 'dim' || h.type === 'odim' ? 'pointer' : 'move');
-        requestDraw();
+                    : h.type === 'note' && h.part === 'tip' ? 'crosshair'
+                        : h.type === 'underlay' && imageById(h.id)?.locked ? 'default'
+                            : h.type === 'dim' || h.type === 'odim' || h.type === 'elev' || h.type === 'cabfoot' ? 'pointer' : 'move');
+        // the highlight is part of the drawing: redraw it only when what's under the pointer changed
+        const same = was?.type === ed.hover?.type && was?.id === ed.hover?.id && was?.part === ed.hover?.part;
+        if (!same)
+            requestDraw();
     },
     down(ev) {
-        const h = hitAny(ev.sx, ev.sy, { touch: ev.touch });
+        const raw = hitAny(ev.sx, ev.sy, { touch: ev.touch, faces: true });
+        // (a wall picked whole: the side it was picked on, which side of it a length is measured on between two spaces)
+        if (raw?.side && (raw.type === 'line' || raw.type === 'circle' || raw.type === 'arc'))
+            ed.wallTap = { id: raw.id, side: raw.side };
+        // (a door's or window's end, as selected: "<opening>|<edge>")
+        const h = raw && raw.type === 'oanchor' ? { ...raw, id: raw.id + '|' + raw.part } : raw;
         const again = !!h && ed.sel.length === 1 && isSel(h.type, h.id);
         this.st = { down: ev, hit: h, dragging: false, again };
-        if (h && h.type !== 'dim' && h.type !== 'odim' && h.type !== 'uhandle' && h.type !== 'nhandle') {
+        if (h && h.type !== 'dim' && h.type !== 'odim' && h.type !== 'elev' && h.type !== 'cabfoot' && h.type !== 'uhandle' && h.type !== 'nhandle') {
+            // (a wall and its edge are the same wall picked two ways: picking one, added to the selection, stands in for the other)
+            if ((ev.shift || ev.touch) && !isSel(h.type, h.id))
+                ed.sel = ed.sel.filter(s => !sameWall(s, h));
             if (ev.shift)
                 toggleSel(h);
-            else if (!isSel(h.type, h.id))
-                ed.sel = [{ type: h.type, id: h.id }];
+            else if (!isSel(h.type, h.id)) {
+                // a finger or pencil has no Shift: tapping something else adds it (tap empty space to clear)
+                if (ev.touch && ADDABLE.has(h.type) && ed.sel.length && ed.sel.every(s => ADDABLE.has(s.type))) {
+                    ed.sel.push({ type: h.type, id: h.id });
+                    this.st.added = true;
+                }
+                else
+                    ed.sel = [{ type: h.type, id: h.id }];
+            }
             updateCtx();
             requestDraw();
         }
@@ -68,9 +139,14 @@ export const selectTool = {
         const d = hyp(ev.sx - st.down.sx, ev.sy - st.down.sy);
         if (!st.dragging && d < (ev.touch ? 10 : 5))
             return;
-        if (st.hit && st.hit.type !== 'room') {
+        if (st.hit && st.hit.type !== 'room' && st.hit.type !== 'cabfoot') {
             if (!st.dragging) {
                 st.dragging = true;
+                // pressed to drag, not to add: just this one moves
+                if (st.added) {
+                    ed.sel = [{ type: st.hit.type, id: st.hit.id }];
+                    updateCtx();
+                }
                 pushHistory();
                 st.drag = beginDrag(st.hit, st.down);
                 if (!st.drag) {
@@ -78,35 +154,53 @@ export const selectTool = {
                     st.hit = null;
                     return;
                 }
+                // a cabinet's, door's or window's corner pressed to drag: it's the object that moves (and is selected)
+                const cab = st.hit.type === 'point' ? cabOfPoint(SK(), st.hit.id) : st.hit.type === 'line' ? SK().lines[st.hit.id]?.cab ?? null : null;
+                const op = st.hit.type === 'point' && elevOpen() ? openingOfPoint(st.hit.id) : null;
+                if ((cab || op) && ed.sel.length === 1 && isSel(st.hit.type, st.hit.id)) {
+                    ed.sel = [cab ? { type: 'cab', id: cab } : { type: 'opening', id: op }];
+                    updateCtx();
+                }
+                dropDrag();
+                dragMove.cost = 0;
             }
-            dragTo(st.drag, ev);
+            moveDrag(st.drag, ev);
         }
         else {
             st.dragging = true;
             ed.boxSel = { x0: st.down.sx, y0: st.down.sy, x1: ev.sx, y1: ev.sy };
-            requestDraw();
+            requestOverlayDraw();
         }
     },
     up(ev) {
         const st = this.st;
         if (!st.down)
             return;
-        if (st.dragging && st.drag)
+        if (st.dragging && st.drag) {
+            flushDrag();
             endDrag(st.drag);
+        }
         else if (st.dragging && ed.boxSel) {
             boxSelect(ed.boxSel, ev.shift);
             ed.boxSel = null;
         }
         else if (st.hit) {
             const h = st.hit, now = performance.now();
+            // a cabinet's footprint in the plan: open its wall, the cabinet selected
+            if (h.type === 'cabfoot') {
+                const [key, cab] = h.id.split('#');
+                this.st = {};
+                openCabinet(key, cab);
+                return;
+            }
             // with a finger or pencil, tapping the selected line again selects everything joined to it (as a double tap does)
-            const first = ev.shift || h.type === 'dim' || h.type === 'odim' ? null
+            const first = ev.shift || h.type === 'dim' || h.type === 'odim' || h.type === 'elev' ? null
                 : st.down.touch && st.again ? h
                     : doubleTapOf(st.down, h, now);
             const sk = SK();
             // a corner point stands for the lines meeting there
-            const from = first?.type === 'point' ? Object.keys(sk.lines).filter(id => sk.lines[id].a === first.id || sk.lines[id].b === first.id) : [];
-            if (first && (first.type === 'line' || first.type === 'arc' || from.length)) {
+            const from = first?.type === 'point' ? Object.keys(sk.lines).filter(id => !sk.lines[id].anchor && (sk.lines[id].a === first.id || sk.lines[id].b === first.id)) : [];
+            if (first && ((first.type === 'line' && !sk.lines[first.id]?.anchor) || first.type === 'arc' || from.length)) {
                 // double tap a line or arc (or a point on one): select everything connected to it
                 const g = connectedGeometry(sk, first.type === 'line' ? [first.id] : from, first.type === 'arc' ? [first.id] : []);
                 ed.sel = [...g.lines.map(id => ({ type: 'line', id })), ...g.arcs.map(id => ({ type: 'arc', id }))];
@@ -117,13 +211,32 @@ export const selectTool = {
                 requestDraw();
                 return;
             }
+            // a finger or pencil tapping one of several selected things takes it out of the selection
+            if (st.down.touch && !st.added && !ev.shift && ed.sel.length > 1 && ADDABLE.has(h.type) && isSel(h.type, h.id))
+                ed.sel = ed.sel.filter(s => !(s.type === h.type && s.id === h.id));
             // a tap on a dimension selects it; the keypad only opens from the yellow + (or Length etc.)
-            if (h.type === 'odim')
-                ed.sel = !h.part || h.part === 'w' ? [{ type: 'opening', id: h.id }] : [{ type: 'odim', id: h.id + '|' + h.part }];
+            // (its width chip too: a dimension picked, so the + sets it — the door or window picked whole has no +)
+            else if (h.type === 'odim')
+                ed.sel = !h.part ? [{ type: 'opening', id: h.id }] : [{ type: 'odim', id: h.id + '|' + h.part }];
+            // a wall view chip: a face dimension is selected as one; the others as the chip
+            else if (h.type === 'elev') {
+                const a = elevAct(h.id);
+                ed.sel = a.k === 'fdim' ? [{ type: 'dim', id: a.id }] : [{ type: 'elev', id: h.id }];
+            }
             else if (h.type === 'dim')
                 ed.sel = [{ type: 'dim', id: h.id }];
             else if (h.type === 'room' && first?.type === 'room' && first.id === h.id)
                 openDrawer('rooms');
+            // double tap a note (or, with a finger, tap it again): edit its text
+            else if (h.type === 'note' && first?.type === 'note' && first.id === h.id && SK().notes.find(n => n.id === h.id)?.type === 'text') {
+                ed.sel = [{ type: 'note', id: h.id }];
+                lastTap = { t: 0, x: 0, y: 0, hit: null, seq: -1 };
+                this.st = {};
+                updateCtx();
+                requestDraw();
+                editNoteText(h.id);
+                return;
+            }
             lastTap = { t: now, x: st.down.sx, y: st.down.sy, hit: h, seq: ed.editSeq };
         }
         else if (!ev.shift)
@@ -141,6 +254,16 @@ export const selectTool = {
             : 'Click to select, drag points to reshape. Drag on empty space to box-select. Select a line, then click <b>+</b> below to enter its length.';
     },
 };
+/** The wall a wall edge's id is on, as it's picked whole: a line, a circle or an arc. */
+function edgeWall(sk, id) {
+    return { type: sk.lines[id] ? 'line' : sk.circles[id] ? 'circle' : 'arc', id };
+}
+/** Whether `s` is the wall `h` is an edge of, or an edge of the wall `h` is. */
+function sameWall(s, h) {
+    if (h.type === 'wface')
+        return s.type !== 'wface' && s.id === edgeOf(h.id)[0];
+    return (h.type === 'line' || h.type === 'circle' || h.type === 'arc') && s.type === 'wface' && edgeOf(s.id)[0] === h.id;
+}
 function toggleSel(h) {
     if (isSel(h.type, h.id))
         ed.sel = ed.sel.filter(s => !(s.type === h.type && s.id === h.id));
@@ -149,12 +272,19 @@ function toggleSel(h) {
 }
 /** Window select (drag right) takes fully enclosed lines; crossing select (drag left) also takes touched ones. */
 function boxSelect(b, add) {
+    // each mode selects only its own things: Annotate its markup, Draft the drawing
+    if (ed.mode === 'annotate') {
+        boxSelectMarkup(b, add);
+        return;
+    }
     const sk = SK(), T = mainT(), crossing = b.x1 < b.x0;
     const x0 = Math.min(b.x0, b.x1), x1 = Math.max(b.x0, b.x1), y0 = Math.min(b.y0, b.y1), y1 = Math.max(b.y0, b.y1);
     const inside = (id) => { const p = sk.points[id]; const [x, y] = S(T, p.x, p.y); return x >= x0 && x <= x1 && y >= y0 && y <= y1; };
     const out = add ? ed.sel.slice() : [];
     for (const id in sk.lines) {
         const l = sk.lines[id];
+        if (l.anchor || l.cab)
+            continue;
         const ia = inside(l.a), ib = inside(l.b);
         let hit = ia && ib;
         if (!hit && crossing) {
@@ -170,46 +300,149 @@ function boxSelect(b, add) {
         if (hit && !out.some(s => s.id === id))
             out.push({ type: 'line', id });
     }
+    // a cabinet: taken whole when it's inside (or, crossing, when any of it is)
+    for (const [id, cb] of Object.entries(sk.cabs ?? {})) {
+        const ins = cabPoints(cb).map(inside);
+        if (crossing ? ins.some(Boolean) : ins.every(Boolean))
+            out.push({ type: 'cab', id });
+    }
+    // a door or window, the same way: by its corners on a wall face, or its two ends along the wall in the plan
+    const atScreen = (x, y) => { const [sx, sy] = S(T, x, y); return sx >= x0 && sx <= x1 && sy >= y0 && sy <= y1; };
+    const opCorners = new Map();
+    if (elevOpen()) {
+        for (const pid in sk.points) {
+            const op = openingOfPoint(pid);
+            if (op)
+                opCorners.set(op, [...(opCorners.get(op) ?? []), inside(pid)]);
+        }
+    }
+    else {
+        for (const id in sk.openings) {
+            const g = openingFrame(sk, id);
+            if (g)
+                opCorners.set(id, [g.s0, g.s1].map(s => atScreen(g.A.x + g.ux * s, g.A.y + g.uy * s)));
+        }
+    }
+    for (const [id, ins] of opCorners)
+        if (crossing ? ins.some(Boolean) : ins.every(Boolean))
+            out.push({ type: 'opening', id });
     for (const id in sk.circles)
         if (inside(sk.circles[id].c))
             out.push({ type: 'circle', id });
     for (const id in sk.arcs)
         if (inside(sk.arcs[id].c))
             out.push({ type: 'arc', id });
+    const cabCorners = new Set(Object.values(sk.cabs ?? {}).flatMap(cabPoints));
     if (!out.length)
         for (const id in sk.points)
-            if (inside(id) && !sk.points[id].origin)
+            if (inside(id) && !sk.points[id].origin && !sk.points[id].anchor && !cabCorners.has(id))
                 out.push({ type: 'point', id });
     ed.sel = out;
 }
+/** Annotate's box: the markup in it (window: wholly inside; crossing: any of it inside) — never the drawing or the images. */
+function boxSelectMarkup(b, add) {
+    const T = mainT(), crossing = b.x1 < b.x0;
+    const x0 = Math.min(b.x0, b.x1), x1 = Math.max(b.x0, b.x1), y0 = Math.min(b.y0, b.y1), y1 = Math.max(b.y0, b.y1);
+    const out = add ? ed.sel.filter(s => s.type === 'note') : [];
+    if (settings.layers.annot) {
+        for (const n of SK().notes) {
+            // the note's box on screen
+            let l, r, t, bt;
+            if (n.type === 'text') {
+                const tb = noteTextBox(T, n);
+                l = tb.x;
+                r = tb.x + tb.w;
+                t = tb.y;
+                bt = tb.y + tb.h;
+            }
+            else if (n.type === 'link')
+                [l, t, r, bt] = linkExtent(T, n);
+            else {
+                const nb = noteBox(n);
+                if (!nb)
+                    continue;
+                const [ax, ay] = S(T, nb.left, nb.top), [bx, by] = S(T, nb.right, nb.bottom);
+                l = Math.min(ax, bx);
+                r = Math.max(ax, bx);
+                t = Math.min(ay, by);
+                bt = Math.max(ay, by);
+            }
+            const hit = crossing ? l <= x1 && r >= x0 && t <= y1 && bt >= y0 : l >= x0 && r <= x1 && t >= y0 && bt <= y1;
+            if (hit && !out.some(s => s.id === n.id))
+                out.push({ type: 'note', id: n.id });
+        }
+    }
+    ed.sel = out;
+}
 function beginDrag(h, down) {
     const sk = SK();
+    // a door's or window's end: it moves, whole, as by its body
+    if (h.type === 'oanchor')
+        h = { type: 'opening', id: h.id.split('|')[0] };
+    // a wall's edge: the wall moves, as by its body (with the rest of the selection, when the edge is part of it) — a
+    // circle's is sized, as by its edge
+    const edgeSel = h.type === 'wface' && isSel('wface', h.id);
+    if (h.type === 'wface')
+        h = edgeWall(sk, edgeOf(h.id)[0]);
     const [wx, wy] = s2w(down.sx, down.sy);
-    if (h.type === 'point') {
-        const p = sk.points[h.id];
-        if (p.fixed) {
-            toast(p.origin ? 'The origin stays put. Lock or unlock other points from the bar below.' : 'This point is locked. Unlock it to move it.');
-            return null;
-        }
-        return { kind: 'point', id: h.id, start: { x: p.x, y: p.y }, grab: { x: wx, y: wy }, snap: null };
-    }
+    // pressed on one of several things selected: they all move together, by as much as it's dragged
+    const picked = edgeSel || isSel(h.type, h.id), several = picked && ed.sel.length > 1;
+    // (Annotate's: the selected markup, and photos)
+    if (several && (h.type === 'note' || h.type === 'underlay'))
+        return groupDrag(sk, h, wx, wy);
+    // a cabinet's, door's or window's corner: it moves, whole (it keeps its size)
+    const cabOf = h.type === 'point' ? cabOfPoint(sk, h.id) : h.type === 'line' ? sk.lines[h.id]?.cab ?? null : null, opOf = h.type === 'point' && elevOpen() ? openingOfPoint(h.id) : null;
+    // (`via`: the corner it was picked up by — dropped on a point, they join)
+    const via = h.type === 'point' && (cabOf || (opOf && sk.points[h.id]?.anchor)) ? h.id : undefined;
+    if (cabOf)
+        h = { type: 'cab', id: cabOf };
+    else if (opOf && sk.points[h.id]?.anchor)
+        h = { type: 'opening', id: opOf };
+    /** The points that move: the whole selection's, when what's pressed is part of it (walls, lines, arcs, circles, points,
+        cabinets and spaces — doors and windows go with their walls), otherwise just its own. */
     const ptsOf = () => {
         const s = new Set();
         const addL = (id) => { const l = sk.lines[id]; if (l) {
             s.add(l.a);
             s.add(l.b);
         } };
-        const addArc = (id) => { const a = sk.arcs[id]; s.add(a.c); s.add(a.a); s.add(a.b); };
-        if (isSel(h.type, h.id)) {
+        const addArc = (id) => { const a = sk.arcs[id]; if (a) {
+            s.add(a.c);
+            s.add(a.a);
+            s.add(a.b);
+        } };
+        if (picked) {
             for (const it of ed.sel) {
+                if (it.type === 'cab') {
+                    const cb = sk.cabs?.[it.id];
+                    if (cb)
+                        cabPoints(cb).forEach(p => s.add(p));
+                }
                 if (it.type === 'line')
                     addL(it.id);
+                if (it.type === 'wface') {
+                    const w = edgeWall(sk, edgeOf(it.id)[0]);
+                    if (w.type === 'line')
+                        addL(w.id);
+                    else if (w.type === 'arc')
+                        addArc(w.id);
+                    else if (sk.circles[w.id])
+                        s.add(sk.circles[w.id].c);
+                }
                 if (it.type === 'point')
                     s.add(it.id);
                 if (it.type === 'arc')
                     addArc(it.id);
-                if (it.type === 'circle')
-                    s.add(sk.circles[it.id].c);
+                if (it.type === 'circle') {
+                    const ci = sk.circles[it.id];
+                    if (ci)
+                        s.add(ci.c);
+                }
+                if (it.type === 'room') {
+                    const r = sk.rooms[it.id];
+                    if (r)
+                        r.loop.forEach(p => s.add(p));
+                }
             }
         }
         else {
@@ -218,18 +451,53 @@ function beginDrag(h, down) {
             if (h.type === 'arc')
                 addArc(h.id);
         }
-        return [...s].filter(id => !sk.points[id].fixed);
+        return [...s].filter(id => sk.points[id] && !sk.points[id].fixed);
     };
-    if (h.type === 'line' || h.type === 'arc') {
-        const ids = ptsOf();
+    /** Those points moved together, by as much as the pointer moves. */
+    const multi = (ids) => {
         if (!ids.length) {
-            toast('Those points are locked.');
+            toast('Those points are locked.', { warn: true });
             return null;
         }
         return { kind: 'multi', ids, start: ids.map(id => ({ x: sk.points[id].x, y: sk.points[id].y })), grab: { x: wx, y: wy } };
+    };
+    if (h.type === 'point') {
+        const p = sk.points[h.id];
+        if (p.fixed) {
+            toast(p.origin ? 'The origin stays put. Lock or unlock other points from the bar below.' : p.anchor ? 'This corner is set by the plan — move the wall, door or window there.' : 'This point is locked. Unlock it to move it.', { warn: true });
+            return null;
+        }
+        // (one of several selected: the selection moves, as by one of its lines)
+        if (several)
+            return multi(ptsOf());
+        return { kind: 'point', id: h.id, start: { x: p.x, y: p.y }, grab: { x: wx, y: wy }, snap: null };
+    }
+    if (h.type === 'cab') {
+        // a cabinet moves as a whole (and the rest of the selection with it, when it's part of it)
+        const cb = sk.cabs?.[h.id];
+        if (!cb)
+            return null;
+        const ids = [...new Set([...cabPoints(cb), ...(isSel('cab', h.id) ? ptsOf() : [])])].filter(id => !sk.points[id].fixed);
+        const cs = cabPoints(cb).map(p => sk.points[p]), box = { u0: Math.min(...cs.map(p => p.x)), u1: Math.max(...cs.map(p => p.x)), z0: Math.min(...cs.map(p => p.y)), z1: Math.max(...cs.map(p => p.y)) };
+        return { kind: 'multi', ids, start: ids.map(id => ({ x: sk.points[id].x, y: sk.points[id].y })), grab: { x: wx, y: wy }, cab: { id: h.id, box }, via };
+    }
+    if (h.type === 'opening' && elevOpen()) {
+        const drag = startOpeningDrag(h.id);
+        return drag ? { kind: 'wopening', drag, grab: { x: wx, y: wy }, via } : null;
+    }
+    if (h.type === 'line' && sk.lines[h.id]?.anchor) {
+        toast('The wall’s edges are set by the plan.', { warn: true });
+        return null;
+    }
+    if (h.type === 'line' || h.type === 'arc')
+        return multi(ptsOf());
+    // a circle alone is sized by its edge; one of several selected moves with the rest
+    if (h.type === 'circle') {
+        if (several)
+            return multi(ptsOf());
+        const ci = sk.circles[h.id], o = sk.points[ci.c];
+        return { kind: 'radius', id: h.id, start: ci.r, grab: hyp(wx - o.x, wy - o.y) - ci.r };
     }
-    if (h.type === 'circle')
-        return { kind: 'radius', id: h.id, start: sk.circles[h.id].r };
     if (h.type === 'odim') {
         // width and placed dimensions move; the hover-only wall-end distances don't (tap them to lock instead)
         if (h.part === 'w' || (h.part || '').startsWith('d:'))
@@ -245,56 +513,145 @@ function beginDrag(h, down) {
         return { kind: 'dimoff', id: h.id };
     }
     if (h.type === 'opening') {
+        // selected with walls or lines: the selection moves (a door or window goes with its wall), not the door along it
+        if (several && ed.sel.some(s => MOVE_WITH.has(s.type)))
+            return multi(ptsOf());
         const o = sk.openings[h.id];
         const group = slideGroup(sk, h.id), l = sk.lines[o.line];
         if (!group || !l) {
-            toast('This ' + (o.type === 'door' ? 'door' : 'window') + ' is locked by a dimension. Change the dimension, or make it a reference, to move it.');
+            toast('This ' + (o.type === 'door' ? 'door' : 'window') + ' is locked by a dimension. Change the dimension, or make it a reference, to move it.', { warn: true });
             return null;
         }
         const A = sk.points[l.a], B = sk.points[l.b];
-        return { kind: 'opening', id: h.id, grab: projT(A, B, { x: wx, y: wy }) * hyp(B.x - A.x, B.y - A.y), group };
+        const g = openingSpan(sk, o);
+        return { kind: 'opening', id: h.id, grab: projT(A, B, { x: wx, y: wy }) * hyp(B.x - A.x, B.y - A.y), group, snap: { at0: o.at, w: g ? g.w : o.w, targets: slideTargets(sk, h.id, group) } };
     }
     if (h.type === 'note') {
         const n = sk.notes.find(n => n.id === h.id);
-        return { kind: 'note', id: h.id, start: deep(n), grab: { x: wx, y: wy } };
+        // a link's tile: grabbed by its card, the card moves; by its leader's tip, that end; along its leader, both ends
+        // together, as a line moves
+        if (h.part === 'tip')
+            return { kind: 'nresize', id: h.id, part: 'tip', start: deep(n) };
+        return { kind: 'note', id: h.id, start: deep(n), grab: { x: wx, y: wy }, ...(h.part === 'leader' ? { both: true } : {}) };
     }
     if (h.type === 'nhandle') {
         const n = sk.notes.find(x => x.id === h.id);
         return n ? { kind: 'nresize', id: h.id, part: h.part, start: deep(n) } : null;
     }
     if (h.type === 'underlay' || h.type === 'uhandle') {
-        const u = page().underlay;
+        const u = imageById(h.id);
         if (!u)
             return null;
         if (u.locked) {
-            toast('This image is locked. Tap Unlock in the bar below to move or resize it.');
+            toast('This image is locked. Tap Unlock in the bar below to move or resize it.', { warn: true });
             return null;
         }
         if (h.type === 'underlay')
-            return { kind: 'umove', start: { x: u.x, y: u.y }, grab: { x: wx, y: wy } };
-        return { kind: 'uresize', part: h.part, start: { x: u.x, y: u.y, w: u.w, h: underlayH(u) } };
+            return { kind: 'umove', id: u.id, start: { x: u.x, y: u.y }, grab: { x: wx, y: wy } };
+        return { kind: 'uresize', id: u.id, part: h.part, start: { x: u.x, y: u.y, w: u.w, h: underlayH(u) } };
     }
     return null;
 }
+/** What's moved by its points: dragging a door or window selected with any of these moves them all. */
+const MOVE_WITH = new Set(['line', 'arc', 'circle', 'point', 'cab', 'room']);
+/** Several pieces of markup (and photos) selected, one of them pressed: they all move by as much as it's dragged. */
+function groupDrag(sk, h, wx, wy) {
+    if (h.type === 'underlay' && imageById(h.id)?.locked) {
+        toast('This image is locked. Tap Unlock in the bar below to move or resize it.', { warn: true });
+        return null;
+    }
+    const notes = ed.sel.filter(s => s.type === 'note').map(s => sk.notes.find(n => n.id === s.id)).filter((n) => !!n);
+    // (a locked photo stays where it is)
+    const images = ed.sel.filter(s => s.type === 'underlay').map(s => imageById(s.id)).filter((u) => !!u && !u.locked);
+    return { kind: 'group', notes: notes.map(n => ({ id: n.id, start: deep(n) })), images: images.map(u => ({ id: u.id, start: { x: u.x, y: u.y } })), grab: { x: wx, y: wy } };
+}
+/** How far things ran past their walls when each drag began: it may not go further. */
+const dragBase = new WeakMap();
 function dragTo(d, ev) {
     const sk = SK();
     const [wx, wy] = s2w(ev.sx, ev.sy);
+    // a drag that would push anything past its wall (in the plan: make a wall shorter than what's on it) goes as far as
+    // it can and stops there (measured against how things were when the drag began)
+    const shapes = d.kind === 'point' || d.kind === 'multi' || d.kind === 'radius';
+    if (shapes && !dragBase.has(d))
+        dragBase.set(d, overflow(sk));
+    const was = dragBase.get(d) ?? {}, held = shapes ? fitState(sk) : null;
+    const fits = () => !held || !pushedOut(was, overflow(sk));
+    const keep = () => { if (!fits())
+        restoreFit(sk, held); };
+    /** Drag points toward where they're going; a move that would run past (a fast one, a long way) stops at the limit, not short of it. */
+    const go = (ids, to) => {
+        const ok = solver.drag(sk, ids, to);
+        if (fits())
+            return ok;
+        const from = ids.map(id => ({ x: held.pos.p[id][0], y: held.pos.p[id][1] }));
+        const at = (t) => from.map((f, i) => ({ x: f.x + (to[i].x - f.x) * t, y: f.y + (to[i].y - f.y) * t }));
+        let lo = 0, hi = 1;
+        for (let i = 0; i < 6; i++) {
+            const m = (lo + hi) / 2;
+            restoreFit(sk, held);
+            solver.drag(sk, ids, at(m));
+            if (fits())
+                lo = m;
+            else
+                hi = m;
+        }
+        restoreFit(sk, held);
+        if (lo > 0) {
+            solver.drag(sk, ids, at(lo));
+            overflow(sk);
+        }
+        return ok;
+    };
     if (d.kind === 'point') {
+        // Shift: the end of a line (or wall) goes level, plumb or 45° from the line's other end — at a corner of two, from
+        // whichever of their other ends that's nearest to where the pointer is
+        // (not a line already held level or plumb: its direction can't change)
+        const squared = (l) => Object.values(sk.cons).some(c => (c.type === 'h' || c.type === 'v') && ((c.a === l.a && c.b === l.b) || (c.a === l.b && c.b === l.a)));
+        const ends = ev.shift ? Object.values(sk.lines).filter(l => !l.anchor && (l.a === d.id || l.b === d.id) && !squared(l)).map(l => sk.points[l.a === d.id ? l.b : l.a]) : [];
+        if (ends.length) {
+            const q = ends.map(o => snap45(o, { x: wx, y: wy })).reduce((m, c) => (hyp(c.x - wx, c.y - wy) < hyp(m.x - wx, m.y - wy) ? c : m));
+            // where the drawing can't take it there (other constraints), it's an ordinary drag — never stuck
+            if (go([d.id], [{ x: q.x, y: q.y }])) {
+                d.snap = null;
+                ed.snapState = null;
+                return;
+            }
+            restoreFit(sk, held);
+        }
         const s = snapAt(ev.sx, ev.sy, { exclude: new Set([d.id]), touch: ev.touch });
         d.snap = s.kind === 'point' || s.kind === 'mid' || s.kind === 'online' || s.kind === 'oncircle' ? s : null;
         ed.snapState = d.snap ? s : null;
-        solver.drag(sk, [d.id], [{ x: s.x, y: s.y }]);
+        go([d.id], [{ x: s.x, y: s.y }]);
     }
     else if (d.kind === 'multi') {
-        const dx = wx - d.grab.x, dy = wy - d.grab.y;
-        solver.drag(sk, d.ids, d.start.map(p => ({ x: p.x + dx, y: p.y + dy })));
+        let mx = wx - d.grab.x, my = wy - d.grab.y;
+        // Shift: moved level, plumb or 45° only
+        if (ev.shift)
+            ({ x: mx, y: my } = snap45({ x: 0, y: 0 }, { x: mx, y: my }));
+        if (d.cab && !ev.shift)
+            [mx, my] = snapCabinetMove(d.cab.id, d.cab.box, mx, my, (ev.touch ? 16 : 10) / mainT().s);
+        // with Snap to grid, moved by whole steps of it: what's on the grid stays on it (held steady as snaps are)
+        else if (settings.snapGrid && !d.cab) {
+            const st = gridSteps(mainT().s).minor;
+            d.gx = mx = onGrid(mx, st, d.gst === st ? d.gx : undefined);
+            d.gy = my = onGrid(my, st, d.gst === st ? d.gy : undefined);
+            d.gst = st;
+        }
+        const [dx, dy] = keepInWall(sk, d.ids, d.start, mx, my);
+        go(d.ids, d.start.map(p => ({ x: p.x + dx, y: p.y + dy })));
     }
     else if (d.kind === 'radius') {
         const ci = sk.circles[d.id], o = sk.points[ci.c];
         const snap = snapshotPos(sk);
-        ci.r = Math.max(0.1, hyp(wx - o.x, wy - o.y));
+        // (where it was picked up stays under the pointer: a thick wall by its face doesn't jump to the centreline)
+        ci.r = Math.max(0.1, hyp(wx - o.x, wy - o.y) - d.grab);
+        const b = wallBounds();
+        if (b)
+            ci.r = Math.max(0.1, Math.min(ci.r, o.x - b.x0, b.x1 - o.x, o.y - b.y0, b.y1 - o.y));
         if (!solveSketch(['r:' + d.id]).ok)
             restorePos(sk, snap);
+        keep();
     }
     else if (d.kind === 'odimoff') {
         const o = sk.openings[d.id], g = o && openingSpan(sk, o);
@@ -310,22 +667,35 @@ function dragTo(d, ev) {
         }
     }
     else if (d.kind === 'diamlabel') {
-        const c = sk.cons[d.id], ci = curveInfo(sk, c.c);
-        if (ci) {
-            const o = sk.points[ci.o.c];
-            const r = ci.kind === 'circle' ? ci.o.r : hyp(sk.points[ci.o.a].x - o.x, sk.points[ci.o.a].y - o.y);
-            c.ang = Math.atan2(wy - o.y, wx - o.x);
-            c.off = Math.max(0, hyp(wx - o.x, wy - o.y) - r - 40 / mainT().s);
+        // (out from the face it's measured across, for one on a curved wall's face)
+        const c = sk.cons[d.id], g = dimRadius(sk, c);
+        if (g) {
+            c.ang = Math.atan2(wy - g.o.y, wx - g.o.x);
+            c.off = Math.max(0, hyp(wx - g.o.x, wy - g.o.y) - g.r - 40 / mainT().s);
         }
     }
     else if (d.kind === 'dimoff') {
-        const c = sk.cons[d.id], a = sk.points[c.a], b = sk.points[c.b];
+        // (off the line it's drawn from: a wall's face, for a length measured on one)
+        const c = sk.cons[d.id], e = dimEnds(sk, c), a = e ? e.a : sk.points[c.a], b = e ? e.b : sk.points[c.b];
         const n = norm2(-(b.y - a.y), b.x - a.x);
         c.off = (wx - (a.x + b.x) / 2) * n[0] + (wy - (a.y + b.y) / 2) * n[1];
     }
+    else if (d.kind === 'wopening') {
+        // a locked door won't move: say so once, then nothing
+        if (d.stuck)
+            return;
+        if (!moveOpeningDrag(d.drag, wx - d.grab.x, wy - d.grab.y, (ev.touch ? 16 : 10) / mainT().s)) {
+            d.stuck = true;
+            return;
+        }
+    }
     else if (d.kind === 'opening') {
         const o = sk.openings[d.id], l = sk.lines[o.line], A = sk.points[l.a], B = sk.points[l.b];
-        applySlide(sk, d.group, projT(A, B, { x: wx, y: wy }) * hyp(B.x - A.x, B.y - A.y) - d.grab);
+        const delta = projT(A, B, { x: wx, y: wy }) * hyp(B.x - A.x, B.y - A.y) - d.grab;
+        // what's drawn on the wall's faces follows as it slides — a cabinet tied to a window can't be pushed off the
+        // wall: the slide stops where it would be (as dragging the window in the wall view does)
+        d.base ??= planFit(sk);
+        d.last = slideWithinWalls(sk, d.group, snapSlide(d.snap.at0, d.snap.w, delta, d.snap.targets, (ev.touch ? 16 : 10) / mainT().s), d.last ?? 0, d.base);
         resolveOpeningsNow();
     }
     else if (d.kind === 'note') {
@@ -337,25 +707,75 @@ function dragTo(d, ev) {
             n.x = d.start.x + dx;
             n.y = d.start.y + dy;
         }
+        if (d.both && d.start.leader)
+            n.leader = [d.start.leader[0] + dx, d.start.leader[1] + dy];
+    }
+    else if (d.kind === 'group') {
+        let dx = wx - d.grab.x, dy = wy - d.grab.y;
+        // Shift: moved level, plumb or 45° only
+        if (ev.shift)
+            ({ x: dx, y: dy } = snap45({ x: 0, y: 0 }, { x: dx, y: dy }));
+        for (const g of d.notes) {
+            const n = sk.notes.find(x => x.id === g.id);
+            if (!n)
+                continue;
+            if (n.pts)
+                n.pts = g.start.pts.map(p => [p[0] + dx, p[1] + dy]);
+            else {
+                n.x = g.start.x + dx;
+                n.y = g.start.y + dy;
+            }
+            // (a link's leader with it: what it points at is moving too)
+            if (g.start.leader)
+                n.leader = [g.start.leader[0] + dx, g.start.leader[1] + dy];
+        }
+        for (const g of d.images) {
+            const u = imageById(g.id);
+            if (u) {
+                u.x = g.start.x + dx;
+                u.y = g.start.y + dy;
+            }
+        }
     }
     else if (d.kind === 'umove') {
-        const u = page().underlay;
+        const u = imageById(d.id);
+        if (!u)
+            return;
         u.x = d.start.x + wx - d.grab.x;
         u.y = d.start.y + wy - d.grab.y;
     }
     else if (d.kind === 'nresize') {
-        reshapeNote(d.id, d.part, d.start, wx, wy);
+        if (d.part === 'tip') {
+            // a leader points at the drawing: its tip snaps to it, as a line's end does
+            const n = sk.notes.find(x => x.id === d.id), s = snapAt(ev.sx, ev.sy, { touch: ev.touch });
+            ed.snapState = s.kind === 'free' ? null : s;
+            if (n)
+                n.leader = [s.x, s.y];
+        }
+        else
+            reshapeNote(d.id, d.part, d.start, wx, wy);
     }
     else if (d.kind === 'uresize') {
-        resizeUnderlay(d.part, d.start, wx, wy, ev.shift);
+        resizeUnderlay(d.id, d.part, d.start, wx, wy, ev.shift);
     }
     resolveOpeningsNow();
-    requestDraw();
+    // on a wall face, a door or window tied to what's dragged (a dimension to a cabinet) moves on the face as it's
+    // solved, but it's drawn from the plan: bring the plan along at each step — as dragging the door or window itself
+    // does — rather than only when the drag ends
+    if (shapes && faceEdit.key)
+        syncFace(planSK(), faceEdit.key);
+    // (a photo moved or sized: only the photos are drawn again — the drawing over them hasn't changed)
+    if (d.kind === 'umove' || d.kind === 'uresize')
+        requestImageDraw();
+    else
+        requestDraw();
 }
 /** Finish a drag: snapping onto geometry turns into a join or a constraint (when auto-constrain is on). */
 function endDrag(d) {
     const sk = SK();
     ed.snapState = null;
+    if (d.kind === 'wopening' && !d.drag.started)
+        dropHistory(); // it didn't move
     if (d.kind === 'point' && d.snap && settings.autoCons) {
         const s = d.snap;
         if (s.kind === 'point') {
@@ -363,7 +783,7 @@ function endDrag(d) {
             if (mergePoints(sk, s.ref, d.id)) {
                 const r = solveSketch();
                 if (!r.ok) {
-                    page().sk = JSON.parse(snap);
+                    replaceSK(JSON.parse(snap));
                     toast('Can’t join those points — it conflicts with other constraints.', { warn: true });
                 }
                 else {
@@ -373,7 +793,7 @@ function endDrag(d) {
             }
         }
         else if (s.kind === 'mid')
-            tryAddConstraint({ type: 'mid', p: d.id, l: s.ref }, { silent: false });
+            tryAddConstraint({ type: sk.lines[s.ref]?.anchor ? 'online' : 'mid', p: d.id, l: s.ref }, { silent: !!sk.lines[s.ref]?.anchor }); // (on a wall face's own edge: on it, free to slide)
         else if (s.kind === 'online')
             tryAddConstraint({ type: 'online', p: d.id, l: s.ref }, { silent: true });
         else if (s.kind === 'oncircle')
@@ -382,17 +802,58 @@ function endDrag(d) {
     if (d.kind === 'point') {
         const p = SK().points[d.id];
         if (p && hyp(p.x - d.start.x, p.y - d.start.y) < 1e-6 && !d.snap && ed.ana.det.has(d.id))
-            toast('That point is fully defined. Change a dimension to move it.');
+            toast('That point is fully defined. Change a dimension to move it.', { warn: true });
+    }
+    afterEdit();
+    // a cabinet, door or window picked up by its corner and dropped with that corner on a point: they join, as points do
+    if ((d.kind === 'multi' || d.kind === 'wopening') && d.via && settings.autoCons)
+        joinDropped(d.via);
+}
+/** Join corner `via` (a cabinet's, door's or window's, just dropped) to the point it landed on, if any. */
+function joinDropped(via) {
+    const sk = SK(), P = sk.points[via];
+    if (!P)
+        return;
+    const op = openingOfPoint(via), cab = cabOfPoint(sk, via);
+    const own = (id) => (op && id.startsWith('@o:' + op + ':')) || (cab && cabOfPoint(sk, id) === cab);
+    const tol = (ed.lastPointerTouch ? 16 : 10) / mainT().s;
+    let best = null, bd = tol;
+    for (const [id, q] of Object.entries(sk.points)) {
+        if (id === via || own(id) || (q.anchor && q.fixed && P.fixed))
+            continue;
+        const d = hyp(q.x - P.x, q.y - P.y);
+        if (d < bd) {
+            bd = d;
+            best = id;
+        }
+    }
+    if (!best)
+        return;
+    // (part of the drag's undo step)
+    const snap = JSON.stringify(sk);
+    if (!joinPoints(sk, via, best))
+        return;
+    if (!solveSketch().ok) {
+        replaceSK(JSON.parse(snap));
+        afterEdit();
+        toast('Can’t join those points — it conflicts with other constraints.', { warn: true });
+        return;
     }
+    toast('Points joined');
     afterEdit();
 }
 /**
  * Resize the image underlay from a handle. Corners scale proportionally about the opposite corner
  * (hold Shift for a free corner); side handles stretch one direction about the opposite side.
  */
-function resizeUnderlay(part, s0, wx, wy, free) {
-    const u = page().underlay, min = 8 / mainT().s;
-    const left = s0.x, right = s0.x + s0.w, top = s0.y, bottom = s0.y - s0.h;
+function resizeUnderlay(id, part, s0, ptx, pty, free) {
+    const u = imageById(id), min = 8 / mainT().s;
+    if (!u)
+        return;
+    // worked in the image's own frame (from its middle as the drag began, unturned), so a turned image resizes along its
+    // own sides — and put back turned, the side or corner opposite the handle staying where it was
+    const was = { ...u, x: s0.x, y: s0.y, w: s0.w, h: s0.h }, { x: wx, y: wy } = underlayLocal(was, ptx, pty);
+    const left = -s0.w / 2, right = s0.w / 2, top = s0.h / 2, bottom = -s0.h / 2;
     const W = part.includes('w'), E = part.includes('e'), N = part.includes('n'), Sth = part.includes('s');
     let w = s0.w, h = s0.h;
     if (part.length === 2 && !free) {
@@ -414,10 +875,31 @@ function resizeUnderlay(part, s0, wx, wy, free) {
         if (Sth)
             h = Math.max(min, top - wy);
     }
+    const mid = underlayAt(was, (W ? right - w : left) + w / 2, (N ? bottom + h : top) - h / 2);
     u.w = w;
     u.h = h;
-    u.x = W ? right - w : left;
-    u.y = N ? bottom + h : top;
+    u.x = mid.x - w / 2;
+    u.y = mid.y + h / 2;
+}
+/**
+ * Scale a note from a corner: the opposite corner stays put and the note grows or shrinks evenly (text, padding and
+ * corners together) as the corner follows the pointer along the box's diagonal.
+ */
+function scaleText(n, part, start, wx, wy) {
+    const T = mainT(), b = noteTextBox(T, start);
+    const xs = { w: b.x, e: b.x + b.w }, ys = { n: b.y, s: b.y + b.h };
+    const corner = { x: xs[part[1]], y: ys[part[0]] };
+    const fixed = { x: part[1] === 'w' ? xs.e : xs.w, y: part[0] === 'n' ? ys.s : ys.n };
+    const [px, py] = S(T, wx, wy), dx = corner.x - fixed.x, dy = corner.y - fixed.y;
+    const along = ((px - fixed.x) * dx + (py - fixed.y) * dy) / (dx * dx + dy * dy || 1);
+    // its size on the drawing (to the quarter inch), which then holds at any zoom
+    const was = noteTextIn(start), ts = Math.round(clamp(was * along, NOTE_TEXT_MIN_IN, NOTE_TEXT_MAX_IN) * 4) / 4, k = ts / was;
+    [n.x, n.y] = s2w(fixed.x + (b.x - fixed.x) * k, fixed.y + (b.mid - fixed.y) * k);
+    delete n.size;
+    if (ts === NOTE_TEXT_IN)
+        delete n.ts;
+    else
+        n.ts = ts;
 }
 /**
  * Reshape markup from a handle. Arrow: that end follows the pointer. Cloud or pen stroke: the side or corner of
@@ -425,6 +907,10 @@ function resizeUnderlay(part, s0, wx, wy, free) {
  */
 function reshapeNote(id, part, start, wx, wy) {
     const n = SK().notes.find(x => x.id === id);
+    if (n?.type === 'text') {
+        scaleText(n, part, start, wx, wy);
+        return;
+    }
     if (!n || !n.pts || !start.pts)
         return;
     if (part[0] === 'p') {