Merge pull request #5544 from xyflow/edge-toolbar

Add EdgeToolbar Component

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