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;
+  };

packages/svelte/src/lib/plugins/EdgeToolbar/EdgeToolbar.svelte

@@ -1,38 +1,26 @@
 <script lang="ts">
-  import { Position, getEdgeToolbarTransform } from '@xyflow/system';
-  import { getContext } from 'svelte';
+  import { getEdgeToolbarTransform } from '@xyflow/system';
 
-  import { useSvelteFlow } from '$lib/hooks/useSvelteFlow.svelte';
   import { useStore } from '$lib/store';
-
   import { EdgeLabel } from '$lib/components/EdgeLabel';
   import type { EdgeToolbarProps } from './types';
 
   let {
     edgeId,
-    position = Position.Top,
-    align = 'center',
     x,
     y,
-    offsetX = 0,
-    offsetY = 0,
+    alignX = 'center',
+    alignY = 'center',
     isVisible,
     children,
     ...rest
   }: EdgeToolbarProps = $props();
 
   const store = useStore();
-
-  const edge = store.edgeLookup.get(edgeId ?? '');
-
-  // if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
-  let isActive = $derived(typeof isVisible === 'boolean' ? isVisible : edge?.selected);
-
-  let zIndex = (edge?.zIndex ?? 0) + 1;
-
-  const { zoom } = store.viewport;
-
-  const transform = getEdgeToolbarTransform(x, y, zoom, offsetX, offsetY);
+  const edge = store.edgeLookup.get(edgeId);
+  const isActive = $derived(typeof isVisible === 'boolean' ? isVisible : edge?.selected);
+  const transform = $derived(getEdgeToolbarTransform(x, y, store.viewport.zoom, alignX, alignY));
+  const zIndex = (edge?.zIndex ?? 0) + 1;
 </script>
 
 {#if store.domNode && isActive}
@@ -41,6 +29,7 @@
       style:position="absolute"
       style:transform
       style:z-index={zIndex}
+      style:transform-origin="0 0"
       {...rest}
       class="svelte-flow__edge-toolbar"
       data-id={edgeId ?? ''}

packages/svelte/src/lib/plugins/EdgeToolbar/types.ts

@@ -1,42 +1,7 @@
-import type { Position, Align } from '@xyflow/system';
+import type { EdgeToolbarBaseProps } from '@xyflow/system';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 
-export type EdgeToolbarProps = {
-  /**
-   * 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;
-  /**
-   * 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 & {
   children?: Snippet;
 } & HTMLAttributes<HTMLDivElement>;

packages/system/src/types/edges.ts

@@ -129,3 +129,34 @@ export type EdgePosition = {
 };
 
 export type EdgeLookup<EdgeType extends EdgeBase = EdgeBase> = Map<string, EdgeType>;
+
+export type EdgeToolbarBaseProps = {
+  /**
+   * An edge toolbar must be attached to an edge.
+   */
+  edgeId: string;
+  /**
+   * The `x` position of the edge label.
+   */
+  x: number;
+  /**
+   * The `y` position of the edge label.
+   */
+  y: number;
+  /** If `true`, edge toolbar is visible even if edge is not selected.
+   * @default false
+   */
+  isVisible?: boolean;
+  /**
+   * Align the toolbar x relative to the edge.
+   * @default "center"
+   * @example 'left', 'center', 'right'
+   */
+  alignX?: 'left' | 'center' | 'right';
+  /**
+   * Align the toolbar x relative to the edge.
+   * @default "center"
+   * @example 'top', 'center', 'bottom'
+   */
+  alignY?: 'top' | 'center' | 'bottom';
+};

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

@@ -1,10 +1,24 @@
+const alignXToPercent: Record<'left' | 'center' | 'right', number> = {
+  left: 0,
+  center: 50,
+  right: 100,
+};
+
+const alignYToPercent: Record<'top' | 'center' | 'bottom', number> = {
+  top: 0,
+  center: 50,
+  bottom: 100,
+};
+
 export function getEdgeToolbarTransform(
   x: number,
   y: number,
   zoom: number,
-  offsetX: number = 0,
-  offsetY: number = 0
+  alignX: 'left' | 'center' | 'right' = 'center',
+  alignY: 'top' | 'center' | 'bottom' = 'center'
 ): string {
   // Position the toolbar at the edge label center (scaling is handled by EdgeLabelRenderer)
-  return `translate(${x + offsetX}px, ${y + offsetY}px) translate(-50%, -50%) scale(${1 / zoom})`;
+  return `translate(${x}px, ${y}px) scale(${1 / zoom}) translate(${-(alignXToPercent[alignX] ?? 50)}%, ${-(
+    alignYToPercent[alignY] ?? 50
+  )}%)`;
 }