feat(image-viewer): 优化preview

novlan1 · novlan1 · commit 29c0ccdeaa9b · 2025-05-23T10:25:27.000+08:00
diff --git a/src/image-viewer/image-viewer.tsx b/src/image-viewer/image-viewer.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, useRef, useState, useEffect } from 'react';
+import React, { MouseEvent, useRef, useEffect } from 'react';
 import { CloseIcon, DeleteIcon } from 'tdesign-icons-react';
 import { CSSTransition } from 'react-transition-group';
 import { CSSTransitionClassNames } from 'react-transition-group/CSSTransition';
@@ -29,29 +29,12 @@ const ImageViewer: React.FC<ImageViewerProps> = (props) => {
 
   const [show, setShow] = useDefault<boolean, any>(visible, defaultVisible, noop);
   const [currentIndex, setCurrentIndex] = useDefault(index, defaultIndex, onIndexChange);
-  const [innerState, setInnerState] = useState({
-    dblTapZooming: false, // double tap zooming
-    zooming: false, // pinch zooming
-    scale: 1,
-    touchIndex: 0,
-    dragging: false,
-    draggedX: 0,
-    draggedY: 0,
-    extraDraggedX: 0,
-  });
 
   const swiperRootRef = useRef<HTMLDivElement>(null);
   const rootRef = useRef<HTMLDivElement>(null);
   const imgRefs = useRef<HTMLImageElement[]>([]);
   const duration = 300;
-  const { transform, resetTransform, updateTransform, dispatchZoomChange } = useImageTransform(
-    imgRefs,
-    MIN_SCALE,
-    MAX_SCALE,
-    undefined,
-    // onTransform,
-    // currentIndex,
-  );
+  const { transform, resetTransform, updateTransform, dispatchZoomChange } = useImageTransform(MIN_SCALE, MAX_SCALE);
   const { isTouching, onTouchStart, onTouchMove, onTouchEnd } = useTouchEvent(
     imgRefs,
     movable,
@@ -70,23 +53,9 @@ const ImageViewer: React.FC<ImageViewerProps> = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [show]);
 
-  const beforeClose = () => {
-    setInnerState({
-      ...innerState,
-      dblTapZooming: false,
-      zooming: false,
-      scale: 1,
-      dragging: false,
-      draggedX: 0,
-      draggedY: 0,
-      extraDraggedX: 0,
-    });
-  };
-
   const imageViewerClass = usePrefixClass('image-viewer');
   const handleClose = (e: MouseEvent, trigger: 'overlay' | 'close-btn') => {
     e.stopPropagation();
-    beforeClose();
     setShow(false);
     onClose?.({ trigger, visible: false, index });
   };
@@ -124,24 +93,15 @@ const ImageViewer: React.FC<ImageViewerProps> = (props) => {
       preload: preloadImageIndex.includes(index),
     };
   });
-  // const [imageInfoList, setImageInfoList] = useState(rawImageInfoList)
 
