From 2a9cdd6855a6ae992258981c59b25e4c806ec1f1 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 22 Jun 2022 17:03:24 +0200
Subject: [PATCH] feat(edges): move connection lines to separate container

# What's changed?

* connection lines should be above nodes
* selected node should be above edges
---
 packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue | 4 +++-
 packages/vue-flow/src/container/Viewport/Transform.vue        | 2 +-
 packages/vue-flow/src/style.css                               | 4 ++++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
index fccee03a..74771d18 100644
--- a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -197,7 +197,9 @@ export default {
         @source-mousedown="(e: MouseEvent) => onEdgeUpdaterSourceMouseDown(e, edge)"
         @target-mousedown="(e: MouseEvent) => onEdgeUpdaterTargetMouseDown(e, edge)"
       />
-      <ConnectionLine v-if="connectionLineVisible && !!sourceNode" :source-node="sourceNode" />
     </g>
   </svg>
+  <svg v-if="connectionLineVisible && !!sourceNode" class="vue-flow__edges vue-flow__connectionline vue-flow__container">
+    <ConnectionLine :source-node="sourceNode" />
+  </svg>
 </template>
diff --git a/packages/vue-flow/src/container/Viewport/Transform.vue b/packages/vue-flow/src/container/Viewport/Transform.vue
index a4044428..9bc2febb 100644
--- a/packages/vue-flow/src/container/Viewport/Transform.vue
+++ b/packages/vue-flow/src/container/Viewport/Transform.vue
@@ -58,8 +58,8 @@ export default {
     class="vue-flow__transformationpane vue-flow__container"
     :style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`, opacity: ready ? undefined : 0 }"
   >
-    <NodeRenderer />
     <EdgeRenderer />
+    <NodeRenderer />
     <slot />
   </div>
 </template>
diff --git a/packages/vue-flow/src/style.css b/packages/vue-flow/src/style.css
index 36beb8b8..01afacc1 100644
--- a/packages/vue-flow/src/style.css
+++ b/packages/vue-flow/src/style.css
@@ -69,6 +69,10 @@
   user-select: none;
 }
 
+.vue-flow .vue-flow__connectionline {
+  z-index: 1001;
+}
+
 .vue-flow__connection {
   pointer-events: none;