@particle-academy/fancy-flow 0.5.4 → 0.7.0

package/dist/index.js

@@ -1,15 +1,15 @@
 import { useFlowState, useFlowRun, applyStatusesToNodes } from './chunk-QSSQRQN4.js';
 export { applyStatusesToNodes, useFlowRun, useFlowState } from './chunk-QSSQRQN4.js';
 export { runFlow } from './chunk-NVULCEDX.js';
-import { registerBuiltinKinds, buildNodeTypes } from './chunk-M2XKGQQL.js';
+import { buildNodeTypes, registerBuiltinKinds } from './chunk-M2XKGQQL.js';
 export { BUILTIN_KINDS, RegistryNode, buildNodeTypes, registerBuiltinKinds } from './chunk-M2XKGQQL.js';
-import { Position, Handle, index, BackgroundVariant, Background, Controls, MiniMap, ReactFlowProvider, addEdge, applyEdgeChanges, applyNodeChanges, useReactFlow } from './chunk-NF6NPY5N.js';
-import { exportWorkflow, workflowToBlob, importWorkflow } from './chunk-BCXECQUC.js';
+import { ReactFlowProvider, useReactFlow, addEdge, applyEdgeChanges, applyNodeChanges, Position, Handle, index, BackgroundVariant, Background, Controls, MiniMap } from './chunk-NF6NPY5N.js';
+import { workflowToBlob, importWorkflow, exportWorkflow } from './chunk-BCXECQUC.js';
 export { WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, exportWorkflow, importWorkflow, workflowToBlob } from './chunk-BCXECQUC.js';
-import { onNodeKindsChanged, listNodeKinds, categoryAccent, getNodeKind, validateConfig, defaultConfigFor } from './chunk-WNVBXXOL.js';
+import { onNodeKindsChanged, listNodeKinds, getNodeKind, defaultConfigFor, validateConfig, categoryAccent } from './chunk-WNVBXXOL.js';
 export { categoryAccent, defaultConfigFor, getNodeKind, listNodeKinds, onNodeKindsChanged, registerNodeKind, validateConfig } from './chunk-WNVBXXOL.js';
