initial implementation of edge toolbar

examples/react/src/App/routes.ts

@@ -50,6 +50,7 @@ import CancelConnection from '../examples/CancelConnection';
 import InteractiveMinimap from '../examples/InteractiveMinimap';
 import UseOnSelectionChange from '../examples/UseOnSelectionChange';
 import NodeToolbar from '../examples/NodeToolbar';
+import EdgeToolbar from '../examples/EdgeToolbar';
 import UseConnection from '../examples/UseConnection';
 import UseNodesInitialized from '../examples/UseNodesInit';
 import UseNodesData from '../examples/UseNodesData';
@@ -192,6 +193,11 @@ const routes: IRoute[] = [
     path: 'edge-routing',
     component: EdgeRouting,
   },
+  {
+    name: 'Edge Toolbar',
+    path: 'edge-toolbar',
+    component: EdgeToolbar,
+  },
   {
     name: 'Empty',
     path: 'empty',

examples/react/src/examples/EdgeToolbar/CustomEdge.tsx

@@ -0,0 +1,17 @@
+import { EdgeLabelRenderer, getBezierPath, BaseEdge, EdgeProps } from '@xyflow/react';
+
+import { EdgeToolbar } from '@xyflow/react';
+
+export function CustomEdge({ id, data, ...props }: EdgeProps) {
+  const [edgePath, labelX, labelY] = getBezierPath(props);
+
+  return (
+    <>
+      <BaseEdge id={id} path={edgePath} />
+      <EdgeToolbar edgeId={id} labelX={labelX} labelY={labelY}>
+        <button>delete</button>
+        <button>edit</button>
+      </EdgeToolbar>
+    </>
+  );
+}

examples/react/src/examples/EdgeToolbar/SelectedNodesToolbar.tsx

@@ -0,0 +1,15 @@
+import { NodeToolbar, ReactFlowState, useStore } from '@xyflow/react';
+
+const selectedNodesSelector = (state: ReactFlowState) =>
+  state.nodes.filter((node) => node.selected).map((node) => node.id);
+
+export default function SelectedNodesToolbar() {
+  const selectedNodeIds = useStore(selectedNodesSelector);
+  const isVisible = selectedNodeIds.length > 1;
+
+  return (
+    <NodeToolbar nodeId={selectedNodeIds} isVisible={isVisible}>
+      <button>Selection action</button>
+    </NodeToolbar>
+  );
+}

examples/react/src/examples/EdgeToolbar/index.tsx

@@ -0,0 +1,86 @@
+import {
+  ReactFlow,
+  MiniMap,
+  Background,
+  BackgroundVariant,
+  Controls,
+  Node,
+  Edge,
+  NodeTypes,
+  Position,
+  NodeOrigin,
+  EdgeTypes,
+} from '@xyflow/react';
+
+import { CustomEdge } from './CustomEdge';
+import SelectedNodesToolbar from './SelectedNodesToolbar';
+
+const edgeTypes: EdgeTypes = {
+  custom: CustomEdge,
+};
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    data: { label: 'Node 1', toolbarPosition: Position.Top },
+    position: { x: 0, y: 0 },
+    className: 'react-flow__node-default',
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2', toolbarPosition: Position.Top },
+    position: { x: 200, y: 0 },
+    className: 'react-flow__node-default',
+  },
+  {
+    id: '3',
+    data: { label: 'Node 3', toolbarPosition: Position.Top },
+    position: { x: 100, y: 150 },
+    className: 'react-flow__node-default',
+  },
+];
+
+const initialEdges: Edge[] = [
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    type: 'custom',
+  },
+  {
+    id: 'e2-3',
+    source: '2',
+    target: '3',
+    type: 'custom',
+  },
+  {
+    id: 'e3-1',
+    source: '3',
+    target: '1',
+    type: 'custom',
+  },
+];
+
+const defaultEdgeOptions = { zIndex: 0 };
+const nodeOrigin: NodeOrigin = [0.5, 0.5];
+
+export default function EdgeToolbarExample() {
+  return (
+    <ReactFlow
+      defaultNodes={initialNodes}
+      defaultEdges={initialEdges}
+      className="react-flow-edge-toolbar-example"
+      minZoom={0.2}
+      maxZoom={4}
+      fitView
+      defaultEdgeOptions={defaultEdgeOptions}
+      edgeTypes={edgeTypes}
+      nodeOrigin={nodeOrigin}
+    >
+      <Background variant={BackgroundVariant.Dots} />
+      <MiniMap />
+      <Controls />
+      <SelectedNodesToolbar />
+    </ReactFlow>
+  );
+}