From 50ee96d0c16bd01a06c6d4ccb370a58ca9eaa911 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 27 Feb 2023 23:18:40 +0100
Subject: [PATCH] refactor(core): hide edges when we have no dimensions

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .../container/EdgeRenderer/EdgeRenderer.vue   | 46 +++++++++++--------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
index 8795201a..f367b093 100644
--- a/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/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}`">
-    <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'"
-        :selectable="selectable(edge.selectable)"
-        :updatable="updatable(edge.updatable)"
-        :focusable="focusable(edge.focusable)"
-      />
-    </g>
-  </svg>
+  <template v-if="dimensions.width && dimensions.height">
+    <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'"
+          :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">
-    <ConnectionLine :source-node="sourceNode" />
-  </svg>
+    <svg v-if="connectionLineVisible && !!sourceNode" class="vue-flow__edges vue-flow__connectionline vue-flow__container">
+      <ConnectionLine :source-node="sourceNode" />
+    </svg>
+  </template>
 </template>