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,86 +202,88 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     };
 
     return (
-      <g
-        className={cc([
-          'react-flow__edge',
-          `react-flow__edge-${type}`,
-          className,
-          { selected, animated, inactive, updating: updateHover },
-        ])}
-        onClick={onEdgeClick}
-        onDoubleClick={onEdgeDoubleClickHandler}
-        onContextMenu={onEdgeContextMenu}
-        onMouseEnter={onEdgeMouseEnter}
-        onMouseMove={onEdgeMouseMove}
-        onMouseLeave={onEdgeMouseLeave}
-        onKeyDown={isFocusable ? onKeyDown : undefined}
-        tabIndex={isFocusable ? 0 : undefined}
-        role={isFocusable ? 'button' : 'img'}
-        data-id={id}
-        data-testid={`rf__edge-${id}`}
-        aria-label={ariaLabel === null ? undefined : ariaLabel ? ariaLabel : `Edge from ${source} to ${target}`}
-        aria-describedby={isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined}
-        ref={edgeRef}
-      >
-        {!updating && (
-          <EdgeComponent
-            id={id}
-            source={source}
-            target={target}
-            selected={selected}
-            animated={animated}
-            label={label}
-            labelStyle={labelStyle}
-            labelShowBg={labelShowBg}
-            labelBgStyle={labelBgStyle}
-            labelBgPadding={labelBgPadding}
-            labelBgBorderRadius={labelBgBorderRadius}
-            data={data}
-            style={style}
-            sourceX={edgePosition.sourceX}
-            sourceY={edgePosition.sourceY}
-            targetX={edgePosition.targetX}
-            targetY={edgePosition.targetY}
-            sourcePosition={edgePosition.sourcePosition}
-            targetPosition={edgePosition.targetPosition}
-            sourceHandleId={sourceHandleId}
-            targetHandleId={targetHandleId}
-            markerStart={markerStartUrl}
-            markerEnd={markerEndUrl}
-            pathOptions={pathOptions}
-            interactionWidth={interactionWidth}
-          />
-        )}
-        {isUpdatable && (
-          <>
-            {(isUpdatable === 'source' || isUpdatable === true) && (
-              <EdgeAnchor
-                position={edgePosition.sourcePosition}
-                centerX={edgePosition.sourceX}
-                centerY={edgePosition.sourceY}
-                radius={edgeUpdaterRadius}
-                onMouseDown={onEdgeUpdaterSourceMouseDown}
-                onMouseEnter={onEdgeUpdaterMouseEnter}
-                onMouseOut={onEdgeUpdaterMouseOut}
-                type="source"
-              />
-            )}
-            {(isUpdatable === 'target' || isUpdatable === true) && (
-              <EdgeAnchor
-                position={edgePosition.targetPosition}
-                centerX={edgePosition.targetX}
-                centerY={edgePosition.targetY}
-                radius={edgeUpdaterRadius}
-                onMouseDown={onEdgeUpdaterTargetMouseDown}
-                onMouseEnter={onEdgeUpdaterMouseEnter}
-                onMouseOut={onEdgeUpdaterMouseOut}
-                type="target"
-              />
-            )}
-          </>
-        )}
-      </g>
+      <svg className="react-flow__edgewrapper" style={{ zIndex }}>
+        <g
+          className={cc([
+            'react-flow__edge',
+            `react-flow__edge-${type}`,
+            className,
+            { selected, animated, inactive, updating: updateHover },
+          ])}
+          onClick={onEdgeClick}
+          onDoubleClick={onEdgeDoubleClickHandler}
+          onContextMenu={onEdgeContextMenu}
+          onMouseEnter={onEdgeMouseEnter}
+          onMouseMove={onEdgeMouseMove}
+          onMouseLeave={onEdgeMouseLeave}
+          onKeyDown={isFocusable ? onKeyDown : undefined}
+          tabIndex={isFocusable ? 0 : undefined}
+          role={isFocusable ? 'button' : 'img'}
+          data-id={id}
+          data-testid={`rf__edge-${id}`}
+          aria-label={ariaLabel === null ? undefined : ariaLabel ? ariaLabel : `Edge from ${source} to ${target}`}
+          aria-describedby={isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined}
+          ref={edgeRef}
+        >
+          {!updating && (
+            <EdgeComponent
+              id={id}
+              source={source}
+              target={target}
+              selected={selected}
+              animated={animated}
+              label={label}
+              labelStyle={labelStyle}
+              labelShowBg={labelShowBg}
+              labelBgStyle={labelBgStyle}
+              labelBgPadding={labelBgPadding}
+              labelBgBorderRadius={labelBgBorderRadius}
+              data={data}
+              style={style}
+              sourceX={edgePosition.sourceX}
+              sourceY={edgePosition.sourceY}
+              targetX={edgePosition.targetX}
+              targetY={edgePosition.targetY}
+              sourcePosition={edgePosition.sourcePosition}
+              targetPosition={edgePosition.targetPosition}
+              sourceHandleId={sourceHandleId}
+              targetHandleId={targetHandleId}
+              markerStart={markerStartUrl}
+              markerEnd={markerEndUrl}
+              pathOptions={pathOptions}
+              interactionWidth={interactionWidth}
+            />
+          )}
+          {isUpdatable && (
+            <>
+              {(isUpdatable === 'source' || isUpdatable === true) && (
+                <EdgeAnchor
+                  position={edgePosition.sourcePosition}
+                  centerX={edgePosition.sourceX}
+                  centerY={edgePosition.sourceY}
+                  radius={edgeUpdaterRadius}
+                  onMouseDown={onEdgeUpdaterSourceMouseDown}
+                  onMouseEnter={onEdgeUpdaterMouseEnter}
+                  onMouseOut={onEdgeUpdaterMouseOut}
+                  type="source"
+                />
+              )}
+              {(isUpdatable === 'target' || isUpdatable === true) && (
+                <EdgeAnchor
+                  position={edgePosition.targetPosition}
+                  centerX={edgePosition.targetX}
+                  centerY={edgePosition.targetY}
+                  radius={edgeUpdaterRadius}
+                  onMouseDown={onEdgeUpdaterTargetMouseDown}
+                  onMouseEnter={onEdgeUpdaterMouseEnter}
+                  onMouseOut={onEdgeUpdaterMouseOut}
+                  type="target"
+                />
+              )}
+            </>
+          )}
+        </g>
+      </svg>
     );
   };
 

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

