fix(viewpane): set viewpane functions on Transform mount

# What's changed?

* log warnings when viewpane functions are used before viewpane is ready

packages/vue-flow/src/container/Viewport/Transform.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
-import { useVueFlow, useWindow } from '../../composables'
+import { useVueFlow, useWindow, useZoomPanHelper } from '../../composables'
 import type { Dimensions } from '../../types'
 
-const { id, nodes, edges, viewport, snapToGrid, snapGrid, dimensions, setState, fitViewOnInit, emits, fitView } = $(useVueFlow())
+const { id, nodes, edges, viewport, snapToGrid, snapGrid, dimensions, setState, fitViewOnInit, emits } = $(useVueFlow())
+// eslint-disable-next-line prefer-const
+let { fitView, zoomIn, zoomOut, zoomTo, setTransform, setCenter, fitBounds, ...rest } = useVueFlow()
 
 const untilDimensions = async (dim: Dimensions) => {
   // if ssr we can't wait for dimensions, they'll never really exist
@@ -23,11 +25,24 @@ onMounted(async () => {
   // wait until proper dimensions have been established, otherwise fitView will have wrong bounds when called at paneReady
   await untilDimensions(dimensions)
 
+  // create new instance and set to state
+  const zoomPanHelper = useZoomPanHelper()
+
+  fitView = (params = { padding: 0.1 }) => {
+    zoomPanHelper.fitView(params)
+  }
+  zoomIn = zoomPanHelper.zoomIn
+  zoomOut = zoomPanHelper.zoomOut
+  zoomTo = zoomPanHelper.zoomTo
+  setTransform = zoomPanHelper.setTransform
+  setCenter = zoomPanHelper.setCenter
+  fitBounds = zoomPanHelper.fitBounds
+
   // hide graph until dimensions are ready, so we don't have jumping graphs (ssr for example)
   ready = true
 
   fitViewOnInit && fitView()
-  emits.paneReady(useVueFlow())
+  emits.paneReady({ fitView, zoomIn, zoomOut, zoomTo, setTransform, setCenter, fitBounds, ...rest })
 })
 </script>
 

packages/vue-flow/src/store/actions.ts

@@ -31,9 +31,9 @@ import {
   isGraphNode,
   isNode,
   parseEdge,
+  pointToRendererPoint,
   updateEdgeAction,
 } from '~/utils'
-import { useZoomPanHelper } from '~/composables'
 
 export default (state: State, getters: ComputedGetters): Actions => {
   const updateNodePositions: Actions['updateNodePositions'] = (dragItems, changed, dragging) => {
@@ -338,7 +338,11 @@ export default (state: State, getters: ComputedGetters): Actions => {
     )
   }
 
-  const { fitView, ...rest } = useZoomPanHelper()
+  const paneNotReady = () => {
+    console.warn(
+      `[Vue Flow]: Used viewpane function before pane was ready. Use viewpane functions *after* onPaneReady is emitted.`,
+    )
+  }
 
   return {
     updateNodePositions,
@@ -364,9 +368,22 @@ export default (state: State, getters: ComputedGetters): Actions => {
     removeSelectedEdges,
     setInteractive,
     setState,
-    fitView: (params = { padding: 0.1 }) => fitView(params),
+    fitView: paneNotReady,
+    zoomIn: paneNotReady,
+    zoomOut: paneNotReady,
+    zoomTo: paneNotReady,
+    setTransform: paneNotReady,
+    getTransform: () => ({
+      x: state.viewport.x,
+      y: state.viewport.y,
+      zoom: state.viewport.zoom,
+    }),
+    setCenter: paneNotReady,
+    fitBounds: paneNotReady,
+    project(position) {
+      return pointToRendererPoint(position, state.viewport, state.snapToGrid, state.snapGrid)
+    },
     toObject,
-    ...rest,
     $reset: () => {
       setState(useState())
     },