entangle-ui 0.8.2 → 0.10.0

package/dist/esm/components/editor/NodeGraph/useNodeGraph.js

@@ -0,0 +1,207 @@
+"use client";
+import { useState, useCallback, useMemo } from 'react';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '../../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { edgesConnectedToPort, duplicateNodes } from './nodeGraphActions.js';
+import { generateNodeId, generateEdgeId } from './nodeGraphIds.js';
+import { applyCascadeDelete } from './nodeGraphMath.js';
+
+const EMPTY_SELECTION = {
+    nodes: [],
+    edges: [],
+    groups: [],
+};
+/**
+ * Own a node graph's state (nodes / edges / groups / selection) plus the
+ * mutations every editor re-implements — add / remove (with edge cascade) /
+ * duplicate / connect / group. Spread `bind` onto `<NodeGraph>` and call the
+ * actions from your toolbar / context menu:
+ *
+ * ```tsx
+ * const graph = useNodeGraph({ nodes: initialNodes, edges: initialEdges });
+ * return (
+ *   <NodeGraph {...graph.bind} renderNode={renderNode}>
+ *     <NodeGraph.Background />
+ *   </NodeGraph>
+ * );
+ * // graph.addNode(...), graph.removeSelection(), graph.duplicateNodes(), ...
+ * ```
+ *
+ * Uncontrolled by design — the hook owns the state. For controlled state
+ * (Redux / Zustand / external store) wire the four `onChange` props yourself.
+ */
+function useNodeGraph(options) {
+    const [nodes, setNodes] = useState(() => options?.nodes ?? []);
+    const [edges, setEdges] = useState(() => options?.edges ?? []);
+    const [groups, setGroups] = useState(() => options?.groups ?? []);
+    const [selection, setSelection] = useState(() => options?.selection ?? EMPTY_SELECTION);
+    // Snapshot refs so multi-slice actions read a consistent view without
+    // re-creating the callbacks on every state change.
+    const nodesRef = useLatest(nodes);
+    const edgesRef = useLatest(edges);
+    const groupsRef = useLatest(groups);
+    const selectionRef = useLatest(selection);
+    const addNode = useCallback((node) => {
+        const id = node.id ?? generateNodeId('node');
+        const next = { ...node, id };
+        setNodes(prev => [...prev, next]);
+        return id;
+    }, []);
+    const removeNodes = useCallback((ids) => {
+        if (ids.length === 0)
+            return;
+        const removed = new Set(ids);
+        const result = applyCascadeDelete({
+            nodes: nodesRef.current,
+            edges: edgesRef.current,
+            groups: groupsRef.current,
+        }, { nodes: ids, edges: [], groups: [] });
+        setNodes(result.nodes);
+        setEdges(result.edges);
+        const sel = selectionRef.current;
+        const keptEdgeIds = new Set(result.edges.map(e => e.id));
+        const dropsNode = sel.nodes.some(nodeId => removed.has(nodeId));
+        const dropsEdge = sel.edges.some(edgeId => !keptEdgeIds.has(edgeId));
+        if (dropsNode || dropsEdge) {
+            setSelection({
+                nodes: sel.nodes.filter(nodeId => !removed.has(nodeId)),
+                edges: sel.edges.filter(edgeId => keptEdgeIds.has(edgeId)),
+                groups: sel.groups,
+            });
+        }
+    }, [nodesRef, edgesRef, groupsRef, selectionRef]);
+    const removeEdges = useCallback((ids) => {
+        if (ids.length === 0)
+            return;
+        const removed = new Set(ids);
+        setEdges(prev => prev.filter(e => !removed.has(e.id)));
+        const sel = selectionRef.current;
+        if (sel.edges.some(edgeId => removed.has(edgeId))) {
+            setSelection({
+                nodes: sel.nodes,
+                edges: sel.edges.filter(edgeId => !removed.has(edgeId)),
+                groups: sel.groups,
+            });
+        }
+    }, [selectionRef]);
+    const disconnectPort = useCallback((node, port) => {
+        removeEdges(edgesConnectedToPort(edgesRef.current, { node, port }));
+    }, [edgesRef, removeEdges]);
+    const removeSelection = useCallback(() => {
+        const sel = selectionRef.current;
+        if (sel.nodes.length === 0 &&
+            sel.edges.length === 0 &&
+            sel.groups.length === 0) {
+            return;
+        }
+        const result = applyCascadeDelete({
+            nodes: nodesRef.current,
+            edges: edgesRef.current,
+            groups: groupsRef.current,
+        }, sel);
+        setNodes(result.nodes);
+        setEdges(result.edges);
+        setGroups(result.groups);
+        setSelection(EMPTY_SELECTION);
+    }, [nodesRef, edgesRef, groupsRef, selectionRef]);
+    const duplicateNodes$1 = useCallback((ids, duplicateOptions) => {
+        const targetIds = ids ?? selectionRef.current.nodes;
+        const copies = duplicateNodes(nodesRef.current, targetIds, duplicateOptions);
+        if (copies.length === 0)
+            return [];
+        setNodes(prev => [...prev, ...copies]);
+        const newIds = copies.map(n => n.id);
+        setSelection({ nodes: newIds, edges: [], groups: [] });
+        return newIds;
+    }, [nodesRef, selectionRef]);
+    const connect = useCallback((source, target, data) => {
+        const existing = edgesRef.current.find(e => e.source.node === source.node &&
+            e.source.port === source.port &&
+            e.target.node === target.node &&
+            e.target.port === target.port);
+        if (existing)
+            return existing.id;
+        const id = generateEdgeId(source, target);
+        const edge = {
+            id,
+            source,
+            target,
+            ...(data !== undefined ? { data } : {}),
+        };
+        setEdges(prev => [...prev, edge]);
+        return id;
+    }, [edgesRef]);
+    const addGroup = useCallback((bounds, groupOptions) => {
+        const id = groupOptions?.id ?? generateNodeId('group');
+        const group = {
+            id,
+            bounds,
+            ...(groupOptions?.label !== undefined
+                ? { label: groupOptions.label }
+                : {}),
+            ...(groupOptions?.color !== undefined
+                ? { color: groupOptions.color }
+                : {}),
+        };
+        setGroups(prev => [...prev, group]);
+        return id;
+    }, []);
+    const removeGroups = useCallback((ids) => {
+        if (ids.length === 0)
+            return;
+        const removed = new Set(ids);
+        setGroups(prev => prev.filter(g => !removed.has(g.id)));
+        const sel = selectionRef.current;
+        if (sel.groups.some(groupId => removed.has(groupId))) {
+            setSelection({
+                nodes: sel.nodes,
+                edges: sel.edges,
+                groups: sel.groups.filter(groupId => !removed.has(groupId)),
+            });
+        }
+    }, [selectionRef]);
+    const clearSelection = useCallback(() => {
+        setSelection(EMPTY_SELECTION);
+    }, []);
+    const bind = useMemo(() => ({
+        nodes,
+        edges,
+        groups,
+        selection,
+        onNodesChange: setNodes,
+        onEdgesChange: setEdges,
+        onGroupsChange: setGroups,
+        onSelectionChange: setSelection,
+    }), [nodes, edges, groups, selection]);
+    return {
+        nodes,
+        edges,
+        groups,
+        selection,
+        setNodes,
+        setEdges,
+        setGroups,
+        setSelection,
+        addNode,
+        removeNodes,
+        removeEdges,
+        disconnectPort,
+        removeSelection,
+        duplicateNodes: duplicateNodes$1,
+        connect,
+        addGroup,
+        removeGroups,
+        clearSelection,
+        bind,
+    };
+}
+
+export { useNodeGraph };
+//# sourceMappingURL=useNodeGraph.js.map

