Browse Source

fix: When the image is loaded for the first time, zoom is calculated,… (#1998)

* fix: When the image is loaded for the first time, zoom is calculated, and zoom changes do not need to be exposed through callbacks

* fix: Fixed unexpected onRotateLeft callback being triggered when switching image during image preview
YyumeiZhang 1 year ago
parent
commit
8aac62d22c

+ 5 - 3
packages/semi-foundation/image/previewImageFoundation.ts

@@ -86,7 +86,9 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
             this.setState({
                 loading: false,
             } as any);
-            this.handleResizeImage();
+            // 图片初次加载,计算 zoom,zoom 改变不需要通过回调透出
+            // When the image is loaded for the first time, zoom is calculated, and zoom changes do not need to be exposed through callbacks.
+            this.handleResizeImage(false);
         }
         const { src, onLoad } = this.getProps();
         onLoad && onLoad(src);
@@ -100,7 +102,7 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
         onError && onError(src);
     }
 
-    handleResizeImage = () => {
+    handleResizeImage = (notify: boolean = true) => {
         const horizontal = !this._isImageVertical();
         const { currZoom } = this.getStates();
         const imgWidth = horizontal ? this.originImageWidth : this.originImageHeight;
@@ -120,7 +122,7 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
             if (currZoom === _zoom) {
                 this.calculatePreviewImage(_zoom, null);
             } else {
-                onZoom(_zoom);
+                onZoom(_zoom, notify);
             }
         }
     }

+ 2 - 3
packages/semi-foundation/image/previewInnerFoundation.ts

@@ -166,7 +166,6 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
             direction,
             rotation: 0,
         } as any);
-        this._adapter.notifyRotateChange(0);
     }
 
     handleDownload = () => {
@@ -199,10 +198,10 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
         this._adapter.notifyRotateChange(newRotation);
     }
 
-    handleZoomImage = (newZoom: number) => {
+    handleZoomImage = (newZoom: number, notify: boolean = true) => {
         const { zoom } = this.getStates();
         if (zoom !== newZoom) {
-            this._adapter.notifyZoom(newZoom, newZoom > zoom);
+            notify && this._adapter.notifyZoom(newZoom, newZoom > zoom);
             this.setState({
                 zoom: newZoom,
             } as any);

+ 2 - 2
packages/semi-ui/image/previewInner.tsx

@@ -285,8 +285,8 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
         this.foundation.handleRotateImage(direction);
     }
 
-    handleZoomImage = (newZoom: number) => {
-        this.foundation.handleZoomImage(newZoom);
+    handleZoomImage = (newZoom: number, notify: boolean = true) => {
+        this.foundation.handleZoomImage(newZoom, notify);
     }
 
     handleMouseUp = (e): void => {