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}>
+      <EdgeToolbar edgeId={id} labelX={labelX} labelY={labelY} isVisible>
-        <button>delete</button>
+        <button onClick={deleteEdge}>Delete</button>
-        <button>edit</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>
   );
 }

packages/react/src/additional-components/EdgeToolbar/EdgeToolbar.tsx

@@ -16,14 +16,15 @@ const storeSelector = (state: ReactFlowState) => ({
 
 export function EdgeToolbar({
   edgeId,
-  labelX,
+  x,
-  labelY,
+  y,
   children,
   className,
   style,
   isVisible,
   position = Position.Top,
-  offset = 10,
+  offsetX = 0,
+  offsetY = 0,
   align = 'center',
   ...rest
 }: EdgeToolbarProps) {
@@ -56,12 +57,11 @@ export function EdgeToolbar({
   // TODO: how to get the z-index of an edge?
   const zIndex = edge.zIndex ?? 0 + 1;
 
-  const transform = getEdgeToolbarTransform(labelX, labelY, { x, y, zoom });
+  const transform = getEdgeToolbarTransform(x, y, { x, y, zoom }, 120, offsetY);
   console.log('transform', transform);
   const wrapperStyle: CSSProperties = {
     position: 'absolute',
     // TODO: offset
-    // transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
     transform,
     zIndex,
     ...style,
@@ -72,13 +72,12 @@ export function EdgeToolbar({
   return (
     <EdgeLabelRenderer>
       <div
-        style={wrapperStyle}
+        style={{ ...wrapperStyle, pointerEvents: 'all' }}
         className={cc(['react-flow__edge-toolbar', className])}
         {...rest}
         // @todo: check if we could only do this for non-prod envs
         data-id={`${edge.id} `}
       >
-        aaa
         {children}
       </div>
     </EdgeLabelRenderer>

packages/react/src/additional-components/EdgeToolbar/types.ts

@@ -33,9 +33,17 @@ export type EdgeToolbarProps = HTMLAttributes<HTMLDivElement> & {
   /**
    * The `x` position of the edge label.
    */
-  labelX: number;
+  x: number;
   /**
    * The `y` position of the edge label.
    */
-  labelY: number;
+  y: number;
+  /**
+   * The `offsetX` position of the edge label relative to the edge in pixels.
+   */
+  offsetX: number;
+  /**
+   * The `offsetY` position of the edge label relative to the edge in pixels.
+   */
+  offsetY: number;
 };

packages/system/src/utils/edge-toolbar.ts

@@ -1,6 +1,12 @@
-import { Position, type Viewport, type Align } from '..';
+import { type Viewport } from '..';
 
-export function getEdgeToolbarTransform(labelX: number, labelY: number, viewport: Viewport): string {
+export function getEdgeToolbarTransform(
+  labelX: number,
+  labelY: number,
+  viewport: Viewport,
+  offsetX: number = 0,
+  offsetY: number = 0
+): string {
   // Position the toolbar at the edge label center (scaling is handled by EdgeLabelRenderer)
-  return `translate(${labelX}px, ${labelY}px)`;
+  return `translate(${labelX + offsetX}px, ${labelY + offsetY}px) translate(-50%, -50%) scale(${1 / viewport.zoom})`;
 }