From 23660b59038200bcab4c0963117f073ac93a921e Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 19 Aug 2020 19:12:28 +0200
Subject: [PATCH] feat(reactflowInstance): add zoomTo function closes #433

---
 src/container/GraphView/index.tsx |  2 ++
 src/store/index.ts                | 14 +++++++++++---
 src/types/index.ts                |  1 +
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index 39ad8de0..16466913 100644
--- a/src/container/GraphView/index.tsx
+++ b/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) =>
diff --git a/src/store/index.ts b/src/store/index.ts
index b9b287df..a05f16e4 100644
--- a/src/store/index.ts
+++ b/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);
   }),
diff --git a/src/types/index.ts b/src/types/index.ts
index c249260a..742135cb 100644
--- a/src/types/index.ts
+++ b/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;