@pixerate/editor-svelte 0.3.12 → 0.5.0

package/dist/canvas/index.js

@@ -0,0 +1,1197 @@
+// src/canvas/createCanvasGraph.svelte.ts
+import * as $ from "svelte/internal/client";
+import { cubicOut } from "svelte/easing";
+function calculateGraphDifferences(currentState, baselineState) {
+  const currentNodes = currentState.nodes ?? [];
+  const currentEdges = currentState.edges ?? [];
+  const baselineNodes = baselineState.nodes ?? [];
+  const baselineEdges = baselineState.edges ?? [];
+  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 };
+}
+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 };
+}
+function createCanvasGraph(options = {}) {
+  let nodes = $.state(options.initialNodes ?? []);
+  let edges = $.state(options.initialEdges ?? []);
+  function setNodes(newNodes, triggerCallback = true) {
+    $.set(nodes, newNodes);
+    if (triggerCallback) {
+      options.onNodesChange?.($.get(nodes));
+    }
+  }
+  function setEdges(newEdges, triggerCallback = true) {
+    $.set(edges, newEdges);
+    if (triggerCallback) {
+      options.onEdgesChange?.($.get(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
+      };
+      const targetNode = $.get(nodes).find((n) => n.id === node.id);
+      if (targetNode) {
+        targetNode.position = currentPos;
+      }
+      if (progress < 1) {
+        if (typeof requestAnimationFrame !== "undefined") {
+          requestAnimationFrame(step);
+        }
+      } else {
+        setNodes([...$.get(nodes)]);
+      }
+    }
+    step();
+  }
+  function addNodeOrNodes(nodeOrNodesToAdd, animateFromPosition, save = true) {
+    const toAdd = Array.isArray(nodeOrNodesToAdd) ? nodeOrNodesToAdd : [nodeOrNodesToAdd];
+    const existingMap = new Map($.get(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([...$.get(edges), edgeToAdd]);
+    if (save) options.onSave?.();
+  }
+  function addEdges(edgesToAdd, save = true) {
+    setEdges([...$.get(edges), ...edgesToAdd]);
+    if (save) options.onSave?.();
+  }
+  function removeNodes(nodesToRemove, save = true) {
+    const idsToRemove = new Set(nodesToRemove.map((n) => n.id));
+    setNodes($.get(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($.get(edges).filter((e) => !idsToRemove.has(e.id)));
+    if (save) options.onSave?.();
+  }
+  function replaceNode(oldNode, newNode, save = true, keepEdges = false) {
+    const result = replaceNodeInGraph($.get(nodes), $.get(edges), oldNode, newNode, keepEdges);
+    setNodes(result.nodes);
+    if (result.edges !== $.get(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: $.get(nodes), edges: $.get(edges) }, baseline);
+  }
+  return {
+    get nodes() {
+      return $.get(nodes);
+    },
+    set nodes(val) {
+      setNodes(val);
+    },
+    get edges() {
+      return $.get(edges);
+    },
+    set edges(val) {
+      setEdges(val);
+    },
+    setNodes,
+    setEdges,
+    addNodeOrNodes,
+    addEdge,
+    addEdges,
+    removeNodes,
+    removeEdges,
+    replaceNode,
+    addConnectedNodes,
+    animateNodePosition,
+    getDifferences
+  };
+}
+
+// src/canvas/createCanvasLayout.ts
+import dagre from "@dagrejs/dagre";
+import { Position } from "@xyflow/svelte";
+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
+  };
+}
+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
+    }
+  }));
+}
+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
+      }
+    };
+  });
+}
+
+// src/canvas/createCanvasClipboard.svelte.ts
+import * as $2 from "svelte/internal/client";
+import { tick } from "svelte";
+function isEventFromTextInput(event) {
+  const target = event.target;
+  if (!target) return false;
+  if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable || target.closest?.('[contenteditable="true"]') || target.closest?.(".ProseMirror")) {
+    return true;
+  }
+  return false;
+}
+function isValidCanvasNode(obj) {
+  return typeof obj === "object" && obj !== null && "id" in obj && typeof obj.id === "string" && "position" in obj && typeof obj.position === "object" && obj.position !== null && "x" in obj.position && "y" in obj.position;
+}
+function isValidUrl(url) {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function createCanvasClipboard(options = {}) {
+  function copySelectedNodes(selectedNodes, connectedEdges, event) {
+    if (event && isEventFromTextInput(event)) {
+      return false;
+    }
+    if (selectedNodes.length === 0) return false;
+    const payload = { version: 1, nodes: selectedNodes, edges: connectedEdges };
+    const serialized = JSON.stringify(payload);
+    if (event?.clipboardData) {
+      event.clipboardData.setData("application/json", serialized);
+      event.clipboardData.setData("text/plain", serialized);
+      event.preventDefault();
+    } else if (typeof navigator !== "undefined" && navigator.clipboard) {
+      navigator.clipboard.writeText(serialized).catch(() => {
+      });
+    }
+    return true;
+  }
+  function cutSelectedNodes(selectedNodes, connectedEdges, onRemove, event) {
+    if (event && isEventFromTextInput(event)) {
+      return false;
+    }
+    const copied = copySelectedNodes(selectedNodes, connectedEdges, event);
+    if (copied && onRemove) {
+      onRemove(selectedNodes);
+    }
+    return copied;
+  }
+  async function handlePasteEvent(event) {
+    if (isEventFromTextInput(event)) {
+      return false;
+    }
+    const clipboardData = event.clipboardData;
+    if (!clipboardData) return false;
+    const files = clipboardData.files;
+    if (files && files.length > 0) {
+      const imageFile = Array.from(files).find((f) => f.type.startsWith("image/"));
+      if (imageFile && options.onPasteImage) {
+        event.preventDefault();
+        await options.onPasteImage(imageFile);
+        return true;
+      }
+    }
+    const rawJson = clipboardData.getData("application/json") || clipboardData.getData("text/plain");
+    if (rawJson) {
+      try {
+        const parsed = JSON.parse(rawJson);
+        let rawNodes;
+        let rawEdges;
+        if (Array.isArray(parsed) && parsed.every(isValidCanvasNode)) {
+          rawNodes = parsed;
+        } else if (typeof parsed === "object" && parsed !== null && Array.isArray(parsed.nodes) && parsed.nodes.every(isValidCanvasNode)) {
+          rawNodes = parsed.nodes;
+          rawEdges = parsed.edges;
+        }
+        if (rawNodes && rawNodes.length > 0) {
+          event.preventDefault();
+          const idMap = /* @__PURE__ */ new Map();
+          const newNodes = rawNodes.map((node) => {
+            const newId = crypto.randomUUID();
+            idMap.set(node.id, newId);
+            return {
+              ...node,
+              id: newId,
+              selected: true,
+              position: { x: node.position.x + 40, y: node.position.y + 40 }
+            };
+          });
+          const newEdges = rawEdges?.map((edge) => ({
+            ...edge,
+            id: crypto.randomUUID(),
+            source: idMap.get(edge.source) ?? edge.source,
+            target: idMap.get(edge.target) ?? edge.target
+          }));
+          if (options.onPasteNodes) {
+            await options.onPasteNodes(newNodes, newEdges);
+            await tick();
+          }
+          return true;
+        }
+      } catch {
+      }
+    }
+    const text = clipboardData.getData("text/plain")?.trim();
+    if (text) {
+      if (isValidUrl(text) && options.onPasteUrl) {
+        event.preventDefault();
+        options.onPasteUrl(text);
+        return true;
+      } else if (options.onPasteText) {
+        event.preventDefault();
+        options.onPasteText(text);
+        return true;
+      }
+    }
+    return false;
+  }
+  return { copySelectedNodes, cutSelectedNodes, handlePasteEvent };
+}
+
+// src/canvas/createCanvasDocking.svelte.ts
+import * as $3 from "svelte/internal/client";
+function createCanvasDocking(options = {}) {
+  let draggedNode = $3.state(null);
+  let draggedInitialPosition = $3.state(null);
+  let connectingHandle = $3.state("");
+  let connectingNode = $3.state(null);
+  let currentHoverTargets = $3.state(/* @__PURE__ */ new Set());
+  const isDockTarget = options.isDockTarget ?? ((target) => target.type === "boardNode");
+  function handleNodeDragStart(params) {
+    $3.set(draggedNode, params.targetNode);
+    $3.set(draggedInitialPosition, params.targetNode?.position ? { ...params.targetNode.position } : null);
+    $3.set(currentHoverTargets, /* @__PURE__ */ new Set());
+  }
+  function handleNodeDrag(params, getIntersectingNodes) {
+    $3.set(draggedNode, params.targetNode);
+    if (!$3.get(draggedNode)) return;
+    const intersecting = getIntersectingNodes($3.get(draggedNode));
+    const currentDockTargets = intersecting.filter(isDockTarget);
+    const newHoverSet = new Set(currentDockTargets.map((t) => t.id));
+    $3.get(currentHoverTargets).forEach((targetId) => {
+      if (!newHoverSet.has(targetId)) {
+        const leftNode = intersecting.find((n) => n.id === targetId) ?? { id: targetId };
+        options.onDockLeave?.(leftNode, $3.get(draggedNode));
+      }
+    });
+    currentDockTargets.forEach((target) => {
+      if (!$3.get(currentHoverTargets).has(target.id)) {
+        options.onDockHover?.(target, $3.get(draggedNode));
+      }
+    });
+    $3.set(currentHoverTargets, newHoverSet);
+  }
+  function handleNodeDragStop(params, getIntersectingNodes, updateNodePosition) {
+    $3.set(draggedNode, params.targetNode);
+    if ($3.get(draggedNode)) {
+      const intersecting = getIntersectingNodes($3.get(draggedNode));
+      const dockTarget = intersecting.find(isDockTarget);
+      if (dockTarget) {
+        options.onDockDrop?.(dockTarget, $3.get(draggedNode));
+        if (options.restorePositionOnDock !== false && $3.get(draggedInitialPosition) && updateNodePosition) {
+          updateNodePosition($3.get(draggedNode).id, $3.get(draggedInitialPosition));
+        }
+      }
+    }
+    $3.set(draggedNode, null);
+    $3.set(draggedInitialPosition, null);
+    $3.set(currentHoverTargets, /* @__PURE__ */ new Set());
+    options.onSave?.();
+  }
+  function handleConnectStart(params, getNode) {
+    $3.set(connectingHandle, params.handleType ?? "");
+    $3.set(connectingNode, params.nodeId ? getNode(params.nodeId) ?? null : null);
+  }
+  function handleConnectEnd() {
+    $3.set(connectingHandle, "");
+    $3.set(connectingNode, null);
+  }
+  function reset() {
+    $3.set(draggedNode, null);
+    $3.set(draggedInitialPosition, null);
+    $3.set(connectingHandle, "");
+    $3.set(connectingNode, null);
+    $3.set(currentHoverTargets, /* @__PURE__ */ new Set());
+  }
+  return {
+    get draggedNode() {
+      return $3.get(draggedNode);
+    },
+    get draggedInitialPosition() {
+      return $3.get(draggedInitialPosition);
+    },
+    get connectingHandle() {
+      return $3.get(connectingHandle);
+    },
+    get connectingNode() {
+      return $3.get(connectingNode);
+    },
+    get isDragging() {
+      return $3.get(draggedNode) !== null;
+    },
+    handleNodeDragStart,
+    handleNodeDrag,
+    handleNodeDragStop,
+    handleConnectStart,
+    handleConnectEnd,
+    reset
+  };
+}
+
+// src/canvas/createCanvasShortcuts.ts
+function createCanvasShortcuts(options) {
+  const target = options.targetElement ?? (typeof window !== "undefined" ? window : null);
+  if (!target) return () => {
+  };
+  function handleKeyDown(event) {
+    const keyboardEvent = event;
+    if (isEventFromTextInput(keyboardEvent)) {
+      return;
+    }
+    const isMod = keyboardEvent.metaKey || keyboardEvent.ctrlKey;
+    const isShift = keyboardEvent.shiftKey;
+    const key = keyboardEvent.key;
+    const selectedNodes = options.getSelectedNodes ? options.getSelectedNodes() : [];
+    if (key === "Backspace" || key === "Delete") {
+      if (options.onDelete && selectedNodes.length > 0) {
+        keyboardEvent.preventDefault();
+        options.onDelete(selectedNodes);
+      }
+      return;
+    }
+    if (isMod) {
+      const lowerKey = key.toLowerCase();
+      if (lowerKey === "c" && !isShift) {
+        if (options.onCopy) {
+          options.onCopy();
+        }
+      } else if (lowerKey === "x" && !isShift) {
+        if (options.onCut) {
+          options.onCut();
+        }
+      } else if (lowerKey === "d" && !isShift) {
+        if (options.onDuplicate && selectedNodes.length > 0) {
+          keyboardEvent.preventDefault();
+          options.onDuplicate(selectedNodes);
+        }
+      } else if (lowerKey === "a" && !isShift) {
+        if (options.onSelectAll) {
+          keyboardEvent.preventDefault();
+          options.onSelectAll();
+        }
+      } else if (lowerKey === "g") {
+        if (isShift) {
+          if (options.onUngroup && selectedNodes.length > 0) {
+            keyboardEvent.preventDefault();
+            options.onUngroup(selectedNodes);
+          }
+        } else {
+          if (options.onGroup && selectedNodes.length > 0) {
+            keyboardEvent.preventDefault();
+            options.onGroup(selectedNodes);
+          }
+        }
+      } else if (key === "=" || key === "+") {
+        if (options.onZoomIn) {
+          keyboardEvent.preventDefault();
+          options.onZoomIn();
+        }
+      } else if (key === "-") {
+        if (options.onZoomOut) {
+          keyboardEvent.preventDefault();
+          options.onZoomOut();
+        }
+      } else if (key === "0") {
+        if (options.onFitView) {
+          keyboardEvent.preventDefault();
+          options.onFitView();
+        }
+      } else if (lowerKey === "f") {
+        if (options.onSearch) {
+          keyboardEvent.preventDefault();
+          options.onSearch();
+        }
+      }
+    }
+  }
+  target.addEventListener("keydown", handleKeyDown);
+  return () => {
+    target.removeEventListener("keydown", handleKeyDown);
+  };
+}
+
+// src/canvas/createCanvasInteractions.svelte.ts
+import * as $4 from "svelte/internal/client";
+function createCanvasInteractions(options = {}) {
+  let isSpacebarPanning = $4.state(false);
+  let trackpadDetected = $4.state(false);
+  let toggledPanMode = false;
+  function handleKeyDown(event) {
+    if (event.key === " " || event.code === "Space") {
+      if ($4.get(isSpacebarPanning) || isEventFromTextInput(event)) return;
+      $4.set(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 (!$4.get(isSpacebarPanning) && !toggledPanMode) return;
+      $4.set(isSpacebarPanning, false);
+      toggledPanMode = false;
+      options.onPanModeChange?.(false);
+      if (typeof document !== "undefined") {
+        document.body.classList.remove("cursor-grab");
+      }
+    }
+  }
+  function handleWheel(event) {
+    if (event.ctrlKey && !$4.get(trackpadDetected)) {
+      $4.set(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 $4.get(isSpacebarPanning);
+    },
+    get trackpadDetected() {
+      return $4.get(trackpadDetected);
+    },
+    attachListeners,
+    destroy: attachListeners()
+  };
+}
+var defaultSvelteFlowPreset = {
+  snapGrid: [25, 25],
+  panOnDrag: [0, 1, 2, 3, 4],
+  panOnScroll: false,
+  selectionOnDrag: false,
+  colorMode: "system",
+  multiSelectionKey: ["Shift", "Meta"]
+};
+var miroCompatiblePreset = {
+  ...defaultSvelteFlowPreset,
+  panOnDrag: [1, 2],
+  selectionOnDrag: true
+};
+function restorePanelPointerEvents(panelSelector = ".svelte-flow__panel") {
+  if (typeof document === "undefined") return;
+  const panels = document.querySelectorAll(panelSelector);
+  panels.forEach((panel) => {
+    panel.style.pointerEvents = "auto";
+  });
+}
+
+// src/canvas/createCanvasTrajectory.ts
+import { cubicOut as cubicOut2 } from "svelte/easing";
+var linearTrajectory = (origin, target, progress) => {
+  return {
+    position: {
+      x: origin.x + (target.x - origin.x) * progress,
+      y: origin.y + (target.y - origin.y) * progress
+    },
+    scale: progress,
+    opacity: Math.min(1, progress * 1.5)
+  };
+};
+function createFanOutTrajectory(options = {}) {
+  const {
+    curvature = 0.4,
+    startScale = 0,
+    endScale = 1,
+    startOpacity = 0,
+    endOpacity = 1
+  } = options;
+  return (origin, target, progress, index, total) => {
+    const dx = target.x - origin.x;
+    const dy = target.y - origin.y;
+    const normIndex = total > 1 ? (index - (total - 1) / 2) / ((total - 1) / 2) : 0;
+    const midX = origin.x + dx * 0.4;
+    const midY = origin.y + dy * 0.1 - normIndex * Math.abs(dx) * 0.15 * curvature;
+    const t = progress;
+    const oneMinusT = 1 - t;
+    const x = oneMinusT * oneMinusT * origin.x + 2 * oneMinusT * t * midX + t * t * target.x;
+    const y = oneMinusT * oneMinusT * origin.y + 2 * oneMinusT * t * midY + t * t * target.y;
+    const scale = startScale + (endScale - startScale) * progress;
+    const opacity = startOpacity + (endOpacity - startOpacity) * progress;
+    return {
+      position: { x, y },
+      scale,
+      opacity
+    };
+  };
+}
+function createBezierTrajectory(getControlPoint) {
+  return (origin, target, progress) => {
+    const cp = getControlPoint(origin, target);
+    const t = progress;
+    const oneMinusT = 1 - t;
+    const x = oneMinusT * oneMinusT * origin.x + 2 * oneMinusT * t * cp.x + t * t * target.x;
+    const y = oneMinusT * oneMinusT * origin.y + 2 * oneMinusT * t * cp.y + t * t * target.y;
+    return {
+      position: { x, y },
+      scale: progress,
+      opacity: progress
+    };
+  };
+}
+function runMultiNodeTransition(transitions, options = {}) {
+  if (transitions.length === 0) {
+    options.onComplete?.();
+    return () => {
+    };
+  }
+  const { defaultDuration = 400, defaultEasing = cubicOut2, onUpdate, onComplete } = options;
+  let isCancelled = false;
+  const startTime = Date.now();
+  const items = transitions.map((tr, i) => ({
+    ...tr,
+    index: tr.index ?? i,
+    total: tr.total ?? transitions.length,
+    duration: tr.duration ?? defaultDuration,
+    easing: tr.easing ?? defaultEasing,
+    delay: tr.delay ?? 0,
+    trajectory: tr.trajectory ?? linearTrajectory
+  }));
+  function frame() {
+    if (isCancelled) return;
+    const now = Date.now();
+    let allCompleted = true;
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const elapsed = now - (startTime + item.delay);
+      if (elapsed < 0) {
+        allCompleted = false;
+        continue;
+      }
+      const rawProgress = item.duration <= 0 ? 1 : Math.min(elapsed / item.duration, 1);
+      const progress = item.duration <= 0 ? 1 : item.easing(rawProgress);
+      const point = item.trajectory(item.from, item.to, progress, item.index, item.total);
+      item.node.position = { ...point.position };
+      if (point.scale !== void 0 || point.opacity !== void 0) {
+        if (!item.node.data) {
+          item.node.data = {};
+        }
+        if (point.scale !== void 0) {
+          item.node.data.scale = point.scale;
+        }
+        if (point.opacity !== void 0) {
+          item.node.data.opacity = point.opacity;
+        }
+      }
+      if (rawProgress < 1) {
+        allCompleted = false;
+      }
+    }
+    onUpdate?.();
+    if (!allCompleted) {
+      if (typeof requestAnimationFrame !== "undefined") {
+        requestAnimationFrame(frame);
+      }
+    } else {
+      onComplete?.();
+    }
+  }
+  frame();
+  return () => {
+    isCancelled = true;
+  };
+}
+
+// src/canvas/createCanvasDisplacement.ts
+import dagre2 from "@dagrejs/dagre";
+function computeNodesBoundingBox(nodes, defaultWidth = 200, defaultHeight = 60) {
+  if (nodes.length === 0) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const node of nodes) {
+    const width = node.measured?.width ?? node.width ?? defaultWidth;
+    const height = node.measured?.height ?? node.height ?? defaultHeight;
+    minX = Math.min(minX, node.position.x);
+    minY = Math.min(minY, node.position.y);
+    maxX = Math.max(maxX, node.position.x + width);
+    maxY = Math.max(maxY, node.position.y + height);
+  }
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+function calculateDirectionalDisplacement(params) {
+  const {
+    existingNodes,
+    originNode,
+    childNodes,
+    getNodesBounds,
+    options = {}
+  } = params;
+  const {
+    direction = "right",
+    gap = 40,
+    spreadSiblingLanes = false,
+    siblingTolerance = 50
+  } = options;
+  const displacedMap = /* @__PURE__ */ new Map();
+  if (childNodes.length === 0 || existingNodes.length === 0) {
+    return displacedMap;
+  }
+  const childBounds = getNodesBounds ? getNodesBounds(childNodes) : computeNodesBoundingBox(childNodes);
+  const originWidth = originNode.measured?.width ?? originNode.width ?? 200;
+  const originHeight = originNode.measured?.height ?? originNode.height ?? 60;
+  const deltaPrimary = direction === "right" || direction === "left" ? childBounds.width + gap : childBounds.height + gap;
+  for (const node of existingNodes) {
+    if (node.id === originNode.id) continue;
+    let newX = node.position.x;
+    let newY = node.position.y;
+    let moved = false;
+    if (direction === "right") {
+      if (node.position.x >= originNode.position.x + originWidth * 0.5) {
+        newX += deltaPrimary;
+        moved = true;
+      } else if (spreadSiblingLanes) {
+        const isVerticallyOverlapping = node.position.y + (node.height ?? 60) >= childBounds.y - gap && node.position.y <= childBounds.y + childBounds.height + gap;
+        if (isVerticallyOverlapping && Math.abs(node.position.x - originNode.position.x) <= siblingTolerance) {
+          const pushDirection = node.position.y >= originNode.position.y ? 1 : -1;
+          newY += pushDirection * (childBounds.height * 0.5 + gap);
+          moved = true;
+        }
+      }
+    } else if (direction === "left") {
+      if (node.position.x <= originNode.position.x) {
+        newX -= deltaPrimary;
+        moved = true;
+      }
+    } else if (direction === "down") {
+      if (node.position.y >= originNode.position.y + originHeight * 0.5) {
+        newY += deltaPrimary;
+        moved = true;
+      }
+    } else if (direction === "up") {
+      if (node.position.y <= originNode.position.y) {
+        newY -= deltaPrimary;
+        moved = true;
+      }
+    }
+    if (moved) {
+      displacedMap.set(node.id, { x: newX, y: newY });
+    }
+  }
+  return displacedMap;
+}
+function calculateReflowDisplacement(params) {
+  const {
+    existingNodes,
+    existingEdges,
+    originNode,
+    childNodes,
+    childEdges = [],
+    options = {}
+  } = params;
+  const {
+    direction = "LR",
+    ranksep = 80,
+    nodesep = 30,
+    defaultNodeWidth = 200,
+    defaultNodeHeight = 60
+  } = options;
+  const displacedMap = /* @__PURE__ */ new Map();
+  if (existingNodes.length === 0) return displacedMap;
+  const allNodes = [...existingNodes, ...childNodes];
+  const allEdges = [...existingEdges, ...childEdges];
+  const dagreGraph = new dagre2.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+  dagreGraph.setGraph({ rankdir: direction, ranksep, nodesep });
+  const allNodeIds = new Set(allNodes.map((n) => n.id));
+  allNodes.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 });
+  });
+  allEdges.forEach((edge) => {
+    if (allNodeIds.has(edge.source) && allNodeIds.has(edge.target)) {
+      dagreGraph.setEdge(edge.source, edge.target);
+    }
+  });
+  dagre2.layout(dagreGraph);
+  const dagreOrigin = dagreGraph.node(originNode.id);
+  if (!dagreOrigin) return displacedMap;
+  const originWidth = originNode.measured?.width ?? originNode.width ?? defaultNodeWidth;
+  const originHeight = originNode.measured?.height ?? originNode.height ?? defaultNodeHeight;
+  const anchorOffsetX = originNode.position.x - (dagreOrigin.x - originWidth / 2);
+  const anchorOffsetY = originNode.position.y - (dagreOrigin.y - originHeight / 2);
+  existingNodes.forEach((node) => {
+    if (node.id === originNode.id) return;
+    const dagreNode = dagreGraph.node(node.id);
+    if (!dagreNode) return;
+    const nodeWidth = node.measured?.width ?? node.width ?? defaultNodeWidth;
+    const nodeHeight = node.measured?.height ?? node.height ?? defaultNodeHeight;
+    const targetX = dagreNode.x - nodeWidth / 2 + anchorOffsetX;
+    const targetY = dagreNode.y - nodeHeight / 2 + anchorOffsetY;
+    if (Math.abs(targetX - node.position.x) > 0.5 || Math.abs(targetY - node.position.y) > 0.5) {
+      displacedMap.set(node.id, { x: targetX, y: targetY });
+    }
+  });
+  return displacedMap;
+}
+
+// src/canvas/createCanvasExplosion.svelte.ts
+import * as $5 from "svelte/internal/client";
+import { cubicOut as cubicOut3 } from "svelte/easing";
+function createCanvasExplosion(graph, options = {}) {
+  let explodedNodeIds = $5.state($5.proxy([]));
+  const snapshots = /* @__PURE__ */ new Map();
+  let activeAnimationCancel = null;
+  function isExploded(nodeId) {
+    return $5.get(explodedNodeIds).includes(nodeId);
+  }
+  function explodeNode(parentId, explodeOptions) {
+    if (isExploded(parentId)) {
+      return false;
+    }
+    const parentNode = graph.nodes.find((n) => n.id === parentId);
+    if (!parentNode) {
+      return false;
+    }
+    const {
+      childNodes,
+      childEdges = [],
+      connectParentToChildren = "all",
+      displacementStrategy = "directional",
+      directionalOptions = {},
+      reflowOptions = {},
+      trajectory,
+      duration = 500,
+      staggerDelay = 20,
+      easing = cubicOut3,
+      onComplete
+    } = explodeOptions;
+    if (childNodes.length === 0) {
+      return false;
+    }
+    let displacementMap;
+    if (displacementStrategy === "dagre") {
+      displacementMap = calculateReflowDisplacement({
+        existingNodes: graph.nodes,
+        existingEdges: graph.edges,
+        originNode: parentNode,
+        childNodes,
+        childEdges,
+        getNodesBounds: options.getNodesBounds,
+        options: { ...reflowOptions, direction: reflowOptions.direction ?? "LR" }
+      });
+    } else if (displacementStrategy === "none") {
+      displacementMap = /* @__PURE__ */ new Map();
+    } else {
+      displacementMap = calculateDirectionalDisplacement({
+        existingNodes: graph.nodes,
+        originNode: parentNode,
+        childNodes,
+        getNodesBounds: options.getNodesBounds,
+        options: directionalOptions
+      });
+    }
+    const displacedNodesSnapshot = Array.from(displacementMap.entries()).map(([id]) => {
+      const node = graph.nodes.find((n) => n.id === id);
+      return {
+        id,
+        originalPosition: { ...node?.position ?? { x: 0, y: 0 } }
+      };
+    });
+    const edgesToAdd = [...childEdges];
+    const defaultCreateEdge = (sourceId, targetId) => {
+      if (graph.createEdge) {
+        return graph.createEdge(sourceId, targetId);
+      }
+      return {
+        id: crypto.randomUUID(),
+        type: "default",
+        source: sourceId,
+        target: targetId
+      };
+    };
+    if (connectParentToChildren === "all" || connectParentToChildren === true) {
+      childNodes.forEach((child) => {
+        const exists = edgesToAdd.some((e) => e.source === parentId && e.target === child.id);
+        if (!exists) {
+          edgesToAdd.push(defaultCreateEdge(parentId, child.id));
+        }
+      });
+    } else if (connectParentToChildren === "first" && childNodes.length > 0) {
+      const firstChild = childNodes[0];
+      const exists = edgesToAdd.some((e) => e.source === parentId && e.target === firstChild.id);
+      if (!exists) {
+        edgesToAdd.push(defaultCreateEdge(parentId, firstChild.id));
+      }
+    }
+    const snapshot = {
+      parentId,
+      childNodeIds: childNodes.map((n) => n.id),
+      childEdgeIds: edgesToAdd.map((e) => e.id),
+      displacedNodes: displacedNodesSnapshot,
+      timestamp: Date.now()
+    };
+    snapshots.set(parentId, snapshot);
+    const originPos = { ...parentNode.position };
+    const targetPositions = childNodes.map((child) => ({ ...child.position }));
+    childNodes.forEach((child) => {
+      child.position = { ...originPos };
+      if (!child.data) child.data = {};
+      child.data.scale = 0;
+      child.data.opacity = 0;
+    });
+    graph.addNodeOrNodes(childNodes, void 0, false);
+    if (edgesToAdd.length > 0) {
+      graph.addEdges(edgesToAdd, false);
+    }
+    const chosenTrajectory = trajectory ?? createFanOutTrajectory({ curvature: 0.35 });
+    const transitions = [];
+    const effectiveStagger = duration === 0 ? 0 : staggerDelay;
+    childNodes.forEach((child, i) => {
+      transitions.push({
+        node: child,
+        from: originPos,
+        to: targetPositions[i],
+        trajectory: chosenTrajectory,
+        delay: i * effectiveStagger,
+        duration,
+        easing,
+        index: i,
+        total: childNodes.length
+      });
+    });
+    displacementMap.forEach((targetPos, nodeId) => {
+      const node = graph.nodes.find((n) => n.id === nodeId);
+      if (node) {
+        transitions.push({
+          node,
+          from: { ...node.position },
+          to: targetPos,
+          trajectory: linearTrajectory,
+          duration,
+          easing
+        });
+      }
+    });
+    if (activeAnimationCancel) {
+      activeAnimationCancel();
+    }
+    activeAnimationCancel = runMultiNodeTransition(transitions, {
+      defaultDuration: duration,
+      defaultEasing: easing,
+      onUpdate: () => {
+        graph.setNodes([...graph.nodes]);
+      },
+      onComplete: () => {
+        graph.setNodes([...graph.nodes]);
+        $5.set(explodedNodeIds, [...$5.get(explodedNodeIds), parentId], true);
+        activeAnimationCancel = null;
+        options.onSave?.();
+        graph.onSave?.();
+        onComplete?.();
+      }
+    });
+    return true;
+  }
+  function collapseNode(parentId, collapseOptions = {}) {
+    const snapshot = snapshots.get(parentId);
+    if (!snapshot) {
+      return false;
+    }
+    const parentNode = graph.nodes.find((n) => n.id === parentId);
+    if (!parentNode) {
+      return false;
+    }
+    const {
+      duration = 400,
+      staggerDelay = 15,
+      easing = cubicOut3,
+      trajectory,
+      onComplete
+    } = collapseOptions;
+    const childIdSet = new Set(snapshot.childNodeIds);
+    const activeChildNodes = graph.nodes.filter((n) => childIdSet.has(n.id));
+    const originPos = { ...parentNode.position };
+    const reverseTrajectory = trajectory ?? createFanOutTrajectory({
+      curvature: 0.2,
+      startScale: 1,
+      endScale: 0,
+      startOpacity: 1,
+      endOpacity: 0
+    });
+    const transitions = [];
+    const effectiveStagger = duration === 0 ? 0 : staggerDelay;
+    activeChildNodes.forEach((child, i) => {
+      transitions.push({
+        node: child,
+        from: { ...child.position },
+        to: originPos,
+        trajectory: reverseTrajectory,
+        delay: (activeChildNodes.length - 1 - i) * effectiveStagger,
+        duration,
+        easing,
+        index: i,
+        total: activeChildNodes.length
+      });
+    });
+    snapshot.displacedNodes.forEach(({ id, originalPosition }) => {
+      const node = graph.nodes.find((n) => n.id === id);
+      if (node) {
+        transitions.push({
+          node,
+          from: { ...node.position },
+          to: originalPosition,
+          trajectory: linearTrajectory,
+          duration,
+          easing
+        });
+      }
+    });
+    if (activeAnimationCancel) {
+      activeAnimationCancel();
+    }
+    activeAnimationCancel = runMultiNodeTransition(transitions, {
+      defaultDuration: duration,
+      defaultEasing: easing,
+      onUpdate: () => {
+        graph.setNodes([...graph.nodes]);
+      },
+      onComplete: () => {
+        graph.removeNodes(activeChildNodes, false);
+        const edgeIdSet = new Set(snapshot.childEdgeIds);
+        const edgesToRemove = graph.edges.filter((e) => edgeIdSet.has(e.id));
+        if (edgesToRemove.length > 0) {
+          graph.removeEdges(edgesToRemove, false);
+        }
+        snapshots.delete(parentId);
+        $5.set(explodedNodeIds, $5.get(explodedNodeIds).filter((id) => id !== parentId), true);
+        activeAnimationCancel = null;
+        options.onSave?.();
+        graph.onSave?.();
+        onComplete?.();
+      }
+    });
+    return true;
+  }
+  function toggleExplode(parentId, explodeOptions, collapseOptions) {
+    if (isExploded(parentId)) {
+      return collapseNode(parentId, collapseOptions);
+    }
+    return explodeNode(parentId, explodeOptions);
+  }
+  function getSnapshot(parentId) {
+    return snapshots.get(parentId);
+  }
+  return {
+    get explodedNodeIds() {
+      return $5.get(explodedNodeIds);
+    },
+    isExploded,
+    explodeNode,
+    collapseNode,
+    toggleExplode,
+    getSnapshot
+  };
+}
+export {
+  calculateDirectionalDisplacement,
+  calculateGraphDifferences,
+  calculateReflowDisplacement,
+  centerNodes,
+  computeNodesBoundingBox,
+  createBezierTrajectory,
+  createCanvasClipboard,
+  createCanvasDocking,
+  createCanvasExplosion,
+  createCanvasGraph,
+  createCanvasInteractions,
+  createCanvasShortcuts,
+  createFanOutTrajectory,
+  defaultSvelteFlowPreset,
+  getCenteredNodePosition,
+  getLayoutedNodes,
+  isEventFromTextInput,
+  isValidCanvasNode,
+  isValidUrl,
+  linearTrajectory,
+  miroCompatiblePreset,
+  replaceNodeInGraph,
+  restorePanelPointerEvents,
+  runMultiNodeTransition
+};
+//# sourceMappingURL=index.js.map