entangle-ui 0.9.0 → 0.11.0

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 '@vanilla-extract/css';
+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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNodeGraphEdgeInteraction.js","sources":["src/components/editor/NodeGraph/useNodeGraphEdgeInteraction.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { worldToScreen as screenFromWorld } from '@/components/primitives/viewport';\nimport { useLatest } from '@/hooks';\n\nimport { findEdgeAtPoint, resolveEdgeEndpoints } from './nodeGraphMath';\n\nimport type { NodeGraphStore } from './NodeGraphStore';\nimport type { Point2D } from '@/components/primitives/canvas/canvas.types';\nimport type { ViewportTransform } from '@/components/primitives/viewport';\nimport type React from 'react';\n\n/**\n * Pointer proximity (screen px) for hovering / clicking / right-clicking an\n * edge. Divided by the current zoom to get the world-space threshold. Also\n * consumed by the parent for marquee-click edge selection and hit-testing.\n */\nexport const EDGE_HIT_PX = 6;\n\n/**\n * Pointer proximity (screen px) to an edge endpoint that starts a\n * reconnect / detach grab instead of selecting the edge.\n */\nconst EDGE_ENDPOINT_GRAB_PX = 16;\n\ninterface UseNodeGraphEdgeInteractionOptions {\n  store: NodeGraphStore;\n  getTransform: () => ViewportTransform;\n  screenToWorldLocal: (clientX: number, clientY: number) => Point2D;\n  localScreenPoint: (clientX: number, clientY: number) => Point2D;\n  onEdgeReconnectStart: (\n    edgeId: string,\n    end: 'source' | 'target',\n    clientX: number,\n    clientY: number\n  ) => void;\n  disabled?: boolean;\n}\n\ninterface UseNodeGraphEdgeInteractionReturn {\n  /** Attach to the root surface's `onPointerMove` — RAF-coalesced edge hover. */\n  onRootPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;\n  /** Attach to `onPointerLeave` — clears hover + cancels any pending hit-test. */\n  onRootPointerLeave: () => void;\n  /**\n   * Attach to `onPointerDownCapture` — pre-empts the Viewport's marquee / pan\n   * when the pointer lands near an edge endpoint, handing off to the\n   * connection controller in reconnect mode.\n   */\n  onRootPointerDownCapture: (event: React.PointerEvent<HTMLDivElement>) => void;\n}\n\n/**\n * Edge hover + endpoint-grab interactions for the `<NodeGraph>` root surface.\n * Edges live on a canvas layer (no DOM to receive pointer events), so both\n * hovering an edge and grabbing its endpoint to reconnect are resolved by a\n * Bézier hit-test against the pointer position. Hover is RAF-coalesced to one\n * hit-test per frame; the endpoint grab runs in the capture phase so it wins\n * over the Viewport's own marquee / pan before they begin.\n */\nexport function useNodeGraphEdgeInteraction(\n  options: UseNodeGraphEdgeInteractionOptions\n): UseNodeGraphEdgeInteractionReturn {\n  const {\n    store,\n    getTransform,\n    screenToWorldLocal,\n    localScreenPoint,\n    onEdgeReconnectStart,\n    disabled,\n  } = options;\n\n  const disabledRef = useLatest(disabled);\n  const edgeHoverRaf = useRef(0);\n  const edgeHoverPoint = useRef<Point2D | null>(null);\n\n  const clearEdgeHover = useCallback((): void => {\n    const hover = store.getHover();\n    if (hover.hoveredEdgeId !== null) {\n      store.setHover({ ...hover, hoveredEdgeId: null });\n    }\n  }, [store]);\n\n  const onRootPointerMove = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>): void => {\n      if (disabledRef.current) return;\n      if (store.getInteraction().kind !== 'idle') return;\n      const el = event.target as Element | null;\n      if (el?.closest('[data-node-id]')) {\n        clearEdgeHover();\n        return;\n      }\n      edgeHoverPoint.current = { x: event.clientX, y: event.clientY };\n      if (edgeHoverRaf.current !== 0) return;\n      edgeHoverRaf.current = requestAnimationFrame(() => {\n        edgeHoverRaf.current = 0;\n        const point = edgeHoverPoint.current;\n        edgeHoverPoint.current = null;\n        if (!point || store.getInteraction().kind !== 'idle') return;\n        const zoom = getTransform().zoom || 1;\n        const world = screenToWorldLocal(point.x, point.y);\n        const edgeId = findEdgeAtPoint(\n          world,\n          store.getData().edges,\n          store.getNodeById,\n          store.getPortPosition,\n          EDGE_HIT_PX / zoom\n        );\n        const hover = store.getHover();\n        if (hover.hoveredEdgeId !== edgeId) {\n          store.setHover({ ...hover, hoveredEdgeId: edgeId });\n        }\n      });\n    },\n    [store, disabledRef, getTransform, screenToWorldLocal, clearEdgeHover]\n  );\n\n  const onRootPointerLeave = useCallback((): void => {\n    if (edgeHoverRaf.current !== 0) {\n      cancelAnimationFrame(edgeHoverRaf.current);\n      edgeHoverRaf.current = 0;\n    }\n    edgeHoverPoint.current = null;\n    clearEdgeHover();\n  }, [clearEdgeHover]);\n\n  const onRootPointerDownCapture = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>): void => {\n      if (disabledRef.current) return;\n      if (event.button !== 0) return;\n      const el = event.target as Element | null;\n      if (el?.closest('[data-node-id]')) return;\n      const transform = getTransform();\n      const zoom = transform.zoom || 1;\n      const world = screenToWorldLocal(event.clientX, event.clientY);\n      const edges = store.getData().edges;\n      const edgeId = findEdgeAtPoint(\n        world,\n        edges,\n        store.getNodeById,\n        store.getPortPosition,\n        EDGE_HIT_PX / zoom\n      );\n      if (!edgeId) return;\n      const edge = edges.find(e => e.id === edgeId);\n      if (!edge) return;\n      const ends = resolveEdgeEndpoints(\n        edge,\n        store.getNodeById,\n        store.getPortPosition\n      );\n      if (!ends) return;\n      const srcScreen = screenFromWorld(ends.source, transform);\n      const tgtScreen = screenFromWorld(ends.target, transform);\n      const local = localScreenPoint(event.clientX, event.clientY);\n      const dSrc = Math.hypot(local.x - srcScreen.x, local.y - srcScreen.y);\n      const dTgt = Math.hypot(local.x - tgtScreen.x, local.y - tgtScreen.y);\n      if (Math.min(dSrc, dTgt) > EDGE_ENDPOINT_GRAB_PX) return;\n      event.stopPropagation();\n      event.preventDefault();\n      const end = dSrc <= dTgt ? 'source' : 'target';\n      onEdgeReconnectStart(edgeId, end, event.clientX, event.clientY);\n    },\n    [\n      disabledRef,\n      getTransform,\n      screenToWorldLocal,\n      localScreenPoint,\n      store,\n      onEdgeReconnectStart,\n    ]\n  );\n\n  // Cancel a pending hover hit-test if the component unmounts mid-frame.\n  useEffect(() => {\n    return () => {\n      if (edgeHoverRaf.current !== 0) {\n        cancelAnimationFrame(edgeHoverRaf.current);\n      }\n    };\n  }, []);\n\n  return { onRootPointerMove, onRootPointerLeave, onRootPointerDownCapture };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAcA;;;;AAIG;AACI;AAEP;;;AAGG;AACH;AA6BA;;;;;;;AAOG;AACG;AAGJ;AASA;AACA;AACA;AAEA;AACE;AACA;AACE;;AAEJ;AAEA;;;AAGI;;AACA;AACA;AACE;;;AAGF;AACA;;AACA;AACE;AACA;AACA;;;;AAGA;;AAQA;AACA;AACE;;AAEJ;AACF;AAIF;AACE;AACE;AACA;;AAEF;AACA;AACF;AAEA;;;AAGI;;AACA;AACA;;AACA;AACA;AACA;;;AASA;;AACA;AACA;;AACA;AAKA;;;;AAGA;;;;;;;AAMA;AACA;AACF;;;;;;;AAQC;;;AAKD;AACE;AACE;;AAEJ;;AAGF;AACF;;"}

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

