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",
"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"
package.json
+3 -3
View File
@@ -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",
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) {
const isInitialized = useRef<boolean>(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<any> | undefined) {
zoomIn,
zoomOut,
zoomTo,
getZoom,
setTransform,
getTransform,
setCenter,
project,
getNodes,
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 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> = {
zoomIn: () => void;
zoomOut: () => void;
zoomTo: (zoomLevel: number) => void;
zoomIn: ZoomInOut;
zoomOut: ZoomInOut;
zoomTo: ZoomTo;
getZoom: () => number;
setCenter: SetCenter;
fitView: FitView;
project: Project;
getNodes: () => Node<T>[];
getEdges: () => Edge<T>[];
setTransform: (transform: FlowTransform) => void;
setTransform: SetTransform;
getTransform: () => FlowTransform;
toObject: ToObject<T>;
};
@@ -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;