@grafloria/element 0.3.20 → 0.3.21

package/src/libs/renderer/src/interaction/snapping.js

@@ -1,569 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SnapController = exports.DEFAULT_SNAP_CONFIG = void 0;
-exports.canConnectPorts = canConnectPorts;
-const engine_1 = require("@grafloria/engine");
-// Wave 6 (ports): THE port-position function — what the renderer actually draws.
-const port_positioning_1 = require("../svg/port-positioning");
-// Wave 6 (extensibility) — Card 5: the host's connection-validation hook. Consumed
-// by canConnectPorts below, the one gate every renderer connect path shares.
-const tools_1 = require("../ext/tools");
-exports.DEFAULT_SNAP_CONFIG = {
-    enabled: true,
-    snapToGrid: false,
-    gridSize: 20,
-    snapThreshold: 6,
-    equalSpacing: true,
-    keepInBounds: null,
-    snapToPortRadius: 30,
-    // Port-to-port reach. 60 forced nodes almost into contact before the
-    // proposal appeared ("i need to be so close", live report); 120 matches the
-    // feel of React Flow's proximity example (150 centre-to-centre).
-    proximityConnectRadius: 120,
-};
-/**
- * Can ports `a` (on `nodeA`) and `b` (on `nodeB`) be linked?
- *
- * The ONE rule shared by proximity connect (Card 6) and keyboard connect
- * (Card 7), so the two can never disagree about what is legal.
- *
- * Wave 6: it no longer OWNS that rule — it delegates to
- * `evaluatePortConnection`, the engine-side validator the connection drag also
- * runs through. Before wave 6 this function was one of THREE disagreeing copies
- * (the others: `PortModel.canConnectTo` and
- * `ConnectionStateManager.isValidConnection`), and the drift was real: this one
- * rejected duplicates and honoured `node.behavior.connectable`, the drag checked
- * neither; the drag ignored `maxConnections`, this one never heard of it. A port
- * you could legally drag to was one the magnet refused to snap to.
- *
- * `rejectDuplicatesByDefault` preserves this call site's own historical stance:
- * auto-linking a duplicate because a node drifted near is never what the user
- * meant, whatever the port's `allowDuplicateLinks` says.
- *
- * Note the argument order: `a` is the SOURCE. The rule is directional, and the
- * proximity search calls it once per orientation.
- */
-function canConnectPorts(a, b, nodeA, nodeB, engine, diagram) {
-    // Wave 6 MERGE of two concurrent tracks, composed rather than picked:
-    //
-    //   • wave6/ports made evaluatePortConnection() the ONE authority on the
-    //     ENGINE's rules (direction, type, maxConnections/from-to limits,
-    //     duplicates, self-link, connection groups). Before it, three code paths
-    //     disagreed: the drag never checked maxConnections, snapping never heard
-    //     of it, only snapping knew about duplicates.
-    //   • wave6/ext added the HOST's `isValidConnection` hook — no engine rule can
-    //     express a DOMAIN rule ("an Order may not connect straight to an
-    //     Invoice"), and a host had no way to inject one.
-    //
-    // Both are required, and the order matters: engine rules first (they are the
-    // cheap, total ones and they produce the REASON the invalid cue displays),
-    // then the host's veto. A host hook cannot resurrect a connection the engine
-    // forbids — it can only refuse one the engine would have allowed.
-    const engineVerdict = (0, engine_1.evaluatePortConnection)(a, b, {
-        sourceNode: nodeA,
-        targetNode: nodeB,
-        links: diagram.getLinks(),
-        rejectDuplicatesByDefault: true,
-        validators: [(source, target) => (0, engine_1.isConnectionAllowedByGroup)(source, target, engine)],
-    });
-    if (!engineVerdict.ok)
-        return false;
-    return (0, tools_1.isValidConnection)({
-        sourceNode: nodeA,
-        sourcePort: a,
-        targetNode: nodeB,
-        targetPort: b,
-    }).valid;
-}
-const edgesOf = (r) => ({
-    left: r.x,
-    center: r.x + r.width / 2,
-    right: r.x + r.width,
-    top: r.y,
-    middle: r.y + r.height / 2,
-    bottom: r.y + r.height,
-});
-class SnapController {
-    constructor(config = {}) {
-        this.config = Object.assign(Object.assign({}, exports.DEFAULT_SNAP_CONFIG), config);
-    }
-    getConfig() {
-        return Object.assign({}, this.config);
-    }
-    updateConfig(patch) {
-        this.config = Object.assign(Object.assign({}, this.config), patch);
-    }
-    /**
-     * Read the snapping knobs off the engine's interaction config.
-     *
-     * `snapToPortRadius` has existed in `InteractionConfig` since the first
-     * interaction phase and was read by NOTHING — the config panel wrote it, the
-     * default was 30, and no code path ever consulted it. This is the seam that
-     * finally consumes it (see {@link findPortMagnet} / {@link findProximityConnection}),
-     * along with the waypoint editor's grid settings.
-     */
-    syncWithEngineConfig(engine) {
-        var _a, _b, _c;
-        const config = (_a = engine === null || engine === void 0 ? void 0 : engine.getInteractionConfig) === null || _a === void 0 ? void 0 : _a.call(engine);
-        if (!config)
-            return;
-        const patch = {};
-        if (typeof config.snapToPortRadius === 'number') {
-            patch.snapToPortRadius = config.snapToPortRadius;
-        }
-        // The grid the vertex editor snaps to is the grid the canvas snaps to.
-        const grid = config.waypointEditor;
-        if (grid) {
-            if (typeof grid.snapToGrid === 'boolean')
-                patch.snapToGrid = grid.snapToGrid;
-            if (typeof grid.gridSize === 'number' && grid.gridSize > 0)
-                patch.gridSize = grid.gridSize;
-        }
-        // -------------------------------------------------------------------
-        // Wave 6 — the THIRD dead flag. `DiagramStore.snapEnabled` was declared,
-        // defaulted to `true`, and read by NOTHING (its siblings `gridEnabled` and
-        // `showMinimap` are now consumed by the Background and MiniMap components).
-        //
-        // It lives on DiagramStore, a DIFFERENT container from the InteractionConfig
-        // this method otherwise reads — which is exactly why nothing ever joined the
-        // two up. This is that join.
-        //
-        // SCOPE, precisely: it maps to `SnapConfig.enabled`, which gates the
-        // ALIGNMENT and EQUAL-SPACING guides (see computeSnap). GRID snap is a
-        // separate switch (`snapToGrid`, from the waypoint-editor config above) and
-        // is deliberately left alone — collapsing the two would silently change what
-        // `snapToGrid: true` means for every existing caller.
-        // -------------------------------------------------------------------
-        const store = (_b = engine === null || engine === void 0 ? void 0 : engine.getStore) === null || _b === void 0 ? void 0 : _b.call(engine);
-        const snapEnabled = (_c = store === null || store === void 0 ? void 0 : store.get) === null || _c === void 0 ? void 0 : _c.call(store, 'snapEnabled');
-        if (typeof snapEnabled === 'boolean')
-            patch.enabled = snapEnabled;
-        this.updateConfig(patch);
-    }
-    // ==========================================================================
-    // Alignment + spacing + grid + bounds
-    // ==========================================================================
-    /**
-     * Snap `box` against `others`.
-     *
-     * Precedence per axis (strongest first):
-     *   1. alignment snapline (edge/centre) within `snapThreshold`
-     *   2. equal-spacing guide within `snapThreshold`
-     *   3. grid
-     * then keep-in-bounds clamps whatever survived. Precedence matters: a grid snap
-     * that fought an alignment snap would visibly jitter between the two.
-     */
-    computeSnap(box, others) {
-        const guides = [];
-        const spacing = [];
-        let x = box.x;
-        let y = box.y;
-        if (this.config.enabled && others.length > 0) {
-            const alignX = this.bestAlignment(box, others, 'x');
-            const alignY = this.bestAlignment(box, others, 'y');
-            if (alignX) {
-                x = box.x + alignX.delta;
-                guides.push(...alignX.guides);
-            }
-            if (alignY) {
-                y = box.y + alignY.delta;
-                guides.push(...alignY.guides);
-            }
-            if (this.config.equalSpacing) {
-                if (!alignX) {
-                    const spaceX = this.bestSpacing(box, others, 'x');
-                    if (spaceX) {
-                        x = box.x + spaceX.delta;
-                        spacing.push(spaceX.guide);
-                    }
-                }
-                if (!alignY) {
-                    const spaceY = this.bestSpacing(box, others, 'y');
-                    if (spaceY) {
-                        y = box.y + spaceY.delta;
-                        spacing.push(spaceY.guide);
-                    }
-                }
-            }
-        }
-        if (this.config.snapToGrid && this.config.gridSize > 0) {
-            const grid = this.config.gridSize;
-            const claimedX = guides.some((g) => g.orientation === 'vertical') ||
-                spacing.some((s) => s.orientation === 'horizontal');
-            const claimedY = guides.some((g) => g.orientation === 'horizontal') ||
-                spacing.some((s) => s.orientation === 'vertical');
-            if (!claimedX)
-                x = Math.round(x / grid) * grid;
-            if (!claimedY)
-                y = Math.round(y / grid) * grid;
-        }
-        let result = { x, y, width: box.width, height: box.height };
-        if (this.config.keepInBounds) {
-            result = this.keepInBounds(result, this.config.keepInBounds);
-        }
-        return {
-            box: result,
-            dx: result.x - box.x,
-            dy: result.y - box.y,
-            guides,
-            spacing,
-        };
-    }
-    /** Quantise a single point to the grid (used by the vertex drag). */
-    snapPointToGrid(point) {
-        if (!this.config.snapToGrid || this.config.gridSize <= 0)
-            return Object.assign({}, point);
-        const grid = this.config.gridSize;
-        return { x: Math.round(point.x / grid) * grid, y: Math.round(point.y / grid) * grid };
-    }
-    /** Clamp a box so it stays fully inside `bounds` (no-op when it cannot fit). */
-    keepInBounds(box, bounds) {
-        let x = box.x;
-        let y = box.y;
-        if (box.width <= bounds.width) {
-            x = Math.min(Math.max(box.x, bounds.x), bounds.x + bounds.width - box.width);
-        }
-        if (box.height <= bounds.height) {
-            y = Math.min(Math.max(box.y, bounds.y), bounds.y + bounds.height - box.height);
-        }
-        return { x, y, width: box.width, height: box.height };
-    }
-    /** Best edge/centre alignment on one axis. */
-    bestAlignment(box, others, axis) {
-        const me = edgesOf(box);
-        const mine = axis === 'x'
-            ? [
-                { value: me.left, kind: 'edge' },
-                { value: me.center, kind: 'center' },
-                { value: me.right, kind: 'edge' },
-            ]
-            : [
-                { value: me.top, kind: 'edge' },
-                { value: me.middle, kind: 'center' },
-                { value: me.bottom, kind: 'edge' },
-            ];
-        const candidates = [];
-        for (const other of others) {
-            const o = edgesOf(other);
-            const theirs = axis === 'x'
-                ? [
-                    { value: o.left, kind: 'edge' },
-                    { value: o.center, kind: 'center' },
-                    { value: o.right, kind: 'edge' },
-                ]
-                : [
-                    { value: o.top, kind: 'edge' },
-                    { value: o.middle, kind: 'center' },
-                    { value: o.bottom, kind: 'edge' },
-                ];
-            for (const m of mine) {
-                for (const t of theirs) {
-                    const distance = Math.abs(t.value - m.value);
-                    if (distance > this.config.snapThreshold)
-                        continue;
-                    candidates.push({
-                        delta: t.value - m.value,
-                        distance,
-                        position: t.value,
-                        kind: t.kind === 'center' && m.kind === 'center' ? 'center' : 'edge',
-                    });
-                }
-            }
-        }
-        if (candidates.length === 0)
-            return null;
-        // Closest wins; a centre-to-centre match breaks a tie (it is the line users
-        // are actually aiming for).
-        candidates.sort((a, b) => a.distance - b.distance ||
-            (a.kind === 'center' ? 0 : 1) - (b.kind === 'center' ? 0 : 1));
-        const winner = candidates[0];
-        // ONE correction can satisfy SEVERAL lines at once (aligning the left edges of
-        // two equal-width boxes also aligns their centres and right edges). Draw them
-        // all: showing only one would misreport what actually snapped.
-        const snapped = Object.assign(Object.assign({}, box), { x: axis === 'x' ? box.x + winner.delta : box.x, y: axis === 'y' ? box.y + winner.delta : box.y });
-        const seen = new Set();
-        const guides = [];
-        for (const candidate of candidates) {
-            if (Math.abs(candidate.delta - winner.delta) > 1e-6)
-                continue;
-            if (seen.has(candidate.position))
-                continue;
-            seen.add(candidate.position);
-            // Span each guide across every box actually sitting on that line — this is
-            // what makes a snapline read as "these are aligned".
-            const online = [
-                snapped,
-                ...others.filter((o) => this.touchesLine(o, candidate.position, axis)),
-            ];
-            const from = Math.min(...online.map((r) => (axis === 'x' ? r.y : r.x)));
-            const to = Math.max(...online.map((r) => (axis === 'x' ? r.y + r.height : r.x + r.width)));
-            guides.push({
-                orientation: axis === 'x' ? 'vertical' : 'horizontal',
-                position: candidate.position,
-                from,
-                to,
-                kind: candidate.kind,
-            });
-        }
-        return { delta: winner.delta, guides };
-    }
-    /** Does `rect` have an edge or centre exactly on `position` (on `axis`)? */
-    touchesLine(rect, position, axis) {
-        const e = edgesOf(rect);
-        const values = axis === 'x' ? [e.left, e.center, e.right] : [e.top, e.middle, e.bottom];
-        return values.some((v) => Math.abs(v - position) < 0.5);
-    }
-    /**
-     * Equal-spacing snap on one axis.
-     *
-     * Two patterns, both classic:
-     *  - BETWEEN: the moving box lands between two neighbours with equal gaps.
-     *  - CHAIN:   an existing pair already has gap `g`; the moving box lands one
-     *             gap `g` further along, continuing the rhythm.
-     */
-    bestSpacing(box, others, axis) {
-        const horizontal = axis === 'x';
-        // Only boxes that overlap on the OTHER axis are in the same "row"/"column".
-        const peers = others
-            .filter((o) => this.overlapsOnOtherAxis(box, o, axis))
-            .sort((a, b) => (horizontal ? a.x - b.x : a.y - b.y));
-        if (peers.length < 2)
-            return null;
-        const start = (r) => (horizontal ? r.x : r.y);
-        const size = (r) => (horizontal ? r.width : r.height);
-        const end = (r) => start(r) + size(r);
-        let best = null;
-        let bestDistance = this.config.snapThreshold;
-        const consider = (targetStart, gap, neighbours) => {
-            if (gap <= 0)
-                return;
-            const delta = targetStart - start(box);
-            const distance = Math.abs(delta);
-            if (distance > bestDistance)
-                return;
-            bestDistance = distance;
-            const placed = horizontal
-                ? Object.assign(Object.assign({}, box), { x: targetStart }) : Object.assign(Object.assign({}, box), { y: targetStart });
-            best = {
-                delta,
-                guide: this.buildSpacingGuide([...neighbours, placed], gap, axis),
-            };
-        };
-        for (let i = 0; i < peers.length - 1; i++) {
-            const a = peers[i];
-            const b = peers[i + 1];
-            const between = start(b) - end(a);
-            // BETWEEN: equal gaps either side of the moving box.
-            const gap = (between - size(box)) / 2;
-            if (gap > 0) {
-                consider(end(a) + gap, gap, [a, b]);
-            }
-            // CHAIN: continue the a→b rhythm, on either side.
-            if (between > 0) {
-                consider(end(b) + between, between, [a, b]);
-                consider(start(a) - between - size(box), between, [a, b]);
-            }
-        }
-        return best;
-    }
-    /** Build the drawable gap segments between consecutive boxes, sorted along `axis`. */
-    buildSpacingGuide(boxes, gap, axis) {
-        const horizontal = axis === 'x';
-        const sorted = [...boxes].sort((a, b) => (horizontal ? a.x - b.x : a.y - b.y));
-        const segments = [];
-        for (let i = 0; i < sorted.length - 1; i++) {
-            const a = sorted[i];
-            const b = sorted[i + 1];
-            if (horizontal) {
-                const y = (Math.max(a.y, b.y) + Math.min(a.y + a.height, b.y + b.height)) / 2;
-                segments.push({ x1: a.x + a.width, y1: y, x2: b.x, y2: y });
-            }
-            else {
-                const x = (Math.max(a.x, b.x) + Math.min(a.x + a.width, b.x + b.width)) / 2;
-                segments.push({ x1: x, y1: a.y + a.height, x2: x, y2: b.y });
-            }
-        }
-        return {
-            orientation: horizontal ? 'horizontal' : 'vertical',
-            gap,
-            label: `${Math.round(gap)}`,
-            segments,
-        };
-    }
-    overlapsOnOtherAxis(a, b, axis) {
-        if (axis === 'x') {
-            return a.y < b.y + b.height && b.y < a.y + a.height;
-        }
-        return a.x < b.x + b.width && b.x < a.x + a.width;
-    }
-    // ==========================================================================
-    // The world boxes a host feeds `computeSnap`
-    // ==========================================================================
-    /** World bounding boxes of every node EXCEPT `excludeIds` (the moving ones). */
-    siblingBoxes(engine, excludeIds = []) {
-        var _a;
-        const diagram = (_a = engine === null || engine === void 0 ? void 0 : engine.getDiagram) === null || _a === void 0 ? void 0 : _a.call(engine);
-        if (!diagram)
-            return [];
-        const excluded = new Set(excludeIds);
-        return diagram
-            .getNodes()
-            .filter((n) => { var _a; return !excluded.has(n.id) && ((_a = n.state) === null || _a === void 0 ? void 0 : _a.visible) !== false; })
-            .map((n) => {
-            const box = n.getBoundingBox();
-            return {
-                x: box.left,
-                y: box.top,
-                width: box.right - box.left,
-                height: box.bottom - box.top,
-            };
-        });
-    }
-    // ==========================================================================
-    // Magnetic ports + proximity connect
-    // ==========================================================================
-    /**
-     * World position of a port — THE one the port is actually drawn at.
-     *
-     * BUG (wave 6): this used `port.getAbsolutePosition(node.getBoundingBox())`,
-     * which walks the BOUNDING BOX and lands on an edge midpoint — blind to the
-     * node's silhouette and to how many ports share the side. The renderer draws
-     * ports with `getPortPositionForShape`. So on a circle, a diamond, a hexagon,
-     * a cylinder — or ANY side carrying more than one port — the magnet was
-     * snapping to a point several pixels away from the port you could see, and
-     * proximity-connect measured its radius from the wrong place.
-     */
-    portPosition(node, port) {
-        return (0, port_positioning_1.portWorldPosition)(port, node);
-    }
-    /**
-     * The nearest port to a world point within `snapToPortRadius` — the magnet the
-     * connection drag snaps to. `excludeNodeId` keeps a drag from snapping back to
-     * the node it started on.
-     */
-    findPortMagnet(engine, worldX, worldY, options = {}) {
-        var _a, _b, _c;
-        const diagram = (_a = engine === null || engine === void 0 ? void 0 : engine.getDiagram) === null || _a === void 0 ? void 0 : _a.call(engine);
-        if (!diagram)
-            return null;
-        const radius = (_b = options.radius) !== null && _b !== void 0 ? _b : this.config.snapToPortRadius;
-        if (radius <= 0)
-            return null;
-        let best = null;
-        for (const node of diagram.getNodes()) {
-            if (options.excludeNodeId && node.id === options.excludeNodeId)
-                continue;
-            if (((_c = node.state) === null || _c === void 0 ? void 0 : _c.visible) === false)
-                continue;
-            for (const port of node.getPorts()) {
-                if (options.filter && !options.filter(port, node))
-                    continue;
-                const position = this.portPosition(node, port);
-                const distance = Math.hypot(worldX - position.x, worldY - position.y);
-                if (distance <= radius && (!best || distance < best.distance)) {
-                    best = { port, node, position, distance };
-                }
-            }
-        }
-        return best;
-    }
-    /**
-     * React-Flow-style proximity connect: after dragging `nodeId`, is one of ITS
-     * ports close enough to a compatible port on another node to auto-link them?
-     *
-     * Validity is the same rule the connection drag enforces: different nodes,
-     * direction-compatible ports (output→input, or a `bi` port on either side),
-     * allowed by the connection groups, and not already connected.
-     */
-    findProximityConnection(engine, nodeId, radius) {
-        var _a;
-        const diagram = (_a = engine === null || engine === void 0 ? void 0 : engine.getDiagram) === null || _a === void 0 ? void 0 : _a.call(engine);
-        const node = diagram === null || diagram === void 0 ? void 0 : diagram.getNode(nodeId);
-        if (!diagram || !node)
-            return null;
-        const reach = radius !== null && radius !== void 0 ? radius : this.config.proximityConnectRadius;
-        if (reach <= 0)
-            return null;
-        let best = null;
-        for (const myPort of node.getPorts()) {
-            const from = this.portPosition(node, myPort);
-            const hit = this.findPortMagnet(engine, from.x, from.y, {
-                excludeNodeId: node.id,
-                radius: reach,
-                // ORIENT FIRST, then validate. The rule is directional (wave 6:
-                // `isConnectableStart` gates the source end, `isConnectableEnd` the
-                // target end), so asking "may myPort connect to candidate?" when the link
-                // will actually be built candidate→myPort asks the wrong question — and
-                // would reject a perfectly legal output→input link the moment an author
-                // marked their inputs `isConnectableStart: false`.
-                filter: (candidate, owner) => {
-                    const forward = myPort.type === 'output' || (myPort.type === 'bi' && candidate.type === 'input');
-                    return forward
-                        ? this.canConnect(myPort, candidate, node, owner, engine, diagram)
-                        : this.canConnect(candidate, myPort, owner, node, engine, diagram);
-                },
-            });
-            if (!hit)
-                continue;
-            // Orient the link: the `output`/`bi` side is the source.
-            const myPortIsSource = myPort.type === 'output' || (myPort.type === 'bi' && hit.port.type === 'input');
-            const candidate = myPortIsSource
-                ? {
-                    sourcePort: myPort,
-                    targetPort: hit.port,
-                    sourceNodeId: node.id,
-                    targetNodeId: hit.node.id,
-                    distance: hit.distance,
-                }
-                : {
-                    sourcePort: hit.port,
-                    targetPort: myPort,
-                    sourceNodeId: hit.node.id,
-                    targetNodeId: node.id,
-                    distance: hit.distance,
-                };
-            if (!best || candidate.distance < best.distance) {
-                best = candidate;
-            }
-        }
-        return best;
-    }
-    /** The connection rule shared by the magnet, the highlight and the auto-link. */
-    canConnect(a, b, nodeA, nodeB, engine, diagram) {
-        return canConnectPorts(a, b, nodeA, nodeB, engine, diagram);
-    }
-    /** Turn a candidate into the ONE undoable command that creates the link. */
-    buildProximityLinkCommand(candidate) {
-        const link = new engine_1.LinkModel(candidate.sourcePort.id, candidate.targetPort.id);
-        link.setSourcePort(candidate.sourcePort.id, candidate.sourceNodeId);
-        link.setTargetPort(candidate.targetPort.id, candidate.targetNodeId);
-        return new engine_1.AddLinkCommand(link);
-    }
-    /**
-     * Paint the nearest valid target: exactly the flags the SVG renderer already
-     * draws for a connection drag (`isValidTarget` = eligible, `isHighlighted` =
-     * the one that would win). Clears every other port so the highlight can never
-     * go stale — the failure mode of "highlight on, nothing turns it off".
-     */
-    highlightProximityTarget(engine, candidate) {
-        var _a;
-        const diagram = (_a = engine === null || engine === void 0 ? void 0 : engine.getDiagram) === null || _a === void 0 ? void 0 : _a.call(engine);
-        if (!diagram)
-            return;
-        const winners = candidate
-            ? new Set([candidate.sourcePort.id, candidate.targetPort.id])
-            : new Set();
-        diagram.getNodes().forEach((node) => {
-            node.getPorts().forEach((port) => {
-                const highlighted = winners.has(port.id);
-                if (port.isHighlighted !== highlighted || port.isValidTarget !== highlighted) {
-                    port.isHighlighted = highlighted;
-                    port.isValidTarget = highlighted;
-                    node.markDirty('proximity-highlight');
-                }
-            });
-        });
-    }
-}
-exports.SnapController = SnapController;
-//# sourceMappingURL=snapping.js.map