refactor(edge-wrapper): cleanup

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

@@ -4,6 +4,11 @@ import {
   SelectionMode,
   ConnectionMode,
   ConnectionLineType,
+  devWarn,
+  adoptUserProvidedNodes,
+  getNodesBounds,
+  getViewportForBounds,
+  updateConnectionLookup,
   type SelectionRect,
   type SnapGrid,
   type MarkerProps,
@@ -12,16 +17,12 @@ import {
   type IsValidConnection,
   type NodeOrigin,
   type OnError,
-  devWarn,
   type Viewport,
-  adoptUserProvidedNodes,
-  getNodesBounds,
-  getViewportForBounds,
-  updateConnectionLookup,
   type ConnectionLookup,
   type OnConnect,
   type OnConnectStart,
-  type OnConnectEnd
+  type OnConnectEnd,
+  type NodeLookup
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -96,7 +97,7 @@ export const getInitialStore = ({
   return {
     flowId: writable<string | null>(null),
     nodes: createNodesStore(nextNodes, nodeLookup),
-    nodeLookup: readable<Map<string, Node>>(nodeLookup),
+    nodeLookup: readable<NodeLookup>(nodeLookup),
     visibleNodes: readable<Node[]>([]),
     edges: createEdgesStore(edges, connectionLookup, edgeLookup),
     visibleEdges: readable<EdgeLayouted[]>([]),

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

@@ -1,10 +1,10 @@
 import {
   writable,
+  get,
   type Unsubscriber,
   type Subscriber,
   type Updater,
-  type Writable,
-  get
+  type Writable
 } from 'svelte/store';
 import {
   adoptUserProvidedNodes,
@@ -12,7 +12,8 @@ import {
   type Viewport,
   type PanZoomInstance,
   type ConnectionLookup,
-  type EdgeLookup
+  type EdgeLookup,
+  type NodeLookup
 } from '@xyflow/system';
 
 import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
@@ -126,7 +127,7 @@ export type NodeStoreOptions = {
 // The user only passes in relative positions, so we need to calculate the absolute positions based on the parent nodes.
 export const createNodesStore = (
   nodes: Node[],
-  nodeLookup: Map<string, Node>
+  nodeLookup: NodeLookup<Node>
 ): {
   subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
   update: (this: void, updater: Updater<Node[]>) => void;
@@ -176,7 +177,7 @@ export const createNodesStore = (
 export const createEdgesStore = (
   edges: Edge[],
   connectionLookup: ConnectionLookup,
-  edgeLookup: EdgeLookup,
+  edgeLookup: EdgeLookup<Edge>,
   defaultOptions?: DefaultEdgeOptions
 ): Writable<Edge[]> & { setDefaultOptions: (opts: DefaultEdgeOptions) => void } => {
   const { subscribe, set, update } = writable<Edge[]>([]);

packages/svelte/src/lib/store/visible-edges.ts

@@ -1,5 +1,5 @@
 import { derived } from 'svelte/store';
-import { isEdgeVisible, getEdgePosition, getEdgeZIndex } from '@xyflow/system';
+import { isEdgeVisible, getEdgePosition, getElevatedEdgeZIndex } from '@xyflow/system';
 
 import type { EdgeLayouted } from '$lib/types';
 import type { SvelteFlowStoreState } from './types';
@@ -64,7 +64,13 @@ export function getVisibleEdges(store: SvelteFlowStoreState) {
         if (edgePosition) {
           res.push({
             ...edge,
-            zIndex: getEdgeZIndex(edge.selected, edge.zIndex, sourceNode, targetNode, false),
+            zIndex: getElevatedEdgeZIndex({
+              selected: edge.selected,
+              zIndex: edge.zIndex,
+              sourceNode,
+              targetNode,
+              elevateOnSelect: false
+            }),
             ...edgePosition
           });
         }