trid3d 0.2.0 → 0.3.0

package/trid/tools/dragObject.js

@@ -1,5 +1,7 @@
 import { worldToCamera, cameraForward, cameraRight, cameraUp } from "../math/transform.js";
 import { pick, worldPerPixel } from "./helpers.js";
+import { invertMat4, transformDirection } from "../math/matrix.js";
+import { worldMatrix, worldPosition } from "../sceneGraph.js";
 
 /**
  * Click an object to pick it, then drag to move it.
@@ -7,9 +9,14 @@ import { pick, worldPerPixel } from "./helpers.js";
  * - Drag: moves the object parallel to the screen, following the cursor
  * - Shift + drag: moves it toward or away from the camera instead
  *
- * Objects are picked with `pick` (screen-space bounding box).
+ * Objects are picked with `pick`: by screen-space bounding box, or by their
+ * triangles with `exact: true`.
  * Set `obj.draggable = false` to make an object ignore this tool.
  *
+ * Inside a group, the part clicked moves within its group (it follows the
+ * cursor however the group is turned or scaled). With `root: true`, the
+ * whole group moves instead (the top-level object of what was clicked).
+ *
  * Add this tool after a camera tool so clicking an object drags it
  * and clicking empty space still moves the camera.
  */
@@ -19,6 +26,8 @@ export class DragObject {
    * @param {number} [opts.button=0] - Mouse button that drags (0 left, 1 middle, 2 right)
    * @param {(obj:Object) => boolean} [opts.filter] - Which objects can be dragged
    *   (default: those without `draggable: false`)
+   * @param {boolean} [opts.exact=false] - Pick by triangles instead of bounding boxes (see `pickHit`)
+   * @param {boolean} [opts.root=false] - Drag the top-level object (the whole group) of what was clicked
    * @param {(obj:Object) => void} [opts.onPick] - Called when an object is picked
    * @param {(obj:Object) => void} [opts.onMove] - Called each time the object moves
    * @param {(obj:Object) => void} [opts.onDrop] - Called when the object is released
@@ -26,12 +35,16 @@ export class DragObject {
   constructor({
     button = 0,
     filter = obj => obj.draggable !== false,
+    exact = false,
+    root = false,
     onPick,
     onMove,
     onDrop,
   } = {}) {
     this.button = button;
     this.filter = filter;
+    this.exact = exact;
+    this.root = root;
     this.onPick = onPick;
     this.onMove = onMove;
     this.onDrop = onDrop;
@@ -43,8 +56,12 @@ export class DragObject {
   pointerDown(e, scene) {
     if (e.button !== this.button) return false;
 
-    const obj = pick(scene, e.x, e.y, { filter: this.filter });
+    let obj = pick(scene, e.x, e.y, { filter: this.filter, exact: this.exact });
     if (!obj) return false;
+    if (this.root) {
+      while (obj.parent) obj = obj.parent;
+      if (obj.draggable === false) return false;
+    }
 
     this.dragging = obj;
     this.onPick?.(obj);
@@ -56,23 +73,30 @@ export class DragObject {
     if (!obj) return;
 
     const cam = scene.camera;
-    const depth = worldToCamera(obj.pos, cam).z;
+    const depth = worldToCamera(worldPosition(obj), cam).z;
     const k = worldPerPixel(scene, depth);
 
+    // How far to move in the world
+    let move;
     if (e.shiftKey) {
       // Drag up pushes the object away, drag down pulls it closer
       const f = cameraForward(cam);
       const amount = -e.dy * k;
-      obj.pos.x += f.x * amount;
-      obj.pos.y += f.y * amount;
-      obj.pos.z += f.z * amount;
+      move = { x: f.x * amount, y: f.y * amount, z: f.z * amount };
     } else {
       const r = cameraRight(cam);
       const u = cameraUp(cam);
-      obj.pos.x += (r.x * e.dx - u.x * e.dy) * k;
-      obj.pos.y += (r.y * e.dx - u.y * e.dy) * k;
-      obj.pos.z += (r.z * e.dx - u.z * e.dy) * k;
+      move = {
+        x: (r.x * e.dx - u.x * e.dy) * k,
+        y: (r.y * e.dx - u.y * e.dy) * k,
+        z: (r.z * e.dx - u.z * e.dy) * k,
+      };
     }
+    // Inside a group, `pos` is in the group's space: turn the move into it
+    if (obj.parent) move = transformDirection(invertMat4(worldMatrix(obj.parent)), move);
+    obj.pos.x += move.x;
+    obj.pos.y += move.y;
+    obj.pos.z += move.z;
 
     this.onMove?.(obj);
   }

package/trid/tools/helpers.js

@@ -1,9 +1,14 @@
-import { localToWorld, worldToCamera, cameraToScreen, DEFAULT_FOV, DEFAULT_NEAR } from "../math/transform.js";
+import { worldToCamera, cameraToScreen, DEFAULT_FOV, DEFAULT_NEAR } from "../math/transform.js";
+import { transformPoint } from "../math/matrix.js";
+import { worldMatrix, worldObjects, ancestors } from "../sceneGraph.js";
+import { edgeSegments, wireEdges } from "../render/draw.js";
 
 /**
  * Screen-space bounding box of an object, in canvas pixels.
  * Only vertices in front of the camera's near plane are used.
  *
+ * Objects inside groups are measured where they're drawn.
+ *
  * @param {import("../scene.js").Scene} scene - Scene the object is in
  * @param {Object} obj - Mesh instance (mesh, pos, rot, scale)
  * @returns {{minX:number, minY:number, maxX:number, maxY:number} | null}
@@ -12,10 +17,11 @@ import { localToWorld, worldToCamera, cameraToScreen, DEFAULT_FOV, DEFAULT_NEAR
 export function screenBounds(scene, obj) {
   const { camera, canvas } = scene;
   const near = camera.near ?? DEFAULT_NEAR;
+  const world = worldMatrix(obj);
   let box = null;
 
   for (const v of obj.mesh.vertices) {
-    const pCam = worldToCamera(localToWorld(v, obj), camera);
+    const pCam = worldToCamera(transformPoint(world, v), camera);
     if (pCam.z < near) continue;
 
     const p = cameraToScreen(pCam, camera, canvas.width, canvas.height);
@@ -35,27 +41,37 @@ export function screenBounds(scene, obj) {
 /**
  * Finds the object under a canvas pixel.
  *
- * An object is hit when the point is inside its screen-space
- * bounding box (plus `padding`). When several objects are hit,
- * the one whose center is closest to the camera wins.
+ * By default an object is hit when the point is inside its screen-space
+ * bounding box (plus `padding`), and when several are hit, the one whose
+ * center is closest to the camera wins. That's fast, but it can't tell apart
+ * objects that overlap on screen (a sword guard in front of its blade).
+ *
+ * With `exact: true` it tests the object's actual triangles (see `pickHit`),
+ * so the click always matches what's drawn.
+ *
+ * Objects inside groups are found too: the result is the object with the
+ * mesh that was hit (use `pickHit(...).path`, or `obj.parent`, for its groups).
  *
  * @param {import("../scene.js").Scene} scene - Scene to search
  * @param {number} x - Canvas X in pixels
  * @param {number} y - Canvas Y in pixels
  * @param {Object} [opts]
  * @param {(obj:Object) => boolean} [opts.filter] - Only consider objects that pass
- * @param {number} [opts.padding=4] - Extra pixels around each box
+ * @param {number} [opts.padding=4] - Extra pixels around each box (exact: how close to a line counts, for objects without faces)
+ * @param {boolean} [opts.exact=false] - Test triangles instead of bounding boxes
  * @returns {Object | null} The object, or null if nothing is hit
  */
-export function pick(scene, x, y, { filter = () => true, padding = 4 } = {}) {
+export function pick(scene, x, y, { filter = () => true, padding = 4, exact = false } = {}) {
+  if (exact) return pickHit(scene, x, y, { filter, padding })?.object ?? null;
+
   const near = scene.camera.near ?? DEFAULT_NEAR;
   let best = null;
   let bestDepth = Infinity;
 
-  for (const obj of scene.objects) {
-    if (!filter(obj)) continue;
+  for (const obj of worldObjects(scene)) {
+    if (!obj.mesh || !filter(obj)) continue;
 
-    const depth = worldToCamera(obj.pos, scene.camera).z;
+    const depth = worldToCamera(transformPoint(obj.world, { x: 0, y: 0, z: 0 }), scene.camera).z;
     if (depth < near || depth >= bestDepth) continue;
 
     const box = screenBounds(scene, obj);
@@ -71,6 +87,89 @@ export function pick(scene, x, y, { filter = () => true, padding = 4 } = {}) {
   return best;
 }
 
+/**
+ * Exact picking: the nearest object whose drawn surface is under a canvas
+ * pixel, with which face was hit and how far it is. Every face is projected
+ * with the same math as the renderers and tested triangle by triangle.
+ * Objects without faces (wireframes) are hit within `padding` pixels of
+ * one of their lines.
+ *
+ * Faces with a corner behind the camera's near plane are skipped. The cost
+ * is one pass over the objects' vertices per call: fine for clicks and hover
+ * on models of a few thousand faces.
+ *
+ * @example
+ * canvas.addEventListener("click", (e) => {
+ *   const hit = pickHit(scene, e.offsetX * canvas.width / canvas.clientWidth, e.offsetY * canvas.height / canvas.clientHeight);
+ *   if (hit) console.log(hit.object.name, "face", hit.face);
+ * });
+ *
+ * @param {import("../scene.js").Scene} scene - Scene to search
+ * @param {number} x - Canvas X in pixels
+ * @param {number} y - Canvas Y in pixels
+ * @param {Object} [opts]
+ * @param {(obj:Object) => boolean} [opts.filter] - Only consider objects that pass
+ * @param {number} [opts.padding=4] - How many pixels from a line count as a hit (objects without faces)
+ * @param {Object[]} [opts.objects=scene.objects] - Objects to test (with their children)
+ * @returns {{ object:Object, face:number, depth:number, path:Object[] } | null}
+ *   `object` has the mesh that was hit, `face` is the index in its
+ *   `mesh.faces` (-1 for a line), `depth` the distance in front of the
+ *   camera, `path` the object then its groups up to the top
+ *   (`[part, group, ..., root]`); null if nothing is hit
+ */
+export function pickHit(scene, x, y, { filter = () => true, padding = 4, objects = scene.objects } = {}) {
+  const { camera, canvas } = scene;
+  const w = canvas.width, h = canvas.height;
+  const near = camera.near ?? DEFAULT_NEAR;
+  let best = null;
+
+  for (const object of worldObjects(objects)) {
+    if (!object.mesh?.vertices || !filter(object)) continue;
+    const mesh = object.mesh;
+    const cam = mesh.vertices.map((v) => worldToCamera(transformPoint(object.world, v), camera));
+    const scr = cam.map((p) => (p.z > near ? cameraToScreen(p, camera, w, h) : null));
+    const closer = (depth) => !best || depth < best.depth;
+
+    if (mesh.faces?.length) {
+      mesh.faces.forEach((f, face) => {
+        // Polygons as triangle fans
+        for (let i = 1; i < f.length - 1; i++) {
+          const ia = f[0], ib = f[i], ic = f[i + 1];
+          const a = scr[ia], b = scr[ib], c = scr[ic];
+          if (!a || !b || !c) continue;
+          const bary = barycentric(x, y, a, b, c);
+          if (!bary) continue;
+          // Depth blended by 1/z, like perspective does (exact on tilted faces)
+          const depth = 1 / (bary[0] / cam[ia].z + bary[1] / cam[ib].z + bary[2] / cam[ic].z);
+          if (closer(depth)) best = { object, face, depth };
+        }
+      });
+    } else {
+      for (const [i, j] of edgeSegments(wireEdges(mesh))) {
+        const a = scr[i], b = scr[j];
+        if (!a || !b) continue;
+        const dx = b.x - a.x, dy = b.y - a.y;
+        const t = Math.max(0, Math.min(1, ((x - a.x) * dx + (y - a.y) * dy) / (dx * dx + dy * dy || 1)));
+        if (Math.hypot(x - (a.x + t * dx), y - (a.y + t * dy)) > padding) continue;
+        const depth = 1 / ((1 - t) / cam[i].z + t / cam[j].z);
+        if (closer(depth)) best = { object, face: -1, depth };
+      }
+    }
+  }
+  if (best) best.path = ancestors(best.object);
+  return best;
+}
+
+/** Barycentric weights of (x, y) in triangle abc, or null if outside (or degenerate). */
+function barycentric(x, y, a, b, c) {
+  const d = (b.y - c.y) * (a.x - c.x) + (c.x - b.x) * (a.y - c.y);
+  if (Math.abs(d) < 1e-9) return null;
+  const u = ((b.y - c.y) * (x - c.x) + (c.x - b.x) * (y - c.y)) / d;
+  const v = ((c.y - a.y) * (x - c.x) + (a.x - c.x) * (y - c.y)) / d;
+  const t = 1 - u - v;
+  return u >= 0 && v >= 0 && t >= 0 ? [u, v, t] : null;
+}
+
 /**
  * How many world units one canvas pixel covers at a given distance
  * from the camera. Useful to make things follow the cursor exactly.

package/trid/tools/hoverHighlight.js

@@ -14,11 +14,13 @@ export class HoverHighlight {
    * @param {string} [opts.color="#ffffff"] - Highlight color
    * @param {(obj:Object) => boolean} [opts.filter] - Which objects can be highlighted
    *   (default: those without `hoverable: false`)
+   * @param {boolean} [opts.exact=false] - Pick by triangles instead of bounding boxes (see `pickHit`)
    * @param {(obj:Object|null) => void} [opts.onChange] - Called when the hovered object changes
    */
-  constructor({ color = "#ffffff", filter = obj => obj.hoverable !== false, onChange } = {}) {
+  constructor({ color = "#ffffff", filter = obj => obj.hoverable !== false, exact = false, onChange } = {}) {
     this.color = color;
     this.filter = filter;
+    this.exact = exact;
     this.onChange = onChange;
 
     /** The object under the pointer, or null. */
@@ -28,7 +30,7 @@ export class HoverHighlight {
   }
 
   pointerMove(e, scene) {
-    this._set(pick(scene, e.x, e.y, { filter: this.filter }));
+    this._set(pick(scene, e.x, e.y, { filter: this.filter, exact: this.exact }));
   }
 
   pointerLeave() {

package/trid/tools/index.js

@@ -1,8 +1,10 @@
 export { ToolManager } from "./manager.js";
-export { pick, screenBounds, worldPerPixel } from "./helpers.js";
+export { pick, pickHit, screenBounds, worldPerPixel } from "./helpers.js";
 export { OrbitCamera } from "./orbitCamera.js";
 export { DragObject } from "./dragObject.js";
 export { FlyCamera } from "./flyCamera.js";
 export { HoverHighlight } from "./hoverHighlight.js";
 export { FpsMeter } from "./fpsMeter.js";
 export { ObjUploader } from "./objUploader.js";
+export { ViewGizmo } from "./viewGizmo.js";
+export { TransformGizmo } from "./transformGizmo.js";

package/trid/tools/orbitCamera.js

@@ -100,6 +100,15 @@ export class OrbitCamera {
     camera.z = this.target.z - f.z * this.distance;
   }
 
+  /**
+   * Restarts the auto-rotate wait (`autoRotateDelay`), as if the user had
+   * just dragged. For other tools that turn the camera, so auto-rotate
+   * doesn't fight them.
+   */
+  holdAutoRotate() {
+    this._idle = 0;
+  }
+
   pointerDown(e) {
     const panButton = e.button === 1 || e.button === 2 || (e.button === 0 && e.shiftKey);
 

package/trid/tools/transformGizmo.js

@@ -0,0 +1,316 @@
+import { cameraForward, worldToCamera, worldToScreen, DEFAULT_NEAR } from "../math/transform.js";
+import { applyTransformOp, matFromAxisAngle, mulVec } from "../math/rotation.js";
+import { meshBounds } from "../render/meshUtils.js";
+import { transformOpToLocal } from "../math/matrix.js";
+import { worldMatrix, ancestors } from "../sceneGraph.js";
+import { worldPerPixel } from "./helpers.js";
+
+const AXES = [
+  { dir: { x: 1, y: 0, z: 0 }, color: "#e8605a" },
+  { dir: { x: 0, y: 1, z: 0 }, color: "#7cc46b" },
+  { dir: { x: 0, y: 0, z: 1 }, color: "#5f9be8" },
+];
+/** Handle id of the uniform-scale square */
+const UNIFORM = 3;
+/** Points per rotate ring */
+const RING = 64;
+
+/**
+ * Move, rotate and scale handles on one or more objects, around their
+ * shared center (the middle of their bounding box). One tool, three modes:
+ *
+ * - `"move"`: X, Y, Z arrows; drag one to move along that world axis
+ * - `"rotate"`: X, Y, Z rings; drag along a ring to turn around that axis.
+ *   The ring follows the mouse from any camera angle; where rings cross,
+ *   the one facing the camera wins
+ * - `"scale"`: X, Y, Z handles with square ends to stretch along an axis,
+ *   and a center square for all axes at once (×2 per 100 px dragged right)
+ *
+ * Targets can be groups (their children move with them) or objects inside
+ * groups: the handles work in world space, and each target is changed in
+ * its parent's space, so it follows the mouse however its group is turned.
+ *
+ * By default it changes the targets' `pos`, `rot` and `scale`. With
+ * `apply: false` it only reports what the drag does (a `TransformOp`,
+ * applied with `applyTransformOp`) so an app can apply it to its own data.
+ *
+ * Add it **after** the camera tool: tools added later get clicks first, so
+ * grabbing a handle doesn't also orbit. Clicks that miss the handles fall
+ * through to the tools below.
+ *
+ * @example
+ * scene.use(new OrbitCamera());
+ * const gizmo = scene.use(new TransformGizmo({ mode: "rotate" }));
+ * gizmo.targets = [box];
+ * addEventListener("keydown", (e) => { if (e.key === "g") gizmo.mode = "move"; });
+ */
+export class TransformGizmo {
+  /**
+   * @param {Object} [opts]
+   * @param {"move"|"rotate"|"scale"} [opts.mode="move"]
+   * @param {Object[]} [opts.targets=[]] - Objects it edits (change `targets` at any time)
+   * @param {number} [opts.size=70] - Handle length in CSS pixels (same on screen at any distance)
+   * @param {boolean} [opts.apply=true] - Change the targets' transforms while dragging
+   * @param {(targets:Object[]) => void} [opts.onGrab] - A handle was grabbed
+   * @param {(op:Object, targets:Object[]) => void} [opts.onChange] - While dragging: the operation since the grab
+   * @param {(op:Object, targets:Object[]) => void} [opts.onDrop] - On release: the whole operation
+   */
+  constructor({ mode = "move", targets = [], size = 70, apply = true, onGrab, onChange, onDrop } = {}) {
+    this.mode = mode;
+    this.targets = targets;
+    this.size = size;
+    this.apply = apply;
+    this.onGrab = onGrab;
+    this.onChange = onChange;
+    this.onDrop = onDrop;
+    /** Hide the handles (and ignore clicks) without removing the tool. */
+    this.visible = true;
+    /** True while a handle is being dragged. */
+    this.dragging = false;
+
+    this._handles = []; // from the last draw
+    this._hover = -1;
+    this._drag = null;
+    this._cursor = false; // whether this tool set the canvas cursor
+  }
+
+  /** Middle of the targets' bounding box in world space, or null. */
+  center() {
+    return this.targets.length ? meshBounds(this.targets)?.center ?? null : null;
+  }
+
+  /** Length of the handles in world units at a point, so they keep the same size on screen. */
+  _length(scene, c) {
+    const k = scene.canvas.width / (scene.canvas.clientWidth || scene.canvas.width);
+    return this.size * k * worldPerPixel(scene, worldToCamera(c, scene.camera).z);
+  }
+
+  draw(ctx, scene) {
+    this._handles = [];
+    if (!this.visible) return;
+    // Rings and scale handles stay where the drag started; arrows follow the move
+    const c = this._drag && this.mode !== "move" ? this._drag.center : this.center();
+    if (!c) return;
+    const { canvas, camera } = scene;
+    if (worldToCamera(c, camera).z <= (camera.near ?? DEFAULT_NEAR)) return;
+    const k = canvas.width / (canvas.clientWidth || canvas.width);
+    const len = this._length(scene, c);
+    const scr = (p) => worldToScreen(p, camera, canvas.width, canvas.height);
+    const o = scr(c);
+
+    ctx.save();
+    ctx.lineCap = ctx.lineJoin = "round";
+    AXES.forEach((a, i) => {
+      const active = this._drag ? this._drag.id === i : this._hover === i;
+      ctx.strokeStyle = ctx.fillStyle = active ? "#ffffff" : a.color;
+      ctx.lineWidth = (active ? 3.5 : 2.5) * k;
+      if (this.mode === "rotate") {
+        const path = [];
+        for (let s = 0; s <= RING; s++) path.push(scr(ringPoint(c, a.dir, len * 0.9, s)));
+        stroke(ctx, path);
+        const f = cameraForward(camera);
+        this._handles.push({ id: i, path, facing: Math.abs(a.dir.x * f.x + a.dir.y * f.y + a.dir.z * f.z) });
+      } else {
+        const to = scr({ x: c.x + a.dir.x * len, y: c.y + a.dir.y * len, z: c.z + a.dir.z * len });
+        stroke(ctx, [o, to]);
+        if (this.mode === "move") arrowHead(ctx, o, to, 10 * k);
+        else square(ctx, to, 5 * k);
+        this._handles.push({ id: i, path: [o, to] });
+      }
+    });
+    if (this.mode === "scale") {
+      const active = this._drag ? this._drag.id === UNIFORM : this._hover === UNIFORM;
+      ctx.fillStyle = active ? "#ffffff" : "#d0d4dc";
+      square(ctx, o, 6 * k);
+      this._handles.push({ id: UNIFORM, path: [o] });
+    } else {
+      ctx.fillStyle = "#ffffff";
+      ctx.beginPath();
+      ctx.arc(o.x, o.y, 3 * k, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    ctx.restore();
+  }
+
+  /** The handle under a pointer, from the last draw. */
+  _hit(e, scene) {
+    const k = scene.canvas.width / (scene.canvas.clientWidth || scene.canvas.width);
+    let best = null, bestD = 9 * k;
+    for (const h of this._handles) {
+      let d = h.path.length === 1 ? Math.hypot(e.x - h.path[0].x, e.y - h.path[0].y) - 3 * k : distToPath(e, h.path);
+      // Where rings cross, take the one facing the camera (an edge-on ring barely turns)
+      if (h.facing !== undefined) d -= 4 * k * h.facing;
+      if (d < bestD) {
+        bestD = d;
+        best = h;
+      }
+    }
+    return best;
+  }
+
+  pointerDown(e, scene) {
+    if (!this.visible || !this.targets.length || e.button !== 0) return false;
+    const h = this._hit(e, scene);
+    const center = this.center();
+    if (!h || !center) return false;
+    const { canvas, camera } = scene;
+    const scr = (p) => worldToScreen(p, camera, canvas.width, canvas.height);
+    const cs = scr(center);
+    const len = this._length(scene, center);
+    const axis = h.id < 3 ? AXES[h.id].dir : { x: 0, y: 0, z: 0 };
+    const tip = scr({ x: center.x + axis.x * len, y: center.y + axis.y * len, z: center.z + axis.z * len });
+
+    // Which way +angle turns the grabbed point on screen depends on the view: measure it
+    let turnSign = 1;
+    if (this.mode === "rotate" && h.id < 3) {
+      const s = nearestIndex(e, h.path);
+      const grabbed = h.path[s];
+      const world = ringPoint(center, axis, len * 0.9, s);
+      const turned = mulVec(matFromAxisAngle(axis, 0.01), { x: world.x - center.x, y: world.y - center.y, z: world.z - center.z });
+      const p1 = scr({ x: center.x + turned.x, y: center.y + turned.y, z: center.z + turned.z });
+      turnSign = Math.sign(wrap(Math.atan2(p1.y - cs.y, p1.x - cs.x) - Math.atan2(grabbed.y - cs.y, grabbed.x - cs.x))) || 1;
+    }
+
+    this._drag = {
+      id: h.id,
+      x: e.x,
+      y: e.y,
+      center,
+      centerScreen: cs,
+      axisScreen: { x: tip.x - cs.x, y: tip.y - cs.y },
+      length: len,
+      angle0: Math.atan2(e.y - cs.y, e.x - cs.x),
+      turnSign,
+      start: this.targets.map((t) => ({ pos: { ...t.pos }, rot: { ...t.rot }, scale: { ...t.scale } })),
+      // Parents' world matrices at the grab (ops are turned into each target's parent space)
+      parents: this.targets.map((t) => (t.parent ? worldMatrix(t.parent) : null)),
+      // A target inside another target already moves with it
+      moves: this.targets.map((t) => !ancestors(t).slice(1).some((a) => this.targets.includes(a))),
+      op: null,
+    };
+    this.dragging = true;
+    this.onGrab?.(this.targets);
+    return true;
+  }
+
+  pointerMove(e, scene) {
+    const d = this._drag;
+    if (!d) {
+      const h = this.visible && this.targets.length ? this._hit(e, scene) : null;
+      this._hover = h?.id ?? -1;
+      if (h) {
+        scene.canvas.style.cursor = "pointer";
+        this._cursor = true;
+      } else if (this._cursor) {
+        scene.canvas.style.cursor = "";
+        this._cursor = false;
+      }
+      return;
+    }
+    // How far along the grabbed handle the pointer moved, in handle lengths
+    const along = () => {
+      const s = d.axisScreen;
+      return ((e.x - d.x) * s.x + (e.y - d.y) * s.y) / (s.x * s.x + s.y * s.y || 1);
+    };
+    let op;
+    if (this.mode === "move") {
+      const a = AXES[d.id].dir, t = along() * d.length;
+      op = { mode: "move", delta: { x: a.x * t, y: a.y * t, z: a.z * t } };
+    } else if (this.mode === "rotate") {
+      const angle = wrap(Math.atan2(e.y - d.centerScreen.y, e.x - d.centerScreen.x) - d.angle0) * d.turnSign;
+      op = { mode: "rotate", axis: AXES[d.id].dir, angle, center: d.center };
+    } else if (d.id === UNIFORM) {
+      // Drag right to grow, left to shrink: ×2 per 100 CSS pixels
+      const k = scene.canvas.width / (scene.canvas.clientWidth || scene.canvas.width);
+      op = { mode: "scale", axis: null, factor: Math.pow(2, (e.x - d.x) / (100 * k)), center: d.center };
+    } else {
+      op = { mode: "scale", axis: AXES[d.id].dir, factor: Math.max(0.05, 1 + along()), center: d.center };
+    }
+    d.op = op;
+    if (this.apply) {
+      this.targets.forEach((t, i) => {
+        if (!d.moves[i]) return;
+        const local = d.parents[i] ? transformOpToLocal(op, d.parents[i]) : op;
+        Object.assign(t, applyTransformOp(d.start[i], local));
+      });
+    }
+    this.onChange?.(op, this.targets);
+  }
+
+  pointerUp() {
+    const d = this._drag;
+    this._drag = null;
+    this.dragging = false;
+    if (d?.op) this.onDrop?.(d.op, this.targets);
+  }
+
+  pointerLeave(scene) {
+    this._hover = -1;
+    if (this._cursor) scene.canvas.style.cursor = "";
+    this._cursor = false;
+  }
+
+  detach(scene) {
+    this.pointerLeave(scene);
+    this._drag = null;
+    this.dragging = false;
+  }
+}
+
+/** Point s (0..RING) of the ring of radius r around `axis` at center c. */
+function ringPoint(c, axis, r, s) {
+  const u = Math.abs(axis.x) > 0.9 ? { x: 0, y: 1, z: 0 } : { x: 1, y: 0, z: 0 };
+  const v = { x: axis.y * u.z - axis.z * u.y, y: axis.z * u.x - axis.x * u.z, z: axis.x * u.y - axis.y * u.x };
+  const t = (s / RING) * Math.PI * 2, cs = Math.cos(t) * r, sn = Math.sin(t) * r;
+  return { x: c.x + u.x * cs + v.x * sn, y: c.y + u.y * cs + v.y * sn, z: c.z + u.z * cs + v.z * sn };
+}
+
+/** Angle difference in -π..π */
+function wrap(a) {
+  return Math.atan2(Math.sin(a), Math.cos(a));
+}
+
+function stroke(ctx, path) {
+  ctx.beginPath();
+  path.forEach((p, i) => (i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y)));
+  ctx.stroke();
+}
+
+function arrowHead(ctx, from, to, head) {
+  const dx = to.x - from.x, dy = to.y - from.y, len = Math.hypot(dx, dy) || 1;
+  const ux = dx / len, uy = dy / len;
+  ctx.beginPath();
+  ctx.moveTo(to.x + ux * head, to.y + uy * head);
+  ctx.lineTo(to.x - uy * head * 0.5, to.y + ux * head * 0.5);
+  ctx.lineTo(to.x + uy * head * 0.5, to.y - ux * head * 0.5);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function square(ctx, at, r) {
+  ctx.fillRect(at.x - r, at.y - r, r * 2, r * 2);
+}
+
+function distToSegment(p, a, b) {
+  const dx = b.x - a.x, dy = b.y - a.y;
+  const t = Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / (dx * dx + dy * dy || 1)));
+  return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
+}
+
+function distToPath(p, path) {
+  let d = Infinity;
+  for (let i = 1; i < path.length; i++) d = Math.min(d, distToSegment(p, path[i - 1], path[i]));
+  return d;
+}
+
+function nearestIndex(p, path) {
+  let best = 0, bestD = Infinity;
+  path.forEach((q, i) => {
+    const d = Math.hypot(p.x - q.x, p.y - q.y);
+    if (d < bestD) {
+      bestD = d;
+      best = i;
+    }
+  });
+  return best;
+}