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>

examples/Stress/StressExample.vue

@@ -17,8 +17,10 @@ import {
 
 const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 4 }
 
+const instance = ref<FlowInstance>()
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView()
+  instance.value = flowInstance
   console.log(flowInstance.getElements())
 }
 
@@ -46,6 +48,7 @@ const updatePos = () => {
 const updateElements = () => {
   const grid = Math.ceil(Math.random() * 10)
   elements.value = getElements(grid, grid)
+  setTimeout(() => instance.value.fitView({ padding: 0.5 }))
 }
 </script>
 <template>

src/components/Nodes/NodeWrapper.vue

@@ -98,12 +98,17 @@ const updateNodeDimensions = ({ nodeElement, forceUpdate }: NodeDimensionUpdate)
 }
 
 onMounted(() => {
-  updateNodeDimensions({
-    id: props.node.id,
-    nodeElement: nodeElement.value,
-    forceUpdate: true,
-  })
-
+  watch(
+    () => props.node.__vf.width,
+    () => {
+      updateNodeDimensions({
+        id: props.node.id,
+        nodeElement: nodeElement.value,
+        forceUpdate: true,
+      })
+    },
+    { immediate: true },
+  )
   useResizeObserver(nodeElement, (entries) =>
     entries.forEach((entry) => {
       updateNodeDimensions({

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,

src/store/stateStore.ts

@@ -85,8 +85,9 @@ export default (id: string, preloadedState: FlowState) => {
       },
     },
     actions: {
-      async setElements(elements) {
+      async setElements(elements, force = true) {
         const { nodes, edges } = parseElements(elements, this.elements, this.nodeExtent)
+        if (force) this.elements = []
         await processElements([...nodes, ...edges], (processed) => {
           this.elements = [...this.elements, ...processed]
         })

src/style.css

@@ -5,6 +5,11 @@
   overflow: hidden;
 }
 
+.vue-flow__zoompane {
+  width: 100%;
+  height: 100%;
+}
+
 .vue-flow__renderer,
 .vue-flow__pane,
 .vue-flow__selectionpane {

src/types/store.ts

@@ -73,7 +73,7 @@ export interface FlowState extends Omit<FlowOptions, 'elements'> {
 }
 
 export interface FlowActions {
-  setElements: (elements: Elements) => Promise<void>
+  setElements: (elements: Elements, init?: boolean) => Promise<void>
   setUserSelection: (mousePos: XYPosition) => void
   updateUserSelection: (mousePos: XYPosition) => void
   unsetUserSelection: () => void

src/utils/graph.ts

@@ -53,8 +53,7 @@ export const getHostForElement = (element: HTMLElement): Document => {
 export const isEdge = (element: Node | Edge | Connection): element is Edge =>
   'id' in element && 'source' in element && 'target' in element
 
-export const isNode = (element: Node | Edge | Connection): element is Node =>
-  'id' in element && !('source' in element) && !('target' in element)
+export const isNode = (element: Node | Edge | Connection): element is Node => 'id' in element && !isEdge(element)
 
 export const isGraphNode = (element: any): element is GraphNode => isNode(element) && '__vf' in element
 export const isGraphEdge = (element: any): element is GraphEdge => isEdge(element) && 'sourceTargetNodes' in element