@pixerate/editor-svelte 0.15.2 → 0.16.0

package/dist/canvas/createCanvasGraph.svelte.js

@@ -0,0 +1,223 @@
+import { cubicOut } from 'svelte/easing';
+/**
+ * Pure calculation of graph differences between a current state and a baseline state.
+ */
+export function calculateGraphDifferences(currentState, baselineState) {
+    const currentNodes = currentState.nodes ?? [];
+    const currentEdges = currentState.edges ?? [];
+    const baselineNodes = baselineState.nodes ?? [];
+    const baselineEdges = baselineState.edges ?? [];
+    // Map baseline for fast O(1) lookup
+    const baselineNodeMap = new Map(baselineNodes.map((n) => [n.id, n]));
+    const baselineEdgeMap = new Map(baselineEdges.map((e) => [e.id, e]));
+    const currentNodeMap = new Map(currentNodes.map((n) => [n.id, n]));
+    const currentEdgeMap = new Map(currentEdges.map((e) => [e.id, e]));
+    const removedNodes = baselineNodes.filter((oldNode) => !currentNodeMap.has(oldNode.id));
+    const removedEdges = baselineEdges.filter((oldEdge) => !currentEdgeMap.has(oldEdge.id));
+    const changedNodes = currentNodes.filter((newNode) => {
+        const oldNode = baselineNodeMap.get(newNode.id);
+        if (!oldNode)
+            return true;
+        return JSON.stringify(newNode) !== JSON.stringify(oldNode);
+    });
+    const changedEdges = currentEdges.filter((newEdge) => {
+        const oldEdge = baselineEdgeMap.get(newEdge.id);
+        if (!oldEdge)
+            return true;
+        return JSON.stringify(newEdge) !== JSON.stringify(oldEdge);
+    });
+    return { changedNodes, changedEdges, removedNodes, removedEdges };
+}
+/**
+ * Pure function to replace a node in a graph, optionally preserving its connected edges.
+ */
+export function replaceNodeInGraph(nodes, edges, oldNode, newNode, keepEdges = false) {
+    const updatedNodes = nodes.map((n) => (n.id === oldNode.id ? newNode : n));
+    if (!keepEdges) {
+        return { nodes: updatedNodes, edges };
+    }
+    const updatedEdges = edges.map((edge) => {
+        if (edge.source === oldNode.id || edge.target === oldNode.id) {
+            return {
+                ...edge,
+                id: crypto.randomUUID(),
+                source: edge.source === oldNode.id ? newNode.id : edge.source,
+                target: edge.target === oldNode.id ? newNode.id : edge.target
+            };
+        }
+        return edge;
+    });
+    return {
+        nodes: updatedNodes,
+        edges: updatedEdges
+    };
+}
+/**
+ * Headless Svelte 5 rune managing canvas graph state and operations.
+ */
+export function createCanvasGraph(options = {}) {
+    let nodes = $state.raw(options.initialNodes ?? []);
+    let edges = $state.raw(options.initialEdges ?? []);
+    function setNodes(newNodes, triggerCallback = true) {
+        nodes = newNodes;
+        if (triggerCallback) {
+            options.onNodesChange?.(nodes);
+        }
+    }
+    function setEdges(newEdges, triggerCallback = true) {
+        edges = newEdges;
+        if (triggerCallback) {
+            options.onEdgesChange?.(edges);
+        }
+    }
+    function animateNodePosition(node, targetPosition, duration = 400, easing = cubicOut) {
+        const delay = node.data?.animationDelay ?? 0;
+        const startPosition = { ...node.position };
+        const startTime = Date.now() + delay;
+        function step() {
+            const currentTime = Date.now();
+            if (currentTime < startTime) {
+                if (typeof requestAnimationFrame !== 'undefined') {
+                    requestAnimationFrame(step);
+                }
+                return;
+            }
+            const progress = Math.min((currentTime - startTime) / duration, 1);
+            const eased = easing(progress);
+            const currentPos = {
+                x: startPosition.x + (targetPosition.x - startPosition.x) * eased,
+                y: startPosition.y + (targetPosition.y - startPosition.y) * eased
+            };
+            // Mutate position in place without recreating the entire array every frame
+            const targetNode = nodes.find((n) => n.id === node.id);
+            if (targetNode) {
+                targetNode.position = currentPos;
+            }
+            if (progress < 1) {
+                if (typeof requestAnimationFrame !== 'undefined') {
+                    requestAnimationFrame(step);
+                }
+            }
+            else {
+                // Animation completed: trigger final reactive update and change event
+                setNodes([...nodes]);
+            }
+        }
+        step();
+    }
+    function addNodeOrNodes(nodeOrNodesToAdd, animateFromPosition, save = true) {
+        const toAdd = Array.isArray(nodeOrNodesToAdd) ? nodeOrNodesToAdd : [nodeOrNodesToAdd];
+        const existingMap = new Map(nodes.map((n) => [n.id, n]));
+        toAdd.forEach((node) => {
+            if (!existingMap.has(node.id)) {
+                existingMap.set(node.id, node);
+            }
+        });
+        setNodes(Array.from(existingMap.values()));
+        if (animateFromPosition) {
+            toAdd.forEach((node) => {
+                const target = { ...node.position };
+                node.position = { ...animateFromPosition };
+                animateNodePosition(node, target);
+            });
+        }
+        if (save)
+            options.onSave?.();
+    }
+    function addEdge(edgeToAdd, save = true) {
+        setEdges([...edges, edgeToAdd]);
+        if (save)
+            options.onSave?.();
+    }
+    function addEdges(edgesToAdd, save = true) {
+        setEdges([...edges, ...edgesToAdd]);
+        if (save)
+            options.onSave?.();
+    }
+    function removeNodes(nodesToRemove, save = true) {
+        const idsToRemove = new Set(nodesToRemove.map((n) => n.id));
+        setNodes(nodes.filter((n) => !idsToRemove.has(n.id)));
+        if (save)
+            options.onSave?.();
+    }
+    function removeEdges(edgesToRemove, save = true) {
+        const idsToRemove = new Set(edgesToRemove.map((e) => e.id));
+        setEdges(edges.filter((e) => !idsToRemove.has(e.id)));
+        if (save)
+            options.onSave?.();
+    }
+    function replaceNode(oldNode, newNode, save = true, keepEdges = false) {
+        const result = replaceNodeInGraph(nodes, edges, oldNode, newNode, keepEdges);
+        setNodes(result.nodes);
+        if (result.edges !== edges) {
+            setEdges(result.edges);
+        }
+        if (save)
+            options.onSave?.();
+    }
+    function addConnectedNodes(params) {
+        const { nodesToAdd, inboundNodes = [], outboundNodes = [], animatedEdges = false, animateFromPosition, inboundEdgeData = {}, outboundEdgeData = {}, getEdgeLabel } = params;
+        const defaultCreateEdge = (sourceId, targetId, opt) => {
+            if (options.createEdge) {
+                return options.createEdge(sourceId, targetId, opt);
+            }
+            return {
+                id: crypto.randomUUID(),
+                type: 'default',
+                source: sourceId,
+                target: targetId,
+                label: opt?.label ?? '',
+                animated: opt?.animated ?? false,
+                data: opt?.data ?? {}
+            };
+        };
+        nodesToAdd.forEach((addedNode) => {
+            addNodeOrNodes(addedNode, animateFromPosition, false);
+            inboundNodes.forEach((sourceNode) => {
+                const label = getEdgeLabel ? getEdgeLabel(sourceNode, addedNode) : '';
+                addEdge(defaultCreateEdge(sourceNode.id, addedNode.id, {
+                    label,
+                    animated: animatedEdges,
+                    data: inboundEdgeData
+                }), false);
+            });
+            outboundNodes.forEach((targetNode) => {
+                const label = getEdgeLabel ? getEdgeLabel(addedNode, targetNode) : '';
+                addEdge(defaultCreateEdge(addedNode.id, targetNode.id, {
+                    label,
+                    animated: animatedEdges,
+                    data: outboundEdgeData
+                }), false);
+            });
+        });
+        options.onSave?.();
+    }
+    function getDifferences(baseline) {
+        return calculateGraphDifferences({ nodes, edges }, baseline);
+    }
+    return {
+        get nodes() {
+            return nodes;
+        },
+        set nodes(val) {
+            setNodes(val);
+        },
+        get edges() {
+            return edges;
+        },
+        set edges(val) {
+            setEdges(val);
+        },
+        setNodes,
+        setEdges,
+        addNodeOrNodes,
+        addEdge,
+        addEdges,
+        removeNodes,
+        removeEdges,
+        replaceNode,
+        addConnectedNodes,
+        animateNodePosition,
+        getDifferences
+    };
+}

