diff --git a/package/src/container/Viewport/Transform.vue b/package/src/container/Viewport/Transform.vue index 969e2a3f..a51eace3 100644 --- a/package/src/container/Viewport/Transform.vue +++ b/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 diff --git a/package/src/utils/graph.ts b/package/src/utils/graph.ts index 28cec4a6..e8bfc855 100644 --- a/package/src/utils/graph.ts +++ b/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,