refactor(core,edges): add div based edge label renderer

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

@@ -127,24 +127,27 @@ export default {
 </script>
 
 <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" />
-    <g>
-      <EdgeWrapper
-        v-for="edge of group.edges"
-        :id="edge.id"
-        :key="edge.id"
-        :edge="edge"
-        :type="getType(edge.type, edge.template)"
-        :name="edge.type || 'default'"
-        :source-node="getNode(edge.source)"
-        :target-node="getNode(edge.target)"
-        :selectable="selectable(edge.selectable)"
-        :updatable="updatable(edge.updatable)"
-        :class="getClass(edge)"
-      />
-    </g>
-  </svg>
+  <template v-for="group of groups" :key="group.level">
+    <svg class="vue-flow__edges vue-flow__container" :style="`z-index: ${group.level}`">
+      <MarkerDefinitions v-if="group.isMaxLevel" />
+      <g>
+        <EdgeWrapper
+          v-for="edge of group.edges"
+          :id="edge.id"
+          :key="edge.id"
+          :edge="edge"
+          :type="getType(edge.type, edge.template)"
+          :name="edge.type || 'default'"
+          :source-node="getNode(edge.source)"
+          :target-node="getNode(edge.target)"
+          :selectable="selectable(edge.selectable)"
+          :updatable="updatable(edge.updatable)"
+          :class="getClass(edge)"
+        />
+      </g>
+    </svg>
+  </template>
+
   <svg v-if="connectionLineVisible && !!sourceNode" class="vue-flow__edges vue-flow__connectionline vue-flow__container">
     <ConnectionLine :source-node="sourceNode" />
   </svg>

packages/core/src/container/Viewport/Transform.vue

@@ -53,6 +53,9 @@ export default {
     :style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`, opacity: ready ? undefined : 0 }"
   >
     <EdgeRenderer />
+
+    <div class="vue-flow__edge-labels" />
+
     <NodeRenderer />
     <slot />
   </div>