-import { memo, useMemo, useState, useEffect, useRef } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { memo, createContext, forwardRef, useState, useEffect, useMemo, useCallback, useImperativeHandle, useRef, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function NodeShellInner({
   node,
@@ -508,16 +508,52 @@ function formatTime(at) {
   const d = new Date(at);
   return `${d.getMinutes().toString().padStart(2, "0")}:${d.getSeconds().toString().padStart(2, "0")}.${Math.floor(d.getMilliseconds() / 100)}`;
 }
-function FlowEditor(props) {
+
+// src/components/FlowEditor/graph-ops.ts
+function removeNodes(graph, ids) {
+  if (ids.length === 0) return graph;
+  const doomed = new Set(ids);
+  return {
+    nodes: graph.nodes.filter((n) => !doomed.has(n.id)),
+    edges: graph.edges.filter((e) => !doomed.has(e.source) && !doomed.has(e.target))
+  };
+}
+function removeEdges(edges, ids) {
+  if (ids.length === 0) return edges;
+  const doomed = new Set(ids);
+  return edges.filter((e) => !doomed.has(e.id));
+}
+function duplicateNode(node, id, offset = 40) {
+  return {
+    ...node,
+    id,
+    position: { x: node.position.x + offset, y: node.position.y + offset },
+    // Deep copy so the clone's config edits don't mutate the original.
+    data: JSON.parse(JSON.stringify(node.data ?? {}))
+  };
+}
+var FlowEditorContext = createContext(null);
+var FlowEditorProvider = FlowEditorContext.Provider;
+function useFlowEditor() {
+  const api = useContext(FlowEditorContext);
+  if (api === null) {
+    throw new Error("useFlowEditor() must be called inside <FlowEditor>.");
+  }
+  return api;
+}
+function useFlowEditorOptional() {
+  return useContext(FlowEditorContext);
+}
+var FlowEditor = forwardRef(function FlowEditor2(props, ref) {
   return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
     "div",
     {
       className: ["ff-editor", props.className ?? ""].filter(Boolean).join(" "),
       style: { height: props.height ?? 720, ...props.style },
-      children: /* @__PURE__ */ jsx(FlowEditorInner, { ...props })
+      children: /* @__PURE__ */ jsx(FlowEditorInner, { ...props, apiRef: ref })
     }
   ) });
-}
+});
 function FlowEditorInner({
   initial = { nodes: [], edges: [] },
   value,
@@ -527,10 +563,18 @@ function FlowEditorInner({
   showPanel = true,
   showFeed = true,
   extraToolbar,
-  onChange
+  actions = [],
+  builtins = {},
+  slots = {},
+  canvasProps = {},
+  onChange,
+  onSelectionChange,
+  onDelete,
+  apiRef
 }) {
   const internal = useFlowState(initial);
   const runner = useFlowRun();
+  const rf = useReactFlow();
   const controlled = value !== void 0;
   const flow = controlled ? makeControlledFlowAdapter(value, onChange) : internal;
   const [, force] = useState(0);
@@ -542,29 +586,247 @@ function FlowEditorInner({
   );
   const [selectedId, setSelectedId] = useState(null);
   const selected = useMemo(() => flow.nodes.find((n) => n.id === selectedId) ?? null, [flow.nodes, selectedId]);
+  useEffect(() => onSelectionChange?.(selected), [selected, onSelectionChange]);
   const handleNodeClick = (_e, node) => setSelectedId(node.id);
+  const [menu, setMenu] = useState(null);
+  const closeMenu = useCallback(() => setMenu(null), []);
+  const handleNodeContextMenu = (event, node) => {
+    event.preventDefault();
+    setSelectedId(node.id);
+    setMenu({ x: event.clientX, y: event.clientY, nodeId: node.id });
+  };
+  useEffect(() => {
+    if (menu === null) return;
+    const close = () => setMenu(null);
+    const onKey = (e) => e.key === "Escape" && setMenu(null);
+    window.addEventListener("click", close);
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("click", close);
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [menu]);
   useEffect(() => {
     if (!controlled) onChange?.({ nodes: flow.nodes, edges: flow.edges });
   }, [flow.nodes, flow.edges, onChange, controlled]);
+  const addNode = useCallback(
+    (kindName, position) => {
+      const kind = getNodeKind(kindName);
+      if (!kind) return null;
+      const at = position ?? { x: 80, y: 80 };
+      const id = newNodeId();
+      flow.setNodes((all) => [
+        ...all,
+        {
+          id,
+          type: kind.name,
+          position: at,
+          data: { kind: kind.name, label: kind.label, config: defaultConfigFor(kind) }
+        }
+      ]);
+      setSelectedId(id);
+      return id;
+    },
+    [flow]
+  );
+  const deleteNodes = useCallback(
+    (ids) => {
+      if (ids.length === 0) return;
+      const doomed = new Set(ids);
+      flow.setNodes((all) => removeNodes({ nodes: all, edges: [] }, ids).nodes);
+      flow.setEdges((all) => removeNodes({ nodes: [], edges: all }, ids).edges);
+      setSelectedId((cur) => cur !== null && doomed.has(cur) ? null : cur);
+      onDelete?.(ids);
+    },
+    [flow, onDelete]
+  );
+  const api = useMemo(() => {
+    const toWorkflow = () => exportWorkflow({ nodes: flow.nodes, edges: flow.edges }, metadata);
+    return {
+      graph: { nodes: flow.nodes, edges: flow.edges },
+      nodes: flow.nodes,
+      edges: flow.edges,
+      selectedId,
+      selected,
+      running: runner.running,
+      statuses: runner.statuses,
+      select: setSelectedId,
+      addNode,
+      updateNode: (next) => flow.setNodes((all) => all.map((x) => x.id === next.id ? next : x)),
+      deleteNodes,
+      deleteSelected: () => deleteNodes(selectedId ? [selectedId] : []),
+      deleteEdges: (ids) => flow.setEdges((all) => removeEdges(all, ids)),
+      duplicateNode: (id) => {
+        const src = flow.nodes.find((n) => n.id === id);
+        if (!src) return null;
+        const copy = duplicateNode(src, newNodeId());
+        flow.setNodes((all) => [...all, copy]);
+        setSelectedId(copy.id);
+        return copy.id;
+      },
+      setGraph: (graph) => {
+        flow.setNodes(graph.nodes);
+        flow.setEdges(graph.edges);
+      },
+      run: () => runner.run({ nodes: flow.nodes, edges: flow.edges }, executors),
+      cancel: runner.cancel,
+      reset: runner.reset,
+      toWorkflow,
+      exportWorkflow: () => downloadWorkflow(toWorkflow(), metadata),
+      importWorkflow: () => pickWorkflow((graph) => {
+        flow.setNodes(graph.nodes);
+        flow.setEdges(graph.edges);
+      }),
+      fitView: () => rf.fitView({ padding: 0.2 })
+    };
+  }, [flow, selectedId, selected, runner, executors, metadata, addNode, deleteNodes, rf]);
+  useImperativeHandle(apiRef, () => api, [api]);
+  const dropHandlers = paletteDropHandlers((kindName, evt) => {
+    const point = rf.screenToFlowPosition({ x: evt.clientX, y: evt.clientY });
+    addNode(kindName, { x: point.x - 100, y: point.y - 30 });
+  });
+  const startActions = actions.filter((a) => a.placement === "start");
+  const endActions = actions.filter((a) => a.placement !== "start");
+  const toolbar = slots.toolbar ? slots.toolbar(api) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    startActions.map((a) => renderAction(a, api)),
+    builtins.run !== false && /* @__PURE__ */ jsx(FlowRunControls, { running: api.running, onRun: api.run, onCancel: api.cancel, onReset: api.reset }),
+    (builtins.delete !== false || builtins.export !== false || builtins.import !== false) && /* @__PURE__ */ jsx("span", { className: "ff-editor__sep" }),
+    builtins.delete !== false && /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "ff-editor__btn",
+        "data-action": "delete",
+        onClick: api.deleteSelected,
+        disabled: api.selected === null,
+        title: "Delete the selected node (Del / Backspace)",
+        children: "\u2715 Delete"
+      }
+    ),
+    builtins.export !== false && /* @__PURE__ */ jsx("button", { className: "ff-editor__btn", "data-action": "export", onClick: api.exportWorkflow, children: "\u2193 Export" }),
+    builtins.import !== false && /* @__PURE__ */ jsx("button", { className: "ff-editor__btn", "data-action": "import", onClick: api.importWorkflow, children: "\u2191 Import" }),
+    endActions.map((a) => renderAction(a, api)),
+    extraToolbar,
+    builtins.count !== false && /* @__PURE__ */ jsxs("span", { className: "ff-editor__count", children: [
+      api.nodes.length,
+      " nodes \xB7 ",
+      api.edges.length,
+      " edges"
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(FlowEditorProvider, { value: api, children: [
+    showPalette && (slots.palette ? slots.palette(api) : /* @__PURE__ */ jsx(NodePalette, { className: "ff-editor__palette" })),
+    /* @__PURE__ */ jsxs("div", { className: "ff-editor__main", ...dropHandlers, children: [
+      /* @__PURE__ */ jsx(
+        FlowCanvas,
+        {
+          nodes: renderedNodes,
+          edges: flow.edges,
+          nodeTypes,
+          onNodesChange: flow.onNodesChange,
+          onEdgesChange: flow.onEdgesChange,
+          onConnect: flow.onConnect,
+          onNodeClick: handleNodeClick,
+          onNodeContextMenu: builtins.contextMenu === false ? void 0 : handleNodeContextMenu,
+          onNodesDelete: (deleted) => onDelete?.(deleted.map((n) => n.id)),
+          deleteKeyCode: ["Delete", "Backspace"],
+          height: "100%",
+          toolbar,
+          ...canvasProps
+        }
+      ),
+      slots.empty && api.nodes.length === 0 && /* @__PURE__ */ jsx("div", { className: "ff-editor__empty", children: slots.empty(api) }),
+      menu !== null && builtins.contextMenu !== false && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ff-editor__ctx",
+          style: { top: menu.y, left: menu.x },
+          role: "menu",
+          onClick: (e) => e.stopPropagation(),
+          children: slots.contextMenu ? slots.contextMenu(api, menu.nodeId, closeMenu) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "ff-editor__ctx-item",
+                "data-action": "ctx-duplicate",
+                onClick: () => {
+                  api.duplicateNode(menu.nodeId);
+                  closeMenu();
+                },
+                children: "Duplicate"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "ff-editor__ctx-item ff-editor__ctx-item--danger",
+                "data-action": "ctx-delete",
+                onClick: () => {
+                  api.deleteNodes([menu.nodeId]);
+                  closeMenu();
+                },
+                children: "Delete"
+              }
+            )
+          ] })
+        }
+      ),
+      showFeed && (slots.feed ? slots.feed(api) : /* @__PURE__ */ jsx(FlowRunFeed, { entries: runner.feed, className: "ff-editor__feed" }))
+    ] }),
+    showPanel && (slots.panel ? slots.panel(api) : /* @__PURE__ */ jsxs("div", { className: "ff-editor__panel-wrap", children: [
+      /* @__PURE__ */ jsx(NodeConfigPanel, { className: "ff-editor__panel", node: api.selected, onChange: api.updateNode }),
+      slots.panelFooter && /* @__PURE__ */ jsx("div", { className: "ff-editor__panel-footer", children: slots.panelFooter(api) })
+    ] }))
+  ] });
+}
+function renderAction(action, api) {
+  if (action.visible && !action.visible(api)) return null;
+  const disabled = action.disabled ? action.disabled(api) : action.requiresSelection === true && api.selected === null;
   return /* @__PURE__ */ jsx(
-    FlowEditorBody,
+    "button",
     {
-      showPalette,
-      showPanel,
-      showFeed,
-      flow,
-      runner,
-      executors,
-      metadata,
-      nodeTypes,
-      renderedNodes,
-      selected,
-      setSelectedId,
-      handleNodeClick,
-      extraToolbar
-    }
+      className: "ff-editor__btn",
+      "data-action": action.id,
+      title: action.title,
+      disabled,
+      onClick: () => action.onSelect(api),
+      children: action.label
+    },
+    action.id
   );
 }
