fix(viewpane): set viewpane functions on Transform mount

# What's changed?

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

docs/components/home/flows/Intro.vue

@@ -41,7 +41,7 @@ const initialEdges = [
     style: { strokeWidth: 2, stroke: '#0ea5e9' },
   },
 ]
-const { dimensions, instance, onNodeClick, getNodes, getNode, getEdge, updateEdge, edges, setEdges } = useVueFlow({
+const { dimensions, onNodeClick, getNodes, fitView, getNode, getEdge, updateEdge, edges, setEdges } = useVueFlow({
   nodes: [
     { id: 'intro', type: 'box', position: { x: 0, y: 0 } },
     { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
@@ -103,8 +103,6 @@ onNodeClick(async ({ node }) => {
 const init = ref(false)
 const el = templateRef<HTMLDivElement>('el', null)
 
-let stopObserver: () => void
-
 const setNodes = () => {
   if (breakpoints.isSmaller('md')) {
     const mainNode = getNode.value('intro')!
@@ -192,7 +190,7 @@ const setNodes = () => {
   }
 
   nextTick(() => {
-    instance.value?.fitView()
+    fitView()
     if (!init.value) init.value = true
   })
 }

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())
     },