package/dist/canvas/createCanvasInteractions.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { CanvasInteractionPresetConfig } from './types.js';
+export interface CreateCanvasInteractionsOptions {
+    targetElement?: HTMLElement | Window;
+    onPanModeChange?: (active: boolean) => void;
+    onTrackpadDetected?: () => void;
+}
+/**
+ * Headless Svelte 5 rune managing canvas pan interactions (spacebar panning, trackpad pinch detection).
+ */
+export declare function createCanvasInteractions(options?: CreateCanvasInteractionsOptions): {
+    readonly isSpacebarPanning: boolean;
+    readonly trackpadDetected: boolean;
+    attachListeners: (target?: HTMLElement | Window) => () => void;
+    destroy: () => void;
+};
+/**
+ * Default interaction configuration presets for SvelteFlow.
+ */
+export declare const defaultSvelteFlowPreset: CanvasInteractionPresetConfig;
+/**
+ * Miro-compatible interaction preset (middle/right drag to pan, left drag to select).
+ */
+export declare const miroCompatiblePreset: CanvasInteractionPresetConfig;
+/**
+ * Helper to ensure panels restore pointer events after selection rectangle releases.
+ */
+export declare function restorePanelPointerEvents(panelSelector?: string): void;
+//# sourceMappingURL=createCanvasInteractions.svelte.d.ts.map

