feat(reactflowInstance): add zoomTo function closes #433

src/container/GraphView/index.tsx

@@ -127,6 +127,7 @@ const GraphView = ({
   const setMinMaxZoom = useStoreActions((actions) => actions.setMinMaxZoom);
   const fitView = useStoreActions((actions) => actions.fitView);
   const zoom = useStoreActions((actions) => actions.zoom);
+  const zoomTo = useStoreActions((actions) => actions.zoomTo);
 
   const onZoomPaneClick = useCallback(
     (event: React.MouseEvent) => {
@@ -167,6 +168,7 @@ const GraphView = ({
           fitView: (params = { padding: 0.1 }) => fitView(params),
           zoomIn: () => zoom(0.2),
           zoomOut: () => zoom(-0.2),
+          zoomTo: (zoomLevel) => zoomTo(zoomLevel),
           project,
           getElements,
           setTransform: (transform: FlowTransform) =>

src/store/index.ts

@@ -129,7 +129,8 @@ export interface StoreModel {
   unsetUserSelection: Action<StoreModel>;
 
   fitView: Action<StoreModel, FitViewParams>;
-  zoom: Action<StoreModel, number>;
+  zoomTo: Action<StoreModel, number>;
+  zoom: Thunk<StoreModel, number, any, StoreModel>;
   zoomIn: Thunk<StoreModel>;
   zoomOut: Thunk<StoreModel>;
 }
@@ -418,9 +419,9 @@ export const storeModel: StoreModel = {
     state.transform = [fittedTransform.x, fittedTransform.y, fittedTransform.k];
   }),
 
-  zoom: action((state, amount) => {
+  zoomTo: action((state, zoomLevel) => {
     const { d3Selection, transform, minZoom, maxZoom } = state;
-    const nextZoom = clamp(transform[2] + amount, minZoom, maxZoom);
+    const nextZoom = clamp(zoomLevel, minZoom, maxZoom);
 
     if (d3Selection) {
       // we want to zoom in and out to the center of the zoom pane
@@ -439,6 +440,13 @@ export const storeModel: StoreModel = {
     }
   }),
 
+  zoom: thunk((actions, amount, helpers) => {
+    const { transform } = helpers.getState();
+    const nextZoom = transform[2] + amount;
+
+    actions.zoomTo(nextZoom);
+  }),
+
   zoomIn: thunk((actions) => {
     actions.zoom(0.2);
   }),

src/types/index.ts

@@ -182,6 +182,7 @@ export type ProjectFunc = (position: XYPosition) => XYPosition;
 export type OnLoadParams = {
   zoomIn: () => void;
   zoomOut: () => void;
+  zoomTo: (zoomLevel: number) => void;
   fitView: FitViewFunc;
   project: ProjectFunc;
   getElements: () => Elements;