package/dist/esm/components/editor/NodeGraph/useNodeGraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNodeGraph.js","sources":["../../../../../../src/components/editor/NodeGraph/useNodeGraph.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;AACE;AACA;AACA;;AA2FF;;;;;;;;;;;;;;;;;;AAkBG;AACG;AAGJ;AAGA;AAGA;AAGA;;;AAMA;AACA;AACA;AACA;AAEA;;;AAGE;AACA;;AAGF;AAEI;;AACA;;;;;AAMG;AAGH;AACA;AACA;;AAIA;;AAEA;AACE;AACE;AACA;;AAED;;;AAMP;AAEI;;AACA;;AAEA;AACA;AACE;;AAEE;;AAED;;AAEL;;AAME;AACF;AAIF;AACE;AACA;AAEE;AACA;;;;;;;;AAYF;AACA;AACA;;;;;AAUE;AAKA;AAAyB;AACzB;AACA;AACA;AACA;AACF;;;AAaM;AACA;;AAGJ;;;AAEA;;;;AAIE;;AAEF;AACA;AACF;;;AAOE;;;AAGE;AACE;;AAEF;AACE;;;AAGJ;AACA;;AAKJ;AAEI;;AACA;;AAEA;AACA;AACE;;;AAGE;AACD;;AAEL;AAIF;;;AAIA;;;;;AAMI;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;AA0BN;;"}

