Merge pull request #5544 from xyflow/edge-toolbar

Add EdgeToolbar Component

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,40 @@
+import { getBezierPath, BaseEdge, EdgeProps, useReactFlow, getStraightPath, getSmoothStepPath } from '@xyflow/react';
+import { EdgeToolbar } from '@xyflow/react';
+
+const getPath = (props: EdgeProps) => {
+  switch (props.data!.type) {
+    case 'smoothstep':
+      return getSmoothStepPath(props);
+    case 'straight':
+      return getStraightPath(props);
+    default:
+      return getBezierPath(props);
+  }
+};
+
+export function CustomEdge(props: EdgeProps) {
+  const [edgePath, centerX, centerY] = getPath(props);
+  const { setEdges } = useReactFlow();
+
+  const deleteEdge = () => {
+    setEdges((edges) => edges.filter((edge) => edge.id !== props.id));
+  };
+
+  return (
+    <>
+      <BaseEdge id={props.id} path={edgePath} />
+      <EdgeToolbar
+        edgeId={props.id}
+        x={centerX + 0}
+        y={centerY + 0}
+        alignX={props.data?.align?.[0] ?? 'center'}
+        alignY={props.data?.align?.[1] ?? 'center'}
+        isVisible
+      >
+        <button style={{}} onClick={deleteEdge}>
+          Delete
+        </button>
+      </EdgeToolbar>
+    </>
+  );
+}

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

@@ -0,0 +1,80 @@
+import {
+  Background,
+  BackgroundVariant,
+  Controls,
+  Edge,
+  EdgeTypes,
+  MiniMap,
+  Node,
+  Position,
+  ReactFlow,
+} from '@xyflow/react';
+
+import { CustomEdge } from './CustomEdge';
+
+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: 100, y: 150 },
+    className: 'react-flow__node-default',
+  },
+  {
+    id: '3',
+    data: { label: 'Node 3', toolbarPosition: Position.Top },
+    position: { x: 200, y: 0 },
+    className: 'react-flow__node-default',
+  },
+];
+
+const initialEdges: Edge[] = [
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    type: 'custom',
+    data: { type: 'smoothstep', align: ['left', 'bottom'] },
+  },
+  {
+    id: 'e3-2',
+    source: '3',
+    target: '2',
+    type: 'custom',
+    data: { type: 'bezier', align: ['right', 'bottom'] },
+  },
+  {
+    id: 'e1-3',
+    source: '1',
+    target: '3',
+    type: 'custom',
+    data: { type: 'straight', align: ['center', 'center'] },
+  },
+];
+
+export default function EdgeToolbarExample() {
+  return (
+    <ReactFlow
+      defaultNodes={initialNodes}
+      defaultEdges={initialEdges}
+      className="react-flow-edge-toolbar-example"
+      minZoom={0.2}
+      maxZoom={4}
+      fitView
+      edgeTypes={edgeTypes}
+    >
+      <Background variant={BackgroundVariant.Dots} />
+      <MiniMap />
+      <Controls />
+    </ReactFlow>
+  );
+}