diff --git a/package-lock.json b/package-lock.json index 685a9e22..3b3b4074 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-flow-renderer", - "version": "10.0.0-next.22", + "version": "10.0.0-next.23", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-flow-renderer", - "version": "10.0.0-next.22", + "version": "10.0.0-next.23", "license": "MIT", "dependencies": { "@babel/runtime": "^7.16.3", @@ -27,7 +27,7 @@ "@rollup/plugin-commonjs": "^21.0.1", "@rollup/plugin-node-resolve": "^13.0.6", "@rollup/plugin-replace": "^3.0.0", - "@svgr/rollup": "^6.1.0", + "@svgr/rollup": "^6.1.1", "@types/redux": "^3.6.31", "@types/resize-observer-browser": "^0.1.6", "@welldone-software/why-did-you-render": "^6.2.1", @@ -42,7 +42,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "release-it": "^14.11.8", - "rollup": "^2.60.1", + "rollup": "^2.60.2", "rollup-plugin-bundle-size": "^1.0.3", "rollup-plugin-livereload": "^2.0.5", "rollup-plugin-postcss": "^4.0.2", @@ -2388,9 +2388,9 @@ } }, "node_modules/@svgr/core": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.1.0.tgz", - "integrity": "sha512-cTG8ALY3mLAmHpC1TYFbSbbI6Mv0oLXLUeDBu5oE7ykcj01nhJt+ZwSqxGHWu9Xa2KpmIXGLhfvDUBIYABlGZg==", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.1.1.tgz", + "integrity": "sha512-/NP+24cQmcEdJYptoFWO34SHkNx2x4KOGAMcnTpzOPQifvb1ecupWNEPeHBDY18utd0OMpl2kWf0ZnyN5VsVlg==", "dev": true, "dependencies": { "@svgr/plugin-jsx": "^6.1.0", @@ -2478,16 +2478,16 @@ } }, "node_modules/@svgr/rollup": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@svgr/rollup/-/rollup-6.1.0.tgz", - "integrity": "sha512-3cDNtJCeS4ZPzxnio25BK2/UlSwYnddUh2OOXWICpzMDVdzGr/DASkq4cg+snINuDExHeSyAmIQiBUPHK5qWbg==", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@svgr/rollup/-/rollup-6.1.1.tgz", + "integrity": "sha512-8rcoAYAfIocej3nCtuZognrF914GAetvwTQ4zAQDHYyQPLQYYXYoctSKicgc4tbi2OakXZigEXNcP31LI9h5tA==", "dev": true, "dependencies": { "@babel/core": "^7.15.5", "@babel/plugin-transform-react-constant-elements": "^7.14.5", "@babel/preset-env": "^7.15.6", "@babel/preset-react": "^7.14.5", - "@svgr/core": "^6.1.0", + "@svgr/core": "^6.1.1", "@svgr/plugin-jsx": "^6.1.0", "@svgr/plugin-svgo": "^6.1.0", "rollup-pluginutils": "^2.8.2" @@ -12519,9 +12519,9 @@ } }, "@svgr/core": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.1.0.tgz", - "integrity": "sha512-cTG8ALY3mLAmHpC1TYFbSbbI6Mv0oLXLUeDBu5oE7ykcj01nhJt+ZwSqxGHWu9Xa2KpmIXGLhfvDUBIYABlGZg==", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.1.1.tgz", + "integrity": "sha512-/NP+24cQmcEdJYptoFWO34SHkNx2x4KOGAMcnTpzOPQifvb1ecupWNEPeHBDY18utd0OMpl2kWf0ZnyN5VsVlg==", "dev": true, "requires": { "@svgr/plugin-jsx": "^6.1.0", @@ -12571,16 +12571,16 @@ } }, "@svgr/rollup": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@svgr/rollup/-/rollup-6.1.0.tgz", - "integrity": "sha512-3cDNtJCeS4ZPzxnio25BK2/UlSwYnddUh2OOXWICpzMDVdzGr/DASkq4cg+snINuDExHeSyAmIQiBUPHK5qWbg==", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@svgr/rollup/-/rollup-6.1.1.tgz", + "integrity": "sha512-8rcoAYAfIocej3nCtuZognrF914GAetvwTQ4zAQDHYyQPLQYYXYoctSKicgc4tbi2OakXZigEXNcP31LI9h5tA==", "dev": true, "requires": { "@babel/core": "^7.15.5", "@babel/plugin-transform-react-constant-elements": "^7.14.5", "@babel/preset-env": "^7.15.6", "@babel/preset-react": "^7.14.5", - "@svgr/core": "^6.1.0", + "@svgr/core": "^6.1.1", "@svgr/plugin-jsx": "^6.1.0", "@svgr/plugin-svgo": "^6.1.0", "rollup-pluginutils": "^2.8.2" diff --git a/package.json b/package.json index c5397180..dc978955 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-flow-renderer", - "version": "10.0.0-next.22", + "version": "10.0.0-next.23", "engines": { "node": ">=12" }, @@ -49,7 +49,7 @@ "@rollup/plugin-commonjs": "^21.0.1", "@rollup/plugin-node-resolve": "^13.0.6", "@rollup/plugin-replace": "^3.0.0", - "@svgr/rollup": "^6.1.0", + "@svgr/rollup": "^6.1.1", "@types/redux": "^3.6.31", "@types/resize-observer-browser": "^0.1.6", "@welldone-software/why-did-you-render": "^6.2.1", @@ -64,7 +64,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "release-it": "^14.11.8", - "rollup": "^2.60.1", + "rollup": "^2.60.2", "rollup-plugin-bundle-size": "^1.0.3", "rollup-plugin-livereload": "^2.0.5", "rollup-plugin-postcss": "^4.0.2", diff --git a/src/hooks/useOnLoadHandler.ts b/src/hooks/useOnLoadHandler.ts index d75ba9f4..4c50dc94 100644 --- a/src/hooks/useOnLoadHandler.ts +++ b/src/hooks/useOnLoadHandler.ts @@ -8,7 +8,8 @@ import { OnLoad, XYPosition, Node, Edge, FlowExportObject } from '../types'; function useOnLoadHandler(onLoad: OnLoad | undefined) { const isInitialized = useRef(false); const store = useStoreApi(); - const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView, initialized } = useZoomPanHelper(); + const { zoomIn, zoomOut, zoomTo, getZoom, setTransform, getTransform, setCenter, fitView, initialized } = + useZoomPanHelper(); useEffect(() => { if (!isInitialized.current && initialized) { @@ -47,7 +48,10 @@ function useOnLoadHandler(onLoad: OnLoad | undefined) { zoomIn, zoomOut, zoomTo, + getZoom, setTransform, + getTransform, + setCenter, project, getNodes, getEdges, diff --git a/src/types/general.ts b/src/types/general.ts index 6718a535..9a75faf3 100644 --- a/src/types/general.ts +++ b/src/types/general.ts @@ -24,15 +24,23 @@ export type OnNodesChange = (nodes: NodeChange[]) => void; export type OnEdgesChange = (nodes: EdgeChange[]) => void; +export type ZoomInOut = (options?: ZoomPanHelperFunctionOptions) => void; +export type ZoomTo = (zoomLevel: number, options?: ZoomPanHelperFunctionOptions) => void; +export type SetTransform = (transform: FlowTransform, options?: ZoomPanHelperFunctionOptions) => void; +export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => void; + export type OnLoadParams = { - zoomIn: () => void; - zoomOut: () => void; - zoomTo: (zoomLevel: number) => void; + zoomIn: ZoomInOut; + zoomOut: ZoomInOut; + zoomTo: ZoomTo; + getZoom: () => number; + setCenter: SetCenter; fitView: FitView; project: Project; getNodes: () => Node[]; getEdges: () => Edge[]; - setTransform: (transform: FlowTransform) => void; + setTransform: SetTransform; + getTransform: () => FlowTransform; toObject: ToObject; }; @@ -118,14 +126,14 @@ export type FitBoundsOptions = ZoomPanHelperFunctionOptions & { padding?: number; }; export interface ZoomPanHelperFunctions { - zoomIn: (options?: ZoomPanHelperFunctionOptions) => void; - zoomOut: (options?: ZoomPanHelperFunctionOptions) => void; - zoomTo: (zoomLevel: number, options?: ZoomPanHelperFunctionOptions) => void; + zoomIn: ZoomInOut; + zoomOut: ZoomInOut; + zoomTo: ZoomTo; getZoom: () => number; - setTransform: (transform: FlowTransform, options?: ZoomPanHelperFunctionOptions) => void; + setTransform: SetTransform; getTransform: () => FlowTransform; fitView: FitView; - setCenter: (x: number, y: number, options?: SetCenterOptions) => void; + setCenter: SetCenter; fitBounds: (bounds: Rect, options?: FitBoundsOptions) => void; project: (position: XYPosition) => XYPosition; initialized: boolean;