update(nodes): watch nodes width for dimension update

* add force param to setElements, if set we clear the elements arr (default true)
* wait for store watcher until store is ready (i.e. a state has been set)
* move renderer css class to Renderer.vue

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

src/container/Renderer/Renderer.vue

@@ -11,11 +11,7 @@ const props = defineProps<RendererProps>()
 const store = useStore()
 
 // if there are preloaded elements we overwrite the current elements with the stored ones and reset the stored elements (so we can properly parse them)
-const hasInitialElements = store.elements.length
-const initialElements = hasInitialElements ? store.elements : props.elements
-if (hasInitialElements) store.elements = []
-
-await store.setElements(initialElements)
+await store.setElements(props.elements, false)
 store.isReady = true
 
 nextTick(async () => {
@@ -45,5 +41,7 @@ export default {
 }
 </script>
 <template>
-  <slot />
+  <div class="vue-flow__renderer">
+    <slot />
+  </div>
 </template>

src/container/VueFlow/VueFlow.vue

@@ -116,19 +116,22 @@ const { pause: pauseModel, resume: resumeModel } = pausableWatch(
   async () => await store.setElements(elements.value),
 )
 const { pause, resume } = pausableWatch(elements, async (val) => await store.setElements(val), { flush: 'post' })
-watch(
-  () => store.elements,
-  (val) => {
-    pause()
-    pauseModel()
-    elements.value = val
-    setTimeout(() => {
-      resume()
-      resumeModel()
-    }, 1)
-  },
-  { flush: 'post', deep: true },
-)
+
+until(() => store.isReady).toBe(true).then(() => {
+  watch(
+    () => store.elements,
+    (val) => {
+      pause()
+      pauseModel()
+      elements.value = val
+      setTimeout(() => {
+        resume()
+        resumeModel()
+      }, 1)
+    },
+    { flush: 'post', deep: true },
+  )
+})
 
 const transitionName = computed(() => {
   let name = ''
@@ -149,9 +152,9 @@ export default {
 <template>
   <div class="vue-flow">
     <Transition :key="`vue-flow-transition-${store.$id}`" :name="transitionName">
-      <Suspense>
+      <Suspense timeout="0">
         <template #default>
-          <Renderer :elements="elements">
+          <Renderer :key="`renderer-${store.$id}`" :elements="elements">
             <ZoomPane
               :key="`zoom-pane-${store.$id}`"
               :prevent-scrolling="store.preventScrolling"

src/container/ZoomPane/ZoomPane.vue

@@ -216,7 +216,7 @@ export default {
 }
 </script>
 <template>
-  <div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">
+  <div ref="zoomPane" class="vue-flow__zoompane">
     <slot
       v-bind="{
         transform: store.transform,