Correct positioning

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

@@ -1,16 +1,20 @@
-import { EdgeLabelRenderer, getBezierPath, BaseEdge, EdgeProps } from '@xyflow/react';
+import { getBezierPath, BaseEdge, EdgeProps, useReactFlow } from '@xyflow/react';
 
 import { EdgeToolbar } from '@xyflow/react';
 
 export function CustomEdge({ id, data, ...props }: EdgeProps) {
   const [edgePath, labelX, labelY] = getBezierPath(props);
+  const { setEdges } = useReactFlow();
+
+  const deleteEdge = () => {
+    setEdges((edges) => edges.filter((edge) => edge.id !== id));
+  };
 
   return (
     <>
       <BaseEdge id={id} path={edgePath} />
-      <EdgeToolbar edgeId={id} labelX={labelX} labelY={labelY}>
-        <button>delete</button>
-        <button>edit</button>
+      <EdgeToolbar edgeId={id} labelX={labelX} labelY={labelY} isVisible>
+        <button onClick={deleteEdge}>Delete</button>
       </EdgeToolbar>
     </>
   );

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

@@ -1,15 +0,0 @@
-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

@@ -13,7 +13,6 @@ import {
 } from '@xyflow/react';
 
 import { CustomEdge } from './CustomEdge';
-import SelectedNodesToolbar from './SelectedNodesToolbar';
 
 const edgeTypes: EdgeTypes = {
   custom: CustomEdge,
@@ -80,7 +79,6 @@ export default function EdgeToolbarExample() {
       <Background variant={BackgroundVariant.Dots} />
       <MiniMap />
       <Controls />
-      <SelectedNodesToolbar />
     </ReactFlow>
   );
 }