add svelte version

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
-   * of edges.
+   * An edge toolbar must be attached to an edge.
    */
-  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,
-  labelY: number,
-  viewport: Viewport,
+  x: number,
+  y: number,
+  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})`;
 }