Merge pull request #5544 from xyflow/edge-toolbar

Add EdgeToolbar Component

.changeset/brave-plums-work.md

@@ -0,0 +1,7 @@
+---
+'@xyflow/react': minor
+'@xyflow/svelte': minor
+'@xyflow/system': patch
+---
+
+Add EdgeToolbar component

examples/react/src/App/routes.ts

@@ -50,6 +50,7 @@ import CancelConnection from '../examples/CancelConnection';
 import InteractiveMinimap from '../examples/InteractiveMinimap';
 import UseOnSelectionChange from '../examples/UseOnSelectionChange';
 import NodeToolbar from '../examples/NodeToolbar';
+import EdgeToolbar from '../examples/EdgeToolbar';
 import UseConnection from '../examples/UseConnection';
 import UseNodesInitialized from '../examples/UseNodesInit';
 import UseNodesData from '../examples/UseNodesData';
@@ -192,6 +193,11 @@ const routes: IRoute[] = [
     path: 'edge-routing',
     component: EdgeRouting,
   },
+  {
+    name: 'Edge Toolbar',
+    path: 'edge-toolbar',
+    component: EdgeToolbar,
+  },
   {
     name: 'Empty',
     path: 'empty',

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

@@ -0,0 +1,40 @@
+import { getBezierPath, BaseEdge, EdgeProps, useReactFlow, getStraightPath, getSmoothStepPath } from '@xyflow/react';
+import { EdgeToolbar } from '@xyflow/react';
+
+const getPath = (props: EdgeProps) => {
+  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 !== props.id));
+  };
+
+  return (
+    <>
+      <BaseEdge id={props.id} path={edgePath} />
+      <EdgeToolbar
+        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

@@ -0,0 +1,80 @@
+import {
+  Background,
+  BackgroundVariant,
+  Controls,
+  Edge,
+  EdgeTypes,
+  MiniMap,
+  Node,
+  Position,
+  ReactFlow,
+} from '@xyflow/react';
+
+import { CustomEdge } from './CustomEdge';
+
+const edgeTypes: EdgeTypes = {
+  custom: CustomEdge,
+};
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    data: { label: 'Node 1', toolbarPosition: Position.Top },
+    position: { x: 0, y: 0 },
+    className: 'react-flow__node-default',
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2', toolbarPosition: Position.Top },
+    position: { x: 100, y: 150 },
+    className: 'react-flow__node-default',
+  },
+  {
+    id: '3',
+    data: { label: 'Node 3', toolbarPosition: Position.Top },
+    position: { x: 200, y: 0 },
+    className: 'react-flow__node-default',
+  },
+];
+
+const initialEdges: Edge[] = [
+  {
+    id: 'e1-2',
+    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'] },
+  },
+];
+
+export default function EdgeToolbarExample() {
+  return (
+    <ReactFlow
+      defaultNodes={initialNodes}
+      defaultEdges={initialEdges}
+      className="react-flow-edge-toolbar-example"
+      minZoom={0.2}
+      maxZoom={4}
+      fitView
+      edgeTypes={edgeTypes}
+    >
+      <Background variant={BackgroundVariant.Dots} />
+      <MiniMap />
+      <Controls />
+    </ReactFlow>
+  );
+}

examples/svelte/src/components/Header/Header.svelte

@@ -13,6 +13,7 @@
 		'detached-handle',
 		'drag-n-drop',
 		'edges',
+		'edge-toolbar',
 		'figma',
 		'handle-connect',
 		'interaction',

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { Background, Position, SvelteFlow, type Edge, type Node } from '@xyflow/svelte';
+
+	import '@xyflow/svelte/dist/style.css';
+
+	import CustomEdge from './CustomEdge.svelte';
+
+	const edgeTypes = {
+		custom: CustomEdge
+	};
+
+	const initialNodes: Node[] = [
+		{
+			id: '1',
+			data: { label: 'Node 1', toolbarPosition: Position.Top },
+			position: { x: 0, y: 0 },
+			class: 'svelte-flow__node-default'
+		},
+		{
+			id: '2',
+			data: { label: 'Node 2', toolbarPosition: Position.Top },
+			position: { x: 100, y: 150 },
+			class: 'svelte-flow__node-default'
+		},
+		{
+			id: '3',
+			data: { label: 'Node 3', toolbarPosition: Position.Top },
+			position: { x: 200, y: 0 },
+			class: 'svelte-flow__node-default'
+		}
+	];
+
+	const initialEdges: Edge[] = [
+		{
+			id: 'e1-2',
+			source: '1',
+			target: '2',
+			type: 'custom'
+		},
+		{
+			id: 'e3-2',
+			source: '3',
+			target: '2',
+			type: 'custom'
+		},
+		{
+			id: 'e1-3',
+			source: '1',
+			target: '3',
+			type: 'custom'
+		}
+	];
+
+	let nodes = $state.raw<Node[]>(initialNodes);
+	let edges = $state.raw<Edge[]>(initialEdges);
+</script>
+
+<SvelteFlow bind:nodes bind:edges {edgeTypes} fitView>
+	<Background />
+</SvelteFlow>

