refactor(core): hide edges when we have no dimensions

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

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

@@ -18,6 +18,7 @@ const {
   getNodesInitialized,
   getEdgeTypes,
   elevateEdgesOnSelect,
+  dimensions,
 } = $(useVueFlow())
 
 const sourceNode = controlledComputed(
@@ -90,24 +91,31 @@ 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}`">
+  <template v-if="dimensions.width && dimensions.height">
-    <MarkerDefinitions v-if="group.isMaxLevel" />
+    <svg
-    <g>
+      v-for="group of groups"
-      <EdgeWrapper
+      :key="group.level"
-        v-for="edge of group.edges"
+      class="vue-flow__edges vue-flow__container"
-        :id="edge.id"
+      :style="`z-index: ${group.level}`"
-        :key="edge.id"
+    >
-        :edge="edge"
+      <MarkerDefinitions v-if="group.isMaxLevel" />
-        :type="getType(edge.type, edge.template)"
+      <g>
-        :name="edge.type || 'default'"
+        <EdgeWrapper
-        :selectable="selectable(edge.selectable)"
+          v-for="edge of group.edges"
-        :updatable="updatable(edge.updatable)"
+          :id="edge.id"
-        :focusable="focusable(edge.focusable)"
+          :key="edge.id"
-      />
+          :edge="edge"
-    </g>
+          :type="getType(edge.type, edge.template)"
-  </svg>
+          :name="edge.type || 'default'"
+          :selectable="selectable(edge.selectable)"
+          :updatable="updatable(edge.updatable)"
+          :focusable="focusable(edge.focusable)"
+        />
+      </g>
+    </svg>
 
-  <svg v-if="connectionLineVisible && !!sourceNode" class="vue-flow__edges vue-flow__connectionline vue-flow__container">
+    <svg v-if="connectionLineVisible && !!sourceNode" class="vue-flow__edges vue-flow__connectionline vue-flow__container">
-    <ConnectionLine :source-node="sourceNode" />
+      <ConnectionLine :source-node="sourceNode" />
-  </svg>
+    </svg>
+  </template>
 </template>