@particle-academy/fancy-flow 0.6.0 → 0.8.0

package/README.md

@@ -108,10 +108,28 @@ editor.current?.run();
 Three ways, all of which prune the edges attached to the node (a dangling edge
 would survive into the schema and break the runner):
 
+- **right-click a node** → Delete / Duplicate,
 - the **Delete** toolbar button (enabled when a node is selected),
 - the <kbd>Delete</kbd> or <kbd>Backspace</kbd> key on the canvas,
 - `api.deleteSelected()` / `api.deleteNodes(ids)` from code.
 
+Swap the menu for your own with `slots.contextMenu`, or turn it off with
+`builtins={{ contextMenu: false }}` (passing your own
+`canvasProps.onNodeContextMenu` also takes over):
+
+```tsx
+<FlowEditor
+  slots={{
+    contextMenu: (api, nodeId, close) => (
+      <>
+        <button onClick={() => { api.duplicateNode(nodeId); close(); }}>Duplicate</button>
+        <button onClick={() => { pinNode(nodeId); close(); }}>Pin</button>
+      </>
+    ),
+  }}
+/>
+```
+
 `onDelete(ids)` fires after either path, so a host can sync its own store.
 
 If you want none of the above chrome, skip `<FlowEditor>` entirely and compose

package/dist/index.cjs

@@ -10428,6 +10428,26 @@ function FlowEditorInner({
   const selected2 = ReactExports.useMemo(() => flow.nodes.find((n) => n.id === selectedId) ?? null, [flow.nodes, selectedId]);
   ReactExports.useEffect(() => onSelectionChange?.(selected2), [selected2, onSelectionChange]);
   const handleNodeClick2 = (_e, node) => setSelectedId(node.id);
+  const [menu, setMenu] = ReactExports.useState(null);
+  const closeMenu = ReactExports.useCallback(() => setMenu(null), []);
+  const handleNodeContextMenu = (event, node) => {
+    event.preventDefault();
+    setSelectedId(node.id);
+    setMenu({ x: event.clientX, y: event.clientY, nodeId: node.id });
+  };
+  ReactExports.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]);
   ReactExports.useEffect(() => {
     if (!controlled) onChange?.({ nodes: flow.nodes, edges: flow.edges });
   }, [flow.nodes, flow.edges, onChange, controlled]);
@@ -10548,6 +10568,7 @@ function FlowEditorInner({
           onEdgesChange: flow.onEdgesChange,
           onConnect: flow.onConnect,
           onNodeClick: handleNodeClick2,
+          onNodeContextMenu: builtins.contextMenu === false ? void 0 : handleNodeContextMenu,
           onNodesDelete: (deleted) => onDelete?.(deleted.map((n) => n.id)),
           deleteKeyCode: ["Delete", "Backspace"],
           height: "100%",
@@ -10556,6 +10577,45 @@ function FlowEditorInner({
         }
       ),
       slots.empty && api.nodes.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-editor__empty", children: slots.empty(api) }),
+      menu !== null && builtins.contextMenu !== false && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "ff-editor__ctx-item",
+                "data-action": "ctx-duplicate",
+                onClick: () => {
+                  api.duplicateNode(menu.nodeId);
+                  closeMenu();
+                },
+                children: "Duplicate"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(FlowRunFeed, { entries: runner.feed, className: "ff-editor__feed" }))
     ] }),
     showPanel && (slots.panel ? slots.panel(api) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ff-editor__panel-wrap", children: [