feat(core): always group edges by z-index

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { EffectScope } from 'vue'
+import type { WatchStopHandle } from 'vue'
 import EdgeWrapper from '../../components/Edges/EdgeWrapper'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
 import type { EdgeComponent, EdgeUpdatable, GraphEdge } from '../../types'
@@ -52,35 +52,25 @@ const connectionLineVisible = $(
 
 let groups = $ref<ReturnType<typeof groupEdgesByZLevel>>([])
 
-let scope: EffectScope | null = effectScope()
+let stop: WatchStopHandle
 
 onPaneReady(() => {
-  if (!scope) scope = effectScope()
-
-  scope.run(() => {
-    watch(
-      [$$(getSelectedNodes), $$(getEdges), () => (elevateEdgesOnSelect ? getSelectedEdges : [])],
-      () => {
-        if (elevateEdgesOnSelect) {
-          nextTick(() => (groups = groupEdgesByZLevel(getEdges, getNode)))
-        } else {
-          groups = [
-            {
-              isMaxLevel: true,
-              edges: getEdges,
-              level: 0,
-            },
-          ]
-        }
-      },
-      { immediate: true },
-    )
-  })
+  watch(
+    [
+      $$(getSelectedNodes),
+      $$(getEdges),
+      () => getEdges.map((e) => e.zIndex),
+      () => (elevateEdgesOnSelect ? getSelectedEdges : []),
+    ],
+    () => {
+      groups = groupEdgesByZLevel(getEdges, getNode, elevateEdgesOnSelect)
+    },
+    { immediate: true },
+  )
 })
 
 onBeforeUnmount(() => {
-  scope?.stop()
-  scope = null
+  stop?.()
 })
 
 const getType = (type?: string, template?: GraphEdge['template']) => {

packages/core/src/utils/edge.ts

@@ -1,3 +1,4 @@
+import { isNumber } from '@vueuse/core'
 import type { EdgePositions, Getters, GraphEdge, GraphNode, HandleElement, Rect, ViewportTransform, XYPosition } from '~/types'
 import { Position } from '~/types'
 
@@ -126,16 +127,22 @@ export function isEdgeVisible({
   return overlappingArea > 0
 }
 
-export const groupEdgesByZLevel = (edges: GraphEdge[], getNode: Getters['getNode']) => {
+export const groupEdgesByZLevel = (edges: GraphEdge[], getNode: Getters['getNode'], elevateEdgesOnSelect = false) => {
   let maxLevel = -1
 
   const levelLookup = edges.reduce<Record<string, GraphEdge[]>>((tree, edge) => {
+    const hasZIndex = isNumber(edge.zIndex)
+    let z = hasZIndex ? edge.zIndex! : 0
+
     const source = getNode(edge.source)
     const target = getNode(edge.target)
 
     if (!source || !target) return tree
 
-    const z = edge.z ? edge.z : Math.max(source.computedPosition.z || 0, target.computedPosition.z || 0)
+    if (elevateEdgesOnSelect) {
+      z = hasZIndex ? edge.zIndex! : Math.max(source.computedPosition.z || 0, target.computedPosition.z || 0)
+    }
+
     if (tree[z]) {
       tree[z].push(edge)
     } else {