@@ -63,82 +63,76 @@ 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
-  // each zIndex gets its own svg element
-  const edgeTree = useVisibleEdges(onlyRenderVisibleElements, elevateEdgesOnSelect);
+  const edges = useVisibleEdges(onlyRenderVisibleElements, elevateEdgesOnSelect);
 
   return (
-    <>
-      {edgeTree.map(({ level, edges, isMaxLevel }) => (
-        <svg key={level} style={{ zIndex: level }} className="react-flow__edges react-flow__container">
-          {isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />}
-          <>
-            {edges.map((edge) => {
-              let edgeType = edge.type || 'default';
+    <div className="react-flow__edges">
+      <svg className="react-flow__container">
+        <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />
+      </svg>
 
-              if (!edgeTypes[edgeType]) {
-                onError?.('011', errorMessages['error011'](edgeType));
-                edgeType = 'default';
-              }
+      {edges.map((edge) => {
+        let edgeType = edge.type || 'default';
 
-              const EdgeComponent = edgeTypes[edgeType];
-              const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
-              const isUpdatable =
-                typeof onEdgeUpdate !== 'undefined' &&
-                (edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'));
-              const isSelectable = !!(
-                edge.selectable ||
-                (elementsSelectable && typeof edge.selectable === 'undefined')
-              );
+        if (!edgeTypes[edgeType]) {
+          onError?.('011', errorMessages['error011'](edgeType));
+          edgeType = 'default';
+        }
+
+        const EdgeComponent = edgeTypes[edgeType];
+        const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));
+        const isUpdatable =
+          typeof onEdgeUpdate !== 'undefined' &&
+          (edge.updatable || (edgesUpdatable && typeof edge.updatable === 'undefined'));
+        const isSelectable = !!(edge.selectable || (elementsSelectable && typeof edge.selectable === 'undefined'));
+
+        return (
+          <EdgeComponent
+            key={edge.id}
+            id={edge.id}
+            className={cc([edge.className, noPanClassName])}
+            type={edgeType}
+            data={edge.data}
+            selected={!!edge.selected}
+            animated={!!edge.animated}
+            hidden={!!edge.hidden}
+            label={edge.label}
+            labelStyle={edge.labelStyle}
+            labelShowBg={edge.labelShowBg}
+            labelBgStyle={edge.labelBgStyle}
+            labelBgPadding={edge.labelBgPadding}
+            labelBgBorderRadius={edge.labelBgBorderRadius}
+            style={edge.style}
+            zIndex={edge.zIndex}
+            source={edge.source}
+            target={edge.target}
+            sourceHandleId={edge.sourceHandle}
+            targetHandleId={edge.targetHandle}
+            markerEnd={edge.markerEnd}
+            markerStart={edge.markerStart}
+            isSelectable={isSelectable}
+            onEdgeUpdate={onEdgeUpdate}
+            onContextMenu={onEdgeContextMenu}
+            onMouseEnter={onEdgeMouseEnter}
+            onMouseMove={onEdgeMouseMove}
+            onMouseLeave={onEdgeMouseLeave}
+            onClick={onEdgeClick}
+            edgeUpdaterRadius={edgeUpdaterRadius}
+            onEdgeDoubleClick={onEdgeDoubleClick}
+            onEdgeUpdateStart={onEdgeUpdateStart}
+            onEdgeUpdateEnd={onEdgeUpdateEnd}
+            rfId={rfId}
+            ariaLabel={edge.ariaLabel}
+            isFocusable={isFocusable}
+            isUpdatable={isUpdatable}
+            pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
+            interactionWidth={edge.interactionWidth}
+          />
+        );
+      })}
 
-              return (
-                <EdgeComponent
-                  key={edge.id}
-                  id={edge.id}
-                  className={cc([edge.className, noPanClassName])}
-                  type={edge.type}
-                  data={edge.data}
-                  selected={!!edge.selected}
-                  animated={!!edge.animated}
-                  hidden={!!edge.hidden}
-                  label={edge.label}
-                  labelStyle={edge.labelStyle}
-                  labelShowBg={edge.labelShowBg}
-                  labelBgStyle={edge.labelBgStyle}
-                  labelBgPadding={edge.labelBgPadding}
-                  labelBgBorderRadius={edge.labelBgBorderRadius}
-                  style={edge.style}
-                  source={edge.source}
-                  target={edge.target}
-                  sourceHandleId={edge.sourceHandle}
-                  targetHandleId={edge.targetHandle}
-                  markerEnd={edge.markerEnd}
-                  markerStart={edge.markerStart}
-                  isSelectable={isSelectable}
-                  onEdgeUpdate={onEdgeUpdate}
-                  onContextMenu={onEdgeContextMenu}
-                  onMouseEnter={onEdgeMouseEnter}
-                  onMouseMove={onEdgeMouseMove}
-                  onMouseLeave={onEdgeMouseLeave}
-                  onClick={onEdgeClick}
-                  edgeUpdaterRadius={edgeUpdaterRadius}
-                  onEdgeDoubleClick={onEdgeDoubleClick}
-                  onEdgeUpdateStart={onEdgeUpdateStart}
-                  onEdgeUpdateEnd={onEdgeUpdateEnd}
-                  rfId={rfId}
-                  ariaLabel={edge.ariaLabel}
-                  isFocusable={isFocusable}
-                  isUpdatable={isUpdatable}
-                  pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
-                  interactionWidth={edge.interactionWidth}
-                />
-              );
-            })}
-          </>
-        </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 { shallow } from 'zustand/shallow';
+import { type Edge, type ReactFlowState } from '../types';
 
-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) => {
-      const unEqual = groupA.some(
-        (item, index) =>
-          item.isMaxLevel !== groupB[index].isMaxLevel ||
-          item.level !== groupB[index].level ||
-          !shallow(item.edges, groupB[index].edges)
-      );
-
-      return !unEqual;
-    }
+    shallow
   );
 
   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,42 +96,44 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 {#if !hidden}
-  <g
-    class={cc(['svelte-flow__edge', className])}
-    class:animated
-    class:selected
-    data-id={id}
-    on:click={onClick}
-    on:contextmenu={onContextMenu}
-    aria-label={ariaLabel === null
-      ? undefined
-      : ariaLabel
-      ? ariaLabel
-      : `Edge from ${source} to ${target}`}
-    role="img"
-  >
-    <svelte:component
-      this={edgeComponent}
-      {id}
-      {source}
-      {target}
-      {sourceX}
-      {sourceY}
-      {targetX}
-      {targetY}
-      {sourcePosition}
-      {targetPosition}
-      {animated}
-      {selected}
-      {label}
-      {labelStyle}
-      {data}
-      {style}
-      {interactionWidth}
-      sourceHandleId={sourceHandle}
-      targetHandleId={targetHandle}
-      markerStart={markerStartUrl}
-      markerEnd={markerEndUrl}
-    />
-  </g>
+  <svg class="svelte-flow__edgewrapper" style:zIndex>
+    <g
+      class={cc(['svelte-flow__edge', className])}
+      class:animated
+      class:selected
+      data-id={id}
+      on:click={onClick}
+      on:contextmenu={onContextMenu}
+      aria-label={ariaLabel === null
+        ? undefined
+        : ariaLabel
+        ? ariaLabel
+        : `Edge from ${source} to ${target}`}
+      role="img"
+    >
+      <svelte:component
+        this={edgeComponent}
+        {id}
+        {source}
+        {target}
+        {sourceX}
+        {sourceY}
+        {targetX}
+        {targetY}
+        {sourcePosition}
+        {targetPosition}
+        {animated}
+        {selected}
+        {label}
+        {labelStyle}
+        {data}
+        {style}
+        {interactionWidth}
+        sourceHandleId={sourceHandle}
+        targetHandleId={targetHandle}
+        markerStart={markerStartUrl}
+        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,57 +18,47 @@
   });
 </script>
 