@@ -0,0 +1,392 @@
+"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 { 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 '@vanilla-extract/css';
+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 { rectsIntersect, snapDelta, applyGroupResize, getNodeBox, rectContains, toggleSelected } from './nodeGraphMath.js';
+import { useDragGesture } from './useDragGesture.js';
+
+const DRAG_START_THRESHOLD_PX = 3;
+/**
+ * Pointer-driven controller for group bodies and resize handles. Three
+ * gestures share the same session state machine:
+ *
+ * - **drag**: pointerdown on a group body → snap-aware translation that
+ *   carries fully-contained nodes along, refused on overlap with other
+ *   groups, click-selection fallback when below the drag threshold.
+ * - **resize**: pointerdown on a handle → eight-direction resize via
+ *   {@link applyGroupResize}, refused on overlap.
+ * - **click**: pointerup before the drag threshold → selection toggle.
+ *
+ * Document listeners are attached only while a gesture is in flight.
+ */
+function useNodeGraphGroupDrag(options) {
+    const { store, getTransform, localScreenPoint, snapToGrid, disabled, defaultNodeSize, emitGroupsChange, emitNodesChange, emitSelectionChange, } = options;
+    const snapToGridRef = useLatest(snapToGrid);
+    const disabledRef = useLatest(disabled);
+    const emitGroupsChangeRef = useLatest(emitGroupsChange);
+    const emitNodesChangeRef = useLatest(emitNodesChange);
+    const emitSelectionChangeRef = useLatest(emitSelectionChange);
+    const groupSessionRef = useRef(null);
+    /**
+     * True when applying `delta` to the dragged groups (`session.groupStartBounds`)
+     * would put any of them on top of a non-dragged group. Used by the
+     * pointermove handler for live visual feedback and by pointerup to
+     * refuse the commit.
+     */
+    const groupDragWouldOverlap = useCallback((groupStartBounds, delta) => {
+        const currentGroups = store.getData().groups;
+        for (const [draggedId, start] of groupStartBounds) {
+            const next = {
+                x: start.x + delta.x,
+                y: start.y + delta.y,
+                width: start.width,
+                height: start.height,
+            };
+            for (const other of currentGroups) {
+                if (groupStartBounds.has(other.id))
+                    continue;
+                // Skip self defensively — already covered by the line above.
+                if (other.id === draggedId)
+                    continue;
+                if (rectsIntersect(next, other.bounds))
+                    return true;
+            }
+        }
+        return false;
+    }, [store]);
+    /** True when the resized bounds would intersect any non-resized group. */
+    const groupResizeWouldOverlap = useCallback((groupId, nextBounds) => {
+        const currentGroups = store.getData().groups;
+        for (const other of currentGroups) {
+            if (other.id === groupId)
+                continue;
+            if (rectsIntersect(nextBounds, other.bounds))
+                return true;
+        }
+        return false;
+    }, [store]);
+    const gesture = useDragGesture();
+    // ── rAF-throttled interaction commits ──
+    //
+    // See `useNodeGraphNodeDrag` for the rationale — same coalescing pattern
+    // applied to the group drag + resize move stream. Buffer the latest
+    // interaction payload in a ref; an rAF callback drains it once per frame.
+    const pendingInteractionRef = useRef(null);
+    const rafRef = useRef(0);
+    const commitPending = useCallback(() => {
+        const pending = pendingInteractionRef.current;
+        if (!pending)
+            return;
+        pendingInteractionRef.current = null;
+        store.setInteraction(pending);
+    }, [store]);
+    const cancelRaf = useCallback(() => {
+        if (rafRef.current !== 0) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = 0;
+        }
+    }, []);
+    /** Synchronous flush — cancels any pending rAF and commits immediately. */
+    const flushPending = useCallback(() => {
+        cancelRaf();
+        commitPending();
+    }, [cancelRaf, commitPending]);
+    useEffect(() => {
+        return () => {
+            cancelRaf();
+            pendingInteractionRef.current = null;
+        };
+    }, [cancelRaf]);
+    const scheduleCommit = useCallback((next) => {
+        pendingInteractionRef.current = next;
+        if (rafRef.current !== 0)
+            return;
+        rafRef.current = requestAnimationFrame(() => {
+            rafRef.current = 0;
+            commitPending();
+        });
+    }, [commitPending]);
+    // Shared move handler for both the drag-groups and resize-group gestures.
+    // Reads the active session from the ref and pushes the live interaction
+    // delta into the store; the threshold-to-start gate lives here for drags.
+    const handleGroupMove = useCallback((e) => {
+        const session = groupSessionRef.current;
+        if (session?.pointerId !== e.pointerId)
+            return;
+        const current = localScreenPoint(e.clientX, e.clientY);
+        const dx = current.x - session.startScreen.x;
+        const dy = current.y - session.startScreen.y;
+        const transform = getTransform();
+        const worldDelta = {
+            x: dx / transform.zoom,
+            y: dy / transform.zoom,
+        };
+        const snapped = snapDelta(worldDelta, snapToGridRef.current);
+        if (session.kind === 'drag') {
+            if (!session.didDrag) {
+                if (Math.hypot(dx, dy) < DRAG_START_THRESHOLD_PX)
+                    return;
+                session.didDrag = true;
+            }
+            const ids = new Set(session.groupStartBounds.keys());
+            const blocked = groupDragWouldOverlap(session.groupStartBounds, snapped);
+            scheduleCommit({
+                kind: 'drag-groups',
+                groupIds: ids,
+                containedNodeIds: session.containedNodeIds,
+                startWorld: session.startWorld,
+                delta: snapped,
+                blocked,
+            });
+        }
+        else if (session.resizeStartBounds && session.handle) {
+            // `session.kind` is narrowed to 'resize' here (the `'drag'` branch
+            // above is the only other kind); we still guard the optional
+            // resize fields before using them.
+            const nextBounds = applyGroupResize(session.resizeStartBounds, session.handle, snapped);
+            const blocked = groupResizeWouldOverlap(session.clickedGroupId, nextBounds);
+            scheduleCommit({
+                kind: 'resize-group',
+                groupId: session.clickedGroupId,
+                handle: session.handle,
+                startBounds: session.resizeStartBounds,
+                delta: snapped,
+                blocked,
+            });
+        }
+    }, [
+        localScreenPoint,
+        getTransform,
+        snapToGridRef,
+        groupDragWouldOverlap,
+        groupResizeWouldOverlap,
+        scheduleCommit,
+    ]);
+    const handleGroupCancel = useCallback(() => {
+        cancelRaf();
+        pendingInteractionRef.current = null;
+        groupSessionRef.current = null;
+        store.setInteraction({ kind: 'idle' });
+    }, [store, cancelRaf]);
+    const onGroupBodyPointerDown = useCallback((event, group) => {
+        if (event.button !== 0)
+            return;
+        event.stopPropagation();
+        if (disabledRef.current)
+            return;
+        const additive = event.shiftKey || event.metaKey || event.ctrlKey;
+        const currentSelection = store.getSelection();
+        const alreadySelected = currentSelection.groups.includes(group.id);
+        let dragIds;
+        if (alreadySelected) {
+            dragIds = currentSelection.groups;
+        }
+        else if (!additive) {
+            dragIds = [group.id];
+        }
+        else {
+            dragIds = [...currentSelection.groups, group.id];
+        }
+        const startBounds = new Map();
+        for (const g of store.getData().groups) {
+            if (dragIds.includes(g.id)) {
+                startBounds.set(g.id, { ...g.bounds });
+            }
+        }
+        // Snapshot nodes that are fully inside any of the dragged groups —
+        // they ride along with the gesture so the visual grouping stays
+        // consistent.
+        const containedSet = new Set();
+        const nodeStartPositions = new Map();
+        const measuredFor = store.getMeasuredSize;
+        for (const n of store.getData().nodes) {
+            const nb = getNodeBox(n, measuredFor(n.id), defaultNodeSize);
+            for (const startRect of startBounds.values()) {
+                if (rectContains(startRect, nb)) {
+                    containedSet.add(n.id);
+                    nodeStartPositions.set(n.id, { ...n.position });
+                    break;
+                }
+            }
+        }
+        const containedNodeIds = containedSet;
+        const startScreen = localScreenPoint(event.clientX, event.clientY);
+        const startWorld = screenToWorld(startScreen, getTransform());
+        const pointerId = event.pointerId;
+        gesture.begin(event, {
+            onMove: handleGroupMove,
+            onCancel: handleGroupCancel,
+        });
+        groupSessionRef.current = {
+            kind: 'drag',
+            pointerId,
+            clickedGroupId: group.id,
+            handle: null,
+            startScreen,
+            startWorld,
+            selectionAtStart: currentSelection,
+            groupStartBounds: startBounds,
+            containedNodeIds,
+            nodeStartPositions,
+            resizeStartBounds: null,
+            additive,
+            didDrag: false,
+        };
+    }, [
+        disabledRef,
+        defaultNodeSize,
+        store,
+        localScreenPoint,
+        getTransform,
+        gesture,
+        handleGroupMove,
+        handleGroupCancel,
+    ]);
+    const onGroupHandlePointerDown = useCallback((event, group, handle) => {
+        if (event.button !== 0)
+            return;
+        event.stopPropagation();
+        event.preventDefault();
+        if (disabledRef.current)
+            return;
+        const startScreen = localScreenPoint(event.clientX, event.clientY);
+        const startWorld = screenToWorld(startScreen, getTransform());
+        const pointerId = event.pointerId;
+        gesture.begin(event, {
+            onMove: handleGroupMove,
+            onCancel: handleGroupCancel,
+        });
+        groupSessionRef.current = {
+            kind: 'resize',
+            pointerId,
+            clickedGroupId: group.id,
+            handle,
+            startScreen,
+            startWorld,
+            selectionAtStart: store.getSelection(),
+            groupStartBounds: new Map(),
+            containedNodeIds: new Set(),
+            nodeStartPositions: new Map(),
+            resizeStartBounds: { ...group.bounds },
+            additive: false,
+            didDrag: true,
+        };
+        // Immediately register the resize interaction so the canvas + overlay
+        // start tracking from delta=0 at the click point.
+        store.setInteraction({
+            kind: 'resize-group',
+            groupId: group.id,
+            handle,
+            startBounds: { ...group.bounds },
+            delta: { x: 0, y: 0 },
+            blocked: false,
+        });
+    }, [
+        disabledRef,
+        localScreenPoint,
+        getTransform,
+        store,
+        gesture,
+        handleGroupMove,
+        handleGroupCancel,
+    ]);
+    const onGroupBodyPointerUp = useCallback((event, group) => {
+        const session = groupSessionRef.current;
+        if (session?.pointerId !== event.pointerId)
+            return;
+        event.stopPropagation();
+        gesture.finish(event);
+        // Drain the rAF buffer so `store.getInteraction()` below reflects the
+        // last pointermove rather than the previous frame's commit.
+        flushPending();
+        const interaction = store.getInteraction();
+        if (session.kind === 'drag' && session.didDrag) {
+            if (interaction.kind === 'drag-groups' && !interaction.blocked) {
+                const delta = interaction.delta;
+                // Apply the delta to both groups and any nodes that were
+                // contained at gesture start, in a single set of state writes
+                // so consumers get one atomic onGroupsChange + onNodesChange.
+                const nextGroups = store.getData().groups.map(g => {
+                    const start = session.groupStartBounds.get(g.id);
+                    if (!start)
+                        return g;
+                    return {
+                        ...g,
+                        bounds: {
+                            ...start,
+                            x: start.x + delta.x,
+                            y: start.y + delta.y,
+                        },
+                    };
+                });
+                emitGroupsChangeRef.current(nextGroups);
+                if (session.nodeStartPositions.size > 0) {
+                    const nextNodes = store.getData().nodes.map(n => {
+                        const start = session.nodeStartPositions.get(n.id);
+                        if (!start)
+                            return n;
+                        return {
+                            ...n,
+                            position: { x: start.x + delta.x, y: start.y + delta.y },
+                        };
+                    });
+                    emitNodesChangeRef.current(nextNodes);
+                }
+            }
+            // If `blocked`, drop the gesture without committing — the overlay
+            // already snaps back to the start position when we clear the
+            // interaction state below.
+            store.setInteraction({ kind: 'idle' });
+        }
+        else if (session.kind === 'resize') {
+            if (interaction.kind === 'resize-group' &&
+                !interaction.blocked &&
+                session.resizeStartBounds &&
+                session.handle) {
+                const next = applyGroupResize(session.resizeStartBounds, session.handle, interaction.delta);
+                const nextGroups = store
+                    .getData()
+                    .groups.map(g => g.id === session.clickedGroupId ? { ...g, bounds: next } : g);
+                emitGroupsChangeRef.current(nextGroups);
+            }
+            store.setInteraction({ kind: 'idle' });
+        }
+        else {
+            // Plain click on group body → selection
+            const current = session.selectionAtStart;
+            emitSelectionChangeRef.current({
+                nodes: session.additive ? current.nodes : [],
+                edges: session.additive ? current.edges : [],
+                groups: toggleSelected(current.groups, group.id, session.additive),
+            });
+        }
+        groupSessionRef.current = null;
+    }, [
+        store,
+        emitGroupsChangeRef,
+        emitNodesChangeRef,
+        emitSelectionChangeRef,
+        gesture,
+        flushPending,
+    ]);
+    return {
+        onGroupBodyPointerDown,
+        onGroupHandlePointerDown,
+        onGroupBodyPointerUp,
+    };
+}
+
+export { useNodeGraphGroupDrag };
+//# sourceMappingURL=useNodeGraphGroupDrag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNodeGraphGroupDrag.js","sources":["src/components/editor/NodeGraph/useNodeGraphGroupDrag.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { screenToWorld as worldFromScreen } from '@/components/primitives/viewport';\nimport { useLatest } from '@/hooks';\n\nimport {\n  applyGroupResize,\n  getNodeBox,\n  rectContains,\n  rectsIntersect,\n  snapDelta,\n  toggleSelected,\n} from './nodeGraphMath';\nimport { useDragGesture } from './useDragGesture';\n\nimport type {\n  NodeGraphGroup,\n  NodeGraphNode,\n  NodeGraphSelection,\n} from './NodeGraph.types';\nimport type {\n  NodeGraphGroupResizeHandle,\n  NodeGraphInteractionState,\n  NodeGraphStore,\n} from './NodeGraphStore';\nimport type { Point2D } from '@/components/primitives/canvas/canvas.types';\nimport type {\n  ViewportTransform,\n  WorldRect,\n} from '@/components/primitives/viewport';\nimport type React from 'react';\n\nconst DRAG_START_THRESHOLD_PX = 3;\n\n/**\n * Pending interaction state buffered between pointermove and the next rAF\n * flush. Carries either a `drag-groups` or `resize-group` payload — they\n * share the same lifecycle, so the buffer keeps the latest of either.\n */\ntype PendingGroupInteraction = Extract<\n  NodeGraphInteractionState,\n  { kind: 'drag-groups' } | { kind: 'resize-group' }\n>;\n\ninterface UseNodeGraphGroupDragOptions {\n  store: NodeGraphStore;\n  getTransform: () => ViewportTransform;\n  localScreenPoint: (clientX: number, clientY: number) => Point2D;\n  snapToGrid: number | false;\n  disabled?: boolean;\n  defaultNodeSize: { width: number; height: number };\n  emitGroupsChange: (next: NodeGraphGroup[]) => void;\n  emitNodesChange: (next: NodeGraphNode[]) => void;\n  emitSelectionChange: (next: NodeGraphSelection) => void;\n}\n\ninterface UseNodeGraphGroupDragReturn {\n  onGroupBodyPointerDown: (\n    event: React.PointerEvent<HTMLDivElement>,\n    group: NodeGraphGroup\n  ) => void;\n  onGroupHandlePointerDown: (\n    event: React.PointerEvent<HTMLDivElement>,\n    group: NodeGraphGroup,\n    handle: NodeGraphGroupResizeHandle\n  ) => void;\n  onGroupBodyPointerUp: (\n    event: React.PointerEvent<HTMLDivElement>,\n    group: NodeGraphGroup\n  ) => void;\n}\n\ninterface GroupDragSession {\n  kind: 'drag' | 'resize';\n  pointerId: number;\n  clickedGroupId: string;\n  /** Handle being dragged (only for kind === 'resize'). */\n  handle: NodeGraphGroupResizeHandle | null;\n  startScreen: Point2D;\n  startWorld: Point2D;\n  selectionAtStart: NodeGraphSelection;\n  /** Snapshot of bounds keyed by group id (for drag). */\n  groupStartBounds: Map<string, WorldRect>;\n  /**\n   * Nodes fully contained inside one of the dragged groups at gesture\n   * start — they ride along with the group(s). Set so the per-node\n   * subscriber selector can do O(1) membership checks during the drag.\n   */\n  containedNodeIds: ReadonlySet<string>;\n  /** Start positions of the contained nodes, keyed by node id. */\n  nodeStartPositions: Map<string, Point2D>;\n  /** Bounds of the resized group at start (for resize). */\n  resizeStartBounds: WorldRect | null;\n  additive: boolean;\n  didDrag: boolean;\n}\n\n/**\n * Pointer-driven controller for group bodies and resize handles. Three\n * gestures share the same session state machine:\n *\n * - **drag**: pointerdown on a group body → snap-aware translation that\n *   carries fully-contained nodes along, refused on overlap with other\n *   groups, click-selection fallback when below the drag threshold.\n * - **resize**: pointerdown on a handle → eight-direction resize via\n *   {@link applyGroupResize}, refused on overlap.\n * - **click**: pointerup before the drag threshold → selection toggle.\n *\n * Document listeners are attached only while a gesture is in flight.\n */\nexport function useNodeGraphGroupDrag(\n  options: UseNodeGraphGroupDragOptions\n): UseNodeGraphGroupDragReturn {\n  const {\n    store,\n    getTransform,\n    localScreenPoint,\n    snapToGrid,\n    disabled,\n    defaultNodeSize,\n    emitGroupsChange,\n    emitNodesChange,\n    emitSelectionChange,\n  } = options;\n\n  const snapToGridRef = useLatest(snapToGrid);\n  const disabledRef = useLatest(disabled);\n  const emitGroupsChangeRef = useLatest(emitGroupsChange);\n  const emitNodesChangeRef = useLatest(emitNodesChange);\n  const emitSelectionChangeRef = useLatest(emitSelectionChange);\n\n  const groupSessionRef = useRef<GroupDragSession | null>(null);\n\n  /**\n   * True when applying `delta` to the dragged groups (`session.groupStartBounds`)\n   * would put any of them on top of a non-dragged group. Used by the\n   * pointermove handler for live visual feedback and by pointerup to\n   * refuse the commit.\n   */\n  const groupDragWouldOverlap = useCallback(\n    (groupStartBounds: Map<string, WorldRect>, delta: Point2D): boolean => {\n      const currentGroups = store.getData().groups;\n      for (const [draggedId, start] of groupStartBounds) {\n        const next: WorldRect = {\n          x: start.x + delta.x,\n          y: start.y + delta.y,\n          width: start.width,\n          height: start.height,\n        };\n        for (const other of currentGroups) {\n          if (groupStartBounds.has(other.id)) continue;\n          // Skip self defensively — already covered by the line above.\n          if (other.id === draggedId) continue;\n          if (rectsIntersect(next, other.bounds)) return true;\n        }\n      }\n      return false;\n    },\n    [store]\n  );\n\n  /** True when the resized bounds would intersect any non-resized group. */\n  const groupResizeWouldOverlap = useCallback(\n    (groupId: string, nextBounds: WorldRect): boolean => {\n      const currentGroups = store.getData().groups;\n      for (const other of currentGroups) {\n        if (other.id === groupId) continue;\n        if (rectsIntersect(nextBounds, other.bounds)) return true;\n      }\n      return false;\n    },\n    [store]\n  );\n\n  const gesture = useDragGesture();\n\n  // ── rAF-throttled interaction commits ──\n  //\n  // See `useNodeGraphNodeDrag` for the rationale — same coalescing pattern\n  // applied to the group drag + resize move stream. Buffer the latest\n  // interaction payload in a ref; an rAF callback drains it once per frame.\n  const pendingInteractionRef = useRef<PendingGroupInteraction | null>(null);\n  const rafRef = useRef<number>(0);\n\n  const commitPending = useCallback((): void => {\n    const pending = pendingInteractionRef.current;\n    if (!pending) return;\n    pendingInteractionRef.current = null;\n    store.setInteraction(pending);\n  }, [store]);\n\n  const cancelRaf = useCallback((): void => {\n    if (rafRef.current !== 0) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = 0;\n    }\n  }, []);\n\n  /** Synchronous flush — cancels any pending rAF and commits immediately. */\n  const flushPending = useCallback((): void => {\n    cancelRaf();\n    commitPending();\n  }, [cancelRaf, commitPending]);\n\n  useEffect(() => {\n    return () => {\n      cancelRaf();\n      pendingInteractionRef.current = null;\n    };\n  }, [cancelRaf]);\n\n  const scheduleCommit = useCallback(\n    (next: PendingGroupInteraction): void => {\n      pendingInteractionRef.current = next;\n      if (rafRef.current !== 0) return;\n      rafRef.current = requestAnimationFrame(() => {\n        rafRef.current = 0;\n        commitPending();\n      });\n    },\n    [commitPending]\n  );\n\n  // Shared move handler for both the drag-groups and resize-group gestures.\n  // Reads the active session from the ref and pushes the live interaction\n  // delta into the store; the threshold-to-start gate lives here for drags.\n  const handleGroupMove = useCallback(\n    (e: PointerEvent): void => {\n      const session = groupSessionRef.current;\n      if (session?.pointerId !== e.pointerId) return;\n      const current = localScreenPoint(e.clientX, e.clientY);\n      const dx = current.x - session.startScreen.x;\n      const dy = current.y - session.startScreen.y;\n      const transform = getTransform();\n      const worldDelta = {\n        x: dx / transform.zoom,\n        y: dy / transform.zoom,\n      };\n      const snapped = snapDelta(worldDelta, snapToGridRef.current);\n\n      if (session.kind === 'drag') {\n        if (!session.didDrag) {\n          if (Math.hypot(dx, dy) < DRAG_START_THRESHOLD_PX) return;\n          session.didDrag = true;\n        }\n        const ids: ReadonlySet<string> = new Set(\n          session.groupStartBounds.keys()\n        );\n        const blocked = groupDragWouldOverlap(\n          session.groupStartBounds,\n          snapped\n        );\n        scheduleCommit({\n          kind: 'drag-groups',\n          groupIds: ids,\n          containedNodeIds: session.containedNodeIds,\n          startWorld: session.startWorld,\n          delta: snapped,\n          blocked,\n        });\n      } else if (session.resizeStartBounds && session.handle) {\n        // `session.kind` is narrowed to 'resize' here (the `'drag'` branch\n        // above is the only other kind); we still guard the optional\n        // resize fields before using them.\n        const nextBounds = applyGroupResize(\n          session.resizeStartBounds,\n          session.handle,\n          snapped\n        );\n        const blocked = groupResizeWouldOverlap(\n          session.clickedGroupId,\n          nextBounds\n        );\n        scheduleCommit({\n          kind: 'resize-group',\n          groupId: session.clickedGroupId,\n          handle: session.handle,\n          startBounds: session.resizeStartBounds,\n          delta: snapped,\n          blocked,\n        });\n      }\n    },\n    [\n      localScreenPoint,\n      getTransform,\n      snapToGridRef,\n      groupDragWouldOverlap,\n      groupResizeWouldOverlap,\n      scheduleCommit,\n    ]\n  );\n\n  const handleGroupCancel = useCallback((): void => {\n    cancelRaf();\n    pendingInteractionRef.current = null;\n    groupSessionRef.current = null;\n    store.setInteraction({ kind: 'idle' });\n  }, [store, cancelRaf]);\n\n  const onGroupBodyPointerDown = useCallback(\n    (\n      event: React.PointerEvent<HTMLDivElement>,\n      group: NodeGraphGroup\n    ): void => {\n      if (event.button !== 0) return;\n      event.stopPropagation();\n      if (disabledRef.current) return;\n\n      const additive = event.shiftKey || event.metaKey || event.ctrlKey;\n      const currentSelection = store.getSelection();\n      const alreadySelected = currentSelection.groups.includes(group.id);\n\n      let dragIds: string[];\n      if (alreadySelected) {\n        dragIds = currentSelection.groups;\n      } else if (!additive) {\n        dragIds = [group.id];\n      } else {\n        dragIds = [...currentSelection.groups, group.id];\n      }\n\n      const startBounds = new Map<string, WorldRect>();\n      for (const g of store.getData().groups) {\n        if (dragIds.includes(g.id)) {\n          startBounds.set(g.id, { ...g.bounds });\n        }\n      }\n\n      // Snapshot nodes that are fully inside any of the dragged groups —\n      // they ride along with the gesture so the visual grouping stays\n      // consistent.\n      const containedSet = new Set<string>();\n      const nodeStartPositions = new Map<string, Point2D>();\n      const measuredFor = store.getMeasuredSize;\n      for (const n of store.getData().nodes) {\n        const nb = getNodeBox(n, measuredFor(n.id), defaultNodeSize);\n        for (const startRect of startBounds.values()) {\n          if (rectContains(startRect, nb)) {\n            containedSet.add(n.id);\n            nodeStartPositions.set(n.id, { ...n.position });\n            break;\n          }\n        }\n      }\n      const containedNodeIds: ReadonlySet<string> = containedSet;\n\n      const startScreen = localScreenPoint(event.clientX, event.clientY);\n      const startWorld = worldFromScreen(startScreen, getTransform());\n      const pointerId = event.pointerId;\n      gesture.begin(event, {\n        onMove: handleGroupMove,\n        onCancel: handleGroupCancel,\n      });\n\n      groupSessionRef.current = {\n        kind: 'drag',\n        pointerId,\n        clickedGroupId: group.id,\n        handle: null,\n        startScreen,\n        startWorld,\n        selectionAtStart: currentSelection,\n        groupStartBounds: startBounds,\n        containedNodeIds,\n        nodeStartPositions,\n        resizeStartBounds: null,\n        additive,\n        didDrag: false,\n      };\n    },\n    [\n      disabledRef,\n      defaultNodeSize,\n      store,\n      localScreenPoint,\n      getTransform,\n      gesture,\n      handleGroupMove,\n      handleGroupCancel,\n    ]\n  );\n\n  const onGroupHandlePointerDown = useCallback(\n    (\n      event: React.PointerEvent<HTMLDivElement>,\n      group: NodeGraphGroup,\n      handle: NodeGraphGroupResizeHandle\n    ): void => {\n      if (event.button !== 0) return;\n      event.stopPropagation();\n      event.preventDefault();\n      if (disabledRef.current) return;\n\n      const startScreen = localScreenPoint(event.clientX, event.clientY);\n      const startWorld = worldFromScreen(startScreen, getTransform());\n      const pointerId = event.pointerId;\n      gesture.begin(event, {\n        onMove: handleGroupMove,\n        onCancel: handleGroupCancel,\n      });\n\n      groupSessionRef.current = {\n        kind: 'resize',\n        pointerId,\n        clickedGroupId: group.id,\n        handle,\n        startScreen,\n        startWorld,\n        selectionAtStart: store.getSelection(),\n        groupStartBounds: new Map(),\n        containedNodeIds: new Set<string>(),\n        nodeStartPositions: new Map(),\n        resizeStartBounds: { ...group.bounds },\n        additive: false,\n        didDrag: true,\n      };\n      // Immediately register the resize interaction so the canvas + overlay\n      // start tracking from delta=0 at the click point.\n      store.setInteraction({\n        kind: 'resize-group',\n        groupId: group.id,\n        handle,\n        startBounds: { ...group.bounds },\n        delta: { x: 0, y: 0 },\n        blocked: false,\n      });\n    },\n    [\n      disabledRef,\n      localScreenPoint,\n      getTransform,\n      store,\n      gesture,\n      handleGroupMove,\n      handleGroupCancel,\n    ]\n  );\n\n  const onGroupBodyPointerUp = useCallback(\n    (\n      event: React.PointerEvent<HTMLDivElement>,\n      group: NodeGraphGroup\n    ): void => {\n      const session = groupSessionRef.current;\n      if (session?.pointerId !== event.pointerId) return;\n      event.stopPropagation();\n      gesture.finish(event);\n\n      // Drain the rAF buffer so `store.getInteraction()` below reflects the\n      // last pointermove rather than the previous frame's commit.\n      flushPending();\n\n      const interaction = store.getInteraction();\n\n      if (session.kind === 'drag' && session.didDrag) {\n        if (interaction.kind === 'drag-groups' && !interaction.blocked) {\n          const delta = interaction.delta;\n          // Apply the delta to both groups and any nodes that were\n          // contained at gesture start, in a single set of state writes\n          // so consumers get one atomic onGroupsChange + onNodesChange.\n          const nextGroups = store.getData().groups.map(g => {\n            const start = session.groupStartBounds.get(g.id);\n            if (!start) return g;\n            return {\n              ...g,\n              bounds: {\n                ...start,\n                x: start.x + delta.x,\n                y: start.y + delta.y,\n              },\n            };\n          });\n          emitGroupsChangeRef.current(nextGroups);\n          if (session.nodeStartPositions.size > 0) {\n            const nextNodes = store.getData().nodes.map(n => {\n              const start = session.nodeStartPositions.get(n.id);\n              if (!start) return n;\n              return {\n                ...n,\n                position: { x: start.x + delta.x, y: start.y + delta.y },\n              };\n            });\n            emitNodesChangeRef.current(nextNodes);\n          }\n        }\n        // If `blocked`, drop the gesture without committing — the overlay\n        // already snaps back to the start position when we clear the\n        // interaction state below.\n        store.setInteraction({ kind: 'idle' });\n      } else if (session.kind === 'resize') {\n        if (\n          interaction.kind === 'resize-group' &&\n          !interaction.blocked &&\n          session.resizeStartBounds &&\n          session.handle\n        ) {\n          const next = applyGroupResize(\n            session.resizeStartBounds,\n            session.handle,\n            interaction.delta\n          );\n          const nextGroups = store\n            .getData()\n            .groups.map(g =>\n              g.id === session.clickedGroupId ? { ...g, bounds: next } : g\n            );\n          emitGroupsChangeRef.current(nextGroups);\n        }\n        store.setInteraction({ kind: 'idle' });\n      } else {\n        // Plain click on group body → selection\n        const current = session.selectionAtStart;\n        emitSelectionChangeRef.current({\n          nodes: session.additive ? current.nodes : [],\n          edges: session.additive ? current.edges : [],\n          groups: toggleSelected(current.groups, group.id, session.additive),\n        });\n      }\n\n      groupSessionRef.current = null;\n    },\n    [\n      store,\n      emitGroupsChangeRef,\n      emitNodesChangeRef,\n      emitSelectionChangeRef,\n      gesture,\n      flushPending,\n    ]\n  );\n\n  return {\n    onGroupBodyPointerDown,\n    onGroupHandlePointerDown,\n    onGroupBodyPointerUp,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAkCA;AAiEA;;;;;;;;;;;;AAYG;AACG;;AAeJ;AACA;AACA;AACA;AACA;AAEA;AAEA;;;;;AAKG;;;;AAKG;AACE;AACA;;;;AAIF;AACE;;;AAEA;;AACA;AAAwC;;;AAG5C;AACF;;;;AAQE;AACE;;AACA;AAA8C;;AAEhD;AACF;AAIF;;;;;;AAOA;AACA;AAEA;AACE;AACA;;AACA;AACA;AACF;AAEA;AACE;AACE;AACA;;;;AAKJ;AACE;AACA;AACF;;AAGE;AACE;AACA;AACF;AACF;AAEA;AAEI;AACA;;AACA;AACE;AACA;AACF;AACF;;;;AAOF;AAEI;AACA;;AACA;;;AAGA;AACA;AACE;AACA;;;AAIF;AACE;;;AAEE;;AAEF;;AAOA;AACE;AACA;;;AAGA;;AAED;;;;;;AAKD;;AASA;AACE;;;;AAIA;;AAED;;AAEL;;;;;;;AAQC;AAGH;AACE;AACA;AACA;;AAEF;;AAOI;;;;;AAIA;AACA;AACA;AAEA;;AAEE;;;AAEA;;;;;AAKF;;;AAGI;;;;;;AAOJ;AACA;AACA;;AAEE;;AAEE;AACE;AACA;;;;;;AAON;;AAEA;AACA;AACE;AACA;AACD;;AAGC;;;AAGA;;;AAGA;AACA;;;AAGA;;AAEA;;AAEJ;;;;;;;;;AAUC;;AASC;;;;;;AAKA;;AAEA;AACA;AACE;AACA;AACD;;AAGC;;;;;;AAMA;;;;AAIA;AACA;AACA;;;;;AAKA;;;AAGA;;AAEA;AACD;AACH;;;;;;;;AASC;;AAQC;AACA;;;AAEA;;;AAIA;AAEA;;;AAII;;;;AAIA;AACE;AACA;AAAY;;AAEV;AACA;AACE;AACA;AACA;AACD;;AAEL;AACA;;AAEE;AACE;AACA;AAAY;;AAEV;;;AAGJ;AACA;;;;;;;;AAOC;AACL;;AAGE;;AAGA;;AAMG;AACA;AAGH;;;;;;AAKF;;AAEE;AACA;AACA;AACD;;AAGH;AACF;;;;;;;AAQC;;;;;;AAQL;;"}