chore(edge-toolbar): cleanup

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

@@ -1,34 +1,32 @@
-import { getEdgeToolbarTransform, Position } from '@xyflow/system';
+import { useCallback } from 'react';
 import cc from 'classcat';
-import { CSSProperties, useCallback } from 'react';
 import { shallow } from 'zustand/shallow';
+import { getEdgeToolbarTransform } from '@xyflow/system';
 
 import { EdgeLabelRenderer } from '../../components/EdgeLabelRenderer';
 import { useStore } from '../../hooks/useStore';
 import { Edge, ReactFlowState } from '../../types';
 import type { EdgeToolbarProps } from './types';
 
-const storeSelector = (state: ReactFlowState) => ({
-  zoom: state.transform[2],
-});
+const zoomSelector = (state: ReactFlowState) => state.transform[2];
 
 /**
  * This component can render a toolbar or tooltip to one side of a custom edge. This
- * toolbar doesn't scale with the viewport so that the content is always visible.
+ * toolbar doesn't scale with the viewport so that the content stays the same size.
  *
  * @public
  * @example
  * ```jsx
- * import { EdgeToolbar } from "@xyflow/react";
+ * import { EdgeToolbar, BaseEdge, getBezierPath, type EdgeProps } from "@xyflow/react";
  *
  * export function CustomEdge({ id, data, ...props }: EdgeProps) {
- *   const [edgePath, labelX, labelY] = getBezierPath(props);
+ *   const [edgePath, centerX, centerY] = getBezierPath(props);
  *
  *   return (
  *     <>
  *       <BaseEdge id={id} path={edgePath} />
- *       <EdgeToolbar edgeId={id} x={labelX} y={labelY} isVisible>
- *         <button onClick={() => {}}>Click me</button>
+ *       <EdgeToolbar edgeId={id} x={centerX} y={centerY} isVisible>
+ *         <button onClick={() => console.log('edge', id, 'click')}}>Click me</button>
  *       </EdgeToolbar>
  *     </>
  *   );
@@ -43,56 +41,36 @@ export function EdgeToolbar({
   className,
   style,
   isVisible,
-  position = Position.Top,
-  offsetX = 0,
-  offsetY = 0,
-  align = 'center',
+  alignX = 'center',
+  alignY = '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);
-
-  // if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
+  const edgeSelector = useCallback((state: ReactFlowState): Edge | undefined => state.edgeLookup.get(edgeId), [edgeId]);
+  const edge = useStore(edgeSelector, shallow);
   const isActive = typeof isVisible === 'boolean' ? isVisible : edge?.selected;
+  const zoom = useStore(zoomSelector);
 
   if (!isActive || !edge) {
     return null;
   }
 
   const zIndex = (edge.zIndex ?? 0) + 1;
-
-  const { zoom } = useStore(storeSelector, shallow);
-
-  const transform = getEdgeToolbarTransform(x, y, zoom, offsetX, offsetY);
-  console.log('transform', transform);
-  const wrapperStyle: CSSProperties = {
-    position: 'absolute',
-    // TODO: offset
-    transform,
-    zIndex,
-    ...style,
-  };
-
+  const transform = getEdgeToolbarTransform(x, y, zoom, alignX, alignY);
 
   return (
     <EdgeLabelRenderer>
       <div
-        style={{ ...wrapperStyle, pointerEvents: 'all' }}
+        style={{
+          position: 'absolute',
+          transform,
+          zIndex,
+          pointerEvents: 'all',
+          transformOrigin: '0 0',
+          ...style,
+        }}
         className={cc(['react-flow__edge-toolbar', className])}
-        {...rest}
-        // @todo: check if we could only do this for non-prod envs
         data-id={edge.id}
+        {...rest}
       >
         {children}
       </div>

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

@@ -1,48 +1,10 @@
-import type { HTMLAttributes } from 'react';
-import type { Position, Align } from '@xyflow/system';
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { EdgeToolbarBaseProps } from '@xyflow/system';
 
 /**
- * @expand
+ * @inline
  */
-export type EdgeToolbarProps = HTMLAttributes<HTMLDivElement> & {
-  /**
-   * An edge toolbar must be attached to an edge.
-   */
-  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.
-   */
-  x: number;
-  /**
-   * The `y` position of the edge label.
-   */
-  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;
-};
+export type EdgeToolbarProps = EdgeToolbarBaseProps &
+  HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+  };