chore(edge-toolbar): cleanup

examples/react/src/examples/EdgeToolbar/CustomEdge.tsx

@@ -1,19 +1,39 @@
-import { getBezierPath, BaseEdge, EdgeProps, useReactFlow } from '@xyflow/react';
+import { getBezierPath, BaseEdge, EdgeProps, useReactFlow, getStraightPath, getSmoothStepPath } from '@xyflow/react';
 import { EdgeToolbar } from '@xyflow/react';
 
-export function CustomEdge({ id, data, ...props }: EdgeProps) {
+const getPath = (props: EdgeProps) => {
-  const [edgePath, labelX, labelY] = getBezierPath(props);
+  switch (props.data!.type) {
+    case 'smoothstep':
+      return getSmoothStepPath(props);
+    case 'straight':
+      return getStraightPath(props);
+    default:
+      return getBezierPath(props);
+  }
+};
+
+export function CustomEdge(props: EdgeProps) {
+  const [edgePath, centerX, centerY] = getPath(props);
   const { setEdges } = useReactFlow();
 
   const deleteEdge = () => {
-    setEdges((edges) => edges.filter((edge) => edge.id !== id));
+    setEdges((edges) => edges.filter((edge) => edge.id !== props.id));
   };
 
   return (
     <>
-      <BaseEdge id={id} path={edgePath} />
+      <BaseEdge id={props.id} path={edgePath} />
-      <EdgeToolbar edgeId={id} x={labelX} y={labelY} isVisible>
+      <EdgeToolbar
-        <button onClick={deleteEdge}>Delete</button>
+        edgeId={props.id}
+        x={centerX + 0}
+        y={centerY + 0}
+        alignX={props.data?.align?.[0] ?? 'center'}
+        alignY={props.data?.align?.[1] ?? 'center'}
+        isVisible
+      >
+        <button style={{}} onClick={deleteEdge}>
+          Delete
+        </button>
       </EdgeToolbar>
     </>
   );

examples/react/src/examples/EdgeToolbar/index.tsx

@@ -6,7 +6,6 @@ import {
   EdgeTypes,
   MiniMap,
   Node,
-  NodeOrigin,
   Position,
   ReactFlow,
 } from '@xyflow/react';
@@ -44,24 +43,24 @@ const initialEdges: Edge[] = [
     source: '1',
     target: '2',
     type: 'custom',
+    data: { type: 'smoothstep', align: ['left', 'bottom'] },
   },
   {
     id: 'e3-2',
     source: '3',
     target: '2',
     type: 'custom',
+    data: { type: 'bezier', align: ['right', 'bottom'] },
   },
   {
     id: 'e1-3',
     source: '1',
     target: '3',
     type: 'custom',
+    data: { type: 'straight', align: ['center', 'center'] },
   },
 ];
 
-// const defaultEdgeOptions = { zIndex: 0 };
-const nodeOrigin: NodeOrigin = [0.5, 0.5];
-
 export default function EdgeToolbarExample() {
   return (
     <ReactFlow
@@ -71,9 +70,7 @@ export default function EdgeToolbarExample() {
       minZoom={0.2}
       maxZoom={4}
       fitView
-      // defaultEdgeOptions={defaultEdgeOptions}
       edgeTypes={edgeTypes}
-      nodeOrigin={nodeOrigin}
     >
       <Background variant={BackgroundVariant.Dots} />
       <MiniMap />

examples/svelte/src/routes/examples/edge-toolbar/+page.svelte

@@ -55,8 +55,6 @@
 	let edges = $state.raw<Edge[]>(initialEdges);
 </script>
 
-<div style="height: 100vh;">
+<SvelteFlow bind:nodes bind:edges {edgeTypes} fitView>
-	<SvelteFlow bind:nodes bind:edges {edgeTypes} fitView>
+	<Background />
-		<Background />
+</SvelteFlow>
-	</SvelteFlow>
-</div>

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) => ({
+const zoomSelector = (state: ReactFlowState) => state.transform[2];
-  zoom: 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>
+ *       <EdgeToolbar edgeId={id} x={centerX} y={centerY} isVisible>
- *         <button onClick={() => {}}>Click me</button>
+ *         <button onClick={() => console.log('edge', id, 'click')}}>Click me</button>
  *       </EdgeToolbar>
  *     </>
  *   );
@@ -43,56 +41,36 @@ export function EdgeToolbar({
   className,
   style,
   isVisible,
-  position = Position.Top,
+  alignX = 'center',
-  offsetX = 0,
+  alignY = 'center',
-  offsetY = 0,
-  align = 'center',
   ...rest
 }: EdgeToolbarProps) {
-  const edgeSelector = useCallback(
+  const edgeSelector = useCallback((state: ReactFlowState): Edge | undefined => state.edgeLookup.get(edgeId), [edgeId]);
-    (state: ReactFlowState): Edge | undefined => {
+  const edge = useStore(edgeSelector, shallow);
-      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 isActive = typeof isVisible === 'boolean' ? isVisible : edge?.selected;
+  const zoom = useStore(zoomSelector);
 
   if (!isActive || !edge) {
     return null;
   }
 
   const zIndex = (edge.zIndex ?? 0) + 1;
-
+  const transform = getEdgeToolbarTransform(x, y, zoom, alignX, alignY);
-  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,
-  };
-
 
   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 { HTMLAttributes, ReactNode } from 'react';
-import type { Position, Align } from '@xyflow/system';
+import type { EdgeToolbarBaseProps } from '@xyflow/system';
 
 /**
- * @expand
+ * @inline
  */
-export type EdgeToolbarProps = HTMLAttributes<HTMLDivElement> & {
+export type EdgeToolbarProps = EdgeToolbarBaseProps &
-  /**
+  HTMLAttributes<HTMLDivElement> & {
-   * An edge toolbar must be attached to an edge.
+    children?: ReactNode;
-   */
+  };
-  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;
-};

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

@@ -1,38 +1,26 @@
 <script lang="ts">
-  import { Position, getEdgeToolbarTransform } from '@xyflow/system';
+  import { getEdgeToolbarTransform } from '@xyflow/system';
-  import { getContext } from 'svelte';
 
-  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,
+    alignX = 'center',
-    offsetY = 0,
+    alignY = 'center',
     isVisible,
     children,
     ...rest
   }: EdgeToolbarProps = $props();
 
   const store = useStore();
-
+  const edge = store.edgeLookup.get(edgeId);
-  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));
-  // if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
+  const zIndex = (edge?.zIndex ?? 0) + 1;
-  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);
 </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 = {
+export type EdgeToolbarProps = EdgeToolbarBaseProps & {
-  /**
-   * 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;
   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,
+  alignX: 'left' | 'center' | 'right' = 'center',
-  offsetY: number = 0
+  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
+  )}%)`;
 }