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

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

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,15 +12,10 @@ 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"
@@ -35,5 +29,4 @@ const snapGrid = computed(() => (store.snapToGrid ? store.snapGrid : undefined))
       </template>
     </Node>
   </div>
-  </Suspense>
 </template>

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,11 +146,10 @@ 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"
@@ -165,7 +163,7 @@ invoke(async () => await until(store.elements).toMatch((y) => y.length > 0))
       :pan-on-scroll-mode="store.panOnScrollMode"
       :pane-moveable="store.paneMoveable"
     >
-        <template #default="zoomPaneProps">
+      <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"
@@ -193,8 +191,7 @@ invoke(async () => await until(store.elements).toMatch((y) => y.length > 0))
         <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
       </template>
     </ZoomPane>
-    </Suspense>
+    <slot v-bind="{ store }"></slot>
-    <slot v-bind="{ ...props, store }"></slot>
   </div>
 </template>
 <style>

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,8 +184,6 @@ 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,
@@ -201,7 +198,6 @@ invoke(async () => {
   store.isReady = true
   store.instance = instance
 })
-})
 
 watch(
   [width, height],
@@ -223,8 +219,8 @@ watch(
 )
 </script>
 <template>
-  <Suspense>
   <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>
+  </div>
 </template>