@reekon-tools/boldr-cad 0.1.0 → 1.0.0

package/src/tools/select.ts

@@ -1,16 +1,24 @@
+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, type BoxSel, type Hit, type Snap } 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, type SlideGroup } from '../model/openings';
-import { connectedGeometry, curveInfo, mergePoints, restorePos, snapshotPos } from '../model/sketch';
-import { page, SK } from '../model/store';
-import type { Note, SelItem, Sketch } from '../model/types';
+import { openingSpan, slideGroup, type SlideGroup } from '../model/openings';
+import { connectedGeometry, joinPoints, mergePoints, restorePos, snapshotPos } from '../model/sketch';
+import { planSK, replaceSK, SK } from '../model/store';
+import type { Note, SelItem, Sketch, Underlay, WallFace } from '../model/types';
+import { cabOfPoint, cabPoints, faceEdit, openingOfPoint } from '../model/faces';
+import { pushedOut, syncFace, type Overflow } 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, type OpeningDrag } from '../editor/elevation';
 import { hitAny } from '../render/hit';
-import { snapAt } from '../render/snap';
-import { mainT, noteBox, requestDraw, S, s2w, underlayH, type HandlePart } 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, type HandlePart, underlayAt, underlayH, underlayLocal } from '../render/view';
 import { solver } from '../solver';
 import type { PEv } from './registry';
 import { onSessionReset } from '../model/session';
@@ -19,25 +27,70 @@ import { selectionHint } from '../editor/selection';
 
 type Drag =
   | { kind: 'point'; id: string; start: { x: number; y: number }; grab: { x: number; y: number }; snap: Snap | null }
-  | { kind: 'multi'; ids: string[]; start: { x: number; y: number }[]; grab: { x: number; y: number } }
-  | { kind: 'radius'; id: string; start: number }
+  /** cab: dragging a cabinet (its box where it started): it snaps to corners, the floor, other cabinets */
+  | { kind: 'multi'; ids: string[]; start: { x: number; y: number }[]; grab: { x: number; y: number }; cab?: { id: string; box: { u0: number; u1: number; z0: number; z1: number } }; via?: string; gst?: number; gx?: number; gy?: number }
+  /** size a circle by its edge; grab: how far out from its centreline it was picked up (a wall's outer face, say) */
+  | { kind: 'radius'; id: string; start: number; grab: number }
   | { kind: 'dimoff'; id: string }
   /** swing a diameter's line around its circle and move the label in/out */
   | { kind: 'diamlabel'; id: string }
   /** slide a door/window dimension (width or a placed one) toward or away from its wall */
   | { kind: 'odimoff'; id: string; part: string }
   /** slide a door/window (or the free chain of openings it's locked into) along its wall; grab: s where it was picked up */
-  | { kind: 'opening'; id: string; grab: number; group: SlideGroup }
-  | { kind: 'note'; id: string; start: Note; grab: { x: number; y: number } }
-  | { kind: 'umove'; start: { x: number; y: number }; grab: { x: number; y: number } }
-  | { kind: 'uresize'; part: HandlePart; start: { x: number; y: number; w: number; h: number } }
+  | { kind: 'opening'; id: string; grab: number; group: SlideGroup; snap: { at0: number; w: number; targets: number[] }; base?: Overflow; last?: number }
+  /** the wall view: a door or window dragged on the wall (along it, and windows up and down); grab: where it was picked up */
+  | { kind: 'wopening'; drag: OpeningDrag; grab: { x: number; y: number }; stuck?: boolean; via?: string }
+  /** both: a link's tile and its leader's tip together (grabbed along its leader) */
+  | { kind: 'note'; id: string; start: Note; grab: { x: number; y: number }; both?: boolean }
+  /** several pieces of markup (and photos) selected, one of them dragged: they all move by as much */
+  | { kind: 'group'; notes: { id: string; start: Note }[]; images: { id: string; start: { x: number; y: number } }[]; grab: { x: number; y: number } }
+  | { kind: 'umove'; id: string; start: { x: number; y: number }; grab: { x: number; y: number } }
+  | { kind: 'uresize'; id: string; part: HandlePart; start: { x: number; y: number; w: number; h: number } }
   /** reshape markup: move an arrow end, or resize the box of a cloud / pen stroke */
   | { kind: 'nresize'; id: string; part: string; start: Note };
 
 const RESIZE_CURSOR: Record<HandlePart, string> = { nw: 'nwse-resize', se: 'nwse-resize', ne: 'nesw-resize', sw: 'nesw-resize', n: 'ns-resize', s: 'ns-resize', e: 'ew-resize', w: 'ew-resize' };
 
 /** `again`: the press landed on what was already the whole selection (a finger's second tap expands it). */
