feat(edges): group edges by z-index level

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

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -2,6 +2,7 @@
 import EdgeWrapper from '../../components/Edges/EdgeWrapper.vue'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
 import { useStore } from '../../composables'
+import { groupEdgesByZLevel } from '../../utils'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 
 const store = useStore()
@@ -32,6 +33,7 @@ const connectionLineVisible = controlledComputed(
     ),
 )
 const transform = computed(() => `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`)
+const edgeLevels = computed(() => groupEdgesByZLevel(store.getEdges, store.getNodes))
 </script>
 <script lang="ts">
 export default {
@@ -39,19 +41,24 @@ export default {
 }
 </script>
 <template>
-  <svg :width="store.dimensions.width" :height="store.dimensions.height" class="vue-flow__edges">
+  <svg
-    <MarkerDefinitions :color="store.arrowHeadColor" />
+    v-for="level of edgeLevels"
-    <g :transform="transform">
+    :key="level.z"
+    :width="store.dimensions.width"
+    :height="store.dimensions.height"
+    class="vue-flow__edges vue-flow__container"
+    :style="{ zIndex: level.z }"
+  >
+    <MarkerDefinitions v-if="level.isMaxLevel" :default-color="store.defaultMarkerColor" />
+    <g>
       <EdgeWrapper
-        v-for="edge of store.getEdges"
+        v-for="edge of level.edges"
         :key="edge.id"
         :edge="edge"
         :component="getType(edge.type)"
         :selectable="store.elementsSelectable"
         :updatable="typeof edge.updatable === 'undefined' ? store.edgesUpdatable : edge.updatable"
         :edge-updater-radius="store.edgeUpdaterRadius"
-        :dimensions="store.dimensions"
-        :transform="store.transform"
       >
         <template #default="edgeProps">
           <slot :name="`edge-${edge.type}`" v-bind="edgeProps"></slot>