package/dist/canvas/createCanvasInteractions.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasInteractions.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasInteractions.svelte.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,YAAY,CAAC;AAEhE,MAAM,WAAW,+BAA+B;IAC/C,aAAa,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACrC,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,GAAE,+BAAoC;;;+BAsCnD,WAAW,GAAG,MAAM,KAAG,MAAM,IAAI;mBAAJ,IAAI;EA4BnE;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,6BAOrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,6BAIlC,CAAC;AAEF;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,aAAa,SAAwB,GAAG,IAAI,CAMrF"}

package/dist/canvas/createCanvasInteractions.svelte.js

@@ -0,0 +1,95 @@
+import { isEventFromTextInput } from './createCanvasClipboard.svelte.js';
+/**
+ * Headless Svelte 5 rune managing canvas pan interactions (spacebar panning, trackpad pinch detection).
+ */
+export function createCanvasInteractions(options = {}) {
+    let isSpacebarPanning = $state.raw(false);
+    let trackpadDetected = $state.raw(false);
+    let toggledPanMode = false;
+    function handleKeyDown(event) {
+        if (event.key === ' ' || event.code === 'Space') {
+            if (isSpacebarPanning || isEventFromTextInput(event))
+                return;
+            isSpacebarPanning = true;
+            toggledPanMode = true;
+            options.onPanModeChange?.(true);
+            if (typeof document !== 'undefined') {
+                document.body.classList.add('cursor-grab');
+            }
+        }
+    }
+    function handleKeyUp(event) {
+        if (event.key === ' ' || event.code === 'Space') {
+            if (!isSpacebarPanning && !toggledPanMode)
+                return;
+            isSpacebarPanning = false;
+            toggledPanMode = false;
+            options.onPanModeChange?.(false);
+            if (typeof document !== 'undefined') {
+                document.body.classList.remove('cursor-grab');
+            }
+        }
+    }
+    function handleWheel(event) {
+        if (event.ctrlKey && !trackpadDetected) {
+            trackpadDetected = true;
+            options.onTrackpadDetected?.();
+        }
+    }
+    function attachListeners(target) {
+        const el = target ?? options.targetElement ?? (typeof window !== 'undefined' ? window : null);
+        if (!el)
+            return () => { };
+        el.addEventListener('keydown', handleKeyDown);
+        el.addEventListener('keyup', handleKeyUp);
+        el.addEventListener('wheel', handleWheel, { passive: true });
+        return () => {
+            el.removeEventListener('keydown', handleKeyDown);
+            el.removeEventListener('keyup', handleKeyUp);
+            el.removeEventListener('wheel', handleWheel);
+            if (typeof document !== 'undefined') {
+                document.body.classList.remove('cursor-grab');
+            }
+        };
+    }
+    return {
+        get isSpacebarPanning() {
+            return isSpacebarPanning;
+        },
+        get trackpadDetected() {
+            return trackpadDetected;
+        },
+        attachListeners,
+        destroy: attachListeners()
+    };
+}
+/**
+ * Default interaction configuration presets for SvelteFlow.
+ */
+export const defaultSvelteFlowPreset = {
+    snapGrid: [25, 25],
+    panOnDrag: [0, 1, 2, 3, 4],
+    panOnScroll: false,
+    selectionOnDrag: false,
+    colorMode: 'system',
+    multiSelectionKey: ['Shift', 'Meta']
+};
+/**
+ * Miro-compatible interaction preset (middle/right drag to pan, left drag to select).
+ */
+export const miroCompatiblePreset = {
+    ...defaultSvelteFlowPreset,
+    panOnDrag: [1, 2],
+    selectionOnDrag: true
+};
+/**
+ * Helper to ensure panels restore pointer events after selection rectangle releases.
+ */
+export function restorePanelPointerEvents(panelSelector = '.svelte-flow__panel') {
+    if (typeof document === 'undefined')
+        return;
+    const panels = document.querySelectorAll(panelSelector);
+    panels.forEach((panel) => {
+        panel.style.pointerEvents = 'auto';
+    });
+}