package/dist/esm/components/editor/NodeGraph/useNodeGraphConnection.js

@@ -0,0 +1,334 @@
+"use client";
+import { useRef, useEffect, useCallback } from 'react';
+import '../../primitives/viewport/Viewport.js';
+import '../../primitives/viewport/ViewportLayer.js';
+import '../../primitives/viewport/ViewportWorld.js';
+import '../../primitives/viewport/ViewportOverlay.js';
+import { screenToWorld } from '../../primitives/viewport/viewportCoords.js';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '../../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { generateEdgeId } from './nodeGraphIds.js';
+
+/** Pointer travel (screen px) before a reconnect grab counts as a drag. */
+const RECONNECT_DRAG_THRESHOLD_PX = 4;
+/**
+ * Read the port id/node id encoded in `data-*` attributes of an element
+ * (or its ancestors). Returns null when the element isn't a port handle.
+ */
+function readPortRefFromElement(el) {
+    let cursor = el;
+    while (cursor) {
+        const node = cursor.getAttribute('data-node-id');
+        const port = cursor.getAttribute('data-port-id');
+        if (node && port)
+            return { node, port };
+        cursor = cursor.parentElement;
+    }
+    return null;
+}
+/**
+ * Build the validation info object passed to `isValidConnection`. Looks up
+ * the per-port side + dataType in the store so the consumer doesn't have
+ * to maintain a parallel port index.
+ */
+function buildValidationInfo(store, source, target) {
+    const src = store.getPortPosition(source.node, source.port);
+    const tgt = store.getPortPosition(target.node, target.port);
+    const sideCombo = src && tgt ? `${src.side}->${tgt.side}` : 'unknown';
+    return {
+        sameNode: source.node === target.node,
+        sideCombo,
+        ...(src?.dataType !== undefined ? { sourceDataType: src.dataType } : {}),
+        ...(tgt?.dataType !== undefined ? { targetDataType: tgt.dataType } : {}),
+    };
+}
+/**
+ * Connection-drag controller. Owns the lifecycle from `pointerdown` (on a
+ * port for a new edge, or near an edge endpoint for a reconnect) through
+ * document-level `pointermove` / `pointerup` to the eventual edge emission.
+ *
+ * Document listeners are attached only while a drag is in flight — outside
+ * of a gesture there is zero pointermove cost. Move events are coalesced
+ * to one hit-test per animation frame so `document.elementFromPoint`
+ * doesn't force a layout flush on every pointer poll.
+ */
+function useNodeGraphConnection(options) {
+    const { viewportRef, store, getTransform, isValidConnection, onConnectStart, onConnectEnd, emitEdgesChange, emitSelectionChange, } = options;
+    const isValidRef = useLatest(isValidConnection);
+    const onConnectStartRef = useLatest(onConnectStart);
+    const onConnectEndRef = useLatest(onConnectEnd);
+    const emitEdgesChangeRef = useLatest(emitEdgesChange);
+    const emitSelectionChangeRef = useLatest(emitSelectionChange);
+    const teardownRef = useRef(null);
+    // If the component unmounts mid-drag, release the document listeners so
+    // we don't leak handlers attached to the page.
+    useEffect(() => {
+        return () => {
+            teardownRef.current?.();
+            teardownRef.current = null;
+        };
+    }, []);
+    const screenPointToWorld = useCallback((clientX, clientY) => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return { x: 0, y: 0 };
+        const rect = viewport.getBoundingClientRect();
+        return screenToWorld({ x: clientX - rect.left, y: clientY - rect.top }, getTransform());
+    }, [viewportRef, getTransform]);
+    // Whether a connection from `source` to `candidate` is allowed: defers to
+    // the consumer's `isValidConnection` when provided, otherwise the built-in
+    // rule of "any port but one on the same node". Shared by the live-hover
+    // preview and both drop paths (create + reconnect) so the accept/reject
+    // verdict can never drift between them.
+    const isAcceptable = useCallback((source, candidate) => {
+        const info = buildValidationInfo(store, source, candidate);
+        const validator = isValidRef.current;
+        return validator ? validator(source, candidate, info) : !info.sameNode;
+    }, [store, isValidRef]);
+    // Shared drag lifecycle for both modes. `source` is the fixed endpoint the
+    // preview draws from and the one passed to `isValidConnection` as the
+    // source argument.
+    const beginDrag = useCallback((params) => {
+        const { source, startClientX, startClientY, mode } = params;
+        // If a previous gesture didn't tear down for some reason, clean it now.
+        teardownRef.current?.();
+        const startWorld = screenPointToWorld(startClientX, startClientY);
+        store.setInteraction({
+            kind: 'connect',
+            source,
+            currentWorld: startWorld,
+            candidate: null,
+            invalid: false,
+            ...(mode.kind === 'reconnect'
+                ? { reconnectEdgeId: mode.edgeId, reconnectEnd: mode.end }
+                : {}),
+        });
+        if (mode.kind === 'create') {
+            onConnectStartRef.current?.({ source, worldPoint: startWorld });
+        }
+        let pendingPoint = null;
+        let rafId = 0;
+        let didMove = false;
+        const runMove = () => {
+            rafId = 0;
+            const point = pendingPoint;
+            pendingPoint = null;
+            if (!point)
+                return;
+            const state = store.getInteraction();
+            if (state.kind !== 'connect')
+                return;
+            const currentWorld = screenPointToWorld(point.x, point.y);
+            const candidate = document.elementFromPoint(point.x, point.y);
+            const candidateRef = readPortRefFromElement(candidate);
+            let nextCandidate = null;
+            let invalid = false;
+            if (candidateRef) {
+                if (candidateRef.node === state.source.node &&
+                    candidateRef.port === state.source.port) {
+                    // Hovering back over the fixed endpoint — treat as no candidate.
+                    nextCandidate = null;
+                }
+                else {
+                    nextCandidate = candidateRef;
+                    invalid = !isAcceptable(state.source, candidateRef);
+                }
+            }
+            store.setInteraction({
+                kind: 'connect',
+                source: state.source,
+                currentWorld,
+                candidate: nextCandidate,
+                invalid,
+                ...(mode.kind === 'reconnect'
+                    ? { reconnectEdgeId: mode.edgeId, reconnectEnd: mode.end }
+                    : {}),
+            });
+        };
+        const handleMove = (e) => {
+            if (!didMove) {
+                const dx = e.clientX - startClientX;
+                const dy = e.clientY - startClientY;
+                if (Math.hypot(dx, dy) >= RECONNECT_DRAG_THRESHOLD_PX)
+                    didMove = true;
+            }
+            pendingPoint = { x: e.clientX, y: e.clientY };
+            if (rafId === 0) {
+                rafId = requestAnimationFrame(runMove);
+            }
+        };
+        const teardown = () => {
+            if (rafId !== 0) {
+                cancelAnimationFrame(rafId);
+                rafId = 0;
+            }
+            document.removeEventListener('pointermove', handleMove);
+            document.removeEventListener('pointerup', handleUp);
+            document.removeEventListener('pointercancel', handleCancel);
+            teardownRef.current = null;
+        };
+        const resolveCandidate = (clientX, clientY) => {
+            const dropEl = document.elementFromPoint(clientX, clientY);
+            const finalCandidate = readPortRefFromElement(dropEl);
+            return finalCandidate &&
+                !(finalCandidate.node === source.node &&
+                    finalCandidate.port === source.port)
+                ? finalCandidate
+                : null;
+        };
+        const dropPoint = (clientX, clientY) => {
+            const viewport = viewportRef.current;
+            const rect = viewport?.getBoundingClientRect();
+            const screenPoint = rect
+                ? { x: clientX - rect.left, y: clientY - rect.top }
+                : { x: clientX, y: clientY };
+            return {
+                worldPoint: screenPointToWorld(clientX, clientY),
+                screenPoint,
+            };
+        };
+        function handleUp(e) {
+            teardown();
+            const state = store.getInteraction();
+            store.setInteraction({ kind: 'idle' });
+            if (state.kind !== 'connect')
+                return;
+            const candidate = resolveCandidate(e.clientX, e.clientY);
+            const drop = dropPoint(e.clientX, e.clientY);
+            if (mode.kind === 'reconnect') {
+                // A grab that never moved is a click — select the edge, keep it.
+                if (!didMove) {
+                    emitSelectionChangeRef.current?.({
+                        nodes: [],
+                        edges: [mode.edgeId],
+                        groups: [],
+                    });
+                    onConnectEndRef.current?.({
+                        source,
+                        target: null,
+                        cancelled: true,
+                        ...drop,
+                    });
+                    return;
+                }
+                const accepted = candidate ? isAcceptable(source, candidate) : false;
+                if (candidate && accepted) {
+                    const next = store
+                        .getData()
+                        .edges.map(edge => edge.id === mode.edgeId
+                        ? mode.end === 'source'
+                            ? { ...edge, source: candidate }
+                            : { ...edge, target: candidate }
+                        : edge);
+                    emitEdgesChangeRef.current(next);
+                    onConnectEndRef.current?.({
+                        source,
+                        target: candidate,
+                        cancelled: false,
+                        ...drop,
+                    });
+                }
+                else {
+                    // Dropped on empty space or an invalid port → detach (delete).
+                    emitEdgesChangeRef.current(store.getData().edges.filter(edge => edge.id !== mode.edgeId));
+                    onConnectEndRef.current?.({
+                        source,
+                        target: null,
+                        cancelled: true,
+                        ...drop,
+                    });
+                }
+                return;
+            }
+            // Create mode.
+            let cancelled = !candidate;
+            if (candidate) {
+                const accepted = isAcceptable(source, candidate);
+                if (!accepted) {
+                    cancelled = true;
+                }
+                else {
+                    const newEdge = {
+                        id: generateEdgeId(source, candidate),
+                        source,
+                        target: candidate,
+                    };
+                    emitEdgesChangeRef.current([...store.getData().edges, newEdge]);
+                }
+            }
+            onConnectEndRef.current?.({
+                source,
+                target: cancelled ? null : (candidate ?? null),
+                cancelled,
+                ...drop,
+            });
+        }
+        function handleCancel(e) {
+            teardown();
+            const state = store.getInteraction();
+            store.setInteraction({ kind: 'idle' });
+            if (state.kind !== 'connect')
+                return;
+            onConnectEndRef.current?.({
+                source,
+                target: null,
+                cancelled: true,
+                ...dropPoint(e.clientX, e.clientY),
+            });
+        }
+        teardownRef.current = teardown;
+        document.addEventListener('pointermove', handleMove);
+        document.addEventListener('pointerup', handleUp);
+        document.addEventListener('pointercancel', handleCancel);
+    }, [
+        store,
+        viewportRef,
+        screenPointToWorld,
+        onConnectStartRef,
+        onConnectEndRef,
+        emitEdgesChangeRef,
+        emitSelectionChangeRef,
+        isAcceptable,
+    ]);
+    const onPortPointerDown = useCallback((event, nodeId, portId) => {
+        if (event.button !== 0)
+            return;
+        event.stopPropagation();
+        event.preventDefault();
+        // Bail when the port hasn't measured yet — without a registered
+        // position the preview curve has no anchor.
+        if (!store.getPortPosition(nodeId, portId))
+            return;
+        beginDrag({
+            source: { node: nodeId, port: portId },
+            startClientX: event.clientX,
+            startClientY: event.clientY,
+            mode: { kind: 'create' },
+        });
+    }, [store, beginDrag]);
+    const onEdgeReconnectStart = useCallback((edgeId, end, clientX, clientY) => {
+        const edge = store.getData().edges.find(e => e.id === edgeId);
+        if (!edge)
+            return;
+        // The fixed endpoint is the *other* end — that's what the preview
+        // anchors to and what the dragged end validates against.
+        const fixed = end === 'source' ? edge.target : edge.source;
+        beginDrag({
+            source: fixed,
+            startClientX: clientX,
+            startClientY: clientY,
+            mode: { kind: 'reconnect', edgeId, end },
+        });
+    }, [store, beginDrag]);
+    return { onPortPointerDown, onEdgeReconnectStart };
+}
+
+export { useNodeGraphConnection };
+//# sourceMappingURL=useNodeGraphConnection.js.map

