@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/es/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;
@@ -46,14 +33,12 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     handleWindowResize: () => void;
     handleLoad: (e: any) => void;
     handleError: (e: any) => void;
-    handleResizeImage: () => void;
+    handleResizeImage: (notify?: boolean) => 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;
 }

package/lib/es/image/previewImageFoundation.js

@@ -1,7 +1,4 @@
-import _isUndefined from "lodash/isUndefined";
-import _throttle from "lodash/throttle";
 import BaseFoundation from "../base/foundation";
-import { handlePrevent } from "../utils/a11y";
 const DefaultDOMRect = {
   bottom: 0,
   height: 0,
@@ -15,93 +12,69 @@ const DefaultDOMRect = {
 };
 export default class PreviewImageFoundation extends BaseFoundation {
   constructor(adapter) {
+    var _this;
     super(Object.assign({}, adapter));
-
+    _this = this;
+    this.startMouseOffset = {
+      x: 0,
+      y: 0
+    };
+    this.originImageWidth = null;
+    this.originImageHeight = null;
     this._isImageVertical = () => this.getProp("rotation") % 180 !== 0;
-
     this._getImageBounds = () => {
       const imageDOM = this._adapter.getImage();
-
       if (imageDOM) {
         return imageDOM.getBoundingClientRect();
       }
-
       return DefaultDOMRect;
     };
-
     this._getContainerBounds = () => {
       const containerDOM = this._adapter.getContainer();
-
       if (containerDOM) {
         return containerDOM.getBoundingClientRect();
       }
-
       return DefaultDOMRect;
     };
-
     this._getOffset = e => {
       const {
         left,
         top
       } = this._getImageBounds();
-
       return {
         x: e.clientX - left,
         y: e.clientY - top
       };
     };
-
     this.setLoading = loading => {
       this._adapter.setLoading(loading);
     };
-
     this.handleWindowResize = () => {
-      const {
-        setRatio
-      } = this.getProps();
-      const {
-        ratio
-      } = 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();
       }
     };
-
     this.handleLoad = e => {
       if (e.target) {
         const {
-          width: w,
-          height: h
+          naturalWidth: w,
+          naturalHeight: h
         } = e.target;
-
-        this._adapter.setOriginImageSize({
-          originImageWidth: w,
-          originImageHeight: h
-        });
-
+        this.originImageHeight = h;
+        this.originImageWidth = w;
         this.setState({
           loading: false
         });
-        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);
     };
-
     this.handleError = e => {
       const {
         onError,
@@ -112,43 +85,71 @@ export default class PreviewImageFoundation extends BaseFoundation {
       });
       onError && onError(src);
     };
-
-    this.handleResizeImage = () => {
-      const horizontal = !this._isImageVertical();
-
+    this.handleResizeImage = function () {
+      let notify = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      const horizontal = !_this._isImageVertical();
       const {
-        originImageWidth,
-        originImageHeight
-      } = this._adapter.getOriginImageSize();
-
-      const imgWidth = horizontal ? originImageWidth : originImageHeight;
-      const imgHeight = horizontal ? originImageHeight : originImageWidth;
+        currZoom
+      } = _this.getStates();
+      const imgWidth = horizontal ? _this.originImageWidth : _this.originImageHeight;
+      const imgHeight = horizontal ? _this.originImageHeight : _this.originImageWidth;
       const {
-        onZoom
-      } = this.getProps();
-
-      const containerDOM = this._adapter.getContainer();
-
+        onZoom,
+        setRatio,
+        ratio
+      } = _this.getProps();
+      const containerDOM = _this._adapter.getContainer();
       if (containerDOM) {
         const {
           width: containerWidth,
           height: containerHeight
-        } = this._getContainerBounds();
-
+        } = _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, notify);
+        }
+      }
+    };
+    this.handleRatioChange = () => {
+      if (this.originImageWidth && this.originImageHeight) {
+        const {
+          currZoom
+        } = this.getStates();
+        const {
+          ratio,
+          onZoom
+        } = this.getProps();
+        let _zoom;
+        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);
+        }
       }
     };