+function newNodeId() {
+  return `n_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
+}
+function downloadWorkflow(schema, metadata) {
+  const url = URL.createObjectURL(workflowToBlob(schema));
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `${metadata?.id ?? "workflow"}.json`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+function pickWorkflow(onLoad) {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = "application/json";
+  input.onchange = async () => {
+    const file = input.files?.[0];
+    if (!file) return;
+    try {
+      const result = importWorkflow(JSON.parse(await file.text()), { lenient: true });
+      onLoad(result.graph);
+    } catch (e) {
+      console.error("import failed", e);
+    }
+  };
+  input.click();
+}
 function makeControlledFlowAdapter(value, onChange) {
   const apply = (next) => onChange?.(next);
   return {
@@ -590,114 +852,6 @@ function makeControlledFlowAdapter(value, onChange) {
     toGraph: () => value
   };
 }
-function FlowEditorBody({
-  showPalette,
-  showPanel,
-  showFeed,
-  flow,
-  runner,
-  executors,
-  metadata,
-  nodeTypes,
-  renderedNodes,
-  selected,
-  setSelectedId,
-  handleNodeClick,
-  extraToolbar
-}) {
-  const rf = useReactFlow();
-  const dropHandlers = paletteDropHandlers((kindName, evt) => {
-    const kind = getNodeKind(kindName);
-    if (!kind) return;
-    const point = rf.screenToFlowPosition({ x: evt.clientX, y: evt.clientY });
-    const id = `n_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
-    flow.setNodes((all) => [
-      ...all,
-      {
-        id,
-        type: kind.name,
-        position: { x: point.x - 100, y: point.y - 30 },
-        data: { kind: kind.name, label: kind.label, config: defaultConfigFor(kind) }
-      }
-    ]);
-    setSelectedId(id);
-  });
-  const doExport = () => {
-    const schema = exportWorkflow({ nodes: flow.nodes, edges: flow.edges }, metadata);
-    const url = URL.createObjectURL(workflowToBlob(schema));
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `${metadata?.id ?? "workflow"}.json`;
-    a.click();
-    URL.revokeObjectURL(url);
-  };
-  const doImport = () => {
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = "application/json";
-    input.onchange = async () => {
-      const file = input.files?.[0];
-      if (!file) return;
-      const text = await file.text();
-      try {
-        const result = importWorkflow(JSON.parse(text), { lenient: true });
-        flow.setNodes(result.graph.nodes);
-        flow.setEdges(result.graph.edges);
-      } catch (e) {
-        console.error("import failed", e);
-      }
-    };
-    input.click();
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    showPalette && /* @__PURE__ */ jsx(NodePalette, { className: "ff-editor__palette" }),
-    /* @__PURE__ */ jsxs("div", { className: "ff-editor__main", ...dropHandlers, children: [
-      /* @__PURE__ */ jsx(
-        FlowCanvas,
-        {
-          nodes: renderedNodes,
-          edges: flow.edges,
-          nodeTypes,
-          onNodesChange: flow.onNodesChange,
-          onEdgesChange: flow.onEdgesChange,
-          onConnect: flow.onConnect,
-          onNodeClick: handleNodeClick,
-          height: "100%",
-          toolbar: /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              FlowRunControls,
-              {
-                running: runner.running,
-                onRun: () => runner.run({ nodes: flow.nodes, edges: flow.edges }, executors),
-                onCancel: runner.cancel,
-                onReset: runner.reset
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "ff-editor__sep" }),
-            /* @__PURE__ */ jsx("button", { className: "ff-editor__btn", onClick: doExport, children: "\u2193 Export" }),
-            /* @__PURE__ */ jsx("button", { className: "ff-editor__btn", onClick: doImport, children: "\u2191 Import" }),
-            extraToolbar,
-            /* @__PURE__ */ jsxs("span", { className: "ff-editor__count", children: [
-              flow.nodes.length,
-              " nodes \xB7 ",
-              flow.edges.length,
-              " edges"
-            ] })
-          ] })
-        }
-      ),
-      showFeed && /* @__PURE__ */ jsx(FlowRunFeed, { entries: runner.feed, className: "ff-editor__feed" })
-    ] }),
-    showPanel && /* @__PURE__ */ jsx(
-      NodeConfigPanel,
-      {
-        className: "ff-editor__panel",
-        node: selected,
-        onChange: (next) => flow.setNodes((all) => all.map((x) => x.id === next.id ? next : x))
-      }
-    )
-  ] });
-}
 function defineNode(render) {
   function Wrapped(props) {
     return render({
@@ -732,6 +886,6 @@ function NodePort({ side, type, id, style, title, className }) {
 // src/index.ts
 registerBuiltinKinds();
 
-export { ActionNode, ConfigFieldRenderer, DecisionNode, FlowCanvas, FlowEditor, FlowRunControls, FlowRunFeed, NodeConfigPanel, NodePalette, NodePort, NodeShell, NoteNode, OutputNode, SubgraphNode, TriggerNode, defaultNodeTypes, defineNode, paletteDropHandlers };
+export { ActionNode, ConfigFieldRenderer, DecisionNode, FlowCanvas, FlowEditor, FlowRunControls, FlowRunFeed, NodeConfigPanel, NodePalette, NodePort, NodeShell, NoteNode, OutputNode, SubgraphNode, TriggerNode, defaultNodeTypes, defineNode, paletteDropHandlers, useFlowEditor, useFlowEditorOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map