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

@@ -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>

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>

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;