-
     this.handleRightClickImage = e => {
       const {
         disableDownload
       } = this.getProps();
-
       if (disableDownload) {
         e.preventDefault();
         e.stopPropagation();
@@ -156,45 +157,7 @@ export default class PreviewImageFoundation extends BaseFoundation {
       } else {
         return true;
       }
-    }; // e: WheelEvent<HTMLImageElement>
-
-
-    this.handleWheel = e => {
-      this.onWheel(e);
-      handlePrevent(e);
-    }; // e: WheelEvent<HTMLImageElement>
-
-
-    this.onWheel = _throttle(e => {
-      const {
-        onZoom,
-        zoomStep,
-        maxZoom,
-        minZoom
-      } = this.getProps();
-      const {
-        currZoom
-      } = this.getStates();
-
-      let _zoom;
-
-      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);
-
+    };
     this.calcCanDragDirection = () => {
       const {
         width,
@@ -203,54 +166,39 @@ export default class PreviewImageFoundation extends BaseFoundation {
       const {
         rotation
       } = this.getProps();
-
       const {
         width: containerWidth,
         height: containerHeight
       } = this._getContainerBounds();
-
       let canDragHorizontal = width > containerWidth;
       let canDragVertical = height > containerHeight;
-
       if (this._isImageVertical()) {
         canDragHorizontal = height > containerWidth;
         canDragVertical = width > containerHeight;
       }
-
       return {
         canDragVertical,
         canDragHorizontal
       };
     };
-
-    this.handleZoomChange = (newZoom, e) => {
+    this.calculatePreviewImage = (newZoom, e) => {
       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); // debugger;
-
+      const newWidth = Math.floor(this.originImageWidth * newZoom);
+      const newHeight = Math.floor(this.originImageHeight * newZoom);
+      // debugger;
       let _offset;
-
       const horizontal = !this._isImageVertical();
       let newTop = 0;
       let newLeft = 0;
-
       if (horizontal) {
         _offset = {
           x: 0.5 * (containerWidth - newWidth),
@@ -266,7 +214,6 @@ export default class PreviewImageFoundation extends BaseFoundation {
         newLeft = _offset.x - (newWidth - newHeight) / 2;
         newTop = _offset.y + (newWidth - newHeight) / 2;
       }
-
       this.setState({
         width: newWidth,
         height: newHeight,
@@ -275,79 +222,63 @@ export default class PreviewImageFoundation extends BaseFoundation {
         top: newTop,
         currZoom: newZoom
       });
-
       if (imageDOM) {
         this._adapter.setImageCursor(canDrag);
       }
     };
-
     this.calcExtremeBounds = () => {
       const {
         width,
         height
       } = this.getStates();
-
       const {
         width: containerWidth,
         height: containerHeight
       } = this._getContainerBounds();
-
       let extremeLeft = containerWidth - width;
       let extremeTop = containerHeight - height;
-
       if (this._isImageVertical()) {
         extremeLeft = containerWidth - height;
         extremeTop = containerHeight - width;
       }
-
       return {
         left: extremeLeft,
         top: extremeTop
       };
     };
-
     this.handleMoveImage = e => {
       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;
         }
-
         if (canDragVertical) {
           newY = newY > 0 ? 0 : newY < extremeTop ? extremeTop : newY;
         }
-
         const _offset = {
           x: newX,
           y: newY
@@ -359,16 +290,8 @@ export default class PreviewImageFoundation extends BaseFoundation {
         });
       }
     };
-
     this.handleImageMouseDown = e => {
-      this._adapter.setStartMouseOffset(this._getOffset(e));
-
-      this._adapter.setStartMouseMove(true);
-    };
-
-    this.handleImageMouseUp = () => {
-      this._adapter.setStartMouseMove(false);
+      this.startMouseOffset = this._getOffset(e);
     };
   }
-
 }

package/lib/es/image/previewInnerFoundation.d.ts

@@ -1,44 +1,48 @@
+/// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+export type RatioType = "adaptation" | "realSize";
 export interface PreviewInnerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getIsInGroup: () => boolean;
     notifyChange: (index: number, direction: string) => void;
     notifyZoom: (zoom: number, increase: boolean) => void;
     notifyClose: () => void;
     notifyVisibleChange: (visible: boolean) => void;
-    notifyRatioChange: (type: string) => void;
+    notifyRatioChange: (type: RatioType) => void;
     notifyRotateChange: (angle: number) => void;
     notifyDownload: (src: string, index: number) => void;
+    notifyDownloadError: (src: string) => 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;
 }
 export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewInnerAdapter<P, S>, P, S> {
     constructor(adapter: PreviewInnerAdapter<P, S>);
+    _timer: any;
+    _startMouseDown: {
+        x: number;
+        y: number;
+    };
     beforeShow(): void;
     afterHide(): void;
-    handleRatio(type: string): void;
     handleViewVisibleChange: () => void;
-    handleMouseMoveEvent: (e: any, event: string) => void;
     handleMouseMove: (e: any) => void;
+    mouseMoveHandler: import("lodash").DebouncedFunc<(e: any) => void>;
+    updateTimer: () => void;
+    clearTimer: () => void;
+    handleWheel: (e: any) => void;
+    onWheel: (e: any) => void;
     handleMouseUp: (e: any) => void;
     handleMouseDown: (e: any) => void;
     handleKeyDown: (e: any) => void;
     handleSwitchImage: (direction: string) => void;
     handleDownload: () => void;
-    handlePreviewClose: () => void;
-    handleAdjustRatio: (type: string) => void;
+    handlePreviewClose: (e: any) => void;
+    handleAdjustRatio: (type: RatioType) => void;
     handleRotateImage: (direction: string) => void;
-    handleZoomImage: (newZoom: number) => void;
+    handleZoomImage: (newZoom: number, notify?: boolean) => void;
     preloadGapImage: () => void;
     preloadSingleImage: () => void;
     setLoadSuccessStatus: (src: string) => void;