From bb9fe4f830ea89b7386017234745869390f7153a Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 13 Oct 2025 13:26:04 +0200
Subject: [PATCH] Correct positioning

---
 .../react/src/examples/EdgeToolbar/CustomEdge.tsx | 12 ++++++++----
 .../examples/EdgeToolbar/SelectedNodesToolbar.tsx | 15 ---------------
 examples/react/src/examples/EdgeToolbar/index.tsx |  2 --
 .../EdgeToolbar/EdgeToolbar.tsx                   | 13 ++++++-------
 .../additional-components/EdgeToolbar/types.ts    | 12 ++++++++++--
 packages/system/src/utils/edge-toolbar.ts         | 12 +++++++++---
 6 files changed, 33 insertions(+), 33 deletions(-)
 delete mode 100644 examples/react/src/examples/EdgeToolbar/SelectedNodesToolbar.tsx

diff --git a/examples/react/src/examples/EdgeToolbar/CustomEdge.tsx b/examples/react/src/examples/EdgeToolbar/CustomEdge.tsx
index c3e63e83..c6429f17 100644
--- a/examples/react/src/examples/EdgeToolbar/CustomEdge.tsx
+++ b/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>
     </>
   );
diff --git a/examples/react/src/examples/EdgeToolbar/SelectedNodesToolbar.tsx b/examples/react/src/examples/EdgeToolbar/SelectedNodesToolbar.tsx
deleted file mode 100644
index 4996a45a..00000000
--- a/examples/react/src/examples/EdgeToolbar/SelectedNodesToolbar.tsx
+++ /dev/null
@@ -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>
-  );
-}
diff --git a/examples/react/src/examples/EdgeToolbar/index.tsx b/examples/react/src/examples/EdgeToolbar/index.tsx
index 57faef24..4470fe33 100644
--- a/examples/react/src/examples/EdgeToolbar/index.tsx
+++ b/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>
   );
 }
diff --git a/packages/react/src/additional-components/EdgeToolbar/EdgeToolbar.tsx b/packages/react/src/additional-components/EdgeToolbar/EdgeToolbar.tsx
index 6292eeea..9228fa3d 100644
--- a/packages/react/src/additional-components/EdgeToolbar/EdgeToolbar.tsx
+++ b/packages/react/src/additional-components/EdgeToolbar/EdgeToolbar.tsx
@@ -16,14 +16,15 @@ const storeSelector = (state: ReactFlowState) => ({
 
 export function EdgeToolbar({
   edgeId,
-  labelX,
-  labelY,
+  x,
+  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>
diff --git a/packages/react/src/additional-components/EdgeToolbar/types.ts b/packages/react/src/additional-components/EdgeToolbar/types.ts
index 96261694..651a27c8 100644
--- a/packages/react/src/additional-components/EdgeToolbar/types.ts
+++ b/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;
 };
diff --git a/packages/system/src/utils/edge-toolbar.ts b/packages/system/src/utils/edge-toolbar.ts
index 3fe2c5c2..84ef5a5c 100644
--- a/packages/system/src/utils/edge-toolbar.ts
+++ b/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})`;
 }