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,136 +73,138 @@ 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
-      return {
+
-        initialized: true,
+    if (!isInitialized) {
-        // todo: allow passing scale as option
+      return initialViewportHelper
-        zoomIn: (options) => {
+    }
-          return zoom(1.2, options?.duration)
+
-        },
+    return {
-        zoomOut: (options) => {
+      viewportInitialized: true,
-          return zoom(1 / 1.2, options?.duration)
+      // todo: allow passing scale as option
-        },
+      zoomIn: (options) => {
-        zoomTo: (zoomLevel, options) => {
+        return zoom(1.2, options?.duration)
-          return new Promise<boolean>((resolve) => {
+      },
-            if (state.d3Selection && state.d3Zoom) {
+      zoomOut: (options) => {
-              state.d3Zoom.scaleTo(
+        return zoom(1 / 1.2, options?.duration)
-                transition(state.d3Selection, options?.duration, () => {
+      },
-                  resolve(true)
+      zoomTo: (zoomLevel, options) => {
-                }),
+        return new Promise<boolean>((resolve) => {
-                zoomLevel,
+          if (state.d3Selection && state.d3Zoom) {
-              )
+            state.d3Zoom.scaleTo(
-            } else {
+              transition(state.d3Selection, options?.duration, () => {
-              resolve(false)
+                resolve(true)
-            }
+              }),
-          })
+              zoomLevel,
-        },
+            )
-        setViewport: (transform, options) => {
+          } else {
-          return transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
+            resolve(false)
-        },
+          }
-        setTransform: (transform, options) => {
+        })
-          return transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
+      },
-        },
+      setViewport: (transform, options) => {
-        getViewport: () => ({
+        return transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
+      },
+      setTransform: (transform, options) => {
+        return transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
+      },
+      getViewport: () => ({
+        x: state.viewport.x,
+        y: state.viewport.y,
+        zoom: state.viewport.zoom,
+      }),
+      getTransform: () => {
+        return {
           x: state.viewport.x,
           y: state.viewport.y,
           zoom: state.viewport.zoom,
-        }),
+        }
-        getTransform: () => {
+      },
-          return {
+      fitView: (
-            x: state.viewport.x,
+        options = {
-            y: state.viewport.y,
+          padding: DEFAULT_PADDING,
-            zoom: state.viewport.zoom,
+          includeHiddenNodes: false,
-          }
+          duration: 0,
         },
-        fitView: (
+      ) => {
-          options = {
+        const nodesToFit: GraphNode[] = (options.includeHiddenNodes ? state.nodes : getNodes.value).filter((node) => {
-            padding: DEFAULT_PADDING,
+          const initialized = node.dimensions.width && node.dimensions.height
-            includeHiddenNodes: false,
+          let shouldInclude = true
-            duration: 0,
-          },
-        ) => {
-          const nodesToFit: GraphNode[] = (options.includeHiddenNodes ? state.nodes : getNodes.value).filter((node) => {
-            const initialized = node.dimensions.width && node.dimensions.height
-            let shouldInclude = true
 
-            if (options.nodes?.length) {
+          if (options.nodes?.length) {
-              shouldInclude = options.nodes.includes(node.id)
+            shouldInclude = options.nodes.includes(node.id)
-            }
-
-            return initialized && shouldInclude
-          })
-
-          if (!nodesToFit.length) {
-            return Promise.resolve(false)
           }
 
-          const bounds = getRectOfNodes(nodesToFit)
+          return initialized && shouldInclude
+        })
 
-          const { x, y, zoom } = getTransformForBounds(
+        if (!nodesToFit.length) {
-            bounds,
+          return Promise.resolve(false)
-            state.dimensions.width,
+        }
-            state.dimensions.height,
-            options.minZoom ?? state.minZoom,
-            options.maxZoom ?? state.maxZoom,
-            options.padding ?? DEFAULT_PADDING,
-            options.offset,
-          )
 
-          return transformViewport(x, y, zoom, options?.duration)
+        const bounds = getRectOfNodes(nodesToFit)
-        },
-        setCenter: (x, y, options) => {
-          const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : state.maxZoom
-          const centerX = state.dimensions.width / 2 - x * nextZoom
-          const centerY = state.dimensions.height / 2 - y * nextZoom
 
-          return transformViewport(centerX, centerY, nextZoom, options?.duration)
+        const { x, y, zoom } = getTransformForBounds(
-        },
+          bounds,
-        fitBounds: (bounds, options = { padding: DEFAULT_PADDING }) => {
+          state.dimensions.width,
-          const { x, y, zoom } = getTransformForBounds(
+          state.dimensions.height,
-            bounds,
+          options.minZoom ?? state.minZoom,
-            state.dimensions.width,
+          options.maxZoom ?? state.maxZoom,
-            state.dimensions.height,
+          options.padding ?? DEFAULT_PADDING,
-            state.minZoom,
+          options.offset,
-            state.maxZoom,
+        )
-            options.padding,
-          )
 
-          return transformViewport(x, y, zoom, options?.duration)
+        return transformViewport(x, y, zoom, options?.duration)
-        },
+      },
-        project: (position) => pointToRendererPoint(position, state.viewport, state.snapToGrid, state.snapGrid),
+      setCenter: (x, y, options) => {
-        screenToFlowCoordinate: (position) => {
+        const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : state.maxZoom
-          if (state.vueFlowRef) {
+        const centerX = state.dimensions.width / 2 - x * nextZoom
-            const { x: domX, y: domY } = state.vueFlowRef.getBoundingClientRect()
+        const centerY = state.dimensions.height / 2 - y * nextZoom
 
-            const correctedPosition = {
+        return transformViewport(centerX, centerY, nextZoom, options?.duration)
-              x: position.x - domX,
+      },
-              y: position.y - domY,
+      fitBounds: (bounds, options = { padding: DEFAULT_PADDING }) => {
-            }
+        const { x, y, zoom } = getTransformForBounds(
+          bounds,
+          state.dimensions.width,
+          state.dimensions.height,
+          state.minZoom,
+          state.maxZoom,
+          options.padding,
+        )
 
-            return pointToRendererPoint(correctedPosition, state.viewport, state.snapToGrid, state.snapGrid)
+        return transformViewport(x, y, zoom, options?.duration)
+      },
+      project: (position) => pointToRendererPoint(position, state.viewport, state.snapToGrid, state.snapGrid),
+      screenToFlowCoordinate: (position) => {
+        if (state.vueFlowRef) {
+          const { x: domX, y: domY } = state.vueFlowRef.getBoundingClientRect()
+
+          const correctedPosition = {
+            x: position.x - domX,
+            y: position.y - domY,
           }
 
-          return { x: 0, y: 0 }
+          return pointToRendererPoint(correctedPosition, state.viewport, state.snapToGrid, state.snapGrid)
-        },
+        }
-        flowToScreenCoordinate: (position) => {
-          if (state.vueFlowRef) {
-            const { x: domX, y: domY } = state.vueFlowRef.getBoundingClientRect()
 
-            const correctedPosition = {
+        return { x: 0, y: 0 }
-              x: position.x + domX,
+      },
-              y: position.y + domY,
+      flowToScreenCoordinate: (position) => {
-            }
+        if (state.vueFlowRef) {
+          const { x: domX, y: domY } = state.vueFlowRef.getBoundingClientRect()
 
-            return rendererPointToPoint(correctedPosition, state.viewport)
+          const correctedPosition = {
+            x: position.x + domX,
+            y: position.y + domY,
           }
 
-          return { x: 0, y: 0 }
+          return rendererPointToPoint(correctedPosition, state.viewport)
-        },
+        }
-      }
+
+        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 */