feat: add switch to reset to home point after dragging

docs/examples/basic.tsx

@@ -27,7 +27,7 @@ export default function Base() {
         style={{
           marginRight: 24,
         }}
-        preview={{ mask: 'Click to Preview' }}
+        preview={{ mask: 'Click to Preview', resetPositionAfterDrag: false }}
       />
       <Image
         src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ngiJQaLQELEAAAAAAAAAAABkARQnAQ"

src/Image.tsx

@@ -22,6 +22,12 @@ export interface ImagePreviewType
   maskClassName?: string;
   icons?: PreviewProps['icons'];
   scaleStep?: number;
+  /**
+   * whether to reset the position after drag
+   * @default true
+   * @since 5.17.0
+   */
+  resetPositionAfterDrag?: boolean;
 }
 
 let uuid = 0;

src/Operations.tsx

@@ -24,6 +24,7 @@ interface OperationsProps
   scale: number;
   onSwitchLeft: React.MouseEventHandler<HTMLDivElement>;
   onSwitchRight: React.MouseEventHandler<HTMLDivElement>;
+  onRefresh: () => void;
   onZoomIn: () => void;
   onZoomOut: () => void;
   onRotateRight: () => void;
@@ -49,14 +50,15 @@ const Operations: React.FC<OperationsProps> = (props) => {
     onSwitchLeft,
     onSwitchRight,
     onClose,
+    onRefresh,
     onZoomIn,
     onZoomOut,
     onRotateRight,
     onRotateLeft,
     onFlipX,
     onFlipY
   } = props;
-  const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right, flipX, flipY } = icons;
+  const { rotateLeft, rotateRight, refresh, zoomIn, zoomOut, close, left, right, flipX, flipY } = icons;
   const toolClassName = `${prefixCls}-operations-operation`;
   const iconClassName = `${prefixCls}-operations-icon`;
   const tools = [
@@ -65,6 +67,11 @@ const Operations: React.FC<OperationsProps> = (props) => {
       onClick: onClose,
       type: 'close',
     },
+    {
+      icon: refresh,
+      onClick: onRefresh,
+      type: 'refresh',
+    },
     {
       icon: zoomIn,
       onClick: onZoomIn,
@@ -97,7 +104,7 @@ const Operations: React.FC<OperationsProps> = (props) => {
       onClick: onFlipY,
       type: 'flipY',
     },
-  ];
+  ].filter((tool) => tool.icon !== undefined);
 
   const operations = (
     <>

src/Preview.tsx

@@ -21,6 +21,7 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
     rotateRight?: React.ReactNode;
     zoomIn?: React.ReactNode;
     zoomOut?: React.ReactNode;
+    refresh?: React.ReactNode;
     close?: React.ReactNode;
     left?: React.ReactNode;
     right?: React.ReactNode;
@@ -29,6 +30,7 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
   };
   countRender?: (current: number, total: number) => string;
   scaleStep?: number;
+  resetPositionAfterDrag?: boolean;
 }
 
 const Preview: React.FC<PreviewProps> = (props) => {
@@ -45,6 +47,7 @@ const Preview: React.FC<PreviewProps> = (props) => {
     scaleStep = 0.5,
     transitionName = 'zoom',
     maskTransitionName = 'fade',
+    resetPositionAfterDrag = true,
     ...restProps
   } = props;
 
@@ -74,6 +77,10 @@ const Preview: React.FC<PreviewProps> = (props) => {
     resetTransform();
   };
 
+  const onRefresh = ()=> {
+    resetTransform();
+  }
+
   const onZoomIn = () => {
     dispatchZoomChange(BASE_SCALE_RATIO + scaleStep);
   };
@@ -118,6 +125,10 @@ const Preview: React.FC<PreviewProps> = (props) => {
     if (visible && isMoving) {
       setMoving(false);
 
+      if(!resetPositionAfterDrag){
+        return;
+      }
+
       /** 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;
@@ -298,6 +309,7 @@ const Preview: React.FC<PreviewProps> = (props) => {
         onRotateLeft={onRotateLeft}
         onFlipX={onFlipX}
         onFlipY={onFlipY}
+        onRefresh={onRefresh}
         onClose={onClose}
       />
     </>

tests/__snapshots__/controlled.test.tsx.snap

@@ -5,7 +5,6 @@ exports[`Controlled With previewVisible 1`] = `
   aria-modal="true"
   class="rc-image-preview"
   role="dialog"
-  style="display: none;"
 >
   <div
     aria-hidden="true"

tests/__snapshots__/preview.test.tsx.snap

@@ -75,29 +75,7 @@ exports[`Preview add rootClassName should be correct when open preview 1`] = `
   >
     <ul
       class="rc-image-preview-operations"
-    >
-      <li
-        class="rc-image-preview-operations-operation rc-image-preview-operations-operation-close"
-      />
-      <li
-        class="rc-image-preview-operations-operation rc-image-preview-operations-operation-zoomIn"
-      />
-      <li
-        class="rc-image-preview-operations-operation rc-image-preview-operations-operation-zoomOut rc-image-preview-operations-operation-disabled"
-      />
-      <li
-        class="rc-image-preview-operations-operation rc-image-preview-operations-operation-rotateRight"
-      />
-      <li
-        class="rc-image-preview-operations-operation rc-image-preview-operations-operation-rotateLeft"
-      />
-      <li
-        class="rc-image-preview-operations-operation rc-image-preview-operations-operation-flipX"
-      />
-      <li
-        class="rc-image-preview-operations-operation rc-image-preview-operations-operation-flipY"
-      />
-    </ul>
+    />
   </div>,
 ]
 `;

tests/__snapshots__/previewGroup.test.tsx.snap

@@ -5,7 +5,6 @@ exports[`PreviewGroup With Controlled 1`] = `
   aria-modal="true"
   class="rc-image-preview"
   role="dialog"
-  style="display: none;"
 >
   <div
     aria-hidden="true"