feat: support maxScale and minScale

Author: infeng

src/ViewerCore.tsx

@@ -71,6 +71,7 @@ export default (props: ViewerProps) => {
     noImgDetails = false,
     noToolbar = false,
     showTotal = true,
+    minScale = 0.1,
    } = props;
 
   const initialState: ViewerCoreState = {
@@ -588,8 +589,19 @@ export default (props: ViewerProps) => {
       let directY = state.scaleY > 0 ? 1 : -1;
       scaleX = state.scaleX + scale * direct * directX;
       scaleY = state.scaleY + scale * direct * directY;
-      if (Math.abs(scaleX) < 0.1 || Math.abs(scaleY) < 0.1) {
-        return;
+      if (typeof props.maxScale !== 'undefined') {
+        if (Math.abs(scaleX) > props.maxScale) {
+          scaleX = props.maxScale * directX;
+        }
+        if (Math.abs(scaleY) > props.maxScale) {
+          scaleY = props.maxScale * directY;
+        }
+      }
+      if (Math.abs(scaleX) < minScale) {
+        scaleX = minScale * directX;
+      }
+      if (Math.abs(scaleY) < minScale) {
+        scaleY = minScale * directY;
       }
       top = state.top + -direct * diffY / state.scaleX * scale * directX;
       left = state.left + -direct * diffX / state.scaleY * scale * directY;

src/ViewerProps.ts

@@ -108,6 +108,12 @@ interface ViewerProps {
 
   // whether to display the total number and range
   showTotal?: boolean;
+
+  // max scale
+  maxScale?: number;
+
+  // min scale
+  minScale?: number;
 }
 
 export default ViewerProps;

src/__tests__/viewer.test.tsx

@@ -750,4 +750,24 @@ describe('Viewer', () => {
     triggerKeyboard(document, 'keydown', 39);
     expect($$('.react-viewer-showTotal')[0].innerHTML).toBe('2 of 2');
   });
+
+  it('max scale and min scale', () => {
+    viewerHelper.new({
+      className: 'my-react-viewer',
+      maxScale: 1.06,
+      minScale: 0.88,
+    });
+    viewerHelper.open();
+
+    let imgNode = $$('img.react-viewer-image')[0];
+
+    $$('li[data-key=zoomIn]')[0].click();
+    $$('li[data-key=zoomIn]')[0].click();
+    expect(getTransformValue(imgNode.style.transform).scaleX).toBe('1.06');
+    $$('li[data-key=reset]')[0].click();
+    $$('li[data-key=zoomOut]')[0].click();
+    $$('li[data-key=zoomOut]')[0].click();
+    $$('li[data-key=zoomOut]')[0].click();
+    expect(getTransformValue(imgNode.style.transform).scaleX).toBe('0.88');
+  });
 });