From 90af73dcd3b735286adfb0917032d36f88ce4955 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 6 Jun 2022 23:05:44 +0200
Subject: [PATCH] chore: trigger fitViewOnInit after paneReady

---
 packages/vue-flow/src/composables/useVueFlow.ts        | 2 +-
 packages/vue-flow/src/container/Viewport/Transform.vue | 3 ++-
 packages/vue-flow/src/store/actions.ts                 | 6 +++---
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/vue-flow/src/composables/useVueFlow.ts b/packages/vue-flow/src/composables/useVueFlow.ts
index e9830ebe..659edd25 100644
--- a/packages/vue-flow/src/composables/useVueFlow.ts
+++ b/packages/vue-flow/src/composables/useVueFlow.ts
@@ -38,7 +38,7 @@ export class Storage {
 
     const getters = useGetters(reactiveState)
 
-    const actions = useActions(reactiveState, getters, id)
+    const actions = useActions(reactiveState, getters)
 
     const hooksOn = <any>{}
     Object.entries(reactiveState.hooks).forEach(([n, h]) => {
diff --git a/packages/vue-flow/src/container/Viewport/Transform.vue b/packages/vue-flow/src/container/Viewport/Transform.vue
index 938f2cda..a4044428 100644
--- a/packages/vue-flow/src/container/Viewport/Transform.vue
+++ b/packages/vue-flow/src/container/Viewport/Transform.vue
@@ -27,7 +27,6 @@ onMounted(async () => {
   // hide graph until dimensions are ready, so we don't have jumping graphs (ssr for example)
   ready = true
 
-  fitViewOnInit?.value && fitView()
   emits.paneReady({
     id,
     nodes,
@@ -42,6 +41,8 @@ onMounted(async () => {
     emits,
     ...rest,
   })
+
+  fitViewOnInit?.value && fitView()
 })
 </script>
 
diff --git a/packages/vue-flow/src/store/actions.ts b/packages/vue-flow/src/store/actions.ts
index 5edd99ff..b19a1b62 100644
--- a/packages/vue-flow/src/store/actions.ts
+++ b/packages/vue-flow/src/store/actions.ts
@@ -36,7 +36,7 @@ import {
 } from '~/utils'
 import { useZoomPanHelper } from '~/composables'
 
-export default (state: State, getters: ComputedGetters, id: string): Actions => {
+export default (state: State, getters: ComputedGetters): Actions => {
   const updateNodePositions: Actions['updateNodePositions'] = (dragItems, changed, dragging) => {
     const changes: NodePositionChange[] = []
 
@@ -341,12 +341,12 @@ export default (state: State, getters: ComputedGetters, id: string): Actions =>
 
   let zoomPanHelper: ReturnType<typeof useZoomPanHelper>
 
-  state.hooks.paneReady.on(() => {
+  state.hooks.paneReady.on(({ id }) => {
     zoomPanHelper = useZoomPanHelper(id)
   })
 
   const paneReady = async () => {
-    return new Promise<ReturnType<typeof useZoomPanHelper>>((resolve) => {
+    return new Promise<typeof zoomPanHelper>((resolve) => {
       if (!zoomPanHelper) {
         until(() => zoomPanHelper)
           .toBeTruthy()