From adc85e177b0f838fa4d294281d627c2df4eabc4d Mon Sep 17 00:00:00 2001
From: eanplatter <eanplatter@gmail.com>
Date: Mon, 24 Feb 2020 10:17:10 -0600
Subject: [PATCH] Add setScale method

---
 README.md                                 |  1 +
 src/PanZoom.js                            |  4 +++
 stories/ControllerUI/ScaleControllerUI.js | 37 +++++++++++++++++++++++
 stories/PanZoom.stories.js                | 10 ++++++
 4 files changed, 52 insertions(+)
 create mode 100644 stories/ControllerUI/ScaleControllerUI.js

diff --git a/README.md b/README.md
index 46102cd..f48d804 100644
--- a/README.md
+++ b/README.md
@@ -166,6 +166,7 @@ Available methods are listed below:
 |---|---|---|
 |zoomIn|`(zoomSpeed?: number)`|Zoom in from the center of the `PanZoom` container|
 |zoomOut|`(zoomSpeed?: number)`|Zoom out from the center of the `PanZoom` container|
+|setScale|`(scale?: number)`|Explicitly set the zoom amount via the scale.|
 |autoCenter|`(zoom: number, animate?: boolean = true)`|Center and resize the view to fit the `PanZoom` container|
 |reset| |Reset the view to it's original state (will not auto center if `autoCenter` is enabled)|
 |moveByRatio|`(x: number, y: number, moveSpeedRatio?: number)`|Move the view along `x` or/and `y` axis|
diff --git a/src/PanZoom.js b/src/PanZoom.js
index 9987e46..5ddcdeb 100644
--- a/src/PanZoom.js
+++ b/src/PanZoom.js
@@ -662,6 +662,10 @@ class PanZoom extends React.Component<Props, State> {
     this.centeredZoom(1, zoomSpeed)
   }
 
+  setScale = (scale?: number = 1) => {
+    this.setState({scale})
+  }
+
   reset = () => {
     this.setState({ x: 0, y: 0, scale: 1, angle: 0 })
   }
diff --git a/stories/ControllerUI/ScaleControllerUI.js b/stories/ControllerUI/ScaleControllerUI.js
new file mode 100644
index 0000000..535588e
--- /dev/null
+++ b/stories/ControllerUI/ScaleControllerUI.js
@@ -0,0 +1,37 @@
+import * as React from 'react'
+import Button from './Button'
+
+const ScaleControllerUI = ({ onSetScale }) => {
+  return (
+    <div
+      style={{
+        border: '2px solid rgba(0,0,0,0.2)',
+        borderRadius: 4,
+        overflow: 'hidden',
+        backgroundColor: 'white',
+      }}
+    >
+      <Button 
+        onClick={() => onSetScale(1)}
+        style={{
+          borderBottom: '1px solid #ccc',
+        }}
+      >
+        1
+      </Button>
+      <Button
+        onClick={() => onSetScale(0.75)}
+        style={{
+          borderBottom: '1px solid #ccc',
+        }}
+      >
+        .75
+      </Button>
+      <Button onClick={() => onSetScale(0.5)}>
+        .5
+      </Button>
+    </div>
+  )
+}
+
+export default ScaleControllerUI
diff --git a/stories/PanZoom.stories.js b/stories/PanZoom.stories.js
index 0477035..2e411b4 100644
--- a/stories/PanZoom.stories.js
+++ b/stories/PanZoom.stories.js
@@ -3,6 +3,7 @@ import React, { useRef } from 'react'
 import { storiesOf } from '@storybook/react'
 import { withKnobs, boolean, number } from '@storybook/addon-knobs';
 import ZoomControllerUI from './ControllerUI/ZoomControllerUI'
+import ScaleControllerUI from './ControllerUI/ScaleControllerUI'
 import PadControllerUI from './ControllerUI/PadControllerUI'
 import ResetControllerUI from './ControllerUI/ResetControllerUI'
 import RotationControllerUI from './ControllerUI/RotationControllerUI'
@@ -68,6 +69,10 @@ const PanZoomControlUI = (props) => {
     panZoom.current && panZoom.current.zoomOut(zoomOutSpeed)
   }
 
+  function onSetScale(scale) {
+    panZoom.current && panZoom.current.setScale(scale)
+  }
+
   function moveByRatio(x, y) {
     panZoom.current && panZoom.current.moveByRatio(x, y)
   }
@@ -107,6 +112,11 @@ const PanZoomControlUI = (props) => {
           onZoomOut={onZoomOut}
         />
       </div>
+      <div style={{ position: 'absolute', left: 50, top: 8, zIndex: 1 }}>
+        <ScaleControllerUI 
+          onSetScale={onSetScale}
+        />
+      </div>
 
       <div style={{ position: 'absolute', right: 8, top: 8, zIndex: 1 }}>
         <RotationControllerUI