-{#each $edgeTree as group (group.level)}
-  <svg style="z-index: {group.level}" class="svelte-flow__edges">
-    {#if group.isMaxLevel} <MarkerDefinition />{/if}
-    <g>
-      {#each group.edges as edge (edge.id)}
-        {@const edgeType = edge.type || 'default'}
-        {@const selectable = !!(
-          edge.selectable ||
-          ($elementsSelectable && typeof edge.selectable === 'undefined')
-        )}
-
-        <EdgeWrapper
-          id={edge.id}
-          source={edge.source}
-          target={edge.target}
-          data={edge.data}
-          style={edge.style}
-          animated={edge.animated}
-          selected={edge.selected}
-          hidden={edge.hidden}
-          label={edge.label}
-          labelStyle={edge.labelStyle}
-          markerStart={edge.markerStart}
-          markerEnd={edge.markerEnd}
-          sourceHandle={edge.sourceHandle}
-          targetHandle={edge.targetHandle}
-          sourceX={edge.sourceX}
-          sourceY={edge.sourceY}
-          targetX={edge.targetX}
-          targetY={edge.targetY}
-          sourcePosition={edge.sourcePosition}
-          targetPosition={edge.targetPosition}
-          ariaLabel={edge.ariaLabel}
-          interactionWidth={edge.interactionWidth}
-          class={edge.class}
-          type={edgeType}
-          {selectable}
-          on:edgeclick
-          on:edgecontextmenu
-        />
-      {/each}
-    </g>
+<div class="svelte-flow__edges">
+  <svg class="svelte-flow__container">
+    <MarkerDefinition />
   </svg>
-{/each}
 
-<style>
-  .svelte-flow__edges {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-</style>
+  {#each $visibleEdges as edge (edge.id)}
+    {@const edgeType = edge.type || 'default'}
+    {@const selectable = !!(
+      edge.selectable ||
+      ($elementsSelectable && typeof edge.selectable === 'undefined')
+    )}
+
+    <EdgeWrapper
+      id={edge.id}
+      source={edge.source}
+      target={edge.target}
+      data={edge.data}
+      style={edge.style}
+      animated={edge.animated}
+      selected={edge.selected}
+      hidden={edge.hidden}
+      label={edge.label}
+      labelStyle={edge.labelStyle}
+      markerStart={edge.markerStart}
+      markerEnd={edge.markerEnd}
+      sourceHandle={edge.sourceHandle}
+      targetHandle={edge.targetHandle}
+      sourceX={edge.sourceX}
+      sourceY={edge.sourceY}
+      targetX={edge.targetX}
+      targetY={edge.targetY}
+      sourcePosition={edge.sourcePosition}
+      targetPosition={edge.targetPosition}
+      ariaLabel={edge.ariaLabel}
+      interactionWidth={edge.interactionWidth}
+      class={edge.class}
+      type={edgeType}
+      zIndex={edge.zIndex}
+      {selectable}
+      on:edgeclick
+      on:edgecontextmenu
+    />
+  {/each}
+</div>

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;
     }
   );
 }

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>(
-  edges: EdgeType[],
-  nodeLookup: Map<string, NodeBase>,
-  elevateEdgesOnSelect = false
-): GroupedEdges<EdgeType>[] {
-  let maxLevel = -1;
+export function adjustEdgeZIndex(edge: EdgeBase, nodeLookup: Map<string, NodeBase>, elevateEdgesOnSelect: boolean) {
+  const hasZIndex = isNumeric(edge.zIndex);
+  let z = hasZIndex ? edge.zIndex! : 0;
 
-  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 sourceNode = nodeLookup.get(edge.source)!;
+    const edgeOrConnectedNodeSelected = edge.selected || targetNode?.selected || sourceNode?.selected;
+    const selectedZIndex = Math.max(sourceNode?.[internalsSymbol]?.z || 0, targetNode?.[internalsSymbol]?.z || 0, 1000);
+    z = (hasZIndex ? edge.zIndex! : 0) + (edgeOrConnectedNodeSelected ? selectedZIndex : 0);
 
-    if (elevateEdgesOnSelect) {
-      const targetNode = nodeLookup.get(edge.target);
-      const sourceNode = nodeLookup.get(edge.source);
-      const edgeOrConnectedNodeSelected = edge.selected || targetNode?.selected || sourceNode?.selected;
-      const selectedZIndex = Math.max(
-        sourceNode?.[internalsSymbol]?.z || 0,
-        targetNode?.[internalsSymbol]?.z || 0,
-        1000
-      );
-      z = (hasZIndex ? edge.zIndex! : 0) + (edgeOrConnectedNodeSelected ? selectedZIndex : 0);
+    if (edge.zIndex !== z) {
+      return {
+        ...edge,
+        zIndex: z,
+      };
     }
-
-    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;
-
-    return {
-      edges,
-      level,
-      isMaxLevel: level === maxLevel,
-    };
-  });
-
-  if (edgeTree.length === 0) {
-    return defaultEdgeTree;
   }
 
-  return edgeTree;
+  return edge;
 }
 
 type IsEdgeVisibleParams = {