package/dist/esm/components/editor/NodeGraph/useNodeGraphConnection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNodeGraphConnection.js","sources":["../../../../../../src/components/editor/NodeGraph/useNodeGraphConnection.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAsBA;AACA;AAkDA;;;AAGG;AACH;;;;;;AAKsB;AAClB;;AAEF;AACF;AAEA;;;;AAIG;AACH;AAKE;AACA;;;AAGE;;;;;AAKJ;AAEA;;;;;;;;;AASG;AACG;AAGJ;AAWA;AACA;AACA;AACA;AACA;AAEA;;;;AAKE;AACE;AACA;AACF;;;AAKE;AACA;;AACA;;AAKF;;;;;;;;AAYE;AACA;AACF;;;;AAOF;;;AAUI;;;AAIE;;AAEA;AACA;AACA;AACA;AACE;;AAEH;AACD;AACE;;;;;;;;;AAWA;;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;;;;;;;;AAkBE;;;AAGA;;AAEA;AACE;;AAEH;AACH;AAEA;;AAEI;AACA;;;;AAGF;AACA;AACE;;AAEJ;;AAGE;;;;AAIA;AACA;AACA;AACA;AACF;AAEA;;AAKE;AACA;AACE;AAEE;AAEF;;AAEJ;AAEA;AAIE;AACA;;AAEE;;;AAGA;;;AAGJ;;AAGE;AACA;;AAEA;;AACA;AACA;AAEA;;;;AAIM;AACA;AACA;AACD;;;AAGC;AACA;AACA;AACD;;;AAGH;AACA;;AAEK;AACA;AAEG;;;;AAKN;;;AAGE;AACA;AACA;AACD;;;;;;;AAQC;AACA;AACA;AACD;;;;;AAML;;;;;;;AAMI;AACE;;AAEA;;AAEF;;;;;AAKF;;AAEA;AACD;;;AAID;AACA;;AAEA;;;;AAGE;AACA;;AAED;;AAGH;AACA;AACA;AACA;AACF;;;;;;;;;AAUC;;AASC;;;;;;;;AAMA;;;;AAIE;AACD;AACH;AAIF;;AAQI;;;;AAGA;AACA;AACE;AACA;AACA;;AAED;AACH;AAIF;AACF;;"}

