refactor(edges): simplify edge rendering

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

@@ -24,7 +24,7 @@ import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions, ConnectionData }
 import { initialEdgeTypes, initialNodeTypes, getInitialStore } from './initial-store';
 import type { SvelteFlowStore } from './types';
 import { syncNodeStores, syncEdgeStores, syncViewportStores } from './utils';
-import { getEdgeTree } from './edge-tree';
+import { getVisibleEdges } from './visible-edges';
 import { getVisibleNodes } from './visible-nodes';
 import { getDerivedConnectionProps } from './derived-connection-props';
 
@@ -349,8 +349,8 @@ export function createStore({
     ...store,
 
     // derived state
-    edgeTree: getEdgeTree(store),
     connection: getDerivedConnectionProps(store, currentConnection),
+    visibleEdges: getVisibleEdges(store),
     visibleNodes: getVisibleNodes(store),
     markers: derived(
       [store.edges, store.defaultMarkerColor, store.flowId],

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

@@ -91,7 +91,7 @@ export const getInitialStore = ({
     nodeLookup: readable<Map<string, Node>>(nodeLookup),
     visibleNodes: readable<Node[]>([]),
     edges: createEdgesStore(edges),
-    edgeTree: readable<GroupedEdges<EdgeLayouted>[]>([]),
+    visibleEdges: readable<EdgeLayouted[]>([]),
     height: writable<number>(500),
     width: writable<number>(500),
     minZoom: writable<number>(0.5),

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

@@ -1,10 +1,10 @@
 import { derived } from 'svelte/store';
-import { groupEdgesByZLevel, isEdgeVisible, getEdgePosition } from '@xyflow/system';
+import { isEdgeVisible, getEdgePosition, adjustEdgeZIndex } from '@xyflow/system';
 
 import type { EdgeLayouted } from '$lib/types';
 import type { SvelteFlowStoreState } from './types';
 
-export function getEdgeTree(store: SvelteFlowStoreState) {
+export function getVisibleEdges(store: SvelteFlowStoreState) {
   const visibleEdges = derived(
     [
       store.edges,
@@ -41,8 +41,15 @@ export function getEdgeTree(store: SvelteFlowStoreState) {
   );
 
   return derived(
-    [visibleEdges, store.nodes, store.nodeLookup, store.connectionMode, store.onerror],
-    ([visibleEdges, , nodeLookup, connectionMode, onerror]) => {
+    [
+      visibleEdges,
+      store.nodes,
+      store.nodeLookup,
+      store.connectionMode,
+      store.onlyRenderVisibleElements,
+      store.onerror
+    ],
+    ([visibleEdges, , nodeLookup, connectionMode, onlyRenderVisibleElements, onerror]) => {
       const layoutedEdges = visibleEdges.reduce<EdgeLayouted[]>((res, edge) => {
         const sourceNode = nodeLookup.get(edge.source);
         const targetNode = nodeLookup.get(edge.target);
@@ -63,7 +70,7 @@ export function getEdgeTree(store: SvelteFlowStoreState) {
 
         if (edgePosition) {
           res.push({
-            ...edge,
+            ...adjustEdgeZIndex(edge, nodeLookup, onlyRenderVisibleElements),
             ...edgePosition
           });
         }
@@ -71,9 +78,7 @@ export function getEdgeTree(store: SvelteFlowStoreState) {
         return res;
       }, []);
 
-      const groupedEdges = groupEdgesByZLevel<EdgeLayouted>(layoutedEdges, nodeLookup, false);
-
-      return groupedEdges;
+      return layoutedEdges;
     }
   );
 }