package/dist/canvas/createCanvasLayout.d.ts

@@ -0,0 +1,22 @@
+import { type XYPosition, type Rect } from '@xyflow/svelte';
+import type { CanvasNode, CanvasEdge, CanvasLayoutOptions } from './types.js';
+/**
+ * Calculates upper-left flow coordinate for an element to be centered in the viewport.
+ */
+export declare function getCenteredNodePosition(width: number | undefined, height: number | undefined, screenToFlowPosition: (position: XYPosition) => XYPosition, screenDimensions?: {
+    width: number;
+    height: number;
+}): XYPosition;
+/**
+ * Updates positions of nodes so their collective bounding box is centered in the current viewport.
+ */
+export declare function centerNodes<TNode extends CanvasNode = CanvasNode>(nodes: TNode[], screenToFlowPosition: (position: XYPosition) => XYPosition, getNodesBounds: (nodes: TNode[]) => Rect, screenDimensions?: {
+    width: number;
+    height: number;
+}): TNode[];
+/**
+ * Automatically calculates directed hierarchical layout of nodes and edges using Dagre.
+ */
+export declare function getLayoutedNodes<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(nodes: TNode[], edges: TEdge[], getNodesBounds: (nodes: TNode[]) => Rect, options?: CanvasLayoutOptions): TNode[];
+export { ensureLayout, placeBeside, estimateNodeSize, flowSide } from '@pixerate/editor/canvas';
+//# sourceMappingURL=createCanvasLayout.d.ts.map

