@pixerate/editor-svelte 0.4.0 → 0.5.1

package/dist/canvas/index.js

@@ -651,22 +651,578 @@ function restorePanelPointerEvents(panelSelector = ".svelte-flow__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,
+    minY
+  } = 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;
+  const deltaUp = Math.max(0, originNode.position.y - childBounds.y + gap);
+  let deltaDown = Math.max(
+    0,
+    childBounds.y + childBounds.height - (originNode.position.y + originHeight) + gap
+  );
+  let effectiveDeltaUp = deltaUp;
+  if (direction === "vertical" && minY !== void 0 && deltaUp > 0) {
+    const aboveNodes = existingNodes.filter(
+      (n) => n.id !== originNode.id && n.position.y < originNode.position.y
+    );
+    if (aboveNodes.length > 0) {
+      const minAboveY = Math.min(...aboveNodes.map((n) => n.position.y));
+      const maxAllowedUp = Math.max(0, minAboveY - minY);
+      effectiveDeltaUp = Math.min(deltaUp, maxAllowedUp);
+      const unmetUp = deltaUp - effectiveDeltaUp;
+      deltaDown += unmetUp;
+    }
+  }
+  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;
+      }
+    } else if (direction === "vertical") {
+      if (node.position.y < originNode.position.y) {
+        if (effectiveDeltaUp > 0) {
+          newY -= effectiveDeltaUp;
+          moved = true;
+        }
+      } else if (node.position.y >= originNode.position.y + originHeight * 0.5) {
+        if (deltaDown > 0) {
+          newY += deltaDown;
+          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
+  restorePanelPointerEvents,
+  runMultiNodeTransition
 };
 //# sourceMappingURL=index.js.map