Merge pull request xyflow#129 from wbkd/guide/context-menu

✨ Create a new node context menu example.

Author: hayleigh-dot-dev

docs/examples/interaction/context-menu.mdx

@@ -0,0 +1,15 @@
+---
+title: Node Context Menus
+hide_table_of_contents: true
+---
+
+import CodeViewer from '/src/components/CodeViewer';
+
+The [`onNodeContextMenu`](/docs/api/react-flow-props/#onnodecontextmenu) event
+can be used to show a custom menu when right-clicking a node. This example shows
+a simple menu with buttons to duplicate or delete the clicked node.
+
+<CodeViewer
+  codePath="example-flows/ContextMenu"
+  additionalFiles={['ContextMenu.js', 'nodes-edges.js', 'style.css']}
+/>

src/components/CodeViewer/example-flows/BaseStyle/index.js

@@ -6,26 +6,15 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
   addEdge,
-  Position,
 } from 'reactflow';
 
 import 'reactflow/dist/base.css';
 
-const nodeDefaults = {
-  sourcePosition: Position.Right,
-  targetPosition: Position.Left,
-};
-
 const initialNodes = [
-  {
-    id: '1',
-    position: { x: 0, y: 150 },
-    data: { label: 'base style 1' },
-    ...nodeDefaults,
-  },
-  { id: '2', position: { x: 250, y: 0 }, data: { label: 'base style 2' }, ...nodeDefaults },
-  { id: '3', position: { x: 250, y: 150 }, data: { label: 'base style 3' }, ...nodeDefaults },
-  { id: '4', position: { x: 250, y: 300 }, data: { label: 'base style 4' }, ...nodeDefaults },
+  { id: '1', position: { x: 0, y: 150 }, data: { label: 'base style 1' } },
+  { id: '2', position: { x: 250, y: 0 }, data: { label: 'base style 2' } },
+  { id: '3', position: { x: 250, y: 150 }, data: { label: 'base style 3' } },
+  { id: '4', position: { x: 250, y: 300 }, data: { label: 'base style 4' } },
 ];
 
 const initialEdges = [

src/components/CodeViewer/example-flows/ContextMenu/ContextMenu.js

@@ -0,0 +1,30 @@
+import React, { useCallback } from 'react';
+import { useReactFlow } from 'reactflow';
+
+export default function ContextMenu({ id, top, left, right, bottom, ...props }) {
+  const { getNode, setNodes, addNodes, setEdges } = useReactFlow();
+  const duplicateNode = useCallback(() => {
+    const node = getNode(id);
+    const position = {
+      x: node.position.x + 50,
+      y: node.position.y + 50,
+    };
+
+    addNodes({ ...node, id: `${node.id}-copy`, position });
+  }, [id, getNode, addNodes]);
+
+  const deleteNode = useCallback(() => {
+    setNodes((nodes) => nodes.filter((node) => node.id !== id));
+    setEdges((edges) => edges.filter((edge) => edge.source !== id));
+  }, [id, setNodes, setEdges]);
+
+  return (
+    <div style={{ top, left, right, bottom }} className="context-menu" {...props}>
+      <p style={{ margin: '0.5em' }}>
+        <small>node: {id}</small>
+      </p>
+      <button onClick={duplicateNode}>duplicate</button>
+      <button onClick={deleteNode}>delete</button>
+    </div>
+  );
+}

src/components/CodeViewer/example-flows/ContextMenu/index.js

@@ -0,0 +1,58 @@
+import React, { useCallback, useRef, useState } from 'react';
+import ReactFlow, { Background, useNodesState, useEdgesState, addEdge } from 'reactflow';
+
+import { initialNodes, initialEdges } from './nodes-edges';
+import ContextMenu from './ContextMenu';
+
+import 'reactflow/dist/style.css';
+import './style.css';
+
+const Flow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const [menu, setMenu] = useState(null);
+  const ref = useRef(null);
+
+  const onConnect = useCallback((params) => setEdges((els) => addEdge(params, els)), [setEdges]);
+
+  const onNodeContextMenu = useCallback(
+    (event, node) => {
+      // Prevent native context menu from showing
+      event.preventDefault();
+
+      // Calculate position of the context menu. We want to make sure it
+      // doesn't get positioned off-screen.
+      const pane = ref.current.getBoundingClientRect();
+      setMenu({
+        id: node.id,
+        top: event.clientY < pane.height - 200 && event.clientY,
+        left: event.clientX < pane.width - 200 && event.clientX,
+        right: event.clientX >= pane.width - 200 && pane.width - event.clientX,
+        bottom: event.clientY >= pane.height - 200 && pane.height - event.clientY,
+      });
+    },
+    [setMenu]
+  );
+
+  // Close the context menu if it's open whenever the window is clicked.
+  const onPaneClick = useCallback(() => setMenu(null), [setMenu]);
+
+  return (
+    <ReactFlow
+      ref={ref}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      onPaneClick={onPaneClick}
+      onNodeContextMenu={onNodeContextMenu}
+      fitView
+    >
+      <Background />
+      {menu && <ContextMenu onClick={onPaneClick} {...menu} />}
+    </ReactFlow>
+  );
+};
+
+export default Flow;

src/components/CodeViewer/example-flows/ContextMenu/nodes-edges.js

@@ -0,0 +1,26 @@
+export const initialNodes = [
+  { id: '1', position: { x: 175, y: 0 }, data: { label: 'a' } },
+  { id: '2', position: { x: 0, y: 250 }, data: { label: 'b' } },
+  { id: '3', position: { x: 175, y: 250 }, data: { label: 'c' } },
+  { id: '4', position: { x: 350, y: 250 }, data: { label: 'd' } },
+];
+
+export const initialEdges = [
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+  },
+  {
+    id: 'e1-3',
+    source: '1',
+    target: '3',
+  },
+  {
+    id: 'e1-4',
+    source: '1',
+    target: '4',
+  },
+];
+
+export default { initialNodes, initialEdges };

src/components/CodeViewer/example-flows/ContextMenu/style.css

@@ -0,0 +1,19 @@
+.context-menu {
+    background: white;
+    border-style: solid;
+    box-shadow: 10px 19px 20px rgba(0, 0, 0, 10%);
+    position: absolute;
+    z-index: 10;
+}
+
+.context-menu button {
+    border: none;
+    display: block;
+    padding: 0.5em;
+    text-align: left;
+    width: 100%;
+}
+
+.context-menu button:hover {
+    background: white;
+}