-  // useEffect(() => {
-  //   if (transform.scale === 1 && rawImageInfoList.length !== imageInfoList.length) {
-  //
-  //     setImageInfoList(rawImageInfoList);
-  //   }
-  // }, [transform, rawImageInfoList, imageInfoList])
-
-  const onDoubleClick = (event: MouseEvent) => {
+  const onDoubleClick = () => {
     if (show) {
       if (transform.scale !== 1) {
         updateTransform({ x: 0, y: 0, scale: 1 }, 'doubleClick');
       } else {
-        dispatchZoomChange(BASE_SCALE_RATIO + scaleStep, 'doubleClick', event.clientX, event.clientY);
+        dispatchZoomChange(BASE_SCALE_RATIO + scaleStep, 'doubleClick');
       }
     }
-    // setImageInfoList([info]);
   };
 
   const onSwiperChange = (index: number) => {
@@ -154,15 +114,6 @@ const ImageViewer: React.FC<ImageViewerProps> = (props) => {
     }
   };
 
-  // const getImageTransform = () => {
-  //   const { scale, draggedX, draggedY } = innerState;
-  //   return `matrix(${scale}, 0, 0, ${scale}, ${draggedX}, ${draggedY})`;
-  // };
-  // const getImageTransitionDuration = () => {
-  //   const { zooming, dragging } = innerState;
-  //   return zooming || dragging ? { transitionDuration: '0s' } : { transitionDuration: '0.3s' };
-  // };
-
   const animationClassNames: CSSTransitionClassNames = {
     enterActive: 'fade-enter-active',
     exitActive: 'fade-leave-active',
@@ -202,26 +153,21 @@ const ImageViewer: React.FC<ImageViewerProps> = (props) => {
               }}
               hostStyle={{ overflow: 'visible' }}
             >
-              {/* style={{
-                  transform: index === innerState.touchIndex ? getImageTransform() : 'matrix(1, 0, 0, 1, 0, 0)',
-                  ...getImageTransitionDuration(),
-                  height: '100%',
-                }} */}
               <img
                 src={info.image.url}
                 ref={(node) => {
                   imgRefs.current[index] = node;
                 }}
                 style={{
-                  transform: `matrix(${transform.scale}, 0, 0, ${transform.scale}, ${transform.x}, ${transform.y})`,
+                  transform: `matrix(${transform.scale}, 0, 0, ${transform.scale}, ${transform.x}, 0)`,
                   transitionDuration: isTouching ? '0s' : '.3s',
                 }}
                 className={`${imageViewerClass}__img`}
                 onTouchStart={onTouchStart}
                 onTouchMove={onTouchMove}
                 onTouchEnd={onTouchEnd}
                 onTouchCancel={onTouchEnd}
-                onDoubleClick={(e) => onDoubleClick(e)}
+                onDoubleClick={onDoubleClick}
               />
             </TSwiperItem>
           ))}
diff --git a/src/image-viewer/transform.ts b/src/image-viewer/transform.ts
@@ -1,6 +1,5 @@
 import { useRef, useState } from 'react';
 import raf from './raf';
