feat(core): add viewport helper to state

packages/core/src/composables/useOnInitHandler.ts

@@ -4,12 +4,33 @@ import { useVueFlow } from './useVueFlow'
 export function useOnInitHandler() {
   const vfInstance = useVueFlow()
 
-  watch(vfInstance.viewportInitialized, (isInitialized) => {
-    if (isInitialized) {
-      setTimeout(() => {
-        vfInstance.emits.init(vfInstance)
-        vfInstance.emits.paneReady(vfInstance)
-      }, 1)
-    }
-  })
+  watch(
+    () => vfInstance.viewportHelper.value.viewportInitialized,
+    (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/composables/useViewport.ts

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import type { ComputedGetters, D3Selection, GraphNode, Project, State, ViewportFunctions } from '../types'
 import { clampPosition, getRectOfNodes, getTransformForBounds, pointToRendererPoint, rendererPointToPoint, warn } from '../utils'
 
-interface ExtendedViewport extends ViewportFunctions {
+export interface ViewportHelper extends ViewportFunctions {
   viewportInitialized: boolean
   screenToFlowCoordinate: Project
   flowToScreenCoordinate: Project
@@ -17,7 +17,7 @@ function noop() {
   return Promise.resolve(false)
 }
 
-const initialViewportHelper: ExtendedViewport = {
+const initialViewportHelper: ViewportHelper = {
   zoomIn: noop,
   zoomOut: noop,
   zoomTo: noop,
@@ -72,7 +72,7 @@ export function useViewport(state: State, getters: ComputedGetters) {
     })
   }
 
-  return computed<ExtendedViewport>(() => {
+  return computed<ViewportHelper>(() => {
     const isInitialized = state.d3Zoom && state.d3Selection && state.dimensions.width && state.dimensions.height
 
     if (!isInitialized) {