examples/svelte/src/routes/examples/edge-toolbar/CustomEdge.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { getBezierPath, BaseEdge, type EdgeProps, useSvelteFlow } from '@xyflow/svelte';
+	import { EdgeToolbar } from '@xyflow/svelte';
+
+	const { deleteElements } = useSvelteFlow();
+
+	let { id, sourceX, sourceY, targetX, targetY }: EdgeProps = $props();
+
+	let [edgePath, labelX, labelY] = $derived(
+		getBezierPath({
+			sourceX,
+			sourceY,
+			targetX,
+			targetY
+		})
+	);
+
+	const deleteEdge = () => {
+		deleteElements({ edges: [{ id }] });
+	};
+</script>
+
+<BaseEdge {id} path={edgePath} />
+<EdgeToolbar edgeId={id} x={labelX} y={labelY} isVisible>
+	<button onclick={deleteEdge}>Delete</button>
+</EdgeToolbar>

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

@@ -0,0 +1,79 @@
+import { useCallback } from 'react';
+import cc from 'classcat';
+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 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 stays the same size.
+ *
+ * @public
+ * @example
+ * ```jsx
+ * import { EdgeToolbar, BaseEdge, getBezierPath, type EdgeProps } from "@xyflow/react";
+ *
+ * export function CustomEdge({ id, data, ...props }: EdgeProps) {
+ *   const [edgePath, centerX, centerY] = getBezierPath(props);
+ *
+ *   return (
+ *     <>
+ *       <BaseEdge id={id} path={edgePath} />
+ *       <EdgeToolbar edgeId={id} x={centerX} y={centerY} isVisible>
+ *         <button onClick={() => console.log('edge', id, 'click')}}>Click me</button>
+ *       </EdgeToolbar>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export function EdgeToolbar({
+  edgeId,
+  x,
+  y,
+  children,
+  className,
+  style,
+  isVisible,
+  alignX = 'center',
+  alignY = 'center',
+  ...rest
+}: EdgeToolbarProps) {
+  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) {
+    return null;
+  }
+
+  const zIndex = (edge?.zIndex ?? 0) + 1;
+  const transform = getEdgeToolbarTransform(x, y, zoom, alignX, alignY);
+
+  return (
+    <EdgeLabelRenderer>
+      <div
+        style={{
+          position: 'absolute',
+          transform,
+          zIndex,
+          pointerEvents: 'all',
+          transformOrigin: '0 0',
+          ...style,
+        }}
+        className={cc(['react-flow__edge-toolbar', className])}
+        data-id={edge?.id ?? ''}
+        {...rest}
+      >
+        {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,10 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { EdgeToolbarBaseProps } from '@xyflow/system';
+
+/**
+ * @inline
+ */
+export type EdgeToolbarProps = EdgeToolbarBaseProps &
+  HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+  };

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/svelte/src/lib/index.ts

@@ -22,6 +22,7 @@ export * from '$lib/plugins/Controls';
 export * from '$lib/plugins/Background';
 export * from '$lib/plugins/Minimap';
 export * from '$lib/plugins/NodeToolbar';
+export * from '$lib/plugins/EdgeToolbar';
 export * from '$lib/plugins/NodeResizer';
 
 // store

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { getEdgeToolbarTransform } from '@xyflow/system';
+
+  import { useStore } from '$lib/store';
+  import { EdgeLabel } from '$lib/components/EdgeLabel';
+  import type { EdgeToolbarProps } from './types';
+
+  let {
+    edgeId,
+    x,
+    y,
+    alignX = 'center',
+    alignY = 'center',
+    isVisible,
+    children,
+    ...rest
+  }: EdgeToolbarProps = $props();
+
+  const store = useStore();
+  const edge = $derived(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 = $derived((edge?.zIndex ?? 0) + 1);
+</script>
+
+{#if store.domNode && isActive}
+  <EdgeLabel>
+    <div
+      style:position="absolute"
+      style:transform
+      style:z-index={zIndex}
+      style:transform-origin="0 0"
+      {...rest}
+      class="svelte-flow__edge-toolbar"
+      data-id={edgeId ?? ''}
+    >
+      {@render children?.()}
+    </div>
+  </EdgeLabel>
+{/if}

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

@@ -0,0 +1,2 @@
+export { default as EdgeToolbar } from './EdgeToolbar.svelte';
+export * from './types';

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

@@ -0,0 +1,7 @@
+import type { EdgeToolbarBaseProps } from '@xyflow/system';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+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 vertical toolbar position relative to the passed x position.
+   * @default "center"
+   * @example 'left', 'center', 'right'
+   */
+  alignX?: 'left' | 'center' | 'right';
+  /**
+   * Align the horizontal toolbar position relative to the passed y position.
+   * @default "center"
+   * @example 'top', 'center', 'bottom'
+   */
+  alignY?: 'top' | 'center' | 'bottom';
+};

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

@@ -0,0 +1,23 @@
+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,
+  alignX: 'left' | 'center' | 'right' = 'center',
+  alignY: 'top' | 'center' | 'bottom' = 'center'
+): string {
+  return `translate(${x}px, ${y}px) scale(${1 / zoom}) translate(${-(alignXToPercent[alignX] ?? 50)}%, ${-(
+    alignYToPercent[alignY] ?? 50
+  )}%)`;
+}

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';