Merge pull request #5558 from xyflow/fix/edge-toolbar

Fix/edge toolbar

.changeset/nasty-clouds-shake.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Remove `edgeId` from `EdgeToolbar` props

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

@@ -6,5 +6,9 @@ import type { EdgeToolbarBaseProps } from '@xyflow/system';
  */
 export type EdgeToolbarProps = EdgeToolbarBaseProps &
   HTMLAttributes<HTMLDivElement> & {
+    /**
+     * An edge toolbar must be attached to an edge.
+     */
+    edgeId: string;
     children?: ReactNode;
   };

packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from 'svelte';
-  import { hideOnSSR, portal } from '$lib/actions/portal';
 
+  import { hideOnSSR, portal } from '$lib/actions/portal';
   import { useStore } from '$lib/store';
   import type { EdgeLabelProps } from './types';
   import { toPxString } from '$lib/utils';
@@ -19,12 +19,13 @@
   }: EdgeLabelProps = $props();
 
   const store = useStore();
+  const edgeId = getContext<string>('svelteflow__edge_id');
 
-  const id = getContext<string>('svelteflow__edge_id');
+  if (!edgeId) {
+    throw new Error('EdgeLabel must be used within an edge');
+  }
 
-  let z = $derived.by(() => {
+  let z = $derived(store.visible.edges.get(edgeId)?.zIndex);
-    return store.visible.edges.get(id)?.zIndex;
-  });
 </script>
 
 <div
@@ -39,7 +40,7 @@
   style:z-index={z}
   tabindex="-1"
   onclick={() => {
-    if (selectEdgeOnClick && id) store.handleEdgeSelection(id);
+    if (selectEdgeOnClick) store.handleEdgeSelection(edgeId);
   }}
   {...rest}
 >

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

@@ -4,35 +4,42 @@
   import { useStore } from '$lib/store';
   import { EdgeLabel } from '$lib/components/EdgeLabel';
   import type { EdgeToolbarProps } from './types';
+  import { getContext } from 'svelte';
 
   let {
-    edgeId,
     x,
     y,
     alignX = 'center',
     alignY = 'center',
     isVisible,
+    selectEdgeOnClick,
+    class: className,
     children,
     ...rest
   }: EdgeToolbarProps = $props();
 
   const store = useStore();
-  const edge = $derived(store.edgeLookup.get(edgeId));
+  const edgeId = getContext<string>('svelteflow__edge_id');
-  const isActive = $derived(typeof isVisible === 'boolean' ? isVisible : edge?.selected);
+
+  if (!edgeId) {
+    throw new Error('EdgeToolbar must be used within an edge');
+  }
+
+  const isActive = $derived(
+    typeof isVisible === 'boolean' ? isVisible : store.edgeLookup.get(edgeId)?.selected
+  );
   const transform = $derived(getEdgeToolbarTransform(x, y, store.viewport.zoom, alignX, alignY));
-  const zIndex = $derived((edge?.zIndex ?? 0) + 1);
 </script>
 
-{#if store.domNode && isActive}
+{#if isActive}
-  <EdgeLabel>
+  <EdgeLabel {selectEdgeOnClick} transparent>
     <div
       style:position="absolute"
       style:transform
-      style:z-index={zIndex}
       style:transform-origin="0 0"
+      class={['svelte-flow__edge-toolbar', className]}
+      data-id={edgeId}
       {...rest}
-      class="svelte-flow__edge-toolbar"
-      data-id={edgeId ?? ''}
     >
       {@render children?.()}
     </div>

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

@@ -2,6 +2,7 @@ import type { EdgeToolbarBaseProps } from '@xyflow/system';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 
-export type EdgeToolbarProps = EdgeToolbarBaseProps & {
+export type EdgeToolbarProps = Omit<EdgeToolbarBaseProps, 'edgeId'> & {
+  selectEdgeOnClick?: boolean;
   children?: Snippet;
 } & HTMLAttributes<HTMLDivElement>;

packages/system/src/types/edges.ts

@@ -131,10 +131,6 @@ 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.
    */