add svelte version

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