feat: onTransform support action param

README.md

@@ -79,7 +79,10 @@ export default () => (
   visible?: boolean;
   scaleStep?: number;
   onVisibleChange?: (visible: boolean, prevVisible: boolean) => void;
-  onTransform: (transform: { x: number, y: number, rotate: number, scale: number, flipX: boolean, flipY: boolean }) => void }
+  onTransform: (
+    transform: { x: number, y: number, rotate: number, scale: number, flipX: boolean, flipY: boolean },
+    action: 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'switch' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound'
+  ) => void;
   getContainer?: string | HTMLElement | (() => HTMLElement) | false;
   toolbarRender?: (params: {
     originalNode: React.ReactNode;
@@ -135,7 +138,10 @@ export default () => (
   visible?: boolean;
   scaleStep?: number;
   onVisibleChange?: (visible, prevVisible, current: number) => void;
-  onTransform: (transform: { x: number, y: number, rotate: number, scale: number, flipX: boolean, flipY: boolean }) => void }
+  onTransform: (
+    transform: { x: number, y: number, rotate: number, scale: number, flipX: boolean, flipY: boolean },
+    action: 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'switch' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound'
+  ) => void;
   getContainer?: string | HTMLElement | (() => HTMLElement) | false;
   countRender?: (current: number, total: number) => string;
   current?: number;

src/Preview.tsx

@@ -111,39 +111,39 @@ const Preview: React.FC<PreviewProps> = props => {
   }, [enableTransition]);
 
   const onAfterClose = () => {
-    resetTransform();
+    resetTransform('close');
   };
 
   const onZoomIn = () => {
-    dispatchZoomChange(BASE_SCALE_RATIO + scaleStep);
+    dispatchZoomChange(BASE_SCALE_RATIO + scaleStep, 'zoomIn');
   };
 
   const onZoomOut = () => {
-    dispatchZoomChange(BASE_SCALE_RATIO / (BASE_SCALE_RATIO + scaleStep));
+    dispatchZoomChange(BASE_SCALE_RATIO / (BASE_SCALE_RATIO + scaleStep), 'zoomOut');
   };
 
   const onRotateRight = () => {
-    updateTransform({ rotate: rotate + 90 });
+    updateTransform({ rotate: rotate + 90 }, 'rotateRight');
   };
 
   const onRotateLeft = () => {
-    updateTransform({ rotate: rotate - 90 });
+    updateTransform({ rotate: rotate - 90 }, 'rotateLeft');
   };
 
   const onFlipX = () => {
-    updateTransform({ flipX: !transform.flipX });
+    updateTransform({ flipX: !transform.flipX }, 'flipX');
   };
 
   const onFlipY = () => {
-    updateTransform({ flipY: !transform.flipY });
+    updateTransform({ flipY: !transform.flipY }, 'flipY');
   };
 
   const onSwitchLeft: React.MouseEventHandler<HTMLDivElement> = event => {
     event.preventDefault();
     event.stopPropagation();
     if (currentPreviewIndex > 0) {
       setEnableTransition(false);
-      resetTransform();
+      resetTransform('switch');
       setCurrent(previewDataKeys[currentPreviewIndex - 1]);
     }
   };
@@ -153,15 +153,14 @@ const Preview: React.FC<PreviewProps> = props => {
     event.stopPropagation();
     if (currentPreviewIndex < previewGroupCount - 1) {
       setEnableTransition(false);
-      resetTransform();
+      resetTransform('switch');
       setCurrent(previewDataKeys[currentPreviewIndex + 1]);
     }
   };
 
   const onMouseUp: React.MouseEventHandler<HTMLBodyElement> = () => {
     if (visible && isMoving) {
       setMoving(false);
-
       /** No need to restore the position when the picture is not moved, So as not to interfere with the click */
       const { transformX, transformY } = downPositionRef.current;
       const hasChangedPosition = transform.x !== transformX && transform.y !== transformY;
@@ -183,7 +182,7 @@ const Preview: React.FC<PreviewProps> = props => {
       );
 
       if (fixState) {
-        updateTransform({ ...fixState });
+        updateTransform({ ...fixState }, 'dragRebound');
       }
     }
   };
@@ -204,10 +203,13 @@ const Preview: React.FC<PreviewProps> = props => {
 
   const onMouseMove: React.MouseEventHandler<HTMLBodyElement> = event => {
     if (visible && isMoving) {
-      updateTransform({
-        x: event.pageX - downPositionRef.current.deltaX,
-        y: event.pageY - downPositionRef.current.deltaY,
-      });
+      updateTransform(
+        {
+          x: event.pageX - downPositionRef.current.deltaX,
+          y: event.pageY - downPositionRef.current.deltaY,
+        },
+        'move',
+      );
     }
   };
 
@@ -222,7 +224,7 @@ const Preview: React.FC<PreviewProps> = props => {
     if (event.deltaY > 0) {
       ratio = BASE_SCALE_RATIO / ratio;
     }
-    dispatchZoomChange(ratio, event.clientX, event.clientY);
+    dispatchZoomChange(ratio, 'wheel', event.clientX, event.clientY);
   };
 
   const onKeyDown = useCallback(
@@ -252,9 +254,14 @@ const Preview: React.FC<PreviewProps> = props => {
   const onDoubleClick = (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => {
     if (visible) {
       if (scale !== 1) {
-        updateTransform({ x: 0, y: 0, scale: 1 });
+        updateTransform({ x: 0, y: 0, scale: 1 }, 'doubleClick');
       } else {
-        dispatchZoomChange(BASE_SCALE_RATIO + scaleStep, event.clientX, event.clientY);
+        dispatchZoomChange(
+          BASE_SCALE_RATIO + scaleStep,
+          'doubleClick',
+          event.clientX,
+          event.clientY,
+        );
       }
     }
   };

src/hooks/useImageTransform.ts

@@ -13,6 +13,20 @@ export type TransformType = {
   flipY: boolean;
 };
 
+export type TransformAction =
+  | 'flipY'
+  | 'flipX'
+  | 'rotateLeft'
+  | 'rotateRight'
+  | 'zoomIn'
+  | 'zoomOut'
+  | 'close'
+  | 'switch'
+  | 'wheel'
+  | 'doubleClick'
+  | 'move'
+  | 'dragRebound';
+
 const initialTransform = {
   x: 0,
   y: 0,
@@ -24,21 +38,21 @@ const initialTransform = {
 
 export default function useImageTransform(
   imgRef: React.MutableRefObject<HTMLImageElement>,
-  onTransform: (transform: TransformType) => void,
+  onTransform: (transform: TransformType, action: TransformAction) => void,
 ) {
   const frame = useRef(null);
   const queue = useRef<TransformType[]>([]);
   const [transform, setTransform] = useState(initialTransform);
 
-  const resetTransform = () => {
+  const resetTransform = (action: TransformAction) => {
     setTransform(initialTransform);
     if (onTransform && !isEqual(initialTransform, transform)) {
-      onTransform(initialTransform);
+      onTransform(initialTransform, action);
     }
   };
 
   /** Direct update transform */
-  const updateTransform = (newTransform: Partial<TransformType>) => {
+  const updateTransform = (newTransform: Partial<TransformType>, action: TransformAction) => {
     if (frame.current === null) {
       queue.current = [];
       frame.current = raf(() => {
@@ -49,7 +63,7 @@ export default function useImageTransform(
           });
           frame.current = null;
 
-          onTransform?.(memoState);
+          onTransform?.(memoState, action);
           return memoState;
         });
       });
@@ -61,7 +75,12 @@ export default function useImageTransform(
   };
 
   /** Scale according to the position of clientX and clientY */
-  const dispatchZoomChange = (ratio: number, clientX?: number, clientY?: number) => {
+  const dispatchZoomChange = (
+    ratio: number,
+    action: TransformAction,
+    clientX?: number,
+    clientY?: number,
+  ) => {
     const { width, height, offsetWidth, offsetHeight, offsetLeft, offsetTop } = imgRef.current;
 
     let newRatio = ratio;
@@ -103,11 +122,14 @@ export default function useImageTransform(
       }
     }
 
-    updateTransform({
-      x: newX,
-      y: newY,
-      scale: newScale,
-    });
+    updateTransform(
+      {
+        x: newX,
+        y: newY,
+        scale: newScale,
+      },
+      action,
+    );
   };
 
   return {

tests/preview.test.tsx

@@ -832,13 +832,16 @@ describe('Preview', () => {
     });
 
     expect(onTransform).toBeCalledTimes(1);
-    expect(onTransform).toBeCalledWith({
-      flipX: false,
-      flipY: true,
-      rotate: 0,
-      scale: 1,
-      x: 0,
-      y: 0,
-    });
+    expect(onTransform).toBeCalledWith(
+      {
+        flipY: true,
+        flipX: false,
+        rotate: 0,
+        scale: 1,
+        x: 0,
+        y: 0,
+      },
+      'flipY',
+    );
   });
 });