From 2b87d53c10e354ce978efad33acb6f043fabcb17 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 20 Nov 2021 03:04:25 +0100
Subject: [PATCH] update: dont render nodes, edges if dimensions dont return a
 truthy value

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/container/EdgeRenderer/EdgeRenderer.vue |  6 --
 src/container/NodeRenderer/NodeRenderer.vue | 33 +++-----
 src/container/VueFlow/VueFlow.vue           | 87 ++++++++++-----------
 src/container/ZoomPane/ZoomPane.vue         | 40 +++++-----
 4 files changed, 73 insertions(+), 93 deletions(-)

diff --git a/src/container/EdgeRenderer/EdgeRenderer.vue b/src/container/EdgeRenderer/EdgeRenderer.vue
index cd1bc013..4df93654 100644
--- a/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { invoke } from '@vueuse/core'
 import { ConnectionLineType } from '../../types'
 import { useStore } from '../../composables'
 import Edge from '../../components/Edges/Edge.vue'
@@ -23,11 +22,6 @@ const props = withDefaults(defineProps<EdgeRendererProps>(), {
 
 const store = useStore()
 
-invoke(async () => {
-  await until(store.getNodes).toMatch((y) => y && y.length > 0)
-  await until(store.transform).toMatch(([x, y, z]) => !isNaN(x) && x !== 0 && !isNaN(y) && y !== 0 && isNaN(z) && z !== 1)
-})
-
 const sourceNode = computed(() => store.nodes.find((n) => n.id === store.connectionNodeId))
 const connectionLineVisible = computed(
   () => !!(store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType),
diff --git a/src/container/NodeRenderer/NodeRenderer.vue b/src/container/NodeRenderer/NodeRenderer.vue
index 87a6ce7a..06b5c93e 100644
--- a/src/container/NodeRenderer/NodeRenderer.vue
+++ b/src/container/NodeRenderer/NodeRenderer.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { invoke } from '@vueuse/core'
 import { useStore } from '../../composables'
 import Node from '../../components/Nodes/Node.vue'
 
@@ -13,27 +12,21 @@ const props = withDefaults(defineProps<NodeRendererProps>(), {
 
 const store = useStore()
 
-invoke(async () => {
-  await until(store.getNodes).toMatch((y) => y && y.length > 0)
-  await until(store.transform).toMatch(([x, y, z]) => !isNaN(x) && x !== 0 && !isNaN(y) && y !== 0 && isNaN(z) && z !== 1)
-})
 const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
 const snapGrid = computed(() => (store.snapToGrid ? store.snapGrid : undefined))
 </script>
 <template>
-  <Suspense>
-    <div class="vue-flow__nodes" :style="{ transform }">
-      <Node
-        v-for="node of store.getNodes"
-        :key="node.id"
-        :node="node"
-        :snap-grid="snapGrid"
-        :select-nodes-on-drag="props.selectNodesOnDrag"
-      >
-        <template #default="nodeProps">
-          <slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>
-        </template>
-      </Node>
-    </div>
-  </Suspense>
+  <div class="vue-flow__nodes" :style="{ transform }">
+    <Node
+      v-for="node of store.getNodes"
+      :key="node.id"
+      :node="node"
+      :snap-grid="snapGrid"
+      :select-nodes-on-drag="props.selectNodesOnDrag"
+    >
+      <template #default="nodeProps">
+        <slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>
+      </template>
+    </Node>
+  </div>
 </template>
diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index fe00dd46..e7e1575f 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/src/container/VueFlow/VueFlow.vue
@@ -127,7 +127,6 @@ const init = (state: FlowState) => {
 }
 onBeforeUnmount(() => store?.$dispose())
 
-onMounted(() => init(options))
 watch(elements, (val) => store.setElements(val), { flush: 'post', deep: true })
 watch(
   () => store.elements,
@@ -147,54 +146,52 @@ watch(
   },
   { flush: 'pre', deep: true },
 )
-invoke(async () => await until(store.elements).toMatch((y) => y.length > 0))
+init(options)
 </script>
 <template>
   <div class="vue-flow">
-    <Suspense>
-      <ZoomPane
-        :selection-key-code="store.selectionKeyCode"
-        :zoom-activation-key-code="store.zoomActivationKeyCode"
-        :default-zoom="store.defaultZoom"
-        :default-position="store.defaultPosition"
-        :zoom-on-scroll="store.zoomOnScroll"
-        :zoom-on-pinch="store.zoomOnPinch"
-        :zoom-on-double-click="store.zoomOnDoubleClick"
-        :pan-on-scroll="store.panOnScroll"
-        :pan-on-scroll-speed="store.panOnScrollSpeed"
-        :pan-on-scroll-mode="store.panOnScrollMode"
-        :pane-moveable="store.paneMoveable"
-      >
-        <template #default="zoomPaneProps">
-          <SelectionPane
-            :delete-key-code="store.deleteKeyCode"
-            :multi-selection-key-code="store.multiSelectionKeyCode"
-            :selection-key-code="store.selectionKeyCode"
+    <ZoomPane
+      :selection-key-code="store.selectionKeyCode"
+      :zoom-activation-key-code="store.zoomActivationKeyCode"
+      :default-zoom="store.defaultZoom"
+      :default-position="store.defaultPosition"
+      :zoom-on-scroll="store.zoomOnScroll"
+      :zoom-on-pinch="store.zoomOnPinch"
+      :zoom-on-double-click="store.zoomOnDoubleClick"
+      :pan-on-scroll="store.panOnScroll"
+      :pan-on-scroll-speed="store.panOnScrollSpeed"
+      :pan-on-scroll-mode="store.panOnScrollMode"
+      :pane-moveable="store.paneMoveable"
+    >
+      <template v-if="store.dimensions.width > 0 && !isNaN(store.dimensions.width)" #default="zoomPaneProps">
+        <SelectionPane
+          :delete-key-code="store.deleteKeyCode"
+          :multi-selection-key-code="store.multiSelectionKeyCode"
+          :selection-key-code="store.selectionKeyCode"
+        >
+          <NodeRenderer :select-nodes-on-drag="store.selectNodesOnDrag">
+            <template v-for="nodeName of Object.keys(store.getNodeTypes)" #[`node-${nodeName}`]="nodeProps">
+              <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
+            </template>
+          </NodeRenderer>
+          <EdgeRenderer
+            :connection-line-type="store.connectionLineType"
+            :connection-line-style="store.connectionLineStyle"
+            :arrow-head-color="store.arrowHeadColor"
+            :marker-end-id="store.markerEndId"
           >
-            <NodeRenderer :select-nodes-on-drag="store.selectNodesOnDrag">
-              <template v-for="nodeName of Object.keys(store.getNodeTypes)" #[`node-${nodeName}`]="nodeProps">
-                <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
-              </template>
-            </NodeRenderer>
-            <EdgeRenderer
-              :connection-line-type="store.connectionLineType"
-              :connection-line-style="store.connectionLineStyle"
-              :arrow-head-color="store.arrowHeadColor"
-              :marker-end-id="store.markerEndId"
-            >
-              <template v-for="edgeName of Object.keys(store.getEdgeTypes)" #[`edge-${edgeName}`]="edgeProps">
-                <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
-              </template>
-              <template #custom-connection-line="customConnectionLineProps">
-                <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
-              </template>
-            </EdgeRenderer>
-          </SelectionPane>
-          <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
-        </template>
-      </ZoomPane>
-    </Suspense>
-    <slot v-bind="{ ...props, store }"></slot>
+            <template v-for="edgeName of Object.keys(store.getEdgeTypes)" #[`edge-${edgeName}`]="edgeProps">
+              <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
+            </template>
+            <template #custom-connection-line="customConnectionLineProps">
+              <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
+            </template>
+          </EdgeRenderer>
+        </SelectionPane>
+        <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
+      </template>
+    </ZoomPane>
+    <slot v-bind="{ store }"></slot>
   </div>
 </template>
 <style>
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index 607cae65..ad53ee7e 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/src/container/ZoomPane/ZoomPane.vue
@@ -34,7 +34,6 @@ const props = withDefaults(defineProps<ZoomPaneProps>(), {
   paneMoveable: true,
 })
 const store = useStore()
-
 const zoomPaneEl = templateRef<HTMLDivElement>('zoomPane', null)
 
 const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
@@ -185,22 +184,19 @@ store.dimensions = {
 
 invoke(async () => {
   await until(() => !isNaN(width.value) && width.value > 0 && !isNaN(height.value) && height.value > 0).toBeTruthy()
-  await until(store.elements).toMatch((y) => y.length > 0)
-  await nextTick(() => {
-    const instance: FlowInstance = {
-      fitView: (params = { padding: 0.1 }) => fitView(params),
-      zoomIn,
-      zoomOut,
-      zoomTo,
-      setTransform,
-      project: onLoadProject(store),
-      getElements: onLoadGetElements(store),
-      toObject: onLoadToObject(store),
-    }
-    store.hooks.load.trigger(instance)
-    store.isReady = true
-    store.instance = instance
-  })
+  const instance: FlowInstance = {
+    fitView: (params = { padding: 0.1 }) => fitView(params),
+    zoomIn,
+    zoomOut,
+    zoomTo,
+    setTransform,
+    project: onLoadProject(store),
+    getElements: onLoadGetElements(store),
+    toObject: onLoadToObject(store),
+  }
+  store.hooks.load.trigger(instance)
+  store.isReady = true
+  store.instance = instance
 })
 
 watch(
@@ -223,8 +219,8 @@ watch(
 )
 </script>
 <template>
-  <Suspense>
-    <div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">
+  <div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">
+    <Suspense>
       <slot
         v-bind="{
           transform,
@@ -235,7 +231,7 @@ watch(
           setTransform,
           fitView,
         }"
-      ></slot>
-    </div>
-  </Suspense>
+      />
+    </Suspense>
+  </div>
 </template>