alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(onLoad): add new zoom pan helpers

Browse Source
This commit is contained in:
moklick
2021-12-07 04:05:45 +01:00
parent c2644f16bb
commit d9c99a8a6d
4 changed files with 43 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+18 -18
View File
@@ -1,12 +1,12 @@
{ {
"name": "react-flow-renderer", "name": "react-flow-renderer",
"version": "10.0.0-next.22", "version": "10.0.0-next.23",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "react-flow-renderer", "name": "react-flow-renderer",
"version": "10.0.0-next.22", "version": "10.0.0-next.23",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.16.3", "@babel/runtime": "^7.16.3",
@@ -27,7 +27,7 @@
"@rollup/plugin-commonjs": "^21.0.1", "@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-node-resolve": "^13.0.6", "@rollup/plugin-node-resolve": "^13.0.6",
"@rollup/plugin-replace": "^3.0.0", "@rollup/plugin-replace": "^3.0.0",
"@svgr/rollup": "^6.1.0", "@svgr/rollup": "^6.1.1",
"@types/redux": "^3.6.31", "@types/redux": "^3.6.31",
"@types/resize-observer-browser": "^0.1.6", "@types/resize-observer-browser": "^0.1.6",
"@welldone-software/why-did-you-render": "^6.2.1", "@welldone-software/why-did-you-render": "^6.2.1",
@@ -42,7 +42,7 @@
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"release-it": "^14.11.8", "release-it": "^14.11.8",
"rollup": "^2.60.1", "rollup": "^2.60.2",
"rollup-plugin-bundle-size": "^1.0.3", "rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-livereload": "^2.0.5", "rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-postcss": "^4.0.2", "rollup-plugin-postcss": "^4.0.2",
@@ -2388,9 +2388,9 @@
} }
}, },
"node_modules/@svgr/core": { "node_modules/@svgr/core": {
"version": "6.1.0", "version": "6.1.1",
"resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.1.0.tgz", "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.1.1.tgz",
"integrity": "sha512-cTG8ALY3mLAmHpC1TYFbSbbI6Mv0oLXLUeDBu5oE7ykcj01nhJt+ZwSqxGHWu9Xa2KpmIXGLhfvDUBIYABlGZg==", "integrity": "sha512-/NP+24cQmcEdJYptoFWO34SHkNx2x4KOGAMcnTpzOPQifvb1ecupWNEPeHBDY18utd0OMpl2kWf0ZnyN5VsVlg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@svgr/plugin-jsx": "^6.1.0", "@svgr/plugin-jsx": "^6.1.0",
@@ -2478,16 +2478,16 @@
} }
}, },
"node_modules/@svgr/rollup": { "node_modules/@svgr/rollup": {
"version": "6.1.0", "version": "6.1.1",
"resolved": "https://registry.npmjs.org/@svgr/rollup/-/rollup-6.1.0.tgz", "resolved": "https://registry.npmjs.org/@svgr/rollup/-/rollup-6.1.1.tgz",
"integrity": "sha512-3cDNtJCeS4ZPzxnio25BK2/UlSwYnddUh2OOXWICpzMDVdzGr/DASkq4cg+snINuDExHeSyAmIQiBUPHK5qWbg==", "integrity": "sha512-8rcoAYAfIocej3nCtuZognrF914GAetvwTQ4zAQDHYyQPLQYYXYoctSKicgc4tbi2OakXZigEXNcP31LI9h5tA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@babel/core": "^7.15.5", "@babel/core": "^7.15.5",
"@babel/plugin-transform-react-constant-elements": "^7.14.5", "@babel/plugin-transform-react-constant-elements": "^7.14.5",
"@babel/preset-env": "^7.15.6", "@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5", "@babel/preset-react": "^7.14.5",
"@svgr/core": "^6.1.0", "@svgr/core": "^6.1.1",
"@svgr/plugin-jsx": "^6.1.0", "@svgr/plugin-jsx": "^6.1.0",
"@svgr/plugin-svgo": "^6.1.0", "@svgr/plugin-svgo": "^6.1.0",
"rollup-pluginutils": "^2.8.2" "rollup-pluginutils": "^2.8.2"
@@ -12519,9 +12519,9 @@
} }
}, },
"@svgr/core": { "@svgr/core": {
"version": "6.1.0", "version": "6.1.1",
"resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.1.0.tgz", "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.1.1.tgz",
"integrity": "sha512-cTG8ALY3mLAmHpC1TYFbSbbI6Mv0oLXLUeDBu5oE7ykcj01nhJt+ZwSqxGHWu9Xa2KpmIXGLhfvDUBIYABlGZg==", "integrity": "sha512-/NP+24cQmcEdJYptoFWO34SHkNx2x4KOGAMcnTpzOPQifvb1ecupWNEPeHBDY18utd0OMpl2kWf0ZnyN5VsVlg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@svgr/plugin-jsx": "^6.1.0", "@svgr/plugin-jsx": "^6.1.0",
@@ -12571,16 +12571,16 @@
} }
}, },
"@svgr/rollup": { "@svgr/rollup": {
"version": "6.1.0", "version": "6.1.1",
"resolved": "https://registry.npmjs.org/@svgr/rollup/-/rollup-6.1.0.tgz", "resolved": "https://registry.npmjs.org/@svgr/rollup/-/rollup-6.1.1.tgz",
"integrity": "sha512-3cDNtJCeS4ZPzxnio25BK2/UlSwYnddUh2OOXWICpzMDVdzGr/DASkq4cg+snINuDExHeSyAmIQiBUPHK5qWbg==", "integrity": "sha512-8rcoAYAfIocej3nCtuZognrF914GAetvwTQ4zAQDHYyQPLQYYXYoctSKicgc4tbi2OakXZigEXNcP31LI9h5tA==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/core": "^7.15.5", "@babel/core": "^7.15.5",
"@babel/plugin-transform-react-constant-elements": "^7.14.5", "@babel/plugin-transform-react-constant-elements": "^7.14.5",
"@babel/preset-env": "^7.15.6", "@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5", "@babel/preset-react": "^7.14.5",
"@svgr/core": "^6.1.0", "@svgr/core": "^6.1.1",
"@svgr/plugin-jsx": "^6.1.0", "@svgr/plugin-jsx": "^6.1.0",
"@svgr/plugin-svgo": "^6.1.0", "@svgr/plugin-svgo": "^6.1.0",
"rollup-pluginutils": "^2.8.2" "rollup-pluginutils": "^2.8.2"
package.json
+3 -3
View File
@@ -1,6 +1,6 @@
{ {
"name": "react-flow-renderer", "name": "react-flow-renderer",
"version": "10.0.0-next.22", "version": "10.0.0-next.23",
"engines": { "engines": {
"node": ">=12" "node": ">=12"
}, },
@@ -49,7 +49,7 @@
"@rollup/plugin-commonjs": "^21.0.1", "@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-node-resolve": "^13.0.6", "@rollup/plugin-node-resolve": "^13.0.6",
"@rollup/plugin-replace": "^3.0.0", "@rollup/plugin-replace": "^3.0.0",
"@svgr/rollup": "^6.1.0", "@svgr/rollup": "^6.1.1",
"@types/redux": "^3.6.31", "@types/redux": "^3.6.31",
"@types/resize-observer-browser": "^0.1.6", "@types/resize-observer-browser": "^0.1.6",
"@welldone-software/why-did-you-render": "^6.2.1", "@welldone-software/why-did-you-render": "^6.2.1",
@@ -64,7 +64,7 @@
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"release-it": "^14.11.8", "release-it": "^14.11.8",
"rollup": "^2.60.1", "rollup": "^2.60.2",
"rollup-plugin-bundle-size": "^1.0.3", "rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-livereload": "^2.0.5", "rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-postcss": "^4.0.2", "rollup-plugin-postcss": "^4.0.2",
src/hooks/useOnLoadHandler.ts
+5 -1
View File
@@ -8,7 +8,8 @@ import { OnLoad, XYPosition, Node, Edge, FlowExportObject } from '../types';
function useOnLoadHandler(onLoad: OnLoad<any> | undefined) { function useOnLoadHandler(onLoad: OnLoad<any> | undefined) {
const isInitialized = useRef<boolean>(false); const isInitialized = useRef<boolean>(false);
const store = useStoreApi(); const store = useStoreApi();
const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView, initialized } = useZoomPanHelper(); const { zoomIn, zoomOut, zoomTo, getZoom, setTransform, getTransform, setCenter, fitView, initialized } =
useZoomPanHelper();
useEffect(() => { useEffect(() => {
if (!isInitialized.current && initialized) { if (!isInitialized.current && initialized) {
@@ -47,7 +48,10 @@ function useOnLoadHandler(onLoad: OnLoad<any> | undefined) {
zoomIn, zoomIn,
zoomOut, zoomOut,
zoomTo, zoomTo,
getZoom,
setTransform, setTransform,
getTransform,
setCenter,
project, project,
getNodes, getNodes,
getEdges, getEdges,
src/types/general.ts
+17 -9
View File
@@ -24,15 +24,23 @@ export type OnNodesChange = (nodes: NodeChange[]) => void;
export type OnEdgesChange = (nodes: EdgeChange[]) => 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<T = any> = { export type OnLoadParams<T = any> = {
zoomIn: () => void; zoomIn: ZoomInOut;
zoomOut: () => void; zoomOut: ZoomInOut;
zoomTo: (zoomLevel: number) => void; zoomTo: ZoomTo;
getZoom: () => number;
setCenter: SetCenter;
fitView: FitView; fitView: FitView;
project: Project; project: Project;
getNodes: () => Node<T>[]; getNodes: () => Node<T>[];
getEdges: () => Edge<T>[]; getEdges: () => Edge<T>[];
setTransform: (transform: FlowTransform) => void; setTransform: SetTransform;
getTransform: () => FlowTransform;
toObject: ToObject<T>; toObject: ToObject<T>;
}; };
@@ -118,14 +126,14 @@ export type FitBoundsOptions = ZoomPanHelperFunctionOptions & {
padding?: number; padding?: number;
}; };
export interface ZoomPanHelperFunctions { export interface ZoomPanHelperFunctions {
zoomIn: (options?: ZoomPanHelperFunctionOptions) => void; zoomIn: ZoomInOut;
zoomOut: (options?: ZoomPanHelperFunctionOptions) => void; zoomOut: ZoomInOut;
zoomTo: (zoomLevel: number, options?: ZoomPanHelperFunctionOptions) => void; zoomTo: ZoomTo;
getZoom: () => number; getZoom: () => number;
setTransform: (transform: FlowTransform, options?: ZoomPanHelperFunctionOptions) => void; setTransform: SetTransform;
getTransform: () => FlowTransform; getTransform: () => FlowTransform;
fitView: FitView; fitView: FitView;
setCenter: (x: number, y: number, options?: SetCenterOptions) => void; setCenter: SetCenter;
fitBounds: (bounds: Rect, options?: FitBoundsOptions) => void; fitBounds: (bounds: Rect, options?: FitBoundsOptions) => void;
project: (position: XYPosition) => XYPosition; project: (position: XYPosition) => XYPosition;
initialized: boolean; initialized: boolean;