From d036769d5863602bb72a498ffe318c1d932a9e30 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 23 Jun 2022 15:47:34 +0200
Subject: [PATCH] chore(edges): simplify `elevateEdgesOnSelect` logic

---
 .../container/EdgeRenderer/EdgeRenderer.vue   | 146 ++++++------------
 1 file changed, 51 insertions(+), 95 deletions(-)

diff --git a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
index b5eab602..3c1c2058 100644
--- a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -66,6 +66,14 @@ onPaneReady(() => {
       () => {
         if (elevateEdgesOnSelect) {
           nextTick(() => (groups = groupEdgesByZLevel(getEdges, getNode)))
+        } else {
+          groups = [
+            {
+              isMaxLevel: true,
+              edges: getEdges,
+              level: 0,
+            },
+          ]
         }
       },
       {
@@ -163,101 +171,49 @@ export default {
 </script>
 
 <template>
-  <template v-if="elevateEdgesOnSelect">
-    <svg
-      v-for="group of groups"
-      :key="group.level"
-      class="vue-flow__edges vue-flow__container"
-      :style="`z-index: ${group.level}`"
-    >
-      <MarkerDefinitions v-if="group.isMaxLevel" :default-color="defaultMarkerColor" />
-      <g>
-        <EdgeWrapper
-          v-for="edge of group.edges"
-          :id="edge.id"
-          :key="edge.id"
-          :type="getType(edge.type, edge.template)"
-          :name="edge.type || 'default'"
-          :source="edge.source"
-          :target="edge.target"
-          :target-handle-id="edge.targetHandle"
-          :source-handle-id="edge.sourceHandle"
-          :source-node="getNode(edge.source)"
-          :target-node="getNode(edge.target)"
-          :label="edge.label"
-          :data="edge.data"
-          :animated="edge.animated"
-          :selectable="selectable(edge.selectable)"
-          :selected="edge.selected"
-          :updatable="updatable(edge.updatable)"
-          :label-style="edge.labelStyle"
-          :label-show-bg="edge.labelShowBg"
-          :label-bg-style="edge.labelBgStyle"
-          :label-bg-padding="edge.labelBgPadding"
-          :label-bg-border-radius="edge.labelBgBorderRadius"
-          :connection-mode="connectionMode"
-          :edge-updater-radius="edgeUpdaterRadius"
-          :marker-end="edge.markerEnd"
-          :marker-start="edge.markerStart"
-          :style="getStyle(edge)"
-          :class="getClass(edge)"
-          @click="onEdgeClick($event, edge)"
-          @dbl-click="onDoubleClick($event, edge)"
-          @contextmenu="onEdgeContextMenu($event, edge)"
-          @mouseenter="onEdgeMouseEnter($event, edge)"
-          @mousemove="onEdgeMouseMove($event, edge)"
-          @mouseleave="onEdgeMouseLeave($event, edge)"
-          @source-mousedown="onEdgeUpdaterSourceMouseDown($event, edge)"
-          @target-mousedown="onEdgeUpdaterTargetMouseDown($event, edge)"
-        />
-      </g>
-    </svg>
-  </template>
-  <template v-else>
-    <svg class="vue-flow__edges vue-flow__container">
-      <MarkerDefinitions :default-color="defaultMarkerColor" />
-      <g>
-        <EdgeWrapper
-          v-for="edge of getEdges"
-          :id="edge.id"
-          :key="edge.id"
-          :type="getType(edge.type, edge.template)"
-          :name="edge.type || 'default'"
-          :source="edge.source"
-          :target="edge.target"
-          :target-handle-id="edge.targetHandle"
-          :source-handle-id="edge.sourceHandle"
-          :source-node="getNode(edge.source)"
-          :target-node="getNode(edge.target)"
-          :label="edge.label"
-          :data="edge.data"
-          :animated="edge.animated"
-          :selectable="selectable(edge.selectable)"
-          :selected="edge.selected"
-          :updatable="updatable(edge.updatable)"
-          :label-style="edge.labelStyle"
-          :label-show-bg="edge.labelShowBg"
-          :label-bg-style="edge.labelBgStyle"
-          :label-bg-padding="edge.labelBgPadding"
-          :label-bg-border-radius="edge.labelBgBorderRadius"
-          :connection-mode="connectionMode"
-          :edge-updater-radius="edgeUpdaterRadius"
-          :marker-end="edge.markerEnd"
-          :marker-start="edge.markerStart"
-          :style="getStyle(edge)"
-          :class="getClass(edge)"
-          @click="onEdgeClick($event, edge)"
-          @dbl-click="onDoubleClick($event, edge)"
-          @contextmenu="onEdgeContextMenu($event, edge)"
-          @mouseenter="onEdgeMouseEnter($event, edge)"
-          @mousemove="onEdgeMouseMove($event, edge)"
-          @mouseleave="onEdgeMouseLeave($event, edge)"
-          @source-mousedown="onEdgeUpdaterSourceMouseDown($event, edge)"
-          @target-mousedown="onEdgeUpdaterTargetMouseDown($event, edge)"
-        />
-      </g>
-    </svg>
-  </template>
+  <svg v-for="group of groups" :key="group.level" class="vue-flow__edges vue-flow__container" :style="`z-index: ${group.level}`">
+    <MarkerDefinitions v-if="group.isMaxLevel" :default-color="defaultMarkerColor" />
+    <g>
+      <EdgeWrapper
+        v-for="edge of group.edges"
+        :id="edge.id"
+        :key="edge.id"
+        :type="getType(edge.type, edge.template)"
+        :name="edge.type || 'default'"
+        :source="edge.source"
+        :target="edge.target"
+        :target-handle-id="edge.targetHandle"
+        :source-handle-id="edge.sourceHandle"
+        :source-node="getNode(edge.source)"
+        :target-node="getNode(edge.target)"
+        :label="edge.label"
+        :data="edge.data"
+        :animated="edge.animated"
+        :selectable="selectable(edge.selectable)"
+        :selected="edge.selected"
+        :updatable="updatable(edge.updatable)"
+        :label-style="edge.labelStyle"
+        :label-show-bg="edge.labelShowBg"
+        :label-bg-style="edge.labelBgStyle"
+        :label-bg-padding="edge.labelBgPadding"
+        :label-bg-border-radius="edge.labelBgBorderRadius"
+        :connection-mode="connectionMode"
+        :edge-updater-radius="edgeUpdaterRadius"
+        :marker-end="edge.markerEnd"
+        :marker-start="edge.markerStart"
+        :style="getStyle(edge)"
+        :class="getClass(edge)"
+        @click="onEdgeClick($event, edge)"
+        @dbl-click="onDoubleClick($event, edge)"
+        @contextmenu="onEdgeContextMenu($event, edge)"
+        @mouseenter="onEdgeMouseEnter($event, edge)"
+        @mousemove="onEdgeMouseMove($event, edge)"
+        @mouseleave="onEdgeMouseLeave($event, edge)"
+        @source-mousedown="onEdgeUpdaterSourceMouseDown($event, edge)"
+        @target-mousedown="onEdgeUpdaterTargetMouseDown($event, edge)"
+      />
+    </g>
+  </svg>
   <svg v-if="connectionLineVisible && !!sourceNode" class="vue-flow__edges vue-flow__connectionline vue-flow__container">
     <ConnectionLine :source-node="sourceNode" />
   </svg>