make edgeId optional, fix usage of edgeLabel

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

@@ -20,10 +20,13 @@
 
   const store = useStore();
 
-  const id = getContext<string>('svelteflow__edge_id');
+  const edgeId = getContext<string>('svelteflow__edge_id');
+  if (!edgeId) {
+    throw new Error('EdgeLabel must be used within an edge');
+  }
 
   let z = $derived.by(() => {
-    return store.visible.edges.get(id)?.zIndex;
+    return store.visible.edges.get(edgeId)?.zIndex;
   });
 </script>
 
@@ -39,7 +42,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,41 @@
   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 edgeId = getContext<string>('svelteflow__edge_id');
+  if (!edgeId) {
+    throw new Error('EdgeToolbar must be used within an edge');
+  }
+
   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>
+{#if isActive}
+  <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>;