feat: support reset action in toolbarRender (#345)

* feat: support reset action in toolbarRender

* feat: support reset action in toolbarRender

* feat: support reset action in toolbarRender

* feat: support reset action in toolbarRender

* feat: support reset action in toolbarRender

* feat: support reset action in toolbarRender

Author: kiner-tang

README.md

@@ -186,6 +186,8 @@ type TransformAction =
     onRotateRight: () => void;
     onZoomOut: () => void;
     onZoomIn: () => void;
+    onClose: () => void;
+    onReset: () => void;
   };
   transform: {
     x: number;

docs/examples/toolbarRender.tsx

@@ -22,20 +22,23 @@ export default function ToolbarRender() {
                 onZoomIn,
                 onZoomOut,
                 onClose,
+                onReset,
               },
             },
           ) => {
             return (
               <div
-                style={{ position: 'fixed', display: 'flex', bottom: 0, width: '100%', gap: 10 }}
+                style={{ position: 'fixed', display: 'flex', bottom: 100, width: '100%', gap: 10, justifyContent: 'center' }}
               >
-                <div onClick={onFlipY}>flipY</div>
-                <div onClick={onFlipX}>flipX</div>
-                <div onClick={onRotateLeft}>rotateLeft</div>
-                <div onClick={onRotateRight}>rotateRight</div>
-                <div onClick={onZoomIn}>zoomIn</div>
-                <div onClick={onZoomOut}>zoomOut</div>
-                <div onClick={onClose}>close</div>
+                <button onClick={onFlipY}>flipY</button>
+                <button onClick={onFlipX}>flipX</button>
+                <button onClick={onRotateLeft}>rotateLeft</button>
+                <button onClick={onRotateRight}>rotateRight</button>
+                <button onClick={onZoomIn}>zoomIn</button>
+                <button onClick={onZoomOut}>zoomOut</button>
+                <button onClick={() => onReset()}>reset</button>
+                <button onClick={onClose}>close</button>
+                
               </div>
             );
           },

src/Operations.tsx

@@ -38,6 +38,7 @@ interface OperationsProps
   onRotateLeft: () => void;
   onFlipX: () => void;
   onFlipY: () => void;
+  onReset: () => void;
   toolbarRender: (
     originalNode: React.ReactElement,
     info: ToolbarRenderInfoType | Omit<ToolbarRenderInfoType, 'current' | 'total'>,
@@ -73,6 +74,7 @@ const Operations: React.FC<OperationsProps> = props => {
     onRotateLeft,
     onFlipX,
     onFlipY,
+    onReset,
     toolbarRender,
     zIndex,
     image,
@@ -209,6 +211,8 @@ const Operations: React.FC<OperationsProps> = props => {
                       onRotateRight,
                       onZoomOut,
                       onZoomIn,
+                      onReset,
+                      onClose
                     },
                     transform,
                     ...(groupContext ? { current, total: count } : {}),

src/Preview.tsx

@@ -4,14 +4,14 @@ import Dialog from 'rc-dialog';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import KeyCode from 'rc-util/lib/KeyCode';
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import type { ImgInfo } from './Image';
-import Operations from './Operations';
 import { PreviewGroupContext } from './context';
 import type { TransformAction, TransformType } from './hooks/useImageTransform';
 import useImageTransform from './hooks/useImageTransform';
 import useMouseEvent from './hooks/useMouseEvent';
 import useStatus from './hooks/useStatus';
 import useTouchEvent from './hooks/useTouchEvent';
+import type { ImgInfo } from './Image';
+import Operations from './Operations';
 import { BASE_SCALE_RATIO } from './previewConfig';
 
 export type ToolbarRenderInfoType = {
@@ -30,6 +30,8 @@ export type ToolbarRenderInfoType = {
     onRotateRight: () => void;
     onZoomOut: () => void;
     onZoomIn: () => void;
+    onClose: () => void;
+    onReset: () => void;
   };
   transform: TransformType;
   current: number;
@@ -200,6 +202,10 @@ const Preview: React.FC<PreviewProps> = props => {
     updateTransform({ flipY: !transform.flipY }, 'flipY');
   };
 
+  const onReset = () => {
+    resetTransform("reset");
+  };
+
   const onSwitchLeft = (event?: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     event?.preventDefault();
     event?.stopPropagation();
@@ -337,6 +343,7 @@ const Preview: React.FC<PreviewProps> = props => {
         onFlipX={onFlipX}
         onFlipY={onFlipY}
         onClose={onClose}
+        onReset={onReset}
         zIndex={restProps.zIndex !== undefined ? restProps.zIndex + 1 : undefined}
         image={image}
       />

src/hooks/useImageTransform.ts

@@ -26,7 +26,8 @@ export type TransformAction =
   | 'doubleClick'
   | 'move'
   | 'dragRebound'
-  | 'touchZoom';
+  | 'touchZoom'
+  | 'reset';
 
 export type UpdateTransformFunc = (
   newTransform: Partial<TransformType>,
@@ -62,7 +63,6 @@ export default function useImageTransform(
 
   const resetTransform = (action: TransformAction) => {
     setTransform(initialTransform);
-    console.log('resetTransform', initialTransform, transform);
     if (!isEqual(initialTransform, transform)) {
       onTransform?.({ transform: initialTransform, action });
     }

tests/preview.test.tsx

@@ -792,12 +792,17 @@ describe('Preview', () => {
         width={200}
         height={200}
         preview={{
-          toolbarRender: (_, { icons, image }) => {
+          toolbarRender: (_, { icons, image, actions }) => {
             printImage(image);
             return (
               <>
-                {icons.flipYIcon}
-                {icons.flipXIcon}
+                <div id="flipY" onClick={() => actions.onFlipY()}>{icons.flipYIcon}</div>
+                <div id="flipX" onClick={() => actions.onFlipX()}>{icons.flipXIcon}</div>
+                <div id="zoomIn" onClick={() => actions.onZoomIn()}>{icons.zoomInIcon}</div>
+                <div id="zoomOut" onClick={() => actions.onZoomOut()}>{icons.zoomOutIcon}</div>
+                <div id="rotateLeft" onClick={() => actions.onRotateLeft()}>{icons.rotateLeftIcon}</div>
+                <div id="rotateRight" onClick={() => actions.onRotateRight()}>{icons.rotateRightIcon}</div>
+                <div id="reset" onClick={() => actions.onReset()}>reset</div>
               </>
             );
           },
@@ -810,13 +815,41 @@ describe('Preview', () => {
       jest.runAllTimers();
     });
 
-    expect(document.querySelectorAll('.rc-image-preview-operations-operation')).toHaveLength(2);
     expect(printImage).toHaveBeenCalledWith({
       alt: 'alt',
       height: 200,
       url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
       width: 200,
     });
+    // flipY
+    fireEvent.click(document.getElementById('flipY'));
+    act(() => {
+      jest.runAllTimers();
+    });
+    fireEvent.click(document.getElementById('flipX'));
+    act(() => {
+      jest.runAllTimers();
+    });
+    fireEvent.click(document.getElementById('zoomIn'));
+    act(() => {
+      jest.runAllTimers();
+    });
+    fireEvent.click(document.getElementById('rotateLeft'));
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
+      transform: 'translate3d(-206px, -142px, 0) scale3d(-1.5, -1.5, 1) rotate(-90deg)',
+    });
+    
+    // reset
+    fireEvent.click(document.getElementById('reset'));
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
+      transform: 'translate3d(0px, 0px, 0) scale3d(1, 1, 1) rotate(0deg)',
+    });
   });
 
   it('onTransform should be triggered when transform change', () => {