refactor(core): move fitViewOnInit to node dimensions update

packages/core/src/container/Viewport/Transform.vue

@@ -3,7 +3,7 @@ import { useVueFlow } from '../../composables'
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 
-const { id, viewport, fitViewOnInitDone } = useVueFlow()
+const { viewport } = useVueFlow()
 </script>
 
 <script lang="ts">
@@ -15,11 +15,9 @@ export default {
 
 <template>
   <div
-    :key="`transform-${id}`"
     class="vue-flow__transformationpane vue-flow__container"
     :style="{
       transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`,
-      opacity: fitViewOnInitDone ? undefined : 0,
     }"
   >
     <EdgeRenderer />

packages/core/src/store/actions.ts

@@ -947,24 +947,15 @@ export function useActions(
   until(() => viewportHelper.value.initialized)
     .toBe(true)
     .then(() => {
-      setTimeout(() => {
+      state.hooks.paneReady.trigger({
-        // todo:  move this to when *nodes* are initialized instead of viewport
+        id,
-        if (!state.fitViewOnInitDone && state.fitViewOnInit) {
+        emits,
-          viewportHelper.value.fitView()
+        vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : 'UNKNOWN',
-        }
+        ...hooksOn,
-
+        ...state,
-        state.fitViewOnInitDone = true
+        ...getters,
-
+        ...actions,
-        state.hooks.paneReady.trigger({
+      })
-          id,
-          emits,
-          vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : 'UNKNOWN',
-          ...hooksOn,
-          ...state,
-          ...getters,
-          ...actions,
-        })
-      }, 1)
     })
 
   return actions