package/dist/canvas/createCanvasLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasLayout.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasLayout.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,UAAU,EAAE,KAAK,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAE9E;;GAEG;AACH,wBAAgB,uBAAuB,CACtC,KAAK,oBAAI,EACT,MAAM,oBAAI,EACV,oBAAoB,EAAE,CAAC,QAAQ,EAAE,UAAU,KAAK,UAAU,EAC1D,gBAAgB,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAClD,UAAU,CAUZ;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAChE,KAAK,EAAE,KAAK,EAAE,EACd,oBAAoB,EAAE,CAAC,QAAQ,EAAE,UAAU,KAAK,UAAU,EAC1D,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,EACxC,gBAAgB,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAClD,KAAK,EAAE,CAyBT;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,KAAK,SAAS,UAAU,GAAG,UAAU,EAErC,KAAK,EAAE,KAAK,EAAE,EACd,KAAK,EAAE,KAAK,EAAE,EACd,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,EACxC,OAAO,GAAE,mBAAwB,GAC/B,KAAK,EAAE,CAiDT;AAGD,OAAO,EACN,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,MAAM,yBAAyB,CAAC"}

package/dist/canvas/createCanvasLayout.js

@@ -0,0 +1,76 @@
+import dagre from '@dagrejs/dagre';
+import { Position } from '@xyflow/svelte';
+/**
+ * Calculates upper-left flow coordinate for an element to be centered in the viewport.
+ */
+export function getCenteredNodePosition(width = 0, height = 0, screenToFlowPosition, screenDimensions) {
+    const rect = screenDimensions ?? (typeof document !== 'undefined'
+        ? { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }
+        : { width: 1920, height: 1080 });
+    const flowPos = screenToFlowPosition({ x: rect.width / 2, y: rect.height / 2 });
+    return {
+        x: flowPos.x - width / 2,
+        y: flowPos.y - height / 2
+    };
+}
+/**
+ * Updates positions of nodes so their collective bounding box is centered in the current viewport.
+ */
+export function centerNodes(nodes, screenToFlowPosition, getNodesBounds, screenDimensions) {
+    if (nodes.length === 0) {
+        return [];
+    }
+    const bounds = getNodesBounds(nodes);
+    const boundingBoxOrigin = { x: bounds.x, y: bounds.y };
+    const centeredPosition = getCenteredNodePosition(bounds.width, bounds.height, screenToFlowPosition, screenDimensions);
+    const deltaX = centeredPosition.x - boundingBoxOrigin.x;
+    const deltaY = centeredPosition.y - boundingBoxOrigin.y;
+    return nodes.map((node) => ({
+        ...node,
+        position: {
+            x: node.position.x + deltaX,
+            y: node.position.y + deltaY
+        }
+    }));
+}
+/**
+ * Automatically calculates directed hierarchical layout of nodes and edges using Dagre.
+ */
+export function getLayoutedNodes(nodes, edges, getNodesBounds, options = {}) {
+    if (nodes.length === 0)
+        return [];
+    const { direction = 'LR', ranksep = 100, nodesep = 25, defaultNodeWidth = 200, defaultNodeHeight = 200 } = options;
+    const isHorizontal = direction === 'LR' || direction === 'RL';
+    const bounds = getNodesBounds(nodes);
+    const dagreGraph = new dagre.graphlib.Graph();
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+    dagreGraph.setGraph({ rankdir: direction, ranksep, nodesep });
+    const nodeIds = new Set(nodes.map((node) => node.id));
+    nodes.forEach((node) => {
+        const nodeWidth = node.measured?.width ?? node.width ?? defaultNodeWidth;
+        const nodeHeight = node.measured?.height ?? node.height ?? defaultNodeHeight;
+        dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+    });
+    edges.forEach((edge) => {
+        if (nodeIds.has(edge.source) && nodeIds.has(edge.target)) {
+            dagreGraph.setEdge(edge.source, edge.target);
+        }
+    });
+    dagre.layout(dagreGraph);
+    return nodes.map((node) => {
+        const nodeWithPosition = dagreGraph.node(node.id);
+        const nodeWidth = node.measured?.width ?? node.width ?? defaultNodeWidth;
+        const nodeHeight = node.measured?.height ?? node.height ?? defaultNodeHeight;
+        return {
+            ...node,
+            targetPosition: isHorizontal ? Position.Left : Position.Top,
+            sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
+            position: {
+                x: bounds.x + (nodeWithPosition?.x ?? 0) - nodeWidth / 2,
+                y: bounds.y + (nodeWithPosition?.y ?? 0) - nodeHeight / 2
+            }
+        };
+    });
+}
+// Re-export incremental layout and collision-aware placement from core
+export { ensureLayout, placeBeside, estimateNodeSize, flowSide } from '@pixerate/editor/canvas';

