@pixerate/editor-svelte 0.10.0 → 0.11.0

package/dist/canvas/index.d.ts

@@ -93,6 +93,7 @@ export interface CanvasInteractionPresetConfig {
   multiSelectionKey?: string[];
   minZoom?: number;
   maxZoom?: number;
+  selectionMode?: 'partial' | 'full';
 }
 
 /**
@@ -571,3 +572,117 @@ export declare function createCanvasExplosion<
   getSnapshot(parentId: string): ExplosionSnapshot<TNode, TEdge> | undefined;
 };
 
+export interface HandleConfig {
+  id?: string | null;
+  type: 'source' | 'target';
+  position: any;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+}
+
+export interface NodeMeasurement {
+  width: number;
+  height: number;
+}
+
+export declare function preserveNodeMeasurements<TNode extends CanvasNode = CanvasNode>(
+  newNodes: TNode[],
+  existingNodes: TNode[] | Map<string, TNode>
+): TNode[];
+
+export declare function normalizeNodeHandles<TNode extends CanvasNode = CanvasNode>(
+  node: TNode,
+  handles?: HandleConfig[]
+): TNode;
+
+export interface CreateCanvasNodeSyncOptions<
+  TItem,
+  TNode extends CanvasNode = CanvasNode,
+  TEdge extends CanvasEdge = CanvasEdge
+> {
+  items: () => TItem[];
+  toNode: (
+    item: TItem,
+    index: number,
+    context: { existingNode?: TNode; prevNodesMap: Map<string, TNode> }
+  ) => TNode;
+  toEdges?: (items: TItem[], nodes: TNode[]) => TEdge[];
+  defaultHandles?: (node: TNode) => HandleConfig[] | undefined;
+}
+
+export declare function createCanvasNodeSync<
+  TItem,
+  TNode extends CanvasNode = CanvasNode,
+  TEdge extends CanvasEdge = CanvasEdge
+>(options: CreateCanvasNodeSyncOptions<TItem, TNode, TEdge>): {
+  nodes: TNode[];
+  edges: TEdge[];
+  updateNodeMeasurements(id: string, width: number, height: number): void;
+};
+
+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 {
+  stackOffsetStepX?: number;
+  stackOffsetStepY?: number;
+  rotationAngles?: number[];
+  baseZIndex?: number;
+}
+
+export interface FollowerTransform {
+  isFollower: boolean;
+  stackOffsetX: number;
+  stackOffsetY: number;
+  rotationDeg: number;
+  zIndex: number;
+}
+
+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;
+};
+
+export interface CanvasSelectionOptions {
+  isSpacebarPanning?: boolean;
+  selectionMode?: 'partial' | 'full';
+  multiSelectionKey?: string[];
+}
+
+export declare function getMarqueeSelectionPreset(
+  options?: CanvasSelectionOptions
+): CanvasInteractionPresetConfig;
+
+export declare function handleDeselectOnEscape(
+  event: KeyboardEvent,
+  onDeselect: () => void
+): boolean;
+
+export declare const FloatingHorizontalScrollbar: any;
+

package/dist/canvas/index.js

@@ -279,8 +279,8 @@ function getLayoutedNodes(nodes, edges, getNodesBounds, options = {}) {
 // src/canvas/createCanvasClipboard.svelte.ts
 import * as $2 from "svelte/internal/client";
 import { tick } from "svelte";
-function isEventFromTextInput(event) {
-  const target = event.target;
+function isEventFromTextInput(event2) {
+  const target = event2.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;
@@ -299,44 +299,44 @@ function isValidUrl(url) {
   }
 }
 function createCanvasClipboard(options = {}) {
-  function copySelectedNodes(selectedNodes, connectedEdges, event) {
-    if (event && isEventFromTextInput(event)) {
+  function copySelectedNodes(selectedNodes, connectedEdges, event2) {
+    if (event2 && isEventFromTextInput(event2)) {
       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();
+    if (event2?.clipboardData) {
+      event2.clipboardData.setData("application/json", serialized);
+      event2.clipboardData.setData("text/plain", serialized);
+      event2.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)) {
+  function cutSelectedNodes(selectedNodes, connectedEdges, onRemove, event2) {
+    if (event2 && isEventFromTextInput(event2)) {
       return false;
     }
-    const copied = copySelectedNodes(selectedNodes, connectedEdges, event);
+    const copied = copySelectedNodes(selectedNodes, connectedEdges, event2);
     if (copied && onRemove) {
       onRemove(selectedNodes);
     }
     return copied;
   }
-  async function handlePasteEvent(event) {
-    if (isEventFromTextInput(event)) {
+  async function handlePasteEvent(event2) {
+    if (isEventFromTextInput(event2)) {
       return false;
     }
-    const clipboardData = event.clipboardData;
+    const clipboardData = event2.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();
+        event2.preventDefault();
         await options.onPasteImage(imageFile);
         return true;
       }
@@ -354,7 +354,7 @@ function createCanvasClipboard(options = {}) {
           rawEdges = parsed.edges;
         }
         if (rawNodes && rawNodes.length > 0) {
-          event.preventDefault();
+          event2.preventDefault();
           const idMap = /* @__PURE__ */ new Map();
           const newNodes = rawNodes.map((node) => {
             const newId = crypto.randomUUID();
@@ -384,11 +384,11 @@ function createCanvasClipboard(options = {}) {
     const text = clipboardData.getData("text/plain")?.trim();
     if (text) {
       if (isValidUrl(text) && options.onPasteUrl) {
-        event.preventDefault();
+        event2.preventDefault();
         options.onPasteUrl(text);
         return true;
       } else if (options.onPasteText) {
-        event.preventDefault();
+        event2.preventDefault();
         options.onPasteText(text);
         return true;
       }
@@ -421,19 +421,19 @@ function getOverlapArea(rectA, rectB) {
   const yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y));
   return xOverlap * yOverlap;
 }
-function resolvePrimaryTarget(targets, draggedNode, strategy, customResolver, event) {
+function resolvePrimaryTarget(targets, draggedNode, strategy, customResolver, event2) {
   if (targets.length === 0) return null;
   if (targets.length === 1) return targets[0];
   if (customResolver) {
-    const resolved = customResolver(targets, draggedNode, event);
+    const resolved = customResolver(targets, draggedNode, event2);
     if (resolved !== void 0) return resolved;
   }
   if (strategy === "first") {
     return targets[0];
   }
-  if (strategy === "pointer" && event) {
-    const clientX = "clientX" in event ? event.clientX : event.touches?.[0]?.clientX;
-    const clientY = "clientY" in event ? event.clientY : event.touches?.[0]?.clientY;
+  if (strategy === "pointer" && event2) {
+    const clientX = "clientX" in event2 ? event2.clientX : event2.touches?.[0]?.clientX;
+    const clientY = "clientY" in event2 ? event2.clientY : event2.touches?.[0]?.clientY;
     if (typeof clientX === "number" && typeof clientY === "number") {
       const pointerInside = targets.filter((target) => {
         const r = getNodeRect(target);
@@ -596,8 +596,8 @@ function createCanvasShortcuts(options) {
   const target = options.targetElement ?? (typeof window !== "undefined" ? window : null);
   if (!target) return () => {
   };
-  function handleKeyDown(event) {
-    const keyboardEvent = event;
+  function handleKeyDown(event2) {
+    const keyboardEvent = event2;
     if (isEventFromTextInput(keyboardEvent)) {
       return;
     }
@@ -679,9 +679,9 @@ 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;
+  function handleKeyDown(event2) {
+    if (event2.key === " " || event2.code === "Space") {
+      if ($4.get(isSpacebarPanning) || isEventFromTextInput(event2)) return;
       $4.set(isSpacebarPanning, true);
       toggledPanMode = true;
       options.onPanModeChange?.(true);
@@ -690,8 +690,8 @@ function createCanvasInteractions(options = {}) {
       }
     }
   }
-  function handleKeyUp(event) {
-    if (event.key === " " || event.code === "Space") {
+  function handleKeyUp(event2) {
+    if (event2.key === " " || event2.code === "Space") {
       if (!$4.get(isSpacebarPanning) && !toggledPanMode) return;
       $4.set(isSpacebarPanning, false);
       toggledPanMode = false;
@@ -701,8 +701,8 @@ function createCanvasInteractions(options = {}) {
       }
     }
   }
-  function handleWheel(event) {
-    if (event.ctrlKey && !$4.get(trackpadDetected)) {
+  function handleWheel(event2) {
+    if (event2.ctrlKey && !$4.get(trackpadDetected)) {
       $4.set(trackpadDetected, true);
       options.onTrackpadDetected?.();
     }
@@ -1380,7 +1380,290 @@ function createCanvasExplosion(graph, options = {}) {
     getSnapshot
   };
 }
+
+// src/canvas/createCanvasNodeSync.svelte.ts
+import * as $6 from "svelte/internal/client";
+import { untrack } from "svelte";
+function preserveNodeMeasurements(newNodes, existingNodes) {
+  const map = existingNodes instanceof Map ? existingNodes : new Map(existingNodes.map((n) => [n.id, n]));
+  for (const node of newNodes) {
+    const prev = map.get(node.id);
+    if (prev && prev.measured) {
+      node.measured = { ...prev.measured };
+    }
+  }
+  return newNodes;
+}
+function normalizeNodeHandles(node, handles = []) {
+  node.handles = handles;
+  return node;
+}
+function createCanvasNodeSync(options) {
+  let nodes = $6.state($6.proxy([]));
+  let edges = $6.state($6.proxy([]));
+  $6.user_pre_effect(() => {
+    const rawItems = options.items();
+    const existingNodesMap = untrack(() => new Map($6.get(nodes).map((n) => [n.id, n])));
+    const newNodes = rawItems.map((item, index) => {
+      const existing = existingNodesMap.get(item?.id);
+      const node = options.toNode(item, index, { existingNode: existing, prevNodesMap: existingNodesMap });
+      if (existing && existing.measured && !node.measured) {
+        node.measured = { ...existing.measured };
+      }
+      if (options.defaultHandles && !node.handles) {
+        const handles = options.defaultHandles(node);
+        if (handles) {
+          node.handles = handles;
+        }
+      }
+      return node;
+    });
+    const newEdges = options.toEdges ? options.toEdges(rawItems, newNodes) : [];
+    $6.set(nodes, newNodes, true);
+    $6.set(edges, newEdges, true);
+  });
+  return {
+    get nodes() {
+      return $6.get(nodes);
+    },
+    set nodes(value) {
+      $6.set(nodes, value, true);
+    },
+    get edges() {
+      return $6.get(edges);
+    },
+    set edges(value) {
+      $6.set(edges, value, true);
+    },
+    updateNodeMeasurements(id, width, height) {
+      const node = $6.get(nodes).find((n) => n.id === id);
+      if (node) {
+        node.measured = { width, height };
+      }
+    }
+  };
+}
+
+// src/canvas/createCanvasMultiDrag.svelte.ts
+import * as $7 from "svelte/internal/client";
+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 = $7.state(null);
+  function startMultiDrag(leadNodeId, selectedNodeIds, nodes) {
+    const selectedSet = selectedNodeIds instanceof Set ? selectedNodeIds : new Set(selectedNodeIds);
+    if (selectedSet.size <= 1 || !selectedSet.has(leadNodeId)) {
+      $7.set(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) {
+      $7.set(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 state8 = { leadId: leadNodeId, offsets, count: selectedSet.size };
+    $7.set(dragState, state8, true);
+    return state8;
+  }
+  function getFollowerTransform(nodeId) {
+    if (!$7.get(dragState) || !(nodeId in $7.get(dragState).offsets)) {
+      return {
+        isFollower: false,
+        stackOffsetX: 0,
+        stackOffsetY: 0,
+        rotationDeg: 0,
+        zIndex: 0
+      };
+    }
+    const offset = $7.get(dragState).offsets[nodeId];
+    const followerKeys = Object.keys($7.get(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 (!$7.get(dragState)) return [];
+    const restores = Object.entries($7.get(dragState).offsets).map(([id, offset]) => ({ id, originalPosition: { ...offset.originalPosition } }));
+    if (applyRestore) {
+      applyRestore(restores);
+    }
+    $7.set(dragState, null);
+    return restores;
+  }
+  function commitMultiDrag() {
+    $7.set(dragState, null);
+  }
+  return {
+    get dragState() {
+      return $7.get(dragState);
+    },
+    get isMultiDrag() {
+      return Boolean($7.get(dragState) && $7.get(dragState).count > 1);
+    },
+    get count() {
+      return $7.get(dragState) ? $7.get(dragState).count : 0;
+    },
+    get leadId() {
+      return $7.get(dragState)?.leadId ?? null;
+    },
+    startMultiDrag,
+    getFollowerTransform,
+    cancelMultiDrag,
+    commitMultiDrag
+  };
+}
+
+// src/canvas/createCanvasSelection.svelte.ts
+import * as $8 from "svelte/internal/client";
+function getMarqueeSelectionPreset(options = {}) {
+  const isSpacebarPanning = options.isSpacebarPanning ?? false;
+  return {
+    snapGrid: [25, 25],
+    panOnDrag: isSpacebarPanning ? [0, 1, 2] : [1, 2],
+    panOnScroll: false,
+    selectionOnDrag: !isSpacebarPanning,
+    colorMode: "system",
+    multiSelectionKey: options.multiSelectionKey ?? ["Shift", "Meta"],
+    selectionMode: options.selectionMode ?? "partial"
+  };
+}
+function handleDeselectOnEscape(event2, onDeselect) {
+  if (event2.key === "Escape" || event2.code === "Escape") {
+    onDeselect();
+    return true;
+  }
+  return false;
+}
+
+// src/canvas/FloatingHorizontalScrollbar.svelte
+import "svelte/internal/disclose-version";
+import * as $9 from "svelte/internal/client";
+import { onMount } from "svelte";
+var root = $9.from_html(`<div class="fixed bottom-0 z-50 overflow-x-auto overflow-y-hidden border-t border-border/40 bg-background/80 shadow-md backdrop-blur-sm transition-opacity duration-150" role="scrollbar" aria-orientation="horizontal"><div></div></div>`);
+function FloatingHorizontalScrollbar($$anchor, $$props) {
+  $9.push($$props, true);
+  let targetElement = $9.prop($$props, "targetElement", 7, null), totalWidth = $9.prop($$props, "totalWidth", 3, 1e3), minHeightAboveFold = $9.prop($$props, "minHeightAboveFold", 3, 80);
+  let scrollbarRef = $9.state(null);
+  let isVisible = $9.state(false);
+  let barLeft = $9.state(0);
+  let barWidth = $9.state(0);
+  let isSyncing = false;
+  function updateMetrics() {
+    if (!targetElement()) {
+      $9.set(isVisible, false);
+      return;
+    }
+    const rect = targetElement().getBoundingClientRect();
+    const hasHorizontalOverflow = targetElement().scrollWidth > targetElement().clientWidth;
+    const isTopInView = rect.top < window.innerHeight;
+    const isBottomBelowViewport = rect.bottom > window.innerHeight;
+    const isBottomAboveTop = rect.bottom > minHeightAboveFold();
+    const shouldShow = hasHorizontalOverflow && isTopInView && isBottomBelowViewport && isBottomAboveTop;
+    $9.set(isVisible, shouldShow, true);
+    if (shouldShow) {
+      const left = Math.max(0, rect.left);
+      const right = Math.min(window.innerWidth, rect.right);
+      $9.set(barLeft, left, true);
+      $9.set(barWidth, Math.max(0, right - left), true);
+      if ($9.get(scrollbarRef) && Math.abs($9.get(scrollbarRef).scrollLeft - targetElement().scrollLeft) > 1) {
+        isSyncing = true;
+        $9.get(scrollbarRef).scrollLeft = targetElement().scrollLeft;
+        requestAnimationFrame(() => {
+          isSyncing = false;
+        });
+      }
+    }
+  }
+  function handleFloatingScroll() {
+    if (!$9.get(scrollbarRef) || !targetElement() || isSyncing) return;
+    isSyncing = true;
+    targetElement().scrollLeft = $9.get(scrollbarRef).scrollLeft;
+    requestAnimationFrame(() => {
+      isSyncing = false;
+    });
+  }
+  onMount(() => {
+    updateMetrics();
+    const onScrollOrResize = () => {
+      updateMetrics();
+    };
+    window.addEventListener("scroll", onScrollOrResize, { passive: true });
+    window.addEventListener("resize", onScrollOrResize, { passive: true });
+    const target = targetElement();
+    if (target) {
+      target.addEventListener("scroll", onScrollOrResize, { passive: true });
+    }
+    return () => {
+      window.removeEventListener("scroll", onScrollOrResize);
+      window.removeEventListener("resize", onScrollOrResize);
+      if (target) {
+        target.removeEventListener("scroll", onScrollOrResize);
+      }
+    };
+  });
+  $9.user_effect(() => {
+    if (targetElement()) {
+      updateMetrics();
+    }
+  });
+  var fragment = $9.comment();
+  var node = $9.first_child(fragment);
+  {
+    var consequent = ($$anchor2) => {
+      var div = root();
+      $9.set_attribute(div, "aria-valuemin", 0);
+      var div_1 = $9.only_child(div);
+      $9.bind_this(div, ($$value) => $9.set(scrollbarRef, $$value), () => $9.get(scrollbarRef));
+      $9.template_effect(
+        ($0) => {
+          $9.set_style(div, `left: ${$9.get(barLeft) ?? ""}px; width: ${$9.get(barWidth) ?? ""}px; height: 14px;`);
+          $9.set_attribute(div, "aria-controls", targetElement()?.id);
+          $9.set_attribute(div, "aria-valuenow", targetElement()?.scrollLeft ?? 0);
+          $9.set_attribute(div, "aria-valuemax", (targetElement()?.scrollWidth ?? totalWidth()) - (targetElement()?.clientWidth ?? 0));
+          $9.set_style(div_1, `width: ${$0 ?? ""}px; height: 1px;`);
+        },
+        [
+          () => Math.max(totalWidth(), targetElement()?.scrollWidth ?? 0)
+        ]
+      );
+      $9.event("scroll", div, handleFloatingScroll);
+      $9.append($$anchor2, div);
+    };
+    $9.if(node, ($$render) => {
+      if ($9.get(isVisible)) $$render(consequent);
+    });
+  }
+  $9.append($$anchor, fragment);
+  $9.pop();
+}
 export {
+  FloatingHorizontalScrollbar,
   calculateDirectionalDisplacement,
   calculateGraphDifferences,
   calculateReflowDisplacement,
@@ -1392,17 +1675,23 @@ export {
   createCanvasExplosion,
   createCanvasGraph,
   createCanvasInteractions,
+  createCanvasMultiDrag,
+  createCanvasNodeSync,
   createCanvasShortcuts,
   createFanOutTrajectory,
   defaultSvelteFlowPreset,
   getCenteredNodePosition,
   getLayoutedNodes,
+  getMarqueeSelectionPreset,
+  handleDeselectOnEscape,
   isEventFromTextInput,
   isValidCanvasNode,
   isValidUrl,
   linearPositionTrajectory,
   linearTrajectory,
   miroCompatiblePreset,
+  normalizeNodeHandles,
+  preserveNodeMeasurements,
   replaceNodeInGraph,
   restorePanelPointerEvents,
   runMultiNodeTransition