@pixerate/editor-svelte 0.3.11 → 0.4.0

package/dist/canvas/index.js

@@ -0,0 +1,672 @@
+// 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";
+  });
+}
+export {
+  calculateGraphDifferences,
+  centerNodes,
+  createCanvasClipboard,
+  createCanvasDocking,
+  createCanvasGraph,
+  createCanvasInteractions,
+  createCanvasShortcuts,
+  defaultSvelteFlowPreset,
+  getCenteredNodePosition,
+  getLayoutedNodes,
+  isEventFromTextInput,
+  isValidCanvasNode,
+  isValidUrl,
+  miroCompatiblePreset,
+  replaceNodeInGraph,
+  restorePanelPointerEvents
+};
+//# sourceMappingURL=index.js.map