@douyinfe/semi-foundation 2.49.0-beta.0 → 2.49.0

package/image/previewFooterFoundation.ts

@@ -1,8 +1,6 @@
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 
-export interface PreviewFooterAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    setStartMouseOffset: (time: number) => void
-}
+export interface PreviewFooterAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S>{}
 
 export default class PreviewFooterFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewFooterAdapter<P, S>, P, S> {
     
@@ -24,7 +22,6 @@ export default class PreviewFooterFoundation<P = Record<string, any>, S = Record
         } else {
             onZoomOut(Number((value / 100).toFixed(2)));
         }
-        this._adapter.setStartMouseOffset(value);
     };
 
     handleRatioClick = (): void => {

package/image/previewImageFoundation.ts

@@ -1,16 +1,8 @@
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
-import { handlePrevent } from "../utils/a11y";
-import { throttle, isUndefined } from "lodash";
 
 export interface PreviewImageAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    getOriginImageSize: () => { originImageWidth: number; originImageHeight: number }; 
-    setOriginImageSize: (size: { originImageWidth: number; originImageHeight: number }) => void;
     getContainer: () => HTMLDivElement;
     getImage: () => HTMLImageElement;
-    getMouseMove: () => boolean;
-    setStartMouseMove: (move: boolean) => void;
-    getMouseOffset: () => { x: number; y: number };
-    setStartMouseOffset: (offset: { x: number; y: number }) => void;
     setLoading: (loading: boolean) => void;
     setImageCursor: (canDrag: boolean) => void
 }
@@ -46,6 +38,10 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
         super({ ...adapter });
     }
 
+    startMouseOffset = { x: 0, y: 0 };
+    originImageWidth = null;
+    originImageHeight = null;
+
     _isImageVertical = (): boolean => this.getProp("rotation") % 180 !== 0;
 
     _getImageBounds = (): DOMRect => {
@@ -77,21 +73,16 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     }
 
     handleWindowResize = (): void => {
-        const { ratio, setRatio } = this.getProps();
-        const { originImageWidth, originImageHeight } = this._adapter.getOriginImageSize();
-        if (originImageWidth && originImageHeight) {
-            if (ratio !== "adaptation") {
-                setRatio("adaptation");
-            } else {
-                this.handleResizeImage();
-            } 
+        if (this.originImageWidth && this.originImageHeight) {
+            this.handleResizeImage();
         }
     };
 
     handleLoad = (e: any): void => {
         if (e.target) {
-            const { width: w, height: h } = e.target as any;
-            this._adapter.setOriginImageSize({ originImageWidth: w, originImageHeight: h });
+            const { naturalWidth: w, naturalHeight: h } = e.target as any;
+            this.originImageHeight = h;
+            this.originImageWidth = w;
             this.setState({
                 loading: false,
             } as any);
@@ -111,19 +102,50 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
 
     handleResizeImage = () => {
         const horizontal = !this._isImageVertical();
-        const { originImageWidth, originImageHeight } = this._adapter.getOriginImageSize();
-        const imgWidth = horizontal ? originImageWidth : originImageHeight;
-        const imgHeight = horizontal ? originImageHeight : originImageWidth;
-        const { onZoom } = this.getProps();
+        const { currZoom } = this.getStates();
+        const imgWidth = horizontal ? this.originImageWidth : this.originImageHeight;
+        const imgHeight = horizontal ? this.originImageHeight : this.originImageWidth;
+        const { onZoom, setRatio, ratio } = this.getProps();
         const containerDOM = this._adapter.getContainer();
         if (containerDOM) {
             const { width: containerWidth, height: containerHeight } = this._getContainerBounds();
             const reservedWidth = containerWidth - 80;
             const reservedHeight = containerHeight - 80;
-            const _zoom = Number(
-                Math.min(reservedWidth / imgWidth, reservedHeight / imgHeight).toFixed(2)
-            );
-            onZoom(_zoom);
+            let _zoom = 1;
+            if (imgWidth > reservedWidth || imgHeight > reservedHeight) {
+                _zoom = Number(
+                    Math.min(reservedWidth / imgWidth, reservedHeight / imgHeight).toFixed(2)
+                );
+            }
+            if (currZoom === _zoom) {
+                this.calculatePreviewImage(_zoom, null);
+            } else {
+                onZoom(_zoom);
+            }
+        }
+    }
+
+    handleRatioChange = () => {
+        if (this.originImageWidth && this.originImageHeight) {
+            const { currZoom } = this.getStates();
+            const { ratio, onZoom } = this.getProps();
+            let _zoom: number;
+            if (ratio === 'adaptation') {
+                const horizontal = !this._isImageVertical();
+                const imgWidth = horizontal ? this.originImageWidth : this.originImageHeight;
+                const imgHeight = horizontal ? this.originImageHeight : this.originImageWidth;
+                const { width: containerWidth, height: containerHeight } = this._getContainerBounds();
+                const reservedWidth = containerWidth - 80;
+                const reservedHeight = containerHeight - 80;
+                _zoom = Number(
+                    Math.min(reservedWidth / imgWidth, reservedHeight / imgHeight).toFixed(2)
+                );
+            } else {
+                _zoom = 1;
+            }
+            if (currZoom !== _zoom) {
+                onZoom(_zoom);
+            }
         }
     }
 
@@ -138,33 +160,6 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
         }
     };
 
-    // e: WheelEvent<HTMLImageElement>
-    handleWheel = (e: any) => {
-        this.onWheel(e);
-        handlePrevent(e);
-    }
-
-    // e: WheelEvent<HTMLImageElement>
-    onWheel = throttle((e: any): void => {
-        const { onZoom, zoomStep, maxZoom, minZoom } = this.getProps();
-        const { currZoom } = this.getStates();
-        let _zoom: number;
-        if (e.deltaY < 0) {
-            /* zoom in */
-            if (currZoom + zoomStep <= maxZoom) {
-                _zoom = Number((currZoom + zoomStep).toFixed(2));
-            }
-        } else if (e.deltaY > 0) {
-            /* zoom out */
-            if (currZoom - zoomStep >= minZoom) {
-                _zoom = Number((currZoom - zoomStep).toFixed(2));
-            }
-        }
-        if (!isUndefined(_zoom)) {
-            onZoom(_zoom);
-        }
-    }, 50);
-
     calcCanDragDirection = (): DragDirection => {
         const { width, height } = this.getStates();
         const { rotation } = this.getProps();
@@ -181,14 +176,13 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
         };
     };
 
