fix defaultEdge options and add elevateEdgesOnSelect

packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte

@@ -2,9 +2,8 @@
   import { useStore } from '$lib/store';
   import type { Edge } from '$lib/types';
   import { XYHandle, type HandleType, type XYPosition } from '@xyflow/system';
-  import { getContext, type Snippet } from 'svelte';
-  import type { ClassValue } from 'svelte/elements';
-  import EdgeLabel from '../EdgeLabel/EdgeLabel.svelte';
+  import { getContext } from 'svelte';
+  import { EdgeLabel } from '../EdgeLabel';
   import type { EdgeReconnectAnchorProps } from './types';
 
   let {

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -44,7 +44,9 @@
     zIndex,
     class: className,
     ariaLabel
-  } = $derived(store.defaultEdgeOptions ? { ...store.defaultEdgeOptions, ...edge } : edge);
+  } = $derived(edge);
+
+  $inspect(edge);
 
   const { id } = edge;
   setContext('svelteflow__edge_id', id);

packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte

@@ -73,6 +73,7 @@
     style,
     defaultEdgeOptions,
     elevateNodesOnSelect,
+    elevateEdgesOnSelect,
     nodesDraggable,
     nodesConnectable,
     elementsSelectable,

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -337,6 +337,19 @@ export type SvelteFlowProps = NodeEvents &
      * @default true
      */
     elevateNodesOnSelect?: boolean;
+    /**
+     * Enabling this option will raise the z-index of edges when they are selected,
+     * or when the connected nodes are selected.
+     * @default true
+     */
+    elevateEdgesOnSelect?: boolean;
+    /**
+     * This callback can be used to validate a new connection
+     *
+     * If you return `false`, the edge will not be added to your flow.
+     * If you have custom connection logic its preferred to use this callback over the
+     * `isValidConnection` prop on the handle component for performance reasons.
+     */
     isValidConnection?: IsValidConnection;
     /** This event handler is called when the user begins to pan or zoom the viewport */
     onmovestart?: OnMoveStart;

packages/svelte/src/lib/store/initial-store.svelte.ts

@@ -151,13 +151,22 @@ export const getInitialStore = (signals: StoreSignals) => {
         nodeLookup,
         connectionMode,
         onerror,
-        onlyRenderVisibleElements
+        onlyRenderVisibleElements,
+        defaultEdgeOptions
       } = this;
 
       let visibleNodes: Map<string, InternalNode>;
       let visibleEdges: Map<string, EdgeLayouted>;
 
-      const options = { edges, previousEdges, nodeLookup, connectionMode, onerror };
+      const options = {
+        edges,
+        defaultEdgeOptions,
+        previousEdges,
+        nodeLookup,
+        connectionMode,
+        elevateEdgesOnSelect: signals.props.elevateEdgesOnSelect ?? true,
+        onerror
+      };
 
       if (onlyRenderVisibleElements) {
         // We only subscribe to viewport, width, height if onlyRenderVisibleElements is true

packages/svelte/src/lib/store/visibleElements.ts

@@ -1,4 +1,4 @@
-import type { Edge, EdgeLayouted, InternalNode } from '$lib/types';
+import type { DefaultEdgeOptions, Edge, EdgeLayouted, InternalNode } from '$lib/types';
 import {
   ConnectionMode,
   getEdgePosition,
@@ -27,6 +27,8 @@ export function getVisibleNodes(
 
 export interface EdgeLayoutBaseOptions {
   edges: Edge[];
+  defaultEdgeOptions: DefaultEdgeOptions;
+  elevateEdgesOnSelect: boolean;
   previousEdges: Map<string, EdgeLayouted>;
   nodeLookup: NodeLookup;
   connectionMode: ConnectionMode;
@@ -52,7 +54,16 @@ export interface EdgeLayoutOnlyVisibleOptions extends EdgeLayoutBaseOptions {
 export type EdgeLayoutOptions = EdgeLayoutAllOptions | EdgeLayoutOnlyVisibleOptions;
 
 export function getLayoutedEdges(options: EdgeLayoutOptions): Map<string, EdgeLayouted> {
-  const { edges, nodeLookup, previousEdges, connectionMode, onerror, onlyRenderVisible } = options;
+  const {
+    edges,
+    defaultEdgeOptions,
+    nodeLookup,
+    previousEdges,
+    connectionMode,
+    onerror,
+    onlyRenderVisible,
+    elevateEdgesOnSelect
+  } = options;
   const layoutedEdges = new Map<string, EdgeLayouted>();
   for (const edge of edges) {
     const sourceNode = nodeLookup.get(edge.source);
@@ -107,15 +118,16 @@ export function getLayoutedEdges(options: EdgeLayoutOptions): Map<string, EdgeLa
 
     if (edgePosition) {
       layoutedEdges.set(edge.id, {
+        ...defaultEdgeOptions,
         ...edge,
+        ...edgePosition,
         zIndex: getElevatedEdgeZIndex({
           selected: edge.selected,
-          zIndex: edge.zIndex,
+          zIndex: edge.zIndex ?? defaultEdgeOptions.zIndex,
           sourceNode,
           targetNode,
-          elevateOnSelect: false
+          elevateOnSelect: elevateEdgesOnSelect
         }),
-        ...edgePosition,
         sourceNode,
         targetNode,
         edge