-// import { getClientSize } from './util';
 
 function isEqual(objA, objB) {
   const keys = Object.keys(objA);
@@ -41,13 +40,7 @@ export type TransformAction =
 
 export type UpdateTransformFunc = (newTransform: Partial<TransformType>, action: TransformAction) => void;
 
-export type DispatchZoomChangeFunc = (
-  ratio: number,
-  action: TransformAction,
-  centerX?: number,
-  centerY?: number,
-  isTouch?: boolean,
-) => void;
+export type DispatchZoomChangeFunc = (ratio: number, action: TransformAction, isTouch?: boolean) => void;
 
 const initialTransform = {
   x: 0,
@@ -59,11 +52,9 @@ const initialTransform = {
 };
 
 export function useImageTransform(
-  imgRef: React.MutableRefObject<HTMLImageElement[]>,
   minScale: number,
   maxScale: number,
   onTransform?: (info: { transform: TransformType; action: TransformAction }) => void,
-  // currentIndex?: number,
 ) {
   const frame = useRef(null);
   const queue = useRef<TransformType[]>([]);
@@ -76,7 +67,6 @@ export function useImageTransform(
     }
   };
 
-  /** Direct update transform */
   const updateTransform: UpdateTransformFunc = (newTransform, action) => {
     if (frame.current === null) {
       queue.current = [];
@@ -99,59 +89,17 @@ export function useImageTransform(
     });
   };
 
-  /** Scale according to the position of centerX and centerY */
   const dispatchZoomChange: DispatchZoomChangeFunc = (ratio, action, centerX?, centerY?, isTouch?) => {
-    // const { width, height, offsetWidth, offsetHeight, offsetLeft, offsetTop } = imgRef.current[currentIndex];
-
-    // let newRatio = ratio;
     let newScale = transform.scale * ratio;
+
     if (newScale > maxScale) {
       newScale = maxScale;
-      // newRatio = maxScale / transform.scale;
     } else if (newScale < minScale) {
-      // For mobile interactions, allow scaling down to the minimum scale.
       newScale = isTouch ? newScale : minScale;
-      // newRatio = newScale / transform.scale;
-    }
-
-    /** Default center point scaling */
-    // const mergedCenterX = centerX ?? innerWidth / 2;
-    // const mergedCenterY = centerY ?? innerHeight / 2;
-
-    // const diffRatio = newRatio - 1;
-    // /** Deviation calculated from image size */
-    // const diffImgX = diffRatio * width * 0.5;
-    // const diffImgY = diffRatio * height * 0.5;
-    // /** The difference between the click position and the edge of the document */
-    // const diffOffsetLeft = diffRatio * (mergedCenterX - transform.x - offsetLeft);
-    // const diffOffsetTop = diffRatio * (mergedCenterY - transform.y - offsetTop);
-    // /** Final positioning */
-    // let newX = transform.x - (diffOffsetLeft - diffImgX);
-    // let newY = transform.y - (diffOffsetTop - diffImgY);
-
-    /**
-     * When zooming the image
-     * When the image size is smaller than the width and height of the window, the position is initialized
-     */
-    // if (ratio < 1 && newScale === 1) {
-    //   const mergedWidth = offsetWidth * newScale;
-    //   const mergedHeight = offsetHeight * newScale;
-    //   const { width: clientWidth, height: clientHeight } = getClientSize();
-    //   if (mergedWidth <= clientWidth && mergedHeight <= clientHeight) {
-    //     newX = 0;
-    //     newY = 0;
-    //   }
-    // }
-
-    if (action === 'doubleClick') {
-      // newX = 0;
-      // newY = 0;
     }
 
     updateTransform(
       {
-        // x: newX,
-        // y: newY,
         scale: newScale,
       },
       action,
diff --git a/src/image-viewer/useTouchEvent.ts b/src/image-viewer/useTouchEvent.ts
@@ -20,26 +20,6 @@ function getDistance(a: Point, b: Point) {
   return Math.hypot(x, y);
 }
 
-function getCenter(oldPoint1: Point, oldPoint2: Point, newPoint1: Point, newPoint2: Point) {
-  // Calculate the distance each point has moved
-  const distance1 = getDistance(oldPoint1, newPoint1);
-  const distance2 = getDistance(oldPoint2, newPoint2);
-
-  // If both distances are 0, return the original points
-  if (distance1 === 0 && distance2 === 0) {
-    return [oldPoint1.x, oldPoint1.y];
-  }
-
-  // Calculate the ratio of the distances
-  const ratio = distance1 / (distance1 + distance2);
-
-  // Calculate the new center point based on the ratio
-  const x = oldPoint1.x + ratio * (oldPoint2.x - oldPoint1.x);
-  const y = oldPoint1.y + ratio * (oldPoint2.y - oldPoint1.y);
-
-  return [x, y];
-}
-
 export function useTouchEvent(
   imgRef: React.MutableRefObject<HTMLImageElement[]>,
   movable: boolean,
@@ -72,15 +52,7 @@ export function useTouchEvent(
     isTouching.current = true;
 
     const { touches = [] } = event;
-    if (touches.length > 1) {
-      // touch zoom
-      // updateTouchPointInfo({
-      //   point1: { x: touches[0].clientX, y: touches[0].clientY },
-      //   point2: { x: touches[1].clientX, y: touches[1].clientY },
-      //   eventType: 'touchZoom',
-      // });
-    } else {
-      // touch move
+    if (touches.length === 1) {
       updateTouchPointInfo({
         point1: {
           x: touches[0].clientX - x,
@@ -107,21 +79,18 @@ export function useTouchEvent(
         x: touches[1].clientX,
         y: touches[1].clientY,
       };
-      const [centerX, centerY] = getCenter(point1, point2, newPoint1, newPoint2);
       const ratio = getDistance(newPoint1, newPoint2) / getDistance(point1, point2);
 
-      dispatchZoomChange(ratio, 'touchZoom', centerX, centerY, true);
-      // updateTouchPointInfo({
-      //   point1: newPoint1,
-      //   point2: newPoint2,
-      //   eventType: 'touchZoom',
-      // });
+      dispatchZoomChange(ratio, 'touchZoom', true);
     } else if (eventType === 'move') {
+      const newX = touches[0].clientX - point1.x;
+      const newY = touches[0].clientY - point1.y;
+
       // touch move
       updateTransform(
         {
-          x: touches[0].clientX - point1.x,
-          y: touches[0].clientY - point1.y,
+          x: newX,
+          y: newY,
         },
         'move',
       );
