feat(node-toolbar): add node-toolbar component

examples/vite-app/src/App/index.tsx

@@ -40,6 +40,7 @@ import EdgeRouting from '../examples/EdgeRouting';
 import CancelConnection from '../examples/CancelConnection';
 import InteractiveMinimap from '../examples/InteractiveMinimap';
 import UseOnSelectionChange from '../examples/UseOnSelectionChange';
+import NodeToolbar from '../examples/NodeToolbar';
 
 interface IRoute {
   name: string;
@@ -168,6 +169,11 @@ const routes: IRoute[] = [
     path: '/nodetypesobject-change',
     component: NodeTypesObjectChange,
   },
+  {
+    name: 'NodeToolbar',
+    path: '/node-toolbar',
+    component: NodeToolbar,
+  },
   {
     name: 'Overview',
     path: '/overview',

examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx

@@ -0,0 +1,19 @@
+import { memo, FC } from 'react';
+import { Handle, Position, NodeProps, NodeToolbar } from 'reactflow';
+
+const CustomNode: FC<NodeProps> = ({ id, data, selected }) => {
+  return (
+    <>
+      <NodeToolbar isActive={selected} nodeId={id} position={data.toolbarPosition}>
+        <button>delete</button>
+        <button>copy</button>
+        <button>expand</button>
+      </NodeToolbar>
+      <div>{data.label}</div>
+      <Handle type="target" position={Position.Left} />
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
+};
+
+export default memo(CustomNode);

examples/vite-app/src/examples/NodeToolbar/index.tsx

@@ -0,0 +1,74 @@
+import ReactFlow, {
+  MiniMap,
+  Background,
+  BackgroundVariant,
+  Controls,
+  Node,
+  Edge,
+  NodeTypes,
+  Position,
+} from 'reactflow';
+
+import CustomNode from './CustomNode';
+
+const nodeTypes: NodeTypes = {
+  custom: CustomNode,
+};
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    type: 'custom',
+    data: { label: 'toolbar top', toolbarPosition: Position.Top },
+    position: { x: 0, y: 100 },
+    className: 'react-flow__node-default',
+  },
+  {
+    id: '2',
+    type: 'custom',
+    data: { label: 'toolbar right', toolbarPosition: Position.Right },
+    position: { x: 400, y: 0 },
+    className: 'react-flow__node-default',
+  },
+  {
+    id: '3',
+    type: 'custom',
+    data: { label: 'toolbar bottom', toolbarPosition: Position.Bottom },
+    position: { x: 400, y: 100 },
+    className: 'react-flow__node-default',
+  },
+  {
+    id: '4',
+    type: 'custom',
+    data: { label: 'toolbar left', toolbarPosition: Position.Left },
+    position: { x: 400, y: 200 },
+    className: 'react-flow__node-default',
+  },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2' },
+  { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e1-4', source: '1', target: '4' },
+];
+
+const defaultEdgeOptions = { zIndex: 0 };
+
+export default function NodeToolbarExample() {
+  return (
+    <ReactFlow
+      defaultNodes={initialNodes}
+      defaultEdges={initialEdges}
+      className="react-flow-node-toolbar-example"
+      minZoom={0.2}
+      maxZoom={4}
+      fitView
+      defaultEdgeOptions={defaultEdgeOptions}
+      nodeTypes={nodeTypes}
+    >
+      <Background variant={BackgroundVariant.Dots} />
+      <MiniMap />
+      <Controls />
+    </ReactFlow>
+  );
+}