package/dist/esm/components/editor/NodeGraph/useNodeGraphEdgeInteraction.js

@@ -0,0 +1,137 @@
+"use client";
+import { useRef, useCallback, useEffect } from 'react';
+import '../../primitives/viewport/Viewport.js';
+import '../../primitives/viewport/ViewportLayer.js';
+import '../../primitives/viewport/ViewportWorld.js';
+import '../../primitives/viewport/ViewportOverlay.js';
+import { worldToScreen } from '../../primitives/viewport/viewportCoords.js';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '../../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { findEdgeAtPoint, resolveEdgeEndpoints } from './nodeGraphMath.js';
+
+/**
+ * Pointer proximity (screen px) for hovering / clicking / right-clicking an
+ * edge. Divided by the current zoom to get the world-space threshold. Also
+ * consumed by the parent for marquee-click edge selection and hit-testing.
+ */
+const EDGE_HIT_PX = 6;
+/**
+ * Pointer proximity (screen px) to an edge endpoint that starts a
+ * reconnect / detach grab instead of selecting the edge.
+ */
+const EDGE_ENDPOINT_GRAB_PX = 16;
+/**
+ * Edge hover + endpoint-grab interactions for the `<NodeGraph>` root surface.
+ * Edges live on a canvas layer (no DOM to receive pointer events), so both
+ * hovering an edge and grabbing its endpoint to reconnect are resolved by a
+ * Bézier hit-test against the pointer position. Hover is RAF-coalesced to one
+ * hit-test per frame; the endpoint grab runs in the capture phase so it wins
+ * over the Viewport's own marquee / pan before they begin.
+ */
+function useNodeGraphEdgeInteraction(options) {
+    const { store, getTransform, screenToWorldLocal, localScreenPoint, onEdgeReconnectStart, disabled, } = options;
+    const disabledRef = useLatest(disabled);
+    const edgeHoverRaf = useRef(0);
+    const edgeHoverPoint = useRef(null);
+    const clearEdgeHover = useCallback(() => {
+        const hover = store.getHover();
+        if (hover.hoveredEdgeId !== null) {
+            store.setHover({ ...hover, hoveredEdgeId: null });
+        }
+    }, [store]);
+    const onRootPointerMove = useCallback((event) => {
+        if (disabledRef.current)
+            return;
+        if (store.getInteraction().kind !== 'idle')
+            return;
+        const el = event.target;
+        if (el?.closest('[data-node-id]')) {
+            clearEdgeHover();
+            return;
+        }
+        edgeHoverPoint.current = { x: event.clientX, y: event.clientY };
+        if (edgeHoverRaf.current !== 0)
+            return;
+        edgeHoverRaf.current = requestAnimationFrame(() => {
+            edgeHoverRaf.current = 0;
+            const point = edgeHoverPoint.current;
+            edgeHoverPoint.current = null;
+            if (!point || store.getInteraction().kind !== 'idle')
+                return;
+            const zoom = getTransform().zoom || 1;
+            const world = screenToWorldLocal(point.x, point.y);
+            const edgeId = findEdgeAtPoint(world, store.getData().edges, store.getNodeById, store.getPortPosition, EDGE_HIT_PX / zoom);
+            const hover = store.getHover();
+            if (hover.hoveredEdgeId !== edgeId) {
+                store.setHover({ ...hover, hoveredEdgeId: edgeId });
+            }
+        });
+    }, [store, disabledRef, getTransform, screenToWorldLocal, clearEdgeHover]);
+    const onRootPointerLeave = useCallback(() => {
+        if (edgeHoverRaf.current !== 0) {
+            cancelAnimationFrame(edgeHoverRaf.current);
+            edgeHoverRaf.current = 0;
+        }
+        edgeHoverPoint.current = null;
+        clearEdgeHover();
+    }, [clearEdgeHover]);
+    const onRootPointerDownCapture = useCallback((event) => {
+        if (disabledRef.current)
+            return;
+        if (event.button !== 0)
+            return;
+        const el = event.target;
+        if (el?.closest('[data-node-id]'))
+            return;
+        const transform = getTransform();
+        const zoom = transform.zoom || 1;
+        const world = screenToWorldLocal(event.clientX, event.clientY);
+        const edges = store.getData().edges;
+        const edgeId = findEdgeAtPoint(world, edges, store.getNodeById, store.getPortPosition, EDGE_HIT_PX / zoom);
+        if (!edgeId)
+            return;
+        const edge = edges.find(e => e.id === edgeId);
+        if (!edge)
+            return;
+        const ends = resolveEdgeEndpoints(edge, store.getNodeById, store.getPortPosition);
+        if (!ends)
+            return;
+        const srcScreen = worldToScreen(ends.source, transform);
+        const tgtScreen = worldToScreen(ends.target, transform);
+        const local = localScreenPoint(event.clientX, event.clientY);
+        const dSrc = Math.hypot(local.x - srcScreen.x, local.y - srcScreen.y);
+        const dTgt = Math.hypot(local.x - tgtScreen.x, local.y - tgtScreen.y);
+        if (Math.min(dSrc, dTgt) > EDGE_ENDPOINT_GRAB_PX)
+            return;
+        event.stopPropagation();
+        event.preventDefault();
+        const end = dSrc <= dTgt ? 'source' : 'target';
+        onEdgeReconnectStart(edgeId, end, event.clientX, event.clientY);
+    }, [
+        disabledRef,
+        getTransform,
+        screenToWorldLocal,
+        localScreenPoint,
+        store,
+        onEdgeReconnectStart,
+    ]);
+    // Cancel a pending hover hit-test if the component unmounts mid-frame.
+    useEffect(() => {
+        return () => {
+            if (edgeHoverRaf.current !== 0) {
+                cancelAnimationFrame(edgeHoverRaf.current);
+            }
+        };
+    }, []);
+    return { onRootPointerMove, onRootPointerLeave, onRootPointerDownCapture };
+}
+
+export { EDGE_HIT_PX, useNodeGraphEdgeInteraction };
+//# sourceMappingURL=useNodeGraphEdgeInteraction.js.map