package/dist/canvas/createCanvasMultiDrag.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { XYPosition } from '@xyflow/svelte';
+import type { CanvasNode } from './types.js';
+export interface MultiDragFollowerOffset {
+    deltaX: number;
+    deltaY: number;
+    originalPosition: XYPosition;
+    stackOffsetX: number;
+    stackOffsetY: number;
+    rotationDeg: number;
+}
+export interface MultiDragState {
+    leadId: string;
+    offsets: Record<string, MultiDragFollowerOffset>;
+    count: number;
+}
+export interface CreateCanvasMultiDragOptions {
+    /**
+     * Base horizontal fan-out offset per stacked follower card (default: 4px).
+     */
+    stackOffsetStepX?: number;
+    /**
+     * Base vertical fan-out offset per stacked follower card (default: 4px).
+     */
+    stackOffsetStepY?: number;
+    /**
+     * Alternating angular tilt in degrees for follower cards (default: [-2, 2.5, -3, 3]).
+     */
+    rotationAngles?: number[];
+    /**
+     * Base z-index for stacked cards during active dragging (default: 50).
+     */
+    baseZIndex?: number;
+}
+export interface FollowerTransform {
+    isFollower: boolean;
+    stackOffsetX: number;
+    stackOffsetY: number;
+    rotationDeg: number;
+    zIndex: number;
+}
+/**
+ * Headless Svelte 5 rune orchestrating multi-node drag operations with stacked visual fanning,
+ * dynamic z-index layering, and position restoration.
+ */
+export declare function createCanvasMultiDrag(options?: CreateCanvasMultiDragOptions): {
+    readonly dragState: MultiDragState | null;
+    readonly isMultiDrag: boolean;
+    readonly count: number;
+    readonly leadId: string | null;
+    startMultiDrag: (leadNodeId: string, selectedNodeIds: string[] | Set<string>, nodes: CanvasNode[] | Map<string, CanvasNode>) => MultiDragState | null;
+    getFollowerTransform: (nodeId: string) => FollowerTransform;
+    cancelMultiDrag: (applyRestore?: (restores: {
+        id: string;
+        originalPosition: XYPosition;
+    }[]) => void) => {
+        id: string;
+        originalPosition: XYPosition;
+    }[];
+    commitMultiDrag: () => void;
+};
+//# sourceMappingURL=createCanvasMultiDrag.svelte.d.ts.map

package/dist/canvas/createCanvasMultiDrag.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasMultiDrag.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasMultiDrag.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,uBAAuB;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,UAAU,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;IACjD,KAAK,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,4BAA4B;IAC5C;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,GAAE,4BAAiC;;;;;iCASlE,MAAM,mBACD,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,SAChC,UAAU,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KAC3C,cAAc,GAAG,IAAI;mCAiDc,MAAM,KAAG,iBAAiB;qCAyBhD,CAAC,QAAQ,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,gBAAgB,EAAE,UAAU,CAAA;KAAE,EAAE,KAAK,IAAI,KAC/E;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,gBAAgB,EAAE,UAAU,CAAA;KAAE,EAAE;2BAgBrB,IAAI;EAsBhC"}

