@grafloria/element 0.3.18 → 0.3.20

package/src/libs/renderer/src/interaction/selection-tools.js

@@ -0,0 +1,918 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionToolsController = exports.RESIZE_HANDLE_IDS = exports.DEFAULT_SELECTION_TOOLS_CONFIG = void 0;
+exports.sideHandleYieldsToPort = sideHandleYieldsToPort;
+exports.rotateVector = rotateVector;
+exports.rotatePoint = rotatePoint;
+exports.resizeBox = resizeBox;
+exports.applyResizeToNode = applyResizeToNode;
+exports.angleAt = angleAt;
+exports.normalizeAngle = normalizeAngle;
+exports.snapAngle = snapAngle;
+const engine_1 = require("@grafloria/engine");
+const node_sizing_1 = require("../svg/node-sizing");
+const node_toolbar_1 = require("../svg/node-toolbar");
+exports.DEFAULT_SELECTION_TOOLS_CONFIG = {
+    handleSize: 8,
+    rotateHandleOffset: 26,
+    haloGap: 12,
+    haloButtonSize: 22,
+    showHalo: true,
+    showResizeHandles: true,
+    showRotateHandle: true,
+    showRemoveButton: true,
+    showLinkTools: true,
+    minWidth: 16,
+    minHeight: 16,
+    rotationSnapDegrees: 15,
+};
+/** Cursor for each resize handle (unrotated). */
+const RESIZE_CURSORS = {
+    nw: 'nwse-resize',
+    n: 'ns-resize',
+    ne: 'nesw-resize',
+    e: 'ew-resize',
+    se: 'nwse-resize',
+    s: 'ns-resize',
+    sw: 'nesw-resize',
+    w: 'ew-resize',
+};
+/** Unit (0..1) position of each handle within the selection box. */
+const RESIZE_ANCHORS = {
+    nw: { u: 0, v: 0 },
+    n: { u: 0.5, v: 0 },
+    ne: { u: 1, v: 0 },
+    e: { u: 1, v: 0.5 },
+    se: { u: 1, v: 1 },
+    s: { u: 0.5, v: 1 },
+    sw: { u: 0, v: 1 },
+    w: { u: 0, v: 0.5 },
+};
+exports.RESIZE_HANDLE_IDS = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+/** The full edge each SIDE handle owns, as unit-square corner anchors. */
+const SIDE_EDGE_CORNERS = {
+    n: [{ u: 0, v: 0 }, { u: 1, v: 0 }],
+    e: [{ u: 1, v: 0 }, { u: 1, v: 1 }],
+    s: [{ u: 0, v: 1 }, { u: 1, v: 1 }],
+    w: [{ u: 0, v: 0 }, { u: 0, v: 1 }],
+};
+/**
+ * resize-ux: the ONE side-handle-vs-port priority predicate.
+ *
+ * The four side handles live ON the node border, where the default side ports
+ * also live. React Flow resolves the coincidence by z-order: the port glyph
+ * (drawn on top of the resize line) wins its own core, the line wins the rest
+ * of the edge. Ours is the same rule expressed in hover state: when the pointer
+ * is inside a port's grab radius (`hoveredPort` is set) on the SAME node, the
+ * port claims the press/cursor; everywhere else along the band, resize does.
+ *
+ * Exported so the mouse ladder, the touch ladder AND the hover-cursor logic
+ * share one predicate — three private copies is how they drift.
+ */
+function sideHandleYieldsToPort(handle, hoveredPort) {
+    if (handle.kind !== 'resize')
+        return false;
+    if (!['n', 'e', 's', 'w'].includes(String(handle.handleId)))
+        return false;
+    return !!hoveredPort && hoveredPort.nodeId === handle.nodeId;
+}
+/** Squared distance from `(px,py)` to the segment `a`→`b`. */
+function distToSegmentSq(px, py, a, b) {
+    const abx = b.x - a.x;
+    const aby = b.y - a.y;
+    const lenSq = abx * abx + aby * aby;
+    const t = lenSq > 0 ? Math.max(0, Math.min(1, ((px - a.x) * abx + (py - a.y) * aby) / lenSq)) : 0;
+    const cx = a.x + t * abx;
+    const cy = a.y + t * aby;
+    return (px - cx) * (px - cx) + (py - cy) * (py - cy);
+}
+const HALO_ORDER = ['connect', 'clone', 'fork', 'delete'];
+const HALO_LABELS = {
+    connect: 'Connect',
+    clone: 'Clone',
+    fork: 'Fork',
+    delete: 'Delete',
+};
+// ============================================================================
+// Pure geometry (exported: these are the bits the gesture tests pin down)
+// ============================================================================
+/** Rotate `(x, y)` about the origin by `deg` degrees (SVG's positive = clockwise). */
+function rotateVector(x, y, deg) {
+    if (deg === 0)
+        return { x, y };
+    const rad = (deg * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    return { x: x * cos - y * sin, y: x * sin + y * cos };
+}
+/** Rotate `point` about `center` by `deg` degrees. */
+function rotatePoint(point, center, deg) {
+    const v = rotateVector(point.x - center.x, point.y - center.y, deg);
+    return { x: center.x + v.x, y: center.y + v.y };
+}
+/**
+ * Apply a resize drag to a box, in the box's OWN frame.
+ *
+ * `dx/dy` is the pointer delta since the drag began (same frame as the box). The
+ * dragged edge(s) follow the pointer; the opposite edge stays put. Min/max clamp
+ * the DRAGGED edge, never the anchored one — so a runaway drag can neither flip
+ * nor shrink past the minimum nor grow past the maximum, all mid-gesture.
+ */
+function resizeBox(start, handle, dx, dy, options = {}) {
+    var _a, _b, _c, _d;
+    const minWidth = Math.max(1, (_a = options.minWidth) !== null && _a !== void 0 ? _a : 1);
+    const minHeight = Math.max(1, (_b = options.minHeight) !== null && _b !== void 0 ? _b : 1);
+    const maxWidth = Math.max(minWidth, (_c = options.maxWidth) !== null && _c !== void 0 ? _c : Infinity);
+    const maxHeight = Math.max(minHeight, (_d = options.maxHeight) !== null && _d !== void 0 ? _d : Infinity);
+    const movesLeft = handle === 'nw' || handle === 'w' || handle === 'sw';
+    const movesRight = handle === 'ne' || handle === 'e' || handle === 'se';
+    const movesTop = handle === 'nw' || handle === 'n' || handle === 'ne';
+    const movesBottom = handle === 'sw' || handle === 's' || handle === 'se';
+    let left = start.x;
+    let right = start.x + start.width;
+    let top = start.y;
+    let bottom = start.y + start.height;
+    // Clamp the dragged edge into [min, max] relative to the anchored edge.
+    if (movesLeft)
+        left = clampEdge(start.x + dx, right - maxWidth, right - minWidth);
+    if (movesRight)
+        right = clampEdge(start.x + start.width + dx, left + minWidth, left + maxWidth);
+    if (movesTop)
+        top = clampEdge(start.y + dy, bottom - maxHeight, bottom - minHeight);
+    if (movesBottom)
+        bottom = clampEdge(start.y + start.height + dy, top + minHeight, top + maxHeight);
+    let width = right - left;
+    let height = bottom - top;
+    // Aspect lock: only meaningful on corners (an edge handle has one free axis).
+    const isCorner = (movesLeft || movesRight) && (movesTop || movesBottom);
+    const lockRatio = options.aspect && options.aspect > 0
+        ? options.aspect
+        : options.keepAspect && start.width > 0 && start.height > 0
+            ? start.width / start.height
+            : 0;
+    if (lockRatio > 0 && isCorner) {
+        // Grow along the dominant axis so the box always contains the pointer, then
+        // re-clamp so the locked axis still honors its own min/max.
+        if (width / height > lockRatio) {
+            height = clampEdge(width / lockRatio, minHeight, maxHeight);
+            width = clampEdge(height * lockRatio, minWidth, maxWidth);
+        }
+        else {
+            width = clampEdge(height * lockRatio, minWidth, maxWidth);
+            height = clampEdge(width / lockRatio, minHeight, maxHeight);
+        }
+        if (movesLeft)
+            left = right - width;
+        if (movesTop)
+            top = bottom - height;
+    }
+    else if (lockRatio > 0) {
+        // resize-ux: aspect lock on an EDGE handle (RF keepAspectRatio parity — a
+        // line control resizes BOTH axes there too). The dragged axis follows the
+        // pointer (already clamped above); the cross axis derives from the ratio and
+        // stays CENTRED, so the box grows symmetrically instead of drifting to one
+        // side. If the cross axis clamps, the dragged axis is re-derived — the ratio
+        // never breaks, exactly like the corner branch.
+        if (movesLeft || movesRight) {
+            height = clampEdge(width / lockRatio, minHeight, maxHeight);
+            width = clampEdge(height * lockRatio, minWidth, maxWidth);
+            top = start.y + start.height / 2 - height / 2;
+            if (movesLeft)
+                left = right - width;
+        }
+        else {
+            width = clampEdge(height * lockRatio, minWidth, maxWidth);
+            height = clampEdge(width / lockRatio, minHeight, maxHeight);
+            left = start.x + start.width / 2 - width / 2;
+            if (movesTop)
+                top = bottom - height;
+        }
+    }
+    return { x: left, y: top, width, height };
+}
+/** Clamp `v` into [lo, hi], tolerating hi < lo (min wins). */
+function clampEdge(v, lo, hi) {
+    return Math.max(lo, Math.min(hi, v));
+}
+/**
+ * Apply a resize drag to a possibly-ROTATED node.
+ *
+ * The pointer delta arrives in WORLD space, but the box the user is resizing is
+ * drawn in the node's local (unrotated) frame and rotated about its centre. So:
+ *
+ *  1. rotate the world delta by −θ → the node's local frame;
+ *  2. resize the local box;
+ *  3. the node re-renders rotated about its NEW centre, so compensate the
+ *     position by rotating the centre shift back into world space.
+ *
+ * At θ = 0 this collapses to `pos + (box.x, box.y)`. Getting step 3 wrong is what
+ * makes rotated resize "swim" away from the cursor in most implementations.
+ */
+function applyResizeToNode(start, handle, worldDx, worldDy, options = {}) {
+    var _a;
+    const theta = (_a = start.rotation) !== null && _a !== void 0 ? _a : 0;
+    const local = rotateVector(worldDx, worldDy, -theta);
+    const box = resizeBox({ x: 0, y: 0, width: start.size.width, height: start.size.height }, handle, local.x, local.y, options);
+    // Centre of the box before/after, in the node's local frame.
+    const oldCenter = { x: start.size.width / 2, y: start.size.height / 2 };
+    const newCenter = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+    // The world centre moves by the local centre shift, rotated into world space.
+    const shift = rotateVector(newCenter.x - oldCenter.x, newCenter.y - oldCenter.y, theta);
+    const worldCenter = {
+        x: start.position.x + oldCenter.x + shift.x,
+        y: start.position.y + oldCenter.y + shift.y,
+    };
+    return {
+        position: { x: worldCenter.x - box.width / 2, y: worldCenter.y - box.height / 2 },
+        size: { width: box.width, height: box.height },
+    };
+}
+/** Angle (deg) of `point` seen from `center`; 0° = straight up, growing clockwise. */
+function angleAt(center, point) {
+    const dx = point.x - center.x;
+    const dy = point.y - center.y;
+    // atan2(dx, -dy) puts 0° at "north" and turns clockwise, matching SVG rotate().
+    const deg = (Math.atan2(dx, -dy) * 180) / Math.PI;
+    return normalizeAngle(deg);
+}
+/** Fold an angle into [0, 360). */
+function normalizeAngle(deg) {
+    const mod = deg % 360;
+    return mod < 0 ? mod + 360 : mod;
+}
+/** Snap `deg` to the nearest multiple of `step` (step ≤ 0 → unchanged). */
+function snapAngle(deg, step) {
+    if (!step || step <= 0)
+        return normalizeAngle(deg);
+    return normalizeAngle(Math.round(deg / step) * step);
+}
+class SelectionToolsController {
+    constructor(config = {}) {
+        this.gesture = null;
+        this.config = Object.assign(Object.assign({}, exports.DEFAULT_SELECTION_TOOLS_CONFIG), config);
+    }
+    getConfig() {
+        return Object.assign({}, this.config);
+    }
+    updateConfig(patch) {
+        this.config = Object.assign(Object.assign({}, this.config), patch);
+    }
+    /** True while a resize / rotate / vertex drag owns the pointer. */
+    isActive() {
+        return this.gesture !== null;
+    }
+    /** The kind of gesture in flight (`null` when idle) — hosts branch on it. */
+    activeGesture() {
+        var _a, _b;
+        return (_b = (_a = this.gesture) === null || _a === void 0 ? void 0 : _a.kind) !== null && _b !== void 0 ? _b : null;
+    }
+    /** The node the in-flight gesture is acting on (`null` when idle). Lets a host
+     *  exclude it from a snap's sibling set — a box must not snap to itself. */
+    activeGestureNodeId() {
+        var _a;
+        const g = this.gesture;
+        return (_a = g === null || g === void 0 ? void 0 : g.nodeId) !== null && _a !== void 0 ? _a : null;
+    }
+    // ==========================================================================
+    // The layer
+    // ==========================================================================
+    /**
+     * Compute the tool layer for the CURRENT selection.
+     *
+     * `zoom` converts the screen-px sizes in the config into world units, so the
+     * handles are the same physical size at every zoom level.
+     *
+     * Scope note (deliberate): resize + rotate are offered for a SINGLE selected
+     * node. A multi-node selection gets the bounding frame, the halo and the remove
+     * button — proportional multi-node resize is not implemented.
+     */
+    computeLayer(engine, zoom = 1) {
+        var _a, _b, _c, _d, _e;
+        const empty = {
+            bounds: null,
+            rotation: 0,
+            center: null,
+            nodeIds: [],
+            linkIds: [],
+            handles: [],
+        };
+        const diagram = (_a = engine === null || engine === void 0 ? void 0 : engine.getDiagram) === null || _a === void 0 ? void 0 : _a.call(engine);
+        if (!diagram)
+            return empty;
+        const scale = zoom > 0 ? 1 / zoom : 1;
+        const nodes = diagram.getNodes().filter((n) => n.isSelected());
+        const links = diagram.getLinks().filter((l) => l.state === 'selected');
+        if (nodes.length === 0 && links.length === 0)
+            return empty;
+        // Link-only selection → link tools (endpoints + vertices + remove).
+        if (nodes.length === 0) {
+            return this.computeLinkLayer(links, scale);
+        }
+        const single = nodes.length === 1 ? nodes[0] : null;
+        const bounds = this.unionBounds(nodes);
+        if (!bounds)
+            return empty;
+        const rotation = single ? single.rotation || 0 : 0;
+        const center = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 };
+        const handles = [];
+        const place = (u, v) => rotatePoint({ x: bounds.x + u * bounds.width, y: bounds.y + v * bounds.height }, center, rotation);
+        const hitRadius = (this.config.handleSize * scale) / 2 + 2 * scale;
+        // Card 6 — per-node toolbar policy (node metadata + host resolver). A single
+        // node's tools are filtered by it; a multi-selection uses the global default.
+        const toolbar = single ? (0, node_toolbar_1.resolveToolbar)(single, this.config.resolveNodeToolbar) : {};
+        // 8 resize handles — single node, resizable, unlocked.
+        if (single &&
+            this.config.showResizeHandles &&
+            (0, node_toolbar_1.toolbarAllows)(toolbar, 'resize') &&
+            ((_b = single.behavior) === null || _b === void 0 ? void 0 : _b.resizable) !== false &&
+            !((_c = single.state) === null || _c === void 0 ? void 0 : _c.locked)) {
+            for (const handleId of exports.RESIZE_HANDLE_IDS) {
+                const anchor = RESIZE_ANCHORS[handleId];
+                // resize-ux: side handles own their WHOLE edge (see ToolHandle.segment).
+                const edge = SIDE_EDGE_CORNERS[handleId];
+                handles.push(Object.assign({ id: `resize-${handleId}`, kind: 'resize', handleId, nodeId: single.id, world: place(anchor.u, anchor.v), hitRadius, cursor: RESIZE_CURSORS[handleId], label: `Resize ${handleId}` }, (edge
+                    ? { segment: { a: place(edge[0].u, edge[0].v), b: place(edge[1].u, edge[1].v) } }
+                    : {})));
+            }
+        }
+        // Rotate handle: above the top edge, in the node's rotated frame.
+        if (single &&
+            this.config.showRotateHandle &&
+            (0, node_toolbar_1.toolbarAllows)(toolbar, 'rotate') &&
+            ((_d = single.behavior) === null || _d === void 0 ? void 0 : _d.rotatable) === true &&
+            !((_e = single.state) === null || _e === void 0 ? void 0 : _e.locked)) {
+            const raw = {
+                x: center.x,
+                y: bounds.y - this.config.rotateHandleOffset * scale,
+            };
+            handles.push({
+                id: 'rotate',
+                kind: 'rotate',
+                nodeId: single.id,
+                world: rotatePoint(raw, center, rotation),
+                hitRadius,
+                cursor: 'grab',
+                label: 'Rotate',
+            });
+        }
+        // Remove button: just outside the top-right corner.
+        if (this.config.showRemoveButton && (!single || (0, node_toolbar_1.toolbarAllows)(toolbar, 'remove'))) {
+            const raw = {
+                x: bounds.x + bounds.width + this.config.haloGap * scale * 0.5,
+                y: bounds.y - this.config.haloGap * scale * 0.5,
+            };
+            handles.push({
+                id: 'remove',
+                kind: 'remove',
+                nodeId: single === null || single === void 0 ? void 0 : single.id,
+                world: rotatePoint(raw, center, rotation),
+                hitRadius: (this.config.haloButtonSize * scale) / 2,
+                cursor: 'pointer',
+                label: 'Remove',
+            });
+        }
+        // Halo: a column of context buttons to the RIGHT of the selection.
+        if (this.config.showHalo) {
+            const size = this.config.haloButtonSize * scale;
+            const gap = this.config.haloGap * scale;
+            HALO_ORDER.forEach((action, i) => {
+                // `connect` and `fork` need a source node — hide them for multi-select.
+                if (!single && (action === 'connect' || action === 'fork'))
+                    return;
+                // Card 6 — per-node halo policy (halo:false or an action allow-list).
+                if (single && !(0, node_toolbar_1.haloAllows)(toolbar, action))
+                    return;
+                handles.push({
+                    id: `halo-${action}`,
+                    kind: 'halo',
+                    action,
+                    nodeId: single === null || single === void 0 ? void 0 : single.id,
+                    world: {
+                        x: bounds.x + bounds.width + gap + size / 2,
+                        y: bounds.y + size / 2 + i * (size + 4 * scale),
+                    },
+                    hitRadius: size / 2,
+                    cursor: 'pointer',
+                    label: HALO_LABELS[action],
+                });
+            });
+        }
+        return {
+            bounds,
+            rotation,
+            center,
+            nodeIds: nodes.map((n) => n.id),
+            linkIds: links.map((l) => l.id),
+            handles,
+        };
+    }
+    /** Link tools: endpoint reconnect anchors, add/remove-vertex, remove. */
+    computeLinkLayer(links, scale) {
+        var _a;
+        const handles = [];
+        const link = links[0];
+        if (!link || !this.config.showLinkTools) {
+            return {
+                bounds: null,
+                rotation: 0,
+                center: null,
+                nodeIds: [],
+                linkIds: links.map((l) => l.id),
+                handles,
+            };
+        }
+        const points = (_a = link.points) !== null && _a !== void 0 ? _a : [];
+        if (points.length >= 2) {
+            const hitRadius = (this.config.handleSize * scale) / 2 + 2 * scale;
+            handles.push({
+                id: `endpoint-source-${link.id}`,
+                kind: 'link-endpoint',
+                endpoint: 'source',
+                linkId: link.id,
+                world: Object.assign({}, points[0]),
+                hitRadius,
+                cursor: 'move',
+                label: 'Reconnect source',
+            });
+            handles.push({
+                id: `endpoint-target-${link.id}`,
+                kind: 'link-endpoint',
+                endpoint: 'target',
+                linkId: link.id,
+                world: Object.assign({}, points[points.length - 1]),
+                hitRadius,
+                cursor: 'move',
+                label: 'Reconnect target',
+            });
+            // One "+" per segment midpoint → add a vertex there.
+            for (let i = 0; i < points.length - 1; i++) {
+                const a = points[i];
+                const b = points[i + 1];
+                handles.push({
+                    id: `vertex-add-${link.id}-${i}`,
+                    kind: 'vertex-add',
+                    index: i,
+                    linkId: link.id,
+                    world: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 },
+                    hitRadius: hitRadius * 0.9,
+                    cursor: 'copy',
+                    label: `Add vertex on segment ${i + 1}`,
+                });
+            }
+            // One "−" per interior vertex → remove it.
+            for (let i = 1; i < points.length - 1; i++) {
+                handles.push({
+                    id: `vertex-remove-${link.id}-${i}`,
+                    kind: 'vertex-remove',
+                    index: i,
+                    linkId: link.id,
+                    world: Object.assign({}, points[i]),
+                    hitRadius,
+                    cursor: 'pointer',
+                    label: `Remove vertex ${i}`,
+                });
+            }
+        }
+        if (this.config.showRemoveButton && points.length >= 2) {
+            const mid = points[Math.floor(points.length / 2)];
+            handles.push({
+                id: `remove-link-${link.id}`,
+                kind: 'remove',
+                linkId: link.id,
+                world: { x: mid.x, y: mid.y - this.config.haloGap * scale * 1.5 },
+                hitRadius: (this.config.haloButtonSize * scale) / 2,
+                cursor: 'pointer',
+                label: 'Remove link',
+            });
+        }
+        return {
+            bounds: null,
+            rotation: 0,
+            center: null,
+            nodeIds: [],
+            linkIds: links.map((l) => l.id),
+            handles,
+        };
+    }
+    /**
+     * Which tool (if any) is under a world point.
+     *
+     * Later handles win ties, so the halo/remove buttons (emitted last) stay
+     * clickable where they overlap a resize handle.
+     *
+     * resize-ux: a handle that carries a `segment` (the four side resize handles)
+     * hit-tests as a BAND around that segment — the whole edge is grabbable, the
+     * React Flow line behaviour. POINT handles always beat bands: the corner dots
+     * sit exactly where two bands end, and the dot must win its own pixel (RF
+     * draws the dots on top of the lines for the same reason). Halo/remove/rotate
+     * are point handles, so their priority over resize is unchanged.
+     */
+    hitTest(layer, worldX, worldY) {
+        return this.hitHandles(layer.handles, worldX, worldY, 0);
+    }
+    /**
+     * resize-ux: the RESIZE handle under a world point, with optional extra grab
+     * slop (world units). One entry point for the mouse ladder (slop 0) and the
+     * touch ladder (finger-sized slop), so bands and dots grow identically.
+     */
+    hitTestResize(layer, worldX, worldY, slop = 0) {
+        const hit = this.hitHandles(layer.handles.filter((h) => h.kind === 'resize'), worldX, worldY, slop);
+        return hit && hit.kind === 'resize' ? hit : null;
+    }
+    hitHandles(handles, worldX, worldY, slop) {
+        let bestPoint = null;
+        let bestBand = null;
+        for (const handle of handles) {
+            const r = handle.hitRadius + slop;
+            if (handle.segment) {
+                if (distToSegmentSq(worldX, worldY, handle.segment.a, handle.segment.b) <= r * r) {
+                    bestBand = handle;
+                }
+            }
+            else {
+                const dx = worldX - handle.world.x;
+                const dy = worldY - handle.world.y;
+                if (dx * dx + dy * dy <= r * r) {
+                    bestPoint = handle;
+                }
+            }
+        }
+        return bestPoint !== null && bestPoint !== void 0 ? bestPoint : bestBand;
+    }
+    /** World bbox of a node set. */
+    unionBounds(nodes) {
+        let left = Infinity;
+        let top = Infinity;
+        let right = -Infinity;
+        let bottom = -Infinity;
+        for (const node of nodes) {
+            const box = node.getBoundingBox();
+            left = Math.min(left, box.left);
+            top = Math.min(top, box.top);
+            right = Math.max(right, box.right);
+            bottom = Math.max(bottom, box.bottom);
+        }
+        if (!isFinite(left) || !isFinite(top))
+            return null;
+        return { x: left, y: top, width: right - left, height: bottom - top };
+    }
+    // ==========================================================================
+    // Resize gesture
+    // ==========================================================================
+    /** Arm a resize. Returns false when the handle/node is not resizable. */
+    beginResize(handle, engine, worldX, worldY) {
+        var _a;
+        const node = handle.nodeId ? (_a = engine.getDiagram()) === null || _a === void 0 ? void 0 : _a.getNode(handle.nodeId) : undefined;
+        if (!node || !handle.handleId)
+            return false;
+        const sizing = (0, node_sizing_1.getNodeSizing)(node);
+        // Card 6 — resize an AUTO-SIZED node sensibly: a manual drag takes control, so
+        // PIN the node (turn auto off) for the duration; otherwise the next auto-size
+        // pass would immediately fight the drag and the box would snap back. The prior
+        // flag is remembered so cancelGesture can restore it.
+        let pinnedAuto;
+        if (sizing.auto) {
+            pinnedAuto = true;
+            node.setMetadata('sizing', Object.assign(Object.assign({}, sizing), { auto: false }));
+        }
+        this.gesture = {
+            kind: 'resize',
+            nodeId: node.id,
+            handle: handle.handleId,
+            startPointer: { x: worldX, y: worldY },
+            startPosition: { x: node.position.x, y: node.position.y },
+            startSize: { width: node.size.width, height: node.size.height },
+            startRotation: node.rotation || 0,
+            sizing,
+            pinnedAuto,
+        };
+        return true;
+    }
+    /**
+     * Live-resize the node (direct model mutation, like the drag tool: smooth, no
+     * command churn — the single undo entry is minted at {@link endGesture}).
+     * `snap` optionally quantises the resulting box (grid / alignment) — the host
+     * passes the SnapController's hook so Card 6 composes with Card 5.
+     */
+    updateResize(engine, worldX, worldY, modifiers = {}, snap) {
+        var _a, _b, _c;
+        const gesture = this.gesture;
+        if (!gesture || gesture.kind !== 'resize')
+            return false;
+        const node = (_a = engine.getDiagram()) === null || _a === void 0 ? void 0 : _a.getNode(gesture.nodeId);
+        if (!node)
+            return false;
+        // Card 6 — per-node constraints, clamped DURING the gesture (not after): the
+        // node's own min/max win, with the controller minimum as the floor; a
+        // per-node aspect lock forces the ratio even without Shift.
+        const sizing = gesture.sizing;
+        const minWidth = Math.max(this.config.minWidth, (_b = sizing.minWidth) !== null && _b !== void 0 ? _b : 0);
+        const minHeight = Math.max(this.config.minHeight, (_c = sizing.minHeight) !== null && _c !== void 0 ? _c : 0);
+        const lockedAspect = (0, node_sizing_1.resolveAspectRatio)(sizing, gesture.startSize);
+        const next = applyResizeToNode({
+            position: gesture.startPosition,
+            size: gesture.startSize,
+            rotation: gesture.startRotation,
+        }, gesture.handle, worldX - gesture.startPointer.x, worldY - gesture.startPointer.y, {
+            minWidth,
+            minHeight,
+            maxWidth: sizing.maxWidth,
+            maxHeight: sizing.maxHeight,
+            keepAspect: modifiers.shift === true,
+            aspect: lockedAspect !== null && lockedAspect !== void 0 ? lockedAspect : undefined,
+        });
+        let box = {
+            x: next.position.x,
+            y: next.position.y,
+            width: next.size.width,
+            height: next.size.height,
+        };
+        // Snapping is only meaningful in the unrotated frame; skip it for rotated
+        // nodes rather than snapping a box that isn't axis-aligned on screen.
+        if (snap && (gesture.startRotation || 0) === 0) {
+            box = snap(box);
+        }
+        // Final clamp so a snap can't push the box outside the node's min/max.
+        const clamped = (0, node_sizing_1.clampSizeToConstraints)(box.width, box.height, sizing, {
+            floorWidth: this.config.minWidth,
+            floorHeight: this.config.minHeight,
+        });
+        node.setPosition(box.x, box.y, node.position.z);
+        node.setSize(clamped.width, clamped.height);
+        node.markDirty('resized');
+        return true;
+    }
+    // ==========================================================================
+    // Rotate gesture
+    // ==========================================================================
+    beginRotate(handle, engine, worldX, worldY) {
+        var _a;
+        const node = handle.nodeId ? (_a = engine.getDiagram()) === null || _a === void 0 ? void 0 : _a.getNode(handle.nodeId) : undefined;
+        if (!node)
+            return false;
+        const box = node.getBoundingBox();
+        const center = { x: (box.left + box.right) / 2, y: (box.top + box.bottom) / 2 };
+        this.gesture = {
+            kind: 'rotate',
+            nodeId: node.id,
+            center,
+            startRotation: node.rotation || 0,
+            startAngle: angleAt(center, { x: worldX, y: worldY }),
+        };
+        return true;
+    }
+    /** Live-rotate; Shift snaps to `rotationSnapDegrees`. */
+    updateRotate(engine, worldX, worldY, modifiers = {}) {
+        var _a;
+        const gesture = this.gesture;
+        if (!gesture || gesture.kind !== 'rotate')
+            return false;
+        const node = (_a = engine.getDiagram()) === null || _a === void 0 ? void 0 : _a.getNode(gesture.nodeId);
+        if (!node)
+            return false;
+        const current = angleAt(gesture.center, { x: worldX, y: worldY });
+        let rotation = normalizeAngle(gesture.startRotation + (current - gesture.startAngle));
+        if (modifiers.shift) {
+            rotation = snapAngle(rotation, this.config.rotationSnapDegrees);
+        }
+        node.setRotation(rotation);
+        node.markDirty('rotated');
+        return true;
+    }
+    // ==========================================================================
+    // Vertex (waypoint) drag
+    // ==========================================================================
+    beginVertexDrag(handle, engine) {
+        var _a;
+        const link = handle.linkId ? (_a = engine.getDiagram()) === null || _a === void 0 ? void 0 : _a.getLink(handle.linkId) : undefined;
+        if (!link || handle.index === undefined)
+            return false;
+        this.gesture = {
+            kind: 'vertex',
+            linkId: link.id,
+            index: handle.index,
+            startPoints: link.points.map((p) => (Object.assign({}, p))),
+        };
+        return true;
+    }
+    updateVertexDrag(engine, worldX, worldY, snapPoint) {
+        var _a;
+        const gesture = this.gesture;
+        if (!gesture || gesture.kind !== 'vertex')
+            return false;
+        const link = (_a = engine.getDiagram()) === null || _a === void 0 ? void 0 : _a.getLink(gesture.linkId);
+        if (!link)
+            return false;
+        const points = link.points.map((p) => (Object.assign({}, p)));
+        if (gesture.index <= 0 || gesture.index >= points.length - 1)
+            return false;
+        const moved = snapPoint ? snapPoint({ x: worldX, y: worldY }) : { x: worldX, y: worldY };
+        points[gesture.index] = moved;
+        link.setPoints(points);
+        link.setMetadata('hasManualWaypoints', true);
+        link.markDirty('vertex-dragged');
+        return true;
+    }
+    // ==========================================================================
+    // Commit
+    // ==========================================================================
+    /**
+     * End the active gesture and return the ONE command that makes it undoable
+     * (null for a no-op gesture). The model already sits at its final state — the
+     * command re-applies it (a no-op) and records the inverse, exactly like the
+     * wave-3 node-drag commit.
+     */
+    endGesture(engine) {
+        const gesture = this.gesture;
+        this.gesture = null;
+        if (!gesture)
+            return null;
+        const diagram = engine.getDiagram();
+        if (!diagram)
+            return null;
+        if (gesture.kind === 'resize') {
+            const node = diagram.getNode(gesture.nodeId);
+            if (!node)
+                return null;
+            const movedX = node.position.x !== gesture.startPosition.x;
+            const movedY = node.position.y !== gesture.startPosition.y;
+            const resized = node.size.width !== gesture.startSize.width ||
+                node.size.height !== gesture.startSize.height;
+            if (!movedX && !movedY && !resized)
+                return null;
+            const resize = new engine_1.ResizeNodeCommand(node.id, { width: node.size.width, height: node.size.height }, { width: gesture.startSize.width, height: gesture.startSize.height });
+            if (!movedX && !movedY)
+                return resize;
+            // A corner/edge resize also MOVES the node (the anchored edge stays put),
+            // so the undo step is the pair — as one MacroCommand.
+            const macro = new engine_1.MacroCommand('Resize Node');
+            macro.addStep(new engine_1.MoveNodeCommand(node.id, { x: node.position.x, y: node.position.y, z: node.position.z }, { x: gesture.startPosition.x, y: gesture.startPosition.y, z: node.position.z }, { mergeable: false }));
+            macro.addStep(resize);
+            return macro;
+        }
+        if (gesture.kind === 'rotate') {
+            const node = diagram.getNode(gesture.nodeId);
+            if (!node)
+                return null;
+            if (node.rotation === gesture.startRotation)
+                return null;
+            return new engine_1.RotateNodeCommand(node.id, node.rotation, gesture.startRotation);
+        }
+        // vertex
+        const link = diagram.getLink(gesture.linkId);
+        if (!link)
+            return null;
+        if (samePoints(link.points, gesture.startPoints))
+            return null;
+        return new engine_1.SetLinkPointsCommand(link.id, link.points.map((p) => (Object.assign({}, p))), gesture.startPoints);
+    }
+    /** Abandon the gesture, restoring the model to its pre-gesture state. */
+    cancelGesture(engine) {
+        const gesture = this.gesture;
+        this.gesture = null;
+        if (!gesture)
+            return;
+        const diagram = engine.getDiagram();
+        if (!diagram)
+            return;
+        if (gesture.kind === 'resize') {
+            const node = diagram.getNode(gesture.nodeId);
+            node === null || node === void 0 ? void 0 : node.setPosition(gesture.startPosition.x, gesture.startPosition.y, node.position.z);
+            node === null || node === void 0 ? void 0 : node.setSize(gesture.startSize.width, gesture.startSize.height);
+            // Restore the auto-size flag the gesture pinned off (Card 6).
+            if (node && gesture.pinnedAuto) {
+                node.setMetadata('sizing', Object.assign(Object.assign({}, (0, node_sizing_1.getNodeSizing)(node)), { auto: true }));
+            }
+            node === null || node === void 0 ? void 0 : node.markDirty('resize-cancelled');
+        }
+        else if (gesture.kind === 'rotate') {
+            const node = diagram.getNode(gesture.nodeId);
+            node === null || node === void 0 ? void 0 : node.setRotation(gesture.startRotation);
+            node === null || node === void 0 ? void 0 : node.markDirty('rotate-cancelled');
+        }
+        else {
+            const link = diagram.getLink(gesture.linkId);
+            link === null || link === void 0 ? void 0 : link.setPoints(gesture.startPoints.map((p) => (Object.assign({}, p))));
+            link === null || link === void 0 ? void 0 : link.markDirty('vertex-cancelled');
+        }
+    }
+    // ==========================================================================
+    // Click tools (no drag): vertex add/remove, remove, halo
+    // ==========================================================================
+    /** Insert a vertex at the clicked segment midpoint. Undoable. */
+    addVertexCommand(handle, engine) {
+        var _a;
+        const link = handle.linkId ? (_a = engine.getDiagram()) === null || _a === void 0 ? void 0 : _a.getLink(handle.linkId) : undefined;
+        if (!link || handle.index === undefined)
+            return null;
+        const points = link.points.map((p) => (Object.assign({}, p)));
+        if (handle.index < 0 || handle.index >= points.length - 1)
+            return null;
+        const next = [...points];
+        next.splice(handle.index + 1, 0, Object.assign({}, handle.world));
+        return new engine_1.SetLinkPointsCommand(link.id, next, points);
+    }
+    /** Remove the vertex under the tool. Undoable. */
+    removeVertexCommand(handle, engine) {
+        var _a;
+        const link = handle.linkId ? (_a = engine.getDiagram()) === null || _a === void 0 ? void 0 : _a.getLink(handle.linkId) : undefined;
+        if (!link || handle.index === undefined)
+            return null;
+        const points = link.points.map((p) => (Object.assign({}, p)));
+        if (handle.index <= 0 || handle.index >= points.length - 1)
+            return null;
+        const next = points.filter((_, i) => i !== handle.index);
+        return new engine_1.SetLinkPointsCommand(link.id, next, points);
+    }
+    /**
+     * The command behind a remove button / halo `delete`: drop the whole selection
+     * (every selected node AND link) in ONE undo step.
+     */
+    removeSelectionCommand(engine) {
+        const diagram = engine.getDiagram();
+        if (!diagram)
+            return null;
+        const nodes = diagram.getNodes().filter((n) => n.isSelected());
+        const links = diagram.getLinks().filter((l) => l.state === 'selected');
+        if (nodes.length === 0 && links.length === 0)
+            return null;
+        if (nodes.length === 1 && links.length === 0) {
+            return new engine_1.RemoveNodeCommand(nodes[0].id);
+        }
+        if (nodes.length === 0 && links.length === 1) {
+            return new engine_1.RemoveLinkCommand(links[0].id);
+        }
+        const macro = new engine_1.MacroCommand(`Remove ${nodes.length + links.length} items`);
+        // Links first: removing a node cascades its links, and a RemoveLinkCommand for
+        // an already-removed link would fail canExecute.
+        links.forEach((l) => macro.addStep(new engine_1.RemoveLinkCommand(l.id)));
+        nodes.forEach((n) => macro.addStep(new engine_1.RemoveNodeCommand(n.id)));
+        return macro;
+    }
+    /**
+     * Halo `clone`: a copy of the node, offset, as one undoable AddNodeCommand.
+     * Ports get fresh ids (via the engine's shared {@link remapNodePortIds}) so the
+     * clone never shares port identity with its source — the bug paste/duplicate
+     * already learned.
+     */
+    cloneNodeCommand(engine, nodeId, offset = { x: 40, y: 40 }) {
+        const clone = this.buildClone(engine, nodeId, offset);
+        return clone ? new engine_1.AddNodeCommand(clone.node) : null;
+    }
+    /**
+     * Halo `fork`: clone the node AND link the original to the clone — one undo
+     * step (MacroCommand). The link runs from an output-capable port on the source
+     * to an input-capable port on the clone; null when either side has no usable port.
+     */
+    forkNodeCommand(engine, nodeId, offset = { x: 160, y: 0 }) {
+        const diagram = engine.getDiagram();
+        const source = diagram === null || diagram === void 0 ? void 0 : diagram.getNode(nodeId);
+        if (!diagram || !source)
+            return null;
+        const clone = this.buildClone(engine, nodeId, offset);
+        if (!clone)
+            return null;
+        const sourcePort = source.getPorts().find((p) => p.type === 'output' || p.type === 'bi');
+        const targetPort = clone.node.getPorts().find((p) => p.type === 'input' || p.type === 'bi');
+        if (!sourcePort || !targetPort)
+            return null;
+        // LinkModel's constructor is positional; the node-id caches are set after.
+        const link = new engine_1.LinkModel(sourcePort.id, targetPort.id);
+        link.setSourcePort(sourcePort.id, source.id);
+        link.setTargetPort(targetPort.id, clone.node.id);
+        const macro = new engine_1.MacroCommand('Fork Node');
+        macro.addStep(new engine_1.AddNodeCommand(clone.node));
+        macro.addStep(new engine_1.AddLinkCommand(link));
+        return macro;
+    }
+    /** Deserialize → re-id → offset. Shared by clone + fork. */
+    buildClone(engine, nodeId, offset) {
+        var _a;
+        const node = (_a = engine.getDiagram()) === null || _a === void 0 ? void 0 : _a.getNode(nodeId);
+        if (!node)
+            return null;
+        // Same recipe PasteCommand uses: fresh node id, then fresh port ids (fromJSON
+        // restores the ORIGINAL port ids, which would make two live nodes share port
+        // identity and break every link lookup that resolves a node by port id).
+        const data = node.serialize();
+        const newId = (0, engine_1.generateId)();
+        const clone = engine_1.NodeModel.fromJSON(Object.assign(Object.assign({}, data), { id: newId }));
+        (0, engine_1.remapNodePortIds)(clone, newId, new Map());
+        clone.setPosition(node.position.x + offset.x, node.position.y + offset.y, node.position.z);
+        // A clone starts unselected; the host selects it after the command lands.
+        clone.setState({ selected: false, hovered: false });
+        return { node: clone };
+    }
+}
+exports.SelectionToolsController = SelectionToolsController;
+/** Point-array equality (used to suppress no-op vertex commits). */
+function samePoints(a, b) {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i].x !== b[i].x || a[i].y !== b[i].y)
+            return false;
+    }
+    return true;
+}
+//# sourceMappingURL=selection-tools.js.map