initial implementation of edge toolbar

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

@@ -0,0 +1,86 @@
+import { getEdgeToolbarTransform, Position } from '@xyflow/system';
+import cc from 'classcat';
+import { CSSProperties, useCallback } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { EdgeLabelRenderer } from '../../components/EdgeLabelRenderer';
+import { useStore } from '../../hooks/useStore';
+import { Edge, ReactFlowState } from '../../types';
+import type { EdgeToolbarProps } from './types';
+
+const storeSelector = (state: ReactFlowState) => ({
+  x: state.transform[0],
+  y: state.transform[1],
+  zoom: state.transform[2],
+});
+
+export function EdgeToolbar({
+  edgeId,
+  labelX,
+  labelY,
+  children,
+  className,
+  style,
+  isVisible,
+  position = Position.Top,
+  offset = 10,
+  align = 'center',
+  ...rest
+}: EdgeToolbarProps) {
+  const edgeSelector = useCallback(
+    (state: ReactFlowState): Edge | undefined => {
+      const edge = state.edgeLookup.get(edgeId || '');
+      if (edge) {
+        return edge;
+      }
+
+      return undefined;
+    },
+    [edgeId]
+  );
+
+  const edge = useStore(edgeSelector);
+  console.log('edge', edge, edgeId);
+
+  const { x, y, zoom } = useStore(storeSelector, shallow);
+
+  // if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
+  const isActive = typeof isVisible === 'boolean' ? isVisible : edge?.selected;
+
+  if (!isActive || !edge) {
+    return null;
+  }
+
+  // TODO: how to get the bounds of an edge?
+  // const edgeRect = getInternalEdgesBounds(edge.source, edge.target);
+  // TODO: how to get the z-index of an edge?
+  const zIndex = edge.zIndex ?? 0 + 1;
+
+  const transform = getEdgeToolbarTransform(labelX, labelY, { x, y, zoom });
+  console.log('transform', transform);
+  const wrapperStyle: CSSProperties = {
+    position: 'absolute',
+    // TODO: offset
+    // transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+    transform,
+    zIndex,
+    ...style,
+  };
+
+  console.log('wrapperStyle', wrapperStyle);
+
+  return (
+    <EdgeLabelRenderer>
+      <div
+        style={wrapperStyle}
+        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/index.tsx

@@ -0,0 +1,2 @@
+export { EdgeToolbar } from './EdgeToolbar';
+export type { EdgeToolbarProps } from './types';

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

@@ -0,0 +1,41 @@
+import type { HTMLAttributes } from 'react';
+import type { Position, Align } from '@xyflow/system';
+
+/**
+ * @expand
+ */
+export type EdgeToolbarProps = HTMLAttributes<HTMLDivElement> & {
+  /**
+   * By passing in an array of edge id's you can render a single tooltip for a group or collection
+   * of edges.
+   */
+  edgeId?: string;
+  /** If `true`, edge toolbar is visible even if edge is not selected. */
+  isVisible?: boolean;
+  /**
+   * TODO: What and how?? Needed?
+   * Position of the toolbar relative to the edge.
+   * @default Position.Top
+   * @example Position.TopLeft, Position.TopRight, Position.BottomLeft, Position.BottomRight
+   */
+  position?: Position;
+  /**
+   * The space between the edge and the toolbar, measured in pixels.
+   * @default 10
+   */
+  offset?: number;
+  /**
+   * Align the toolbar relative to the edge.
+   * @default "center"
+   * @example Align.Start, Align.Center, Align.End
+   */
+  align?: Align;
+  /**
+   * The `x` position of the edge label.
+   */
+  labelX: number;
+  /**
+   * The `y` position of the edge label.
+   */
+  labelY: number;
+};

packages/react/src/additional-components/index.ts

@@ -3,3 +3,4 @@ export * from './Controls';
 export * from './MiniMap';
 export * from './NodeResizer';
 export * from './NodeToolbar';
+export * from './EdgeToolbar';

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

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

packages/system/src/utils/index.ts

@@ -5,6 +5,7 @@ export * from './graph';
 export * from './general';
 export * from './marker';
 export * from './node-toolbar';
+export * from './edge-toolbar';
 export * from './store';
 export * from './types';
 export * from './shallow-node-data';