-    handleZoomChange = (newZoom: number, e: any): void => {
+    calculatePreviewImage = (newZoom: number, e: any): void => {
         const imageDOM = this._adapter.getImage();
-        const { originImageWidth, originImageHeight } = this._adapter.getOriginImageSize();
         const { canDragVertical, canDragHorizontal } = this.calcCanDragDirection();
         const canDrag = canDragVertical || canDragHorizontal;
         const { width: containerWidth, height: containerHeight } = this._getContainerBounds();
-        const newWidth = Math.floor(originImageWidth * newZoom);
-        const newHeight = Math.floor(originImageHeight * newZoom);
+        const newWidth = Math.floor(this.originImageWidth * newZoom);
+        const newHeight = Math.floor(this.originImageHeight * newZoom);
 
         // debugger;
         let _offset;
@@ -242,15 +236,15 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
 
     handleMoveImage = (e: any): void => {
         const { offset, width, height } = this.getStates();
-        const startMouseMove = this._adapter.getMouseMove();
-        const startMouseOffset = this._adapter.getMouseOffset();
         const { canDragVertical, canDragHorizontal } = this.calcCanDragDirection();
-        if (startMouseMove && (canDragVertical || canDragHorizontal)) {
+        // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+        const mouseLeftPress = e.buttons === 1;
+        if (mouseLeftPress && (canDragVertical || canDragHorizontal)) {
             const { clientX, clientY } = e;
             const { left: containerLeft, top: containerTop } = this._getContainerBounds();
             const { left: extremeLeft, top: extremeTop } = this.calcExtremeBounds();
-            let newX = canDragHorizontal ? clientX - containerLeft - startMouseOffset.x : offset.x;
-            let newY = canDragVertical ? clientY - containerTop - startMouseOffset.y : offset.y;
+            let newX = canDragHorizontal ? clientX - containerLeft - this.startMouseOffset.x : offset.x;
+            let newY = canDragVertical ? clientY - containerTop - this.startMouseOffset.y : offset.y;
             if (canDragHorizontal) {
                 newX = newX > 0 ? 0 : newX < extremeLeft ? extremeLeft : newX;
             }
@@ -270,11 +264,7 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     };
 
     handleImageMouseDown = (e: any): void => {
-        this._adapter.setStartMouseOffset(this._getOffset(e));
-        this._adapter.setStartMouseMove(true);
+        this.startMouseOffset = this._getOffset(e);
     };
 
-    handleImageMouseUp = (): void => {
-        this._adapter.setStartMouseMove(false);
-    };
 }

package/image/previewInnerFoundation.ts

@@ -1,6 +1,8 @@
+import { handlePrevent } from "../utils/a11y";
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 import KeyCode from "../utils/keyCode";
 import { getPreloadImagArr, downloadImage, isTargetEmit } from "./utils";
+import { isUndefined, throttle } from "lodash";
 
 export type RatioType = "adaptation" | "realSize";
 export interface PreviewInnerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
@@ -14,15 +16,10 @@ export interface PreviewInnerAdapter<P = Record<string, any>, S = Record<string,
     notifyDownload: (src: string, index: number) => void;
     registerKeyDownListener: () => void;
     unregisterKeyDownListener: () => void;
-    getMouseActiveTime: () => number;
-    getStopTiming: () => boolean;
-    setStopTiming: (value: boolean) => void;
-    getStartMouseDown: () => {x: number; y: number};
-    setStartMouseDown: (x: number, y: number) => void;
-    setMouseActiveTime: (time: number) => void;
     disabledBodyScroll: () => void;
     enabledBodyScroll: () => void;
-    getSetDownloadFunc: () => (src: string) => string
+    getSetDownloadFunc: () => (src: string) => string;
+    isValidTarget: (e: any) => boolean
 }
 
 
@@ -34,50 +31,94 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
         super({ ...adapter });
     }
 
+    _timer = null;
+    _startMouseDown = { x: 0, y: 0 };
+
     beforeShow() {
         this._adapter.registerKeyDownListener();
         this._adapter.disabledBodyScroll();
+        this.updateTimer();
     }
 
     afterHide() {
         this._adapter.unregisterKeyDownListener();
         this._adapter.enabledBodyScroll();
+        this.clearTimer();
     }
 
     handleViewVisibleChange = () => {
-        const nowTime = new Date().getTime();
-        const mouseActiveTime = this._adapter.getMouseActiveTime();
-        const stopTiming = this._adapter.getStopTiming();
-        const { viewerVisibleDelay } = this.getProps();
         const { viewerVisible } = this.getStates();
-        if (nowTime - mouseActiveTime > viewerVisibleDelay && !stopTiming) {
-            viewerVisible && this.setState({
+        if (viewerVisible) {
+            this.setState({
                 viewerVisible: false,
             } as any);
+            this.clearTimer();
         }
     }
 
-    handleMouseMoveEvent = (e: any, event: string) => {
-        const isTarget = isTargetEmit(e, STOP_CLOSE_TARGET);
-        if (isTarget && event === "over") {
-            this._adapter.setStopTiming(true);
-        } else if (isTarget && event === "out") {
-            this._adapter.setStopTiming(false);
+    handleMouseMove = (e) => {
+        this._persistEvent(e);
+        this.mouseMoveHandler(e);
+    }
+    
+    mouseMoveHandler = throttle((e: any) => {
+        const { viewerVisible } = this.getStates();
+        const isValidTarget = this._adapter.isValidTarget(e);
+        if (isValidTarget) {
+            if (!viewerVisible) {
+                this.setState({
+                    viewerVisible: true,
+                } as any);
+            }
+            this.updateTimer();
+        } else {
+            this.clearTimer();
         }
+    }, 50);
+
+    updateTimer = () => {
+        const { viewerVisibleDelay } = this.getProps();
+        this.clearTimer();
+        this._timer = setTimeout(this.handleViewVisibleChange, viewerVisibleDelay);
     }
 
-    handleMouseMove = (e: any) => {
-        this._adapter.setMouseActiveTime(new Date().getTime());
-        this.setState({
-            viewerVisible: true,
-        } as any);
+    clearTimer = () => {
+        if (this._timer) {
+            clearTimeout(this._timer);
+            this._timer = null;
+        }
     }
 
+    handleWheel = (e: any) => {
+        this.onWheel(e);
+        handlePrevent(e);
+    }
+
+    onWheel = (e: any): void => {
+        const { zoomStep, maxZoom, minZoom } = this.getProps();
+        const { zoom: currZoom } = this.getStates();
+        let _zoom: number;
+        if (e.deltaY < 0) {
+            /* zoom in */
+            if (currZoom + zoomStep <= maxZoom) {
+                _zoom = Number((currZoom + zoomStep).toFixed(2));
+            }
+        } else if (e.deltaY > 0) {
+            /* zoom out */
+            if (currZoom - zoomStep >= minZoom) {
+                _zoom = Number((currZoom - zoomStep).toFixed(2));
+            }
+        }
+        if (!isUndefined(_zoom)) {
+            this.handleZoomImage(_zoom);
+        }
+    };
+
     handleMouseUp = (e: any) => {
         const { maskClosable } = this.getProps();
         let couldClose = !isTargetEmit(e, NOT_CLOSE_TARGETS);
         const { clientX, clientY } = e;
-        const { x, y } = this._adapter.getStartMouseDown();
+        const { x, y } = this._startMouseDown;
         // 对鼠标移动做容错处理，当 x 和 y 方向在 mouseUp 的时候移动距离都小于等于 5px 时候就可以关闭预览
         // Error-tolerant processing of mouse movement, when the movement distance in the x and y directions is less than or equal to 5px in mouseUp, the preview can be closed
         // 不做容错处理的话，直接用 clientX !== x || y !== clientY 做判断，鼠标在用户点击时候无意识的轻微移动无法关闭预览，不符合用户预期
@@ -92,7 +133,7 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
 
     handleMouseDown = (e: any) => {
         const { clientX, clientY } = e;
-        this._adapter.setStartMouseDown(clientX, clientY);
+        this._startMouseDown = { x: clientX, y: clientY } ;
     }
 
     handleKeyDown = (e: any) => {
@@ -160,10 +201,12 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
 
     handleZoomImage = (newZoom: number) => {
         const { zoom } = this.getStates();
-        this._adapter.notifyZoom(newZoom, newZoom > zoom);
-        this.setState({
-            zoom: newZoom,
-        } as any);
+        if (zoom !== newZoom) {
+            this._adapter.notifyZoom(newZoom, newZoom > zoom);
+            this.setState({
+                zoom: newZoom,
+            } as any);
+        }
     }
 
     // 当 visible 改变之后，预览组件完成首张图片加载后，启动预加载

package/lib/cjs/image/previewFooterFoundation.d.ts

@@ -1,6 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 export interface PreviewFooterAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    setStartMouseOffset: (time: number) => void;
 }
 export default class PreviewFooterFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewFooterAdapter<P, S>, P, S> {
     changeSliderValue: (type: string) => void;

package/lib/cjs/image/previewFooterFoundation.js

@@ -35,7 +35,6 @@ class PreviewFooterFoundation extends _foundation.default {
       } else {
         onZoomOut(Number((value / 100).toFixed(2)));
       }
-      this._adapter.setStartMouseOffset(value);
     };
     this.handleRatioClick = () => {
       const {

package/lib/cjs/image/previewImageFoundation.d.ts

@@ -1,26 +1,7 @@
-/// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 export interface PreviewImageAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    getOriginImageSize: () => {
-        originImageWidth: number;
-        originImageHeight: number;
-    };
-    setOriginImageSize: (size: {
-        originImageWidth: number;
-        originImageHeight: number;
-    }) => void;
     getContainer: () => HTMLDivElement;
     getImage: () => HTMLImageElement;
-    getMouseMove: () => boolean;
-    setStartMouseMove: (move: boolean) => void;
-    getMouseOffset: () => {
-        x: number;
-        y: number;
-    };
-    setStartMouseOffset: (offset: {
-        x: number;
-        y: number;
-    }) => void;
     setLoading: (loading: boolean) => void;
     setImageCursor: (canDrag: boolean) => void;
 }
@@ -38,6 +19,12 @@ export interface ImageOffset {
 }
 export default class PreviewImageFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewImageAdapter<P, S>, P, S> {
     constructor(adapter: PreviewImageAdapter<P, S>);
+    startMouseOffset: {
+        x: number;
+        y: number;
+    };
+    originImageWidth: any;
+    originImageHeight: any;
     _isImageVertical: () => boolean;
     _getImageBounds: () => DOMRect;
     _getContainerBounds: () => DOMRect;
@@ -47,13 +34,11 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     handleLoad: (e: any) => void;
     handleError: (e: any) => void;
     handleResizeImage: () => void;
+    handleRatioChange: () => void;
     handleRightClickImage: (e: any) => boolean;
-    handleWheel: (e: any) => void;
-    onWheel: import("lodash").DebouncedFunc<(e: any) => void>;
     calcCanDragDirection: () => DragDirection;
-    handleZoomChange: (newZoom: number, e: any) => void;
+    calculatePreviewImage: (newZoom: number, e: any) => void;
     calcExtremeBounds: () => ExtremeBounds;
     handleMoveImage: (e: any) => void;
     handleImageMouseDown: (e: any) => void;
-    handleImageMouseUp: () => void;
 }