@particle-academy/fancy-flow 0.19.0 → 0.20.0

package/dist/index.cjs

@@ -4871,6 +4871,28 @@ var addEdge = (edgeParams, edges, options = {}) => {
   }
   return edges.concat(edge);
 };
+var reconnectEdge = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
+  const { id: oldEdgeId, ...rest } = oldEdge;
+  if (!newConnection.source || !newConnection.target) {
+    options.onError?.("006", errorMessages["error006"]());
+    return edges;
+  }
+  const foundEdge = edges.find((e) => e.id === oldEdge.id);
+  if (!foundEdge) {
+    options.onError?.("007", errorMessages["error007"](oldEdgeId));
+    return edges;
+  }
+  const edgeIdGenerator = options.getEdgeId || getEdgeId;
+  const edge = {
+    ...rest,
+    id: options.shouldReplaceId ? edgeIdGenerator(newConnection) : oldEdgeId,
+    source: newConnection.source,
+    target: newConnection.target,
+    sourceHandle: newConnection.sourceHandle,
+    targetHandle: newConnection.targetHandle
+  };
+  return edges.filter((e) => e.id !== oldEdgeId).concat(edge);
+};
 function getStraightPath({ sourceX, sourceY, targetX, targetY }) {
   const [labelX, labelY, offsetX, offsetY] = getEdgeCenter({
     sourceX,
@@ -7509,6 +7531,12 @@ function addEdge2(edgeParams, edges, options = {}) {
     onError: options.onError ?? defaultOnError
   });
 }
+function reconnectEdge2(oldEdge, newConnection, edges, options = { shouldReplaceId: true }) {
+  return reconnectEdge(oldEdge, newConnection, edges, {
+    ...options,
+    onError: options.onError ?? defaultOnError
+  });
+}
 var isNode = (element) => isNodeBase(element);
 var isEdge = (element) => isEdgeBase(element);
 function fixedForwardRef(render) {
@@ -11523,6 +11551,65 @@ function duplicateNode(node, id2, offset = 40) {
     data: JSON.parse(JSON.stringify(node.data ?? {}))
   };
 }
+function cloneSubgraph(nodes, edges, opts) {
+  const offset = opts.offset ?? 40;
+  const idMap = /* @__PURE__ */ new Map();
+  for (const n of nodes) idMap.set(n.id, opts.makeId());
+  const clonedNodes = nodes.map((n) => {
+    const cloned = duplicateNode(n, idMap.get(n.id), offset);
+    const parentId = n.parentId;
+    if (parentId && idMap.has(parentId)) cloned.parentId = idMap.get(parentId);
+    else if (parentId) delete cloned.parentId;
+    return cloned;
+  });
+  const clonedEdges = edges.filter((e) => idMap.has(e.source) && idMap.has(e.target)).map((e) => ({ ...e, id: opts.makeId(), source: idMap.get(e.source), target: idMap.get(e.target) }));
+  return { nodes: clonedNodes, edges: clonedEdges, idMap };
+}
+function reconnectEdge3(edges, oldEdge, newConnection) {
+  return reconnectEdge2(oldEdge, newConnection, edges, { shouldReplaceId: false });
+}
+var nodeW = (n) => n.width ?? n.measured?.width ?? 0;
+var nodeH = (n) => n.height ?? n.measured?.height ?? 0;
+function alignNodes(nodes, edge) {
+  if (nodes.length < 2) return nodes;
+  const minL = Math.min(...nodes.map((n) => n.position.x));
+  const maxR = Math.max(...nodes.map((n) => n.position.x + nodeW(n)));
+  const minT = Math.min(...nodes.map((n) => n.position.y));
+  const maxB = Math.max(...nodes.map((n) => n.position.y + nodeH(n)));
+  const cx = (minL + maxR) / 2;
+  const cy = (minT + maxB) / 2;
+  return nodes.map((n) => {
+    let { x, y } = n.position;
+    if (edge === "left") x = minL;
+    else if (edge === "right") x = maxR - nodeW(n);
+    else if (edge === "hcenter") x = cx - nodeW(n) / 2;
+    else if (edge === "top") y = minT;
+    else if (edge === "bottom") y = maxB - nodeH(n);
+    else if (edge === "vcenter") y = cy - nodeH(n) / 2;
+    return { ...n, position: { x, y } };
+  });
+}
+function distributeNodes(nodes, axis) {
+  if (nodes.length < 3) return nodes;
+  const size = (n) => axis === "h" ? nodeW(n) : nodeH(n);
+  const coord = (n) => axis === "h" ? n.position.x : n.position.y;
+  const sorted = [...nodes].sort((a, b) => coord(a) - coord(b));
+  const start2 = coord(sorted[0]);
+  const last = sorted[sorted.length - 1];
+  const end = coord(last) + size(last);
+  const totalSize = sorted.reduce((s, n) => s + size(n), 0);
+  const gap = (end - start2 - totalSize) / (sorted.length - 1);
+  const posById = /* @__PURE__ */ new Map();
+  let cursor = start2;
+  for (const n of sorted) {
+    posById.set(n.id, cursor);
+    cursor += size(n) + gap;
+  }
+  return nodes.map((n) => {
+    const p = posById.get(n.id);
+    return { ...n, position: axis === "h" ? { ...n.position, x: p } : { ...n.position, y: p } };
+  });
+}
 var FlowEditorContext = ReactExports.createContext(null);
 var FlowEditorProvider = FlowEditorContext.Provider;
 function useFlowEditor() {
@@ -11692,6 +11779,89 @@ function FlowEditorInner({
     },
     [flow, onEdgeDelete, confirmDelete]
   );
+  const selectedNodes = ReactExports.useMemo(() => flow.nodes.filter((n) => n.selected), [flow.nodes]);
+  const selectedIds = ReactExports.useMemo(() => selectedNodes.map((n) => n.id), [selectedNodes]);
+  const clipboard = ReactExports.useRef(null);
+  const copySelection = ReactExports.useCallback(() => {
+    const sel = flow.nodes.filter((n) => n.selected);
+    if (sel.length === 0) return;
+    const ids = new Set(sel.map((n) => n.id));
+    const edges = flow.edges.filter((e) => ids.has(e.source) && ids.has(e.target));
+    clipboard.current = { nodes: sel.map((n) => ({ ...n })), edges: edges.map((e) => ({ ...e })) };
+  }, [flow]);
+  const pasteClipboard = ReactExports.useCallback(
+    (at) => {
+      const clip = clipboard.current;
+      if (!clip || clip.nodes.length === 0) return;
+      const { nodes: clones, edges: cloneEdges } = cloneSubgraph(clip.nodes, clip.edges, { makeId: newNodeId, offset: 40 });
+      let placed = clones;
+      if (at) {
+        const minX = Math.min(...clones.map((n) => n.position.x));
+        const minY = Math.min(...clones.map((n) => n.position.y));
+        placed = clones.map((n) => ({ ...n, position: { x: n.position.x - minX + at.x, y: n.position.y - minY + at.y } }));
+      }
+      flow.setGraph({
+        nodes: [...flow.nodes.map((n) => ({ ...n, selected: false })), ...placed.map((n) => ({ ...n, selected: true }))],
+        edges: [...flow.edges, ...cloneEdges]
+      });
+    },
+    [flow]
+  );
+  const duplicateSelected = ReactExports.useCallback(() => {
+    const sel = flow.nodes.filter((n) => n.selected);
+    if (sel.length === 0) return;
+    const ids = new Set(sel.map((n) => n.id));
+    const internal2 = flow.edges.filter((e) => ids.has(e.source) && ids.has(e.target));
+    const { nodes: clones, edges: cloneEdges } = cloneSubgraph(sel, internal2, { makeId: newNodeId, offset: 40 });
+    flow.setGraph({
+      nodes: [...flow.nodes.map((n) => ({ ...n, selected: false })), ...clones.map((n) => ({ ...n, selected: true }))],
+      edges: [...flow.edges, ...cloneEdges]
+    });
+  }, [flow]);
+  const alignSelected = ReactExports.useCallback(
+    (edge) => {
+      const sel = flow.nodes.filter((n) => n.selected);
+      if (sel.length < 2) return;
+      const byId = new Map(alignNodes(sel, edge).map((n) => [n.id, n]));
+      flow.setNodes((all) => all.map((n) => byId.get(n.id) ?? n));
+    },
+    [flow]
+  );
+  const distributeSelected = ReactExports.useCallback(
+    (axis) => {
+      const sel = flow.nodes.filter((n) => n.selected);
+      if (sel.length < 3) return;
+      const byId = new Map(distributeNodes(sel, axis).map((n) => [n.id, n]));
+      flow.setNodes((all) => all.map((n) => byId.get(n.id) ?? n));
+    },
+    [flow]
+  );
+  const onReconnect = ReactExports.useCallback(
+    (oldEdge, conn) => flow.setEdges((eds) => reconnectEdge3(eds, oldEdge, conn)),
+    [flow]
+  );
+  ReactExports.useEffect(() => {
+    const onKey = (e) => {
+      const t = e.target;
+      if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
+      if (!(e.ctrlKey || e.metaKey)) return;
+      const key = e.key.toLowerCase();
+      if (key === "c") copySelection();
+      else if (key === "x") {
+        e.preventDefault();
+        copySelection();
+        deleteNodes(selectedIds);
+      } else if (key === "v") {
+        e.preventDefault();
+        pasteClipboard();
+      } else if (key === "d") {
+        e.preventDefault();
+        duplicateSelected();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [copySelection, pasteClipboard, duplicateSelected, deleteNodes, selectedIds]);
   const api = ReactExports.useMemo(() => {
     const toWorkflow = () => exportWorkflow({ nodes: flow.nodes, edges: flow.edges }, metadata);
     return {
@@ -11702,6 +11872,8 @@ function FlowEditorInner({
       selected: selected2,
       selectedEdgeId,
       selectedEdge,
+      selectedIds,
+      selectedNodes,
       running: runner.running,
       statuses: runner.statuses,
       select: setSelectedId,
@@ -11722,6 +11894,15 @@ function FlowEditorInner({
         return copy.id;
       },
       setGraph: (graph) => flow.setGraph(graph),
+      duplicateSelected,
+      alignSelected,
+      distributeSelected,
+      copy: copySelection,
+      cut: () => {
+        copySelection();
+        deleteNodes(selectedIds);
+      },
+      paste: pasteClipboard,
       run: () => runner.run({ nodes: flow.nodes, edges: flow.edges }, executors),
       cancel: runner.cancel,
       reset: runner.reset,
@@ -11734,7 +11915,7 @@ function FlowEditorInner({
       canUndo: hist.canUndo,
       canRedo: hist.canRedo
     };
-  }, [flow, selectedId, selected2, selectedEdgeId, selectedEdge, runner, executors, metadata, addNode, deleteNodes, deleteEdges, hist, rf]);
+  }, [flow, selectedId, selected2, selectedEdgeId, selectedEdge, selectedIds, selectedNodes, runner, executors, metadata, addNode, deleteNodes, deleteEdges, duplicateSelected, alignSelected, distributeSelected, copySelection, pasteClipboard, hist, rf]);
   ReactExports.useImperativeHandle(apiRef, () => api, [api]);
   const dropHandlers = paletteDropHandlers((kindName, evt) => {
     const point = rf.screenToFlowPosition({ x: evt.clientX, y: evt.clientY });
@@ -11794,6 +11975,8 @@ function FlowEditorInner({
           onNodesChange: flow.onNodesChange,
           onEdgesChange: flow.onEdgesChange,
           onConnect: flow.onConnect,
+          onReconnect,
+          edgesReconnectable: true,
           onNodeDragStart: hist.onNodeDragStart,
           onNodeClick: handleNodeClick2,
           onNodeContextMenu: builtins.contextMenu === false ? void 0 : handleNodeContextMenu,
@@ -12083,9 +12266,11 @@ exports.SubgraphNode = SubgraphNode;
 exports.TriggerNode = TriggerNode;
 exports.WORKFLOW_SCHEMA_URL = WORKFLOW_SCHEMA_URL;
 exports.WORKFLOW_SCHEMA_VERSION = WORKFLOW_SCHEMA_VERSION;
+exports.alignNodes = alignNodes;
 exports.applyStatusesToNodes = applyStatusesToNodes;
 exports.buildNodeTypes = buildNodeTypes;
 exports.categoryAccent = categoryAccent;
+exports.cloneSubgraph = cloneSubgraph;
 exports.createConnectionValidator = createConnectionValidator;
 exports.createHistory = createHistory;
 exports.decodePause = decodePause;
@@ -12093,6 +12278,7 @@ exports.defaultConfigFor = defaultConfigFor;
 exports.defaultNodeTypes = defaultNodeTypes;
 exports.defaultPortCompatibility = defaultPortCompatibility;
 exports.defineNode = defineNode;
+exports.distributeNodes = distributeNodes;
 exports.encodePause = encodePause;
 exports.exportWorkflow = exportWorkflow;
 exports.getNodeKind = getNodeKind;
@@ -12105,6 +12291,7 @@ exports.onNodeKindsChanged = onNodeKindsChanged;
 exports.onRichInputAdapterChanged = onRichInputAdapterChanged;
 exports.paletteDropHandlers = paletteDropHandlers;
 exports.pauseForHuman = pauseForHuman;
+exports.reconnectEdge = reconnectEdge3;
 exports.registerBuiltinKinds = registerBuiltinKinds;
 exports.registerNodeKind = registerNodeKind;
 exports.registerRichInputAdapter = registerRichInputAdapter;