refactor: directly bind instance functions

package/src/container/Viewport/Transform.vue

@@ -2,8 +2,8 @@
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 import { useVueFlow, useZoomPanHelper, useWindow } from '../../composables'
-import { FlowInstance, Store } from '../../types'
-import { onLoadGetEdges, onLoadGetElements, onLoadGetNodes, onLoadProject, onLoadToObject } from '../../utils'
+import { FlowExportObject, FlowInstance, Store, XYPosition } from '../../types'
+import { pointToRendererPoint } from '../../utils'
 
 const { id, store } = useVueFlow()
 
@@ -20,23 +20,38 @@ const untilDimensions = async (store: Store) => {
 
 const ready = ref(false)
 onMounted(async () => {
-  const { zoomIn, zoomOut, zoomTo, setTransform, getTransform, fitView, fitBounds, setCenter } = useZoomPanHelper(store)
-  const instance: FlowInstance = {
+  const { fitView, ...rest } = useZoomPanHelper(store)
+  let instance: FlowInstance | null = {
     fitView: (params = { padding: 0.1 }) => fitView(params),
-    zoomIn,
-    zoomOut,
-    zoomTo,
-    setTransform,
-    getTransform,
-    setCenter,
-    fitBounds,
-    project: onLoadProject(store),
-    getElements: onLoadGetElements(store),
-    getNodes: onLoadGetNodes(store),
-    getEdges: onLoadGetEdges(store),
-    toObject: onLoadToObject(store),
+    ...rest,
+
+    project(position: XYPosition) {
+      return pointToRendererPoint(position, store.viewport, store.snapToGrid, store.snapGrid)
+    },
+    getElements() {
+      return [...store.nodes, ...store.edges]
+    },
+    getNodes() {
+      return store.nodes
+    },
+    getEdges() {
+      return store.edges
+    },
+    toObject() {
+      // we have to stringify/parse so objects containing refs (like nodes and edges) can potentially be saved in a storage
+      return JSON.parse(
+        JSON.stringify({
+          nodes: store.nodes,
+          edges: store.edges,
+          position: [store.viewport.x, store.viewport.y],
+          zoom: store.viewport.zoom,
+        } as FlowExportObject),
+      )
+    },
   }
 
+  onScopeDispose(() => (instance = null))
+
   await untilDimensions(store)
 
   ready.value = true

package/src/utils/graph.ts

@@ -8,15 +8,11 @@ import {
   EdgeMarkerType,
   Elements,
   FlowElement,
-  FlowElements,
-  FlowExportObject,
   Getters,
   GraphEdge,
   GraphNode,
   Node,
   Rect,
-  State,
-  Store,
   Viewport,
   XYPosition,
   XYZPosition,
@@ -219,9 +215,6 @@ export const pointToRendererPoint = (
   return position
 }
 
-export const onLoadProject = (currentStore: Store) => (position: XYPosition) =>
-  pointToRendererPoint(position, currentStore.viewport, currentStore.snapToGrid, currentStore.snapGrid)
-
 const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({
   x: Math.min(box1.x, box2.x),
   y: Math.min(box1.y, box2.y),
@@ -304,22 +297,6 @@ export const getConnectedEdges = (nodes: GraphNode[], edges: GraphEdge[]) => {
   return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target))
 }
 
-export const onLoadGetNodes = (store: Store) => (): GraphNode[] => store.nodes
-export const onLoadGetEdges = (store: Store) => (): GraphEdge[] => store.edges
-export const onLoadGetElements = (store: Store) => (): FlowElements => [...store.nodes, ...store.edges]
-
-export const onLoadToObject = (store: State) => (): FlowExportObject => {
-  // we have to stringify/parse so objects containing refs (like nodes and edges) can potentially be saved in a storage
-  return JSON.parse(
-    JSON.stringify({
-      nodes: store.nodes,
-      edges: store.edges,
-      position: [store.viewport.x, store.viewport.y],
-      zoom: store.viewport.zoom,
-    } as FlowExportObject),
-  )
-}
-
 export const getTransformForBounds = (
   bounds: Rect,
   width: number,