add svelte version

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

@@ -1,5 +1,4 @@
 import { getBezierPath, BaseEdge, EdgeProps, useReactFlow } from '@xyflow/react';
-
 import { EdgeToolbar } from '@xyflow/react';
 
 export function CustomEdge({ id, data, ...props }: EdgeProps) {
@@ -13,7 +12,7 @@ export function CustomEdge({ id, data, ...props }: EdgeProps) {
   return (
     <>
       <BaseEdge id={id} path={edgePath} />
-      <EdgeToolbar edgeId={id} labelX={labelX} labelY={labelY} isVisible>
+      <EdgeToolbar edgeId={id} x={labelX} y={labelY} isVisible>
         <button onClick={deleteEdge}>Delete</button>
       </EdgeToolbar>
     </>

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

@@ -1,15 +1,14 @@
 import {
-  ReactFlow,
-  MiniMap,
   Background,
   BackgroundVariant,
   Controls,
-  Node,
   Edge,
-  NodeTypes,
-  Position,
-  NodeOrigin,
   EdgeTypes,
+  MiniMap,
+  Node,
+  NodeOrigin,
+  Position,
+  ReactFlow,
 } from '@xyflow/react';
 
 import { CustomEdge } from './CustomEdge';
@@ -28,13 +27,13 @@ const initialNodes: Node[] = [
   {
     id: '2',
     data: { label: 'Node 2', toolbarPosition: Position.Top },
-    position: { x: 200, y: 0 },
+    position: { x: 100, y: 150 },
     className: 'react-flow__node-default',
   },
   {
     id: '3',
     data: { label: 'Node 3', toolbarPosition: Position.Top },
-    position: { x: 100, y: 150 },
+    position: { x: 200, y: 0 },
     className: 'react-flow__node-default',
   },
 ];
@@ -47,20 +46,20 @@ const initialEdges: Edge[] = [
     type: 'custom',
   },
   {
-    id: 'e2-3',
+    id: 'e3-2',
-    source: '2',
+    source: '3',
-    target: '3',
+    target: '2',
     type: 'custom',
   },
   {
-    id: 'e3-1',
+    id: 'e1-3',
-    source: '3',
+    source: '1',
-    target: '1',
+    target: '3',
     type: 'custom',
   },
 ];
 
-const defaultEdgeOptions = { zIndex: 0 };
+// const defaultEdgeOptions = { zIndex: 0 };
 const nodeOrigin: NodeOrigin = [0.5, 0.5];
 
 export default function EdgeToolbarExample() {
@@ -72,7 +71,7 @@ export default function EdgeToolbarExample() {
       minZoom={0.2}
       maxZoom={4}
       fitView
-      defaultEdgeOptions={defaultEdgeOptions}
+      // defaultEdgeOptions={defaultEdgeOptions}
       edgeTypes={edgeTypes}
       nodeOrigin={nodeOrigin}
     >

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,62 @@
+<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>
+
+<div style="height: 100vh;">
+	<SvelteFlow bind:nodes bind:edges {edgeTypes} fitView>
+		<Background />
+	</SvelteFlow>
+</div>

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

@@ -9,11 +9,32 @@ 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],
 });
 
+/**
+ * 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.
+ *
+ * @public
+ * @example
+ * ```jsx
+ * import { EdgeToolbar } from "@xyflow/react";
+ *
+ * export function CustomEdge({ id, data, ...props }: EdgeProps) {
+ *   const [edgePath, labelX, labelY] = getBezierPath(props);
+ *
+ *   return (
+ *     <>
+ *       <BaseEdge id={id} path={edgePath} />
+ *       <EdgeToolbar edgeId={id} x={labelX} y={labelY} isVisible>
+ *         <button onClick={() => {}}>Click me</button>
+ *       </EdgeToolbar>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
 export function EdgeToolbar({
   edgeId,
   x,
@@ -41,9 +62,6 @@ export function EdgeToolbar({
   );
 
   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;
@@ -52,12 +70,11 @@ export function EdgeToolbar({
     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(x, y, { x, y, zoom }, 120, offsetY);
+  const { zoom } = useStore(storeSelector, shallow);
+
+  const transform = getEdgeToolbarTransform(x, y, zoom, offsetX, offsetY);
   console.log('transform', transform);
   const wrapperStyle: CSSProperties = {
     position: 'absolute',

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

@@ -6,10 +6,9 @@ import type { Position, Align } from '@xyflow/system';
  */
 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
+   * An edge toolbar must be attached to an edge.
-   * of edges.
    */
-  edgeId?: string;
+  edgeId: string;
   /** If `true`, edge toolbar is visible even if edge is not selected. */
   isVisible?: boolean;
   /**
@@ -41,9 +40,9 @@ export type EdgeToolbarProps = HTMLAttributes<HTMLDivElement> & {
   /**
    * The `offsetX` position of the edge label relative to the edge in pixels.
    */
-  offsetX: number;
+  offsetX?: number;
   /**
    * The `offsetY` position of the edge label relative to the edge in pixels.
    */
-  offsetY: number;
+  offsetY?: number;
 };

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,52 @@
+<script lang="ts">
+  import { Position, getEdgeToolbarTransform, getNodeToolbarTransform } 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 { InternalNode } from '$lib/types';
+  import type { EdgeToolbarProps } from './types';
+
+  let {
+    edgeId,
+    position = Position.Top,
+    align = 'center',
+    x,
+    y,
+    offsetX = 0,
+    offsetY = 0,
+    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);
+</script>
+
+{#if store.domNode && isActive}
+  <EdgeLabel>
+    <div
+      style:position="absolute"
+      style:transform
+      style:z-index={zIndex}
+      {...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,42 @@
+import type { Position, Align } 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;
+  children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;

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

@@ -1,12 +1,10 @@
-import { type Viewport } from '..';
-
 export function getEdgeToolbarTransform(
-  labelX: number,
+  x: number,
-  labelY: number,
+  y: number,
-  viewport: Viewport,
+  zoom: number,
   offsetX: number = 0,
   offsetY: number = 0
 ): string {
   // Position the toolbar at the edge label center (scaling is handled by EdgeLabelRenderer)
-  return `translate(${labelX + offsetX}px, ${labelY + offsetY}px) translate(-50%, -50%) scale(${1 / viewport.zoom})`;
+  return `translate(${x + offsetX}px, ${y + offsetY}px) translate(-50%, -50%) scale(${1 / zoom})`;
 }