feat: add PreviewImage touchZoom

src/Preview.tsx

@@ -10,6 +10,7 @@ import getFixScaleEleTransPosition from './getFixScaleEleTransPosition';
 import type { TransformAction, TransformType } from './hooks/useImageTransform';
 import useImageTransform from './hooks/useImageTransform';
 import useStatus from './hooks/useStatus';
+import useTouchZoom from './hooks/useTouchZoom';
 import Operations from './Operations';
 import { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from './previewConfig';
 
@@ -149,6 +150,9 @@ const Preview: React.FC<PreviewProps> = props => {
     [`${prefixCls}-moving`]: isMoving,
   });
 
+  // touch
+  const { touchPointInfo, restTouchPoint, setTouchPoint } = useTouchZoom();
+
   useEffect(() => {
     if (!enableTransition) {
       setEnableTransition(true);
@@ -233,6 +237,8 @@ const Preview: React.FC<PreviewProps> = props => {
   };
 
   const onMouseDown: React.MouseEventHandler<HTMLDivElement> = event => {
+    if (touchPointInfo.touchdown) return;
+
     // Only allow main button
     if (!movable || event.button !== 0) return;
     event.preventDefault();
@@ -283,6 +289,8 @@ const Preview: React.FC<PreviewProps> = props => {
   };
 
   const onDoubleClick = (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => {
+    if (touchPointInfo.touchdown) return;
+
     if (visible) {
       if (scale !== 1) {
         updateTransform({ x: 0, y: 0, scale: 1 }, 'doubleClick');
@@ -297,6 +305,43 @@ const Preview: React.FC<PreviewProps> = props => {
     }
   };
 
+  const onTouchStart = (event: React.TouchEvent<HTMLImageElement>) => {
+    const { touches = [] } = event;
+    if (touches.length > 1) {
+      setTouchPoint(touches[0].pageY, touches[1].pageY);
+    }
+  };
+
+  const onTouchMove = (event: React.TouchEvent<HTMLImageElement>) => {
+    const { touches = [] } = event;
+    const { touchOne, touchTwo, touchdown } = touchPointInfo;
+
+    if (touchdown) {
+      const pageY_1 = touches[0]?.pageY;
+      const pageY_2 = touches[1]?.pageY;
+      let needChange = false;
+
+      if (Math.abs(touchOne - pageY_1) > 10 || Math.abs(touchTwo - pageY_2) > 10) {
+        needChange = true;
+      }
+
+      if (needChange) {
+        if (Math.abs(touchOne - touchTwo) > Math.abs(pageY_1 - pageY_2)) {
+          if (scale <= 1) return;
+          updateTransform({ x: 0, y: 0, scale: scale - 0.3 < 1 ? 1 : scale - 0.3 }, 'touchZoom');
+        } else {
+          updateTransform({ x: 0, y: 0, scale: scale + 0.2 }, 'touchZoom');
+        }
+
+        setTouchPoint(pageY_1, pageY_2);
+      }
+    }
+  };
+
+  const onTouchRest = () => {
+    restTouchPoint();
+  };
+
   useEffect(() => {
     let onTopMouseUpListener;
     let onTopMouseMoveListener;
@@ -357,6 +402,10 @@ const Preview: React.FC<PreviewProps> = props => {
       onWheel={onWheel}
       onMouseDown={onMouseDown}
       onDoubleClick={onDoubleClick}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchRest}
+      onTouchCancel={onTouchRest}
     />
   );
 

src/hooks/useImageTransform.ts

@@ -25,7 +25,8 @@ export type TransformAction =
   | 'wheel'
   | 'doubleClick'
   | 'move'
-  | 'dragRebound';
+  | 'dragRebound'
+  | 'touchZoom';
 
 const initialTransform = {
   x: 0,

src/hooks/useTouchZoom.ts

@@ -0,0 +1,23 @@
+import { useCallback, useRef } from 'react';
+
+export default function useTouchZoom() {
+  const touchPointInfo = useRef({
+    touchOne: 0,
+    touchTwo: 0,
+    touchdown: false,
+  });
+
+  const restTouchPoint = useCallback(() => {
+    touchPointInfo.current.touchOne = 0;
+    touchPointInfo.current.touchTwo = 0;
+    touchPointInfo.current.touchdown = false;
+  }, []);
+
+  const setTouchPoint = useCallback((touchOne: number, touchTwo: number) => {
+    touchPointInfo.current.touchOne = touchOne;
+    touchPointInfo.current.touchTwo = touchTwo;
+    touchPointInfo.current.touchdown = true;
+  }, []);
+
+  return { touchPointInfo: touchPointInfo.current, restTouchPoint, setTouchPoint };
+}