-interface SelectState { down?: PEv; hit?: Hit | null; dragging?: boolean; drag?: Drag | null; again?: boolean }
+/** `added`: a finger or pencil press added what it landed on to the selection (it goes again if the press drags it). */
+interface SelectState { down?: PEv; hit?: Hit | null; dragging?: boolean; drag?: Drag | null; again?: boolean; added?: boolean }
+
+/**
+ * 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 as PEv | null, drag: null as Drag | null, frame: 0, cost: 0 };
+function solveDrag(d: Drag, ev: PEv): void {
+  const t0 = performance.now();
+  dragTo(d, ev);
+  dragMove.cost = performance.now() - t0;
+}
+function moveDrag(d: Drag, ev: PEv): void {
+  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(): void {
+  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(): void {
+  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
@@ -58,25 +111,38 @@ function doubleTapOf(at: PEv, h: Hit, now: number): Hit | null {
 
 export const selectTool = {
   st: {} as SelectState,
-  reset() { this.st = {}; ed.boxSel = null; },
+  reset() { dropDrag(); this.st = {}; ed.boxSel = null; },
   hover(ev: PEv) {
     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 as HandlePart]
       : h.type === 'nhandle' ? RESIZE_CURSOR[h.part as HandlePart] ?? '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: PEv) {
-    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 as SelItem['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 as SelItem['type'], id: h.id }); this.st.added = true; }
+        else ed.sel = [{ type: h.type as SelItem['type'], id: h.id }];
+      }
       updateCtx(); requestDraw();
     }
   },
@@ -85,35 +151,44 @@ export const selectTool = {
     if (!st.down) { this.hover(ev); return; }
     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 as SelItem['type'], id: st.hit.id }]; updateCtx(); }
         pushHistory();
         st.drag = beginDrag(st.hit, st.down);
         if (!st.drag) { dropHistory(); 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: PEv) {
     const st = this.st;
     if (!st.down) return;
-    if (st.dragging && st.drag) endDrag(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' as const, id })), ...g.arcs.map(id => ({ type: 'arc' as const, id }))];
@@ -122,10 +197,24 @@ export const selectTool = {
         updateCtx(); updateHint(); 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) ed.sel = [];
     this.st = {};
@@ -139,6 +228,17 @@ export const selectTool = {
   },
 };
 
+/** The wall a wall edge's id is on, as it's picked whole: a line, a circle or an arc. */
+function edgeWall(sk: Sketch, id: string): { type: 'line' | 'circle' | 'arc'; id: string } {
+  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: SelItem, h: Hit): boolean {
+  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: Hit): void {
   if (isSel(h.type, h.id)) ed.sel = ed.sel.filter(s => !(s.type === h.type && s.id === h.id));
   else ed.sel.push({ type: h.type as SelItem['type'], id: h.id });
@@ -146,12 +246,15 @@ function toggleSel(h: Hit): void {
 
 /** Window select (drag right) takes fully enclosed lines; crossing select (drag left) also takes touched ones. */
 function boxSelect(b: BoxSel, add: boolean): void {
+  // 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: string) => { 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: SelItem[] = 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) {
@@ -165,43 +268,133 @@ function boxSelect(b: BoxSel, add: boolean): void {
     }
     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 as WallFace).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: number, y: number) => { const [sx, sy] = S(T, x, y); return sx >= x0 && sx <= x1 && sy >= y0 && sy <= y1; };
+  const opCorners = new Map<string, boolean[]>();
+  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 });
-  if (!out.length) for (const id in sk.points) if (inside(id) && !sk.points[id].origin) out.push({ type: 'point', id });
+  const cabCorners = new Set(Object.values((sk as WallFace).cabs ?? {}).flatMap(cabPoints));
+  if (!out.length) for (const id in sk.points) 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: BoxSel, add: boolean): void {
+  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: SelItem[] = 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: number, r: number, t: number, bt: number;
+      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: Hit, down: PEv): Drag | null {
   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<string>();
     const addL = (id: string) => { const l = sk.lines[id]; if (l) { s.add(l.a); s.add(l.b); } };
-    const addArc = (id: string) => { 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: string) => { 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 as WallFace).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 {
       if (h.type === 'line') addL(h.id);
       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();
-    if (!ids.length) { toast('Those points are locked.'); return null; }
+  /** Those points moved together, by as much as the pointer moves. */
+  const multi = (ids: string[]): Drag | null => {
+    if (!ids.length) { 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 as WallFace).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:')) return { kind: 'odimoff', id: h.id, part: h.part! };
@@ -214,40 +407,114 @@ function beginDrag(h: Hit, down: PEv): Drag | null {
     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.'); return null; }
+    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.', { 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)!;
+    // 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 === '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 } }; }
   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.'); 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 as HandlePart, start: { x: u.x, y: u.y, w: u.w, h: underlayH(u) } };
+    if (u.locked) { 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', id: u.id, start: { x: u.x, y: u.y }, grab: { x: wx, y: wy } };
+    return { kind: 'uresize', id: u.id, part: h.part as HandlePart, 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: Sketch, h: Hit, wx: number, wy: number): Drag | null {
+  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 is Note => !!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 is Underlay => !!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<Drag, Overflow>();
+
 function dragTo(d: Drag, ev: PEv): void {
   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: string[], to: { x: number; y: number }[]): boolean => {
+    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: number) => 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: { a: string; b: string }) => 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);
     if (g) {
@@ -256,70 +523,132 @@ function dragTo(d: Drag, ev: PEv): void {
       else { const od = (o.dims || []).find(x => 'd:' + x.id === d.part); if (od) od.off = k; }
     }
   } 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') {
     const n = sk.notes.find(n => n.id === d.id)!;
     const dx = wx - d.grab.x, dy = wy - d.grab.y;
     if (n.pts) n.pts = d.start.pts!.map(p => [p[0] + dx, p[1] + dy] as [number, number]);
     else { 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] as [number, number]);
+      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: Drag): void {
   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') {
       const snap = JSON.stringify(sk);
       if (mergePoints(sk, s.ref!, d.id)) {
         const r = solveSketch();
-        if (!r.ok) { page().sk = JSON.parse(snap) as Sketch; toast('Can’t join those points — it conflicts with other constraints.', { warn: true }); }
+        if (!r.ok) { replaceSK(JSON.parse(snap) as Sketch); toast('Can’t join those points — it conflicts with other constraints.', { warn: true }); }
         else { ed.sel = [{ type: 'point', id: s.ref! }]; toast('Points joined'); }
       }
-    } else if (s.kind === 'mid') tryAddConstraint({ type: 'mid', p: d.id, l: s.ref! }, { silent: false });
+    } else if (s.kind === 'mid') 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') tryAddConstraint({ type: 'oncircle', p: d.id, c: s.ref! }, { silent: true });
   }
   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.');
