From 0b2764028f91533a630cbb9b5fbbf5693f5668c6 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 25 Nov 2021 18:56:12 +0100
Subject: [PATCH] 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    |  3 +++
 src/components/Nodes/NodeWrapper.vue | 17 +++++++++-----
 src/container/Renderer/Renderer.vue  | 10 ++++-----
 src/container/VueFlow/VueFlow.vue    | 33 +++++++++++++++-------------
 src/container/ZoomPane/ZoomPane.vue  |  2 +-
 src/store/stateStore.ts              |  3 ++-
 src/style.css                        |  5 +++++
 src/types/store.ts                   |  2 +-
 src/utils/graph.ts                   |  3 +--
 9 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/examples/Stress/StressExample.vue b/examples/Stress/StressExample.vue
index 66675ebf..c6396d6e 100644
--- a/examples/Stress/StressExample.vue
+++ b/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>
diff --git a/src/components/Nodes/NodeWrapper.vue b/src/components/Nodes/NodeWrapper.vue
index 51c12b0b..d4f0ec46 100644
--- a/src/components/Nodes/NodeWrapper.vue
+++ b/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({
diff --git a/src/container/Renderer/Renderer.vue b/src/container/Renderer/Renderer.vue
index cf5024a2..94f2dbff 100644
--- a/src/container/Renderer/Renderer.vue
+++ b/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>
diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index 94150780..86c0e5de 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/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"
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index dc504ea6..4527a06a 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/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,
diff --git a/src/store/stateStore.ts b/src/store/stateStore.ts
index 6dadf146..1fedca35 100644
--- a/src/store/stateStore.ts
+++ b/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]
         })
diff --git a/src/style.css b/src/style.css
index 83c11f92..eda19bd7 100644
--- a/src/style.css
+++ b/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 {
diff --git a/src/types/store.ts b/src/types/store.ts
index 80c9bbc8..be7efa1b 100644
--- a/src/types/store.ts
+++ b/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
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index 7e2884cd..abea4bb9 100644
--- a/src/utils/graph.ts
+++ b/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