@douyinfe/semi-foundation 2.49.1 → 2.50.0-alpha.0

package/image/previewFooterFoundation.ts

@@ -1,6 +1,8 @@
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 
-export interface PreviewFooterAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S>{}
+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> {
     
@@ -22,6 +24,7 @@ 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,8 +1,16 @@
 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
 }
@@ -38,10 +46,6 @@ 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 => {
@@ -73,16 +77,21 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     }
 
     handleWindowResize = (): void => {
-        if (this.originImageWidth && this.originImageHeight) {
-            this.handleResizeImage();
+        const { ratio, setRatio } = this.getProps();
+        const { originImageWidth, originImageHeight } = this._adapter.getOriginImageSize();
+        if (originImageWidth && originImageHeight) {
+            if (ratio !== "adaptation") {
+                setRatio("adaptation");
+            } else {
+                this.handleResizeImage();
+            } 
         }
     };
 
     handleLoad = (e: any): void => {
         if (e.target) {
-            const { naturalWidth: w, naturalHeight: h } = e.target as any;
-            this.originImageHeight = h;
-            this.originImageWidth = w;
+            const { width: w, height: h } = e.target as any;
+            this._adapter.setOriginImageSize({ originImageWidth: w, originImageHeight: h });
             this.setState({
                 loading: false,
             } as any);
@@ -102,50 +111,19 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
 
     handleResizeImage = () => {
         const horizontal = !this._isImageVertical();
-        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 { originImageWidth, originImageHeight } = this._adapter.getOriginImageSize();
+        const imgWidth = horizontal ? originImageWidth : originImageHeight;
+        const imgHeight = horizontal ? originImageHeight : originImageWidth;
+        const { onZoom } = this.getProps();
         const containerDOM = this._adapter.getContainer();
         if (containerDOM) {
             const { width: containerWidth, height: containerHeight } = this._getContainerBounds();
             const reservedWidth = containerWidth - 80;
             const reservedHeight = containerHeight - 80;
-            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);
-            }
+            const _zoom = Number(
+                Math.min(reservedWidth / imgWidth, reservedHeight / imgHeight).toFixed(2)
+            );
+            onZoom(_zoom);
         }
     }
 
@@ -160,6 +138,33 @@ 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();
@@ -176,13 +181,14 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
         };
     };
 
-    calculatePreviewImage = (newZoom: number, e: any): void => {
+    handleZoomChange = (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(this.originImageWidth * newZoom);
-        const newHeight = Math.floor(this.originImageHeight * newZoom);
+        const newWidth = Math.floor(originImageWidth * newZoom);
+        const newHeight = Math.floor(originImageHeight * newZoom);
 
         // debugger;
         let _offset;
@@ -236,15 +242,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();
-        // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
-        const mouseLeftPress = e.buttons === 1;
-        if (mouseLeftPress && (canDragVertical || canDragHorizontal)) {
+        if (startMouseMove && (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 - this.startMouseOffset.x : offset.x;
-            let newY = canDragVertical ? clientY - containerTop - this.startMouseOffset.y : offset.y;
+            let newX = canDragHorizontal ? clientX - containerLeft - startMouseOffset.x : offset.x;
+            let newY = canDragVertical ? clientY - containerTop - startMouseOffset.y : offset.y;
             if (canDragHorizontal) {
                 newX = newX > 0 ? 0 : newX < extremeLeft ? extremeLeft : newX;
             }
@@ -264,7 +270,11 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     };
 
     handleImageMouseDown = (e: any): void => {
-        this.startMouseOffset = this._getOffset(e);
+        this._adapter.setStartMouseOffset(this._getOffset(e));
+        this._adapter.setStartMouseMove(true);
     };
 
+    handleImageMouseUp = (): void => {
+        this._adapter.setStartMouseMove(false);
+    };
 }

package/image/previewInnerFoundation.ts

@@ -1,8 +1,6 @@
-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> {
@@ -16,10 +14,15 @@ 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;
-    isValidTarget: (e: any) => boolean
+    getSetDownloadFunc: () => (src: string) => string
 }
 
 
@@ -31,94 +34,50 @@ 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 (viewerVisible) {
-            this.setState({
+        if (nowTime - mouseActiveTime > viewerVisibleDelay && !stopTiming) {
+            viewerVisible && this.setState({
                 viewerVisible: false,
             } as any);
-            this.clearTimer();
-        }
-    }
-
-    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);
     }
 
-    clearTimer = () => {
-        if (this._timer) {
-            clearTimeout(this._timer);
-            this._timer = null;
+    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);
         }
     }
 
-    handleWheel = (e: any) => {
-        this.onWheel(e);
-        handlePrevent(e);
+    handleMouseMove = (e: any) => {
+        this._adapter.setMouseActiveTime(new Date().getTime());
+        this.setState({
+            viewerVisible: true,
+        } as any);
     }
 
-    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._startMouseDown;
+        const { x, y } = this._adapter.getStartMouseDown();
         // 对鼠标移动做容错处理，当 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 做判断，鼠标在用户点击时候无意识的轻微移动无法关闭预览，不符合用户预期
@@ -133,7 +92,7 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
 
     handleMouseDown = (e: any) => {
         const { clientX, clientY } = e;
-        this._startMouseDown = { x: clientX, y: clientY } ;
+        this._adapter.setStartMouseDown(clientX, clientY);
     }
 
     handleKeyDown = (e: any) => {
@@ -201,12 +160,10 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
 
     handleZoomImage = (newZoom: number) => {
         const { zoom } = this.getStates();
-        if (zoom !== newZoom) {
-            this._adapter.notifyZoom(newZoom, newZoom > zoom);
-            this.setState({
-                zoom: newZoom,
-            } as any);
-        }
+        this._adapter.notifyZoom(newZoom, newZoom > zoom);
+        this.setState({
+            zoom: newZoom,
+        } as any);
     }
 
     // 当 visible 改变之后，预览组件完成首张图片加载后，启动预加载

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

@@ -1,5 +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 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,6 +35,7 @@ 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,7 +1,26 @@
+/// <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;
 }
@@ -19,12 +38,6 @@ 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;
@@ -34,11 +47,13 @@ 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;
-    calculatePreviewImage: (newZoom: number, e: any) => void;
+    handleZoomChange: (newZoom: number, e: any) => void;
     calcExtremeBounds: () => ExtremeBounds;
     handleMoveImage: (e: any) => void;
     handleImageMouseDown: (e: any) => void;
+    handleImageMouseUp: () => void;
 }