package/dist/canvas/createCanvasMultiDrag.svelte.js

@@ -0,0 +1,105 @@
+/**
+ * Headless Svelte 5 rune orchestrating multi-node drag operations with stacked visual fanning,
+ * dynamic z-index layering, and position restoration.
+ */
+export function createCanvasMultiDrag(options = {}) {
+    const stepX = options.stackOffsetStepX ?? 4;
+    const stepY = options.stackOffsetStepY ?? 4;
+    const angles = options.rotationAngles ?? [-2, 2.5, -3, 3];
+    const baseZIndex = options.baseZIndex ?? 50;
+    let dragState = $state(null);
+    function startMultiDrag(leadNodeId, selectedNodeIds, nodes) {
+        const selectedSet = selectedNodeIds instanceof Set ? selectedNodeIds : new Set(selectedNodeIds);
+        if (selectedSet.size <= 1 || !selectedSet.has(leadNodeId)) {
+            dragState = null;
+            return null;
+        }
+        const nodeMap = nodes instanceof Map ? nodes : new Map(nodes.map((n) => [n.id, n]));
+        const leadNode = nodeMap.get(leadNodeId);
+        if (!leadNode) {
+            dragState = null;
+            return null;
+        }
+        const leadPos = leadNode.position ?? { x: 0, y: 0 };
+        const offsets = {};
+        let followerIndex = 0;
+        for (const id of selectedSet) {
+            if (id === leadNodeId)
+                continue;
+            const follower = nodeMap.get(id);
+            const fPos = follower?.position ?? { x: 0, y: 0 };
+            const angle = angles[followerIndex % angles.length];
+            offsets[id] = {
+                deltaX: fPos.x - leadPos.x,
+                deltaY: fPos.y - leadPos.y,
+                originalPosition: { ...fPos },
+                stackOffsetX: (followerIndex + 1) * stepX,
+                stackOffsetY: (followerIndex + 1) * stepY,
+                rotationDeg: angle
+            };
+            followerIndex++;
+        }
+        const state = {
+            leadId: leadNodeId,
+            offsets,
+            count: selectedSet.size
+        };
+        dragState = state;
+        return state;
+    }
+    function getFollowerTransform(nodeId) {
+        if (!dragState || !(nodeId in dragState.offsets)) {
+            return {
+                isFollower: false,
+                stackOffsetX: 0,
+                stackOffsetY: 0,
+                rotationDeg: 0,
+                zIndex: 0
+            };
+        }
+        const offset = dragState.offsets[nodeId];
+        const followerKeys = Object.keys(dragState.offsets);
+        const index = followerKeys.indexOf(nodeId);
+        return {
+            isFollower: true,
+            stackOffsetX: offset.stackOffsetX,
+            stackOffsetY: offset.stackOffsetY,
+            rotationDeg: offset.rotationDeg,
+            zIndex: baseZIndex - (index + 1)
+        };
+    }
+    function cancelMultiDrag(applyRestore) {
+        if (!dragState)
+            return [];
+        const restores = Object.entries(dragState.offsets).map(([id, offset]) => ({
+            id,
+            originalPosition: { ...offset.originalPosition }
+        }));
+        if (applyRestore) {
+            applyRestore(restores);
+        }
+        dragState = null;
+        return restores;
+    }
+    function commitMultiDrag() {
+        dragState = null;
+    }
+    return {
+        get dragState() {
+            return dragState;
+        },
+        get isMultiDrag() {
+            return Boolean(dragState && dragState.count > 1);
+        },
+        get count() {
+            return dragState ? dragState.count : 0;
+        },
+        get leadId() {
+            return dragState?.leadId ?? null;
+        },
+        startMultiDrag,
+        getFollowerTransform,
+        cancelMultiDrag,
+        commitMultiDrag
+    };
+}