add touch support

README.md

@@ -89,6 +89,7 @@ I'm sorry, ssr is not currently supported in `3.x`, it will be fixed in `4.0`.
 | changeable   | boolean      |  true   | wheather to show change button  | false |
 | customToolbar | (defaultToolbarConfigs: [ToolbarConfig](#toolbarconfig)[]) => ToolbarConfig[] | - | customer toolbar | false |
 | zoomSpeed    | number       | 0.05    | zoom speed | false |
+| pinchSpeed    | number       | 0.0015    | pinch zoom speed | false |
 | defaultSize    | [ViewerImageSize](#viewerimagesize) | - | default image size | false |
 | defaultImg    | [viewerdefaultimg](#viewerimagesize) | - | if load img failed, show default img | false |
 | disableKeyboardSupport | boolean | false | disable keyboard support | false |
@@ -98,6 +99,7 @@ I'm sorry, ssr is not currently supported in `3.x`, it will be fixed in `4.0`.
 | onChange | (activeImage: [ImageDecorator](#imagedecorator), index: number) => void | - | callback when image change | false |
 | loop         | boolean      |  true   | whether enable image loop | false |
 | disableMouseZoom   | boolean      |  false   | whether disable mouse zoom | false |
+| disablePinchZoom   | boolean      |  false   | whether disable the pinch zoom touch gesture | false |
 | downloadInNewWindow | boolean | false | whether to download in a new window | false |
 | className   | string    |  -  | customized CSS class | false |
 | showTotal   | boolean    |  true  | whether to display the total number and range | false |

package.json

@@ -68,7 +68,7 @@
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
     "merge2": "^1.3.0",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^0.12.0",
     "postcss-loader": "^3.0.0",
     "pre-commit": "^1.1.3",
     "react": "^16.10.2",

src/ViewerCanvas.tsx

@@ -30,6 +30,7 @@ export interface ViewerCanvasState {
 
 export default function ViewerCanvas(props: ViewerCanvasProps) {
   const isMouseDown = React.useRef(false);
+  const isPinch = React.useRef(false);
   const prePosition = React.useRef({
     x: 0,
     y: 0,
@@ -101,6 +102,39 @@ export default function ViewerCanvas(props: ViewerCanvasProps) {
     };
   }
 
+  const handleTouchStart = (e) => {
+    if (!props.visible || !props.drag) {
+      return;
+    }
+    e.preventDefault();
+    if (e.touches.length === 1) {
+      prePosition.current = {
+        x: e.touches[0].clientX,
+        y: e.touches[0].clientY,
+      };
+    }
+  };
+
+  const handleTouchMove = (e) => {
+    if (!props.visible || !props.drag) {
+      return;
+    }
+    if (e.touches.length === 1 && !isPinch.current) {
+      setPosition({
+        x: e.touches[0].clientX,
+        y: e.touches[0].clientY,
+      });
+    } else if (e.touches.length > 1 && !isPinch.current) {
+      isPinch.current = true;
+    }
+  };
+
+  const handleTouchEnd = (e) => {
+    if (e.touches.length === 0) {
+      isPinch.current = false;
+    }
+  }
+
   const handleMouseMove = (e) => {
     if (isMouseDown.current) {
       setPosition({
@@ -130,6 +164,10 @@ export default function ViewerCanvas(props: ViewerCanvasProps) {
 
     document[funcName]('click', handleMouseUp, false);
     document[funcName]('mousemove', handleMouseMove, false);
+    document[funcName]('touchstart', handleTouchStart, { passive: false });
+    document[funcName]('touchmove', handleTouchMove, false);
+    document[funcName]('touchend', handleTouchEnd, false);
+    document[funcName]('touchcancel', handleTouchEnd, false);
   }
 
   let imgStyle: React.CSSProperties = {

src/ViewerCore.tsx

@@ -61,12 +61,14 @@ export default (props: ViewerProps) => {
     changeable = true,
     customToolbar = (toolbars) => toolbars,
     zoomSpeed = .05,
+    pinchSpeed = 0.0015,
     disableKeyboardSupport = false,
     noResetZoomAfterChange = false,
     noLimitInitializationSize = false,
     defaultScale = 1,
     loop = true,
     disableMouseZoom = false,
+    disablePinchZoom = false,
     downloadable = false,
     noImgDetails = false,
     noToolbar = false,
@@ -149,6 +151,7 @@ export default (props: ViewerProps) => {
   const viewerCore = React.useRef<HTMLDivElement>(null);
   const init = React.useRef(false);
   const currentLoadIndex = React.useRef(0);
+  const pinchDistance = React.useRef(0);
   const [ state, dispatch ] = React.useReducer<(s: any, a: any) => ViewerCoreState>(reducer, initialState);
 
   React.useEffect(() => {
@@ -470,11 +473,9 @@ export default (props: ViewerProps) => {
       document[funcName]('keydown', handleKeydown, true);
     }
     if (viewerCore.current) {
-      viewerCore.current[funcName](
-        'wheel',
-        handleMouseScroll,
-        false,
-      );
+      viewerCore.current[funcName]('wheel', handleMouseScroll, false);
+      viewerCore.current[funcName]('touchstart', handleTouchStart, false);
+      viewerCore.current[funcName]('touchmove', handleTouchMove, false);
     }
   }
 
@@ -531,6 +532,42 @@ export default (props: ViewerProps) => {
     }
   }
 
+  const handleTouchStart = (e) => {
+    if (disablePinchZoom) {
+      return;
+    }
+    if (e.touches.length === 2) {
+      pinchDistance.current = Math.sqrt(Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2) + Math.pow(e.touches[0].clientY - e.touches[1].clientY, 2));
+    }
+  };
+
+  const handleTouchMove = (e) => {
+    if (disablePinchZoom) {
+      return;
+    }
+    if (state.loading) {
+      return;
+    }
+    if (e.touches.length === 2 && pinchDistance.current > 0) {
+      const currentPinch = Math.sqrt(Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2) + Math.pow(e.touches[0].clientY - e.touches[1].clientY, 2));
+      let x = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+      let y = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+      if (props.container) {
+        const containerRect = props.container.getBoundingClientRect();
+        x -= containerRect.left;
+        y -= containerRect.top;
+      }
+      const scale = Math.abs(currentPinch - pinchDistance.current) * pinchSpeed;
+      if (currentPinch > pinchDistance.current) {
+        handleZoom( x, y, 1, scale);
+      }
+      if (currentPinch < pinchDistance.current) {
+        handleZoom( x, y, -1, scale);
+      }
+      pinchDistance.current = currentPinch;
+    }
+  };
+
   function handleMouseScroll(e) {
     if (disableMouseZoom) {
       return;
@@ -588,8 +625,8 @@ export default (props: ViewerProps) => {
     } else {
       let directX = state.scaleX > 0 ? 1 : -1;
       let directY = state.scaleY > 0 ? 1 : -1;
-      scaleX = state.scaleX + scale * direct * directX;
-      scaleY = state.scaleY + scale * direct * directY;
+      scaleX = state.scaleX * (1 + scale * direct * directX);
+      scaleY = state.scaleY * (1 + scale * direct * directY);
       if (typeof props.maxScale !== 'undefined') {
         if (Math.abs(scaleX) > props.maxScale) {
           scaleX = props.maxScale * directX;
@@ -604,8 +641,8 @@ export default (props: ViewerProps) => {
       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;
+      top = state.top + -direct * diffY * scale * directX;
+      left = state.left + -direct * diffX * scale * directY;
       width = state.width;
       height = state.height;
     }

src/ViewerProps.ts

@@ -77,6 +77,9 @@ interface ViewerProps {
   // zoom speed
   zoomSpeed?: number;
 
+  // pinch zoom speed
+  pinchSpeed?: number;
+
   // default image size
   defaultSize?: ViewerImageSize;
 
@@ -101,6 +104,9 @@ interface ViewerProps {
   // disable mouse zoom
   disableMouseZoom?: boolean;
 
+  // disable the pinch zoom touch gesture
+  disablePinchZoom?: boolean;
+
   // whether to download in a new window
   downloadInNewWindow?: boolean;