+    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.', { 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: string): void {
+  const sk = SK(), P = sk.points[via];
+  if (!P) return;
+  const op = openingOfPoint(via), cab = cabOfPoint(sk, via);
+  const own = (id: string) => (op && id.startsWith('@o:' + op + ':')) || (cab && cabOfPoint(sk, id) === cab);
+  const tol = (ed.lastPointerTouch ? 16 : 10) / mainT().s;
+  let best: string | null = 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) as Sketch); 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: HandlePart, s0: { x: number; y: number; w: number; h: number }, wx: number, wy: number, free: boolean): void {
-  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: string, part: HandlePart, s0: { x: number; y: number; w: number; h: number }, ptx: number, pty: number, free: boolean): void {
+  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: Underlay = { ...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) {
@@ -335,10 +664,29 @@ function resizeUnderlay(part: HandlePart, s0: { x: number; y: number; w: number;
     if (N) h = Math.max(min, wy - bottom);
     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: Note, part: string, start: Note, wx: number, wy: number): void {
+  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] as 'w' | 'e'], y: ys[part[0] as 'n' | 's'] };
+  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;
 }
 
 /**
@@ -347,6 +695,7 @@ function resizeUnderlay(part: HandlePart, s0: { x: number; y: number; w: number;
  */
 function reshapeNote(id: string, part: string, start: Note, wx: number, wy: number): void {
   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') { const i = +part.slice(1); n.pts = start.pts.map((p, k) => (k === i ? [wx, wy] : [p[0], p[1]]) as [number, number]); return; }
   const b = noteBox(start)!, min = 4 / mainT().s;