refactor(edges): simplify edge rendering

packages/react/src/components/Edges/wrapEdge.tsx

@@ -26,6 +26,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     labelBgPadding,
     labelBgBorderRadius,
     style,
+    zIndex,
     source,
     target,
     isSelectable,
@@ -201,6 +202,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     };
 
     return (
+      <svg className="react-flow__edgewrapper" style={{ zIndex }}>
         <g
           className={cc([
             'react-flow__edge',
@@ -281,6 +283,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
             </>
           )}
         </g>
+      </svg>
     );
   };
 

packages/react/src/container/EdgeRenderer/index.tsx

@@ -63,16 +63,14 @@ const EdgeRenderer = ({
   children,
 }: EdgeRendererProps) => {
   const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector, shallow);
-  // we are grouping edges by zIndex here in order to be able to render them in the correct order
+  const edges = useVisibleEdges(onlyRenderVisibleElements, elevateEdgesOnSelect);
-  // each zIndex gets its own svg element
-  const edgeTree = useVisibleEdges(onlyRenderVisibleElements, elevateEdgesOnSelect);
 
   return (
-    <>
+    <div className="react-flow__edges">
-      {edgeTree.map(({ level, edges, isMaxLevel }) => (
+      <svg className="react-flow__container">
-        <svg key={level} style={{ zIndex: level }} className="react-flow__edges react-flow__container">
+        <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />
-          {isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />}
+      </svg>
-          <>
+
       {edges.map((edge) => {
         let edgeType = edge.type || 'default';
 
@@ -86,17 +84,14 @@ const EdgeRenderer = ({
         const isUpdatable =
           typeof onEdgeUpdate !== 'undefined' &&
           (edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'));
-              const isSelectable = !!(
+        const isSelectable = !!(edge.selectable || (elementsSelectable && typeof edge.selectable === 'undefined'));
-                edge.selectable ||
-                (elementsSelectable && typeof edge.selectable === 'undefined')
-              );
 
         return (
           <EdgeComponent
             key={edge.id}
             id={edge.id}
             className={cc([edge.className, noPanClassName])}
-                  type={edge.type}
+            type={edgeType}
             data={edge.data}
             selected={!!edge.selected}
             animated={!!edge.animated}
@@ -108,6 +103,7 @@ const EdgeRenderer = ({
             labelBgPadding={edge.labelBgPadding}
             labelBgBorderRadius={edge.labelBgBorderRadius}
             style={edge.style}
+            zIndex={edge.zIndex}
             source={edge.source}
             target={edge.target}
             sourceHandleId={edge.sourceHandle}
@@ -134,11 +130,9 @@ const EdgeRenderer = ({
           />
         );
       })}
-          </>
+
-        </svg>
-      ))}
       {children}
-    </>
+    </div>
   );
 };
 

packages/react/src/hooks/useVisibleEdges.ts

@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
-import { GroupedEdges, groupEdgesByZLevel, isEdgeVisible } from '@xyflow/system';
+import { shallow } from 'zustand/shallow';
+import { adjustEdgeZIndex, isEdgeVisible } from '@xyflow/system';
 
 import { useStore } from '../hooks/useStore';
-import { Edge, type ReactFlowState } from '../types';
+import { type Edge, type ReactFlowState } from '../types';
-import { shallow } from 'zustand/shallow';
 
-function useVisibleEdges(onlyRenderVisible: boolean, elevateEdgesOnSelect: boolean): GroupedEdges<Edge>[] {
+function useVisibleEdges(onlyRenderVisible: boolean, elevateEdgesOnSelect: boolean): Edge[] {
   const edges = useStore(
     useCallback(
       (s: ReactFlowState) => {
@@ -29,20 +29,11 @@ function useVisibleEdges(onlyRenderVisible: boolean, elevateEdgesOnSelect: boole
               })
             : s.edges;
 
-        return groupEdgesByZLevel(visibleEdges, s.nodeLookup, elevateEdgesOnSelect);
+        return visibleEdges.map((edge) => adjustEdgeZIndex(edge, s.nodeLookup, elevateEdgesOnSelect));
       },
       [onlyRenderVisible, elevateEdgesOnSelect]
     ),
-    (groupA, groupB) => {
+    shallow
-      const unEqual = groupA.some(
-        (item, index) =>
-          item.isMaxLevel !== groupB[index].isMaxLevel ||
-          item.level !== groupB[index].level ||
-          !shallow(item.edges, groupB[index].edges)
-      );
-
-      return !unEqual;
-    }
   );
 
   return edges;

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

@@ -18,6 +18,7 @@
   export let target: $$Props['target'] = '';
   export let data: $$Props['data'] = {};
   export let style: $$Props['style'] = undefined;
+  export let zIndex: $$Props['zIndex'] = undefined;
 
   export let animated: $$Props['animated'] = false;
   export let selected: $$Props['selected'] = false;
@@ -95,6 +96,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 {#if !hidden}
+  <svg class="svelte-flow__edgewrapper" style:zIndex>
     <g
       class={cc(['svelte-flow__edge', className])}
       class:animated
@@ -133,4 +135,5 @@
         markerEnd={markerEndUrl}
       />
     </g>
+  </svg>
 {/if}

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -9,7 +9,7 @@
 
   const {
     elementsSelectable,
-    edgeTree,
+    visibleEdges,
     edges: { setDefaultOptions }
   } = useStore();
 
@@ -18,11 +18,12 @@
   });
 </script>
 
-{#each $edgeTree as group (group.level)}
+<div class="svelte-flow__edges">
-  <svg style="z-index: {group.level}" class="svelte-flow__edges">
+  <svg class="svelte-flow__container">
-    {#if group.isMaxLevel} <MarkerDefinition />{/if}
+    <MarkerDefinition />
-    <g>
+  </svg>
-      {#each group.edges as edge (edge.id)}
+
+  {#each $visibleEdges as edge (edge.id)}
     {@const edgeType = edge.type || 'default'}
     {@const selectable = !!(
       edge.selectable ||
@@ -54,21 +55,10 @@
       interactionWidth={edge.interactionWidth}
       class={edge.class}
       type={edgeType}
+      zIndex={edge.zIndex}
       {selectable}
       on:edgeclick
       on:edgecontextmenu
     />
   {/each}
-    </g>
+</div>
-  </svg>
-{/each}
-
-<style>
-  .svelte-flow__edges {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-</style>

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 layoutedEdges;
-
-      return groupedEdges;
     }
   );
 }

packages/svelte/src/lib/types/edges.ts

@@ -70,6 +70,7 @@ export type EdgeLayouted = Pick<
   | 'ariaLabel'
   | 'hidden'
   | 'class'
+  | 'zIndex'
 > &
   EdgePosition & {
     sourceNode?: Node;

packages/system/src/styles/init.css

@@ -57,11 +57,6 @@
   outline: none;
 }
 
-.xy-flow .xy-flow__edges {
-  pointer-events: none;
-  overflow: visible;
-}
-
 .xy-flow__edge-path {
   stroke: var(--edge-stroke, var(--edge-stroke-default));
   stroke-width: var(--edge-stroke-width, var(--edge-stroke-width-default));

packages/system/src/styles/style.css

@@ -20,6 +20,12 @@
   --controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
 }
 
+.xy-flow__edgewrapper {
+  overflow: visible;
+  position: absolute;
+  pointer-events: none;
+}
+
 .xy-flow__edge {
   &.updating {
     .xy-flow__edge-path {

packages/system/src/utils/edges/general.ts

@@ -23,63 +23,32 @@ export function getEdgeCenter({
   return [centerX, centerY, xOffset, yOffset];
 }
 
-const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }];
-
 export type GroupedEdges<EdgeType extends EdgeBase> = {
   edges: EdgeType[];
   level: number;
   isMaxLevel: boolean;
 };
 
-export function groupEdgesByZLevel<EdgeType extends EdgeBase>(
+export function adjustEdgeZIndex(edge: EdgeBase, nodeLookup: Map<string, NodeBase>, elevateEdgesOnSelect: boolean) {
-  edges: EdgeType[],
-  nodeLookup: Map<string, NodeBase>,
-  elevateEdgesOnSelect = false
-): GroupedEdges<EdgeType>[] {
-  let maxLevel = -1;
-
-  const levelLookup = edges.reduce<Record<string, EdgeType[]>>((tree, edge) => {
   const hasZIndex = isNumeric(edge.zIndex);
   let z = hasZIndex ? edge.zIndex! : 0;
 
   if (elevateEdgesOnSelect) {
-      const targetNode = nodeLookup.get(edge.target);
+    const targetNode = nodeLookup.get(edge.target)!;
-      const sourceNode = nodeLookup.get(edge.source);
+    const sourceNode = nodeLookup.get(edge.source)!;
     const edgeOrConnectedNodeSelected = edge.selected || targetNode?.selected || sourceNode?.selected;
-      const selectedZIndex = Math.max(
+    const selectedZIndex = Math.max(sourceNode?.[internalsSymbol]?.z || 0, targetNode?.[internalsSymbol]?.z || 0, 1000);
-        sourceNode?.[internalsSymbol]?.z || 0,
-        targetNode?.[internalsSymbol]?.z || 0,
-        1000
-      );
     z = (hasZIndex ? edge.zIndex! : 0) + (edgeOrConnectedNodeSelected ? selectedZIndex : 0);
-    }
-
-    if (tree[z]) {
-      tree[z].push(edge);
-    } else {
-      tree[z] = [edge];
-    }
-
-    maxLevel = z > maxLevel ? z : maxLevel;
-
-    return tree;
-  }, {});
-
-  const edgeTree = Object.entries(levelLookup).map(([key, edges]) => {
-    const level = +key;
 
+    if (edge.zIndex !== z) {
       return {
-      edges,
+        ...edge,
-      level,
+        zIndex: z,
-      isMaxLevel: level === maxLevel,
       };
-  });
+    }
-
-  if (edgeTree.length === 0) {
-    return defaultEdgeTree;
   }
 
-  return edgeTree;
+  return edge;
 }
 
 type IsEdgeVisibleParams = {