Proposal: Add setScale method to API

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|

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 })
   }

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

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