refactor(core): call fitViewOnInit when node dimensions are initially set

Author: bcakmakoglu

packages/core/src/components/Nodes/NodeWrapper.ts

@@ -199,10 +199,10 @@ const NodeWrapper = defineComponent({
             getClass.value,
           ],
           'style': {
+            visibility: node.value.initialized ? 'visible' : 'hidden',
             zIndex: node.value.computedPosition.z ?? zIndex(),
             transform: `translate(${node.value.computedPosition.x}px,${node.value.computedPosition.y}px)`,
             pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
-            visibility: node.value.initialized ? 'visible' : 'hidden',
             ...getStyle.value,
           },
           'tabIndex': props.focusable ? 0 : undefined,

packages/core/src/composables/useOnInitHandler.ts

@@ -9,24 +9,6 @@ export function useOnInitHandler() {
     (isInitialized) => {
       if (isInitialized) {
         setTimeout(() => {
-          // todo: call these when *nodes* are initialized instead of the viewport
-          // currently doesn't work quite right because the viewport dimensions are not yet available when the nodes are initialized
-          if (!vfInstance.fitViewOnInitDone.value && vfInstance.fitViewOnInit.value) {
-            vfInstance.fitView()
-          }
-
-          vfInstance.fitViewOnInitDone.value = true
-
-          // Here, we are making all nodes visible once we have the dimensions.
-          if (!document.querySelector('#vue-flow__initialized-styles')) {
-            const style = document.createElement('style')
-            style.id = 'vue-flow__initialized-styles'
-            document.head.appendChild(style)
-
-            const css = `.vue-flow__node { visibility: visible !important; }`
-            style.appendChild(document.createTextNode(css))
-          }
-
           vfInstance.emits.init(vfInstance)
           vfInstance.emits.paneReady(vfInstance)
         }, 1)

packages/core/src/store/actions.ts

@@ -1,5 +1,6 @@
 import { zoomIdentity } from 'd3-zoom'
 import type { ComputedRef } from 'vue'
+import { nextTick } from 'vue'
 import { until } from '@vueuse/core'
 import type {
   Actions,
@@ -180,6 +181,13 @@ export function useActions(
       return res
     }, [])
 
+    if (!state.fitViewOnInitDone && state.fitViewOnInit) {
+      nextTick(() => {
+        viewportHelper.value.fitView()
+        state.fitViewOnInitDone = true
+      })
+    }
+
     if (changes.length) {
       state.hooks.nodesChange.trigger(changes)
     }