refactor(core): use useOnInitHandler to emit paneReady event

packages/core/src/composables/useOnInitHandler.ts

@@ -0,0 +1,14 @@
+import { watch } from 'vue'
+import { useVueFlow } from './useVueFlow'
+
+export function useOnInitHandler() {
+  const vfInstance = useVueFlow()
+
+  watch(vfInstance.viewportInitialized, (isInitialized) => {
+    if (isInitialized) {
+      setTimeout(() => {
+        vfInstance.emits.paneReady(vfInstance)
+      }, 1)
+    }
+  })
+}

packages/core/src/composables/useViewport.ts

@@ -4,7 +4,7 @@ import type { ComputedGetters, D3Selection, GraphNode, Project, State, ViewportF
 import { clampPosition, getRectOfNodes, getTransformForBounds, pointToRendererPoint, rendererPointToPoint, warn } from '../utils'
 
 interface ExtendedViewport extends ViewportFunctions {
-  initialized: boolean
+  viewportInitialized: boolean
   screenToFlowCoordinate: Project
   flowToScreenCoordinate: Project
 }
@@ -31,7 +31,7 @@ const initialViewportHelper: ExtendedViewport = {
   setTransform: noop,
   getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
   getTransform: () => ({ x: 0, y: 0, zoom: 1 }),
-  initialized: false,
+  viewportInitialized: false,
 }
 
 export function useViewport(state: State, getters: ComputedGetters) {
@@ -73,9 +73,14 @@ export function useViewport(state: State, getters: ComputedGetters) {
   }
 
   return computed<ExtendedViewport>(() => {
-    if (state.d3Zoom && state.d3Selection && state.dimensions.width && state.dimensions.height) {
+    const isInitialized = state.d3Zoom && state.d3Selection && state.dimensions.width && state.dimensions.height
+
+    if (!isInitialized) {
+      return initialViewportHelper
+    }
+
     return {
-        initialized: true,
+      viewportInitialized: true,
       // todo: allow passing scale as option
       zoomIn: (options) => {
         return zoom(1.2, options?.duration)
@@ -200,9 +205,6 @@ export function useViewport(state: State, getters: ComputedGetters) {
         return { x: 0, y: 0 }
       },
     }
-    }
-
-    return initialViewportHelper
   })
 }
 

packages/core/src/composables/useVueFlow.ts

@@ -56,7 +56,7 @@ export class Storage {
 
     const getters = useGetters(reactiveState, nodeIds, edgeIds)
 
-    const actions = useActions(id, emits, hooksOn, reactiveState, getters, nodeIds, edgeIds)
+    const actions = useActions(id, reactiveState, getters, nodeIds, edgeIds)
 
     actions.setState(reactiveState)
 

packages/core/src/store/actions.ts

@@ -54,8 +54,6 @@ import { useState } from './state'
 
 export function useActions(
   id: string,
-  emits: any,
-  hooksOn: any,
   state: State,
   getters: ComputedGetters,
   // todo: change to a Set
@@ -846,7 +844,7 @@ export function useActions(
         const y = viewport?.y || position[1]
         const nextZoom = viewport?.zoom || zoom || state.viewport.zoom
 
-        return until(() => viewportHelper.value.initialized)
+        return until(() => viewportHelper.value.viewportInitialized)
           .toBe(true)
           .then(() => {
             viewportHelper.value
@@ -891,7 +889,7 @@ export function useActions(
     setState(resetState)
   }
 
-  const actions: Actions = {
+  return {
     updateNodePositions,
     updateNodeDimensions,
     setElements,
@@ -944,20 +942,4 @@ export function useActions(
     $reset,
     $destroy: () => {},
   }
-
-  until(() => viewportHelper.value.initialized)
-    .toBe(true)
-    .then(() => {
-      state.hooks.paneReady.trigger({
-        id,
-        emits,
-        vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : 'UNKNOWN',
-        ...hooksOn,
-        ...state,
-        ...getters,
-        ...actions,
-      })
-    })
-
-  return actions
 }

packages/core/src/store/state.ts

@@ -50,6 +50,9 @@ function defaultState(): State {
     d3Zoom: null,
     d3Selection: null,
     d3ZoomHandler: null,
+
+    viewportInitialized: false,
+
     minZoom: 0.5,
     maxZoom: 2,
 

packages/core/src/types/store.ts

@@ -57,6 +57,8 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   readonly d3Selection: D3Selection | null
   readonly d3ZoomHandler: D3ZoomHandler | null
 
+  viewportInitialized: boolean
+
   /** use setMinZoom action to change minZoom */
   minZoom: number
   /** use setMaxZoom action to change maxZoom */