@douyinfe/semi-foundation 2.63.0 → 2.64.0-beta.0

package/lib/es/image/previewImageFoundation.js

@@ -1,58 +1,58 @@
 import BaseFoundation from "../base/foundation";
-const DefaultDOMRect = {
-  bottom: 0,
-  height: 0,
-  left: 0,
-  right: 0,
-  top: 0,
-  width: 0,
-  x: 0,
-  y: 0,
-  toJSON: () => ({})
-};
 export default class PreviewImageFoundation extends BaseFoundation {
   constructor(adapter) {
     var _this;
     super(Object.assign({}, adapter));
     _this = this;
-    this.startMouseOffset = {
+    this.startMouseClientPosition = {
       x: 0,
       y: 0
     };
     this.originImageWidth = null;
     this.originImageHeight = null;
+    this.containerWidth = 0;
+    this.containerHeight = 0;
     this._isImageVertical = () => this.getProp("rotation") % 180 !== 0;
-    this._getImageBounds = () => {
-      const imageDOM = this._adapter.getImage();
-      if (imageDOM) {
-        return imageDOM.getBoundingClientRect();
+    this._getContainerBoundingRectSize = () => {
+      const containerDOM = this._adapter.getContainer();
+      if (containerDOM) {
+        this.containerWidth = containerDOM.clientWidth;
+        this.containerHeight = containerDOM.clientHeight;
       }
-      return DefaultDOMRect;
     };
-    this._getContainerBounds = () => {
+    this._getAdaptationZoom = () => {
+      let _zoom = 1;
       const containerDOM = this._adapter.getContainer();
-      if (containerDOM) {
-        return containerDOM.getBoundingClientRect();
+      if (containerDOM && this.originImageWidth && this.originImageHeight) {
+        const {
+          rotation
+        } = this.getProps();
+        const {
+          width: imageWidth,
+          height: imageHeight
+        } = this.calcBoundingRectSize(this.originImageWidth, this.originImageHeight, rotation);
+        const reservedWidth = this.containerWidth - 80;
+        const reservedHeight = this.containerHeight - 80;
+        _zoom = Number(Math.min(reservedWidth / imageWidth, reservedHeight / imageHeight).toFixed(2));
       }
-      return DefaultDOMRect;
+      return _zoom;
     };
-    this._getOffset = e => {
+    this._getInitialZoom = () => {
       const {
-        left,
-        top
-      } = this._getImageBounds();
-      return {
-        x: e.clientX - left,
-        y: e.clientY - top
-      };
+        ratio
+      } = this.getProps();
+      let _zoom = 1;
+      if (ratio === 'adaptation') {
+        _zoom = this._getAdaptationZoom();
+      }
+      return _zoom;
     };
     this.setLoading = loading => {
       this._adapter.setLoading(loading);
     };
     this.handleWindowResize = () => {
-      if (this.originImageWidth && this.originImageHeight) {
-        this.handleResizeImage();
-      }
+      this._getContainerBoundingRectSize();
+      this.initializeImage();
     };
     this.handleLoad = e => {
       if (e.target) {
@@ -67,7 +67,7 @@ export default class PreviewImageFoundation extends BaseFoundation {
         });
         // 图片初次加载，计算 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);
+        this.initializeImage(false);
       }
       const {
         src,
@@ -85,66 +85,36 @@ export default class PreviewImageFoundation extends BaseFoundation {
       });
       onError && onError(src);
     };
-    this.handleResizeImage = function () {
+    this.handleRatioChange = () => {
+      this.initializeImage();
+    };
+    this.initializeImageZoom = function () {
       let notify = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      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
+        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, notify);
-        }
+      const _zoom = _this._getInitialZoom();
+      if (currZoom !== _zoom) {
+        onZoom(_zoom, notify);
+      } else {
+        _this.changeZoom(_zoom);
       }
     };
-    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.initializeTranslate = () => {
+      this.setState({
+        translate: {
+          x: 0,
+          y: 0
         }
-      }
+      });
+    };
+    this.initializeImage = function () {
+      let notify = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      _this.initializeImageZoom(notify);
+      _this.initializeTranslate();
     };
     this.handleRightClickImage = e => {
       const {
@@ -158,140 +128,196 @@ export default class PreviewImageFoundation extends BaseFoundation {
         return true;
       }
     };
-    this.calcCanDragDirection = () => {
-      const {
-        width,
-        height
-      } = this.getStates();
-      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;
-      }
+    this.getCanDragDirection = (width, height) => {
+      let canDragHorizontal = width > this.containerWidth;
+      let canDragVertical = height > this.containerHeight;
       return {
         canDragVertical,
         canDragHorizontal
       };
     };
-    this.calculatePreviewImage = (newZoom, e) => {
+    this.changeZoom = (newZoom, e) => {
       const imageDOM = this._adapter.getImage();
       const {
-        canDragVertical,
-        canDragHorizontal
-      } = this.calcCanDragDirection();
-      const canDrag = canDragVertical || canDragHorizontal;
+        currZoom,
+        translate,
+        width,
+        height
+      } = this.getStates();
       const {
-        width: containerWidth,
-        height: containerHeight
-      } = this._getContainerBounds();
+        rotation
+      } = this.getProps();
+      const changeScale = newZoom / (currZoom || 1);
       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),
-          y: 0.5 * (containerHeight - newHeight)
-        };
-        newLeft = _offset.x;
-        newTop = _offset.y;
-      } else {
-        _offset = {
-          x: 0.5 * (containerWidth - newHeight),
-          y: 0.5 * (containerHeight - newWidth)
-        };
-        newLeft = _offset.x - (newWidth - newHeight) / 2;
-        newTop = _offset.y + (newWidth - newHeight) / 2;
+      let newTranslateX = Math.floor(translate.x * changeScale);
+      let newTranslateY = Math.floor(translate.y * changeScale);
+      const imageBound = this.calcBoundingRectSize(width, height, rotation);
+      const newImageBound = {
+        width: imageBound.width * changeScale,
+        height: imageBound.height * changeScale
+      };
+      if (e && imageDOM && e.target === imageDOM) {
+        const {
+          x: offsetX,
+          y: offsetY
+        } = this.calcBoundingRectMouseOffset({
+          width,
+          height,
+          offset: {
+            x: e.offsetX,
+            y: e.offsetY
+          },
+          rotation
+        });
+        const imageNewCenterX = e.clientX + (imageBound.width / 2 - offsetX) * changeScale;
+        const imageNewCenterY = e.clientY + (imageBound.height / 2 - offsetY) * changeScale;
+        const containerCenterX = this.containerWidth / 2;
+        const containerCenterY = this.containerHeight / 2;
+        newTranslateX = imageNewCenterX - containerCenterX;
+        newTranslateY = imageNewCenterY - containerCenterY;
       }
+      const newTranslate = this.getSafeTranslate(newImageBound.width, newImageBound.height, newTranslateX, newTranslateY);
       this.setState({
+        translate: newTranslate,
         width: newWidth,
         height: newHeight,
-        offset: _offset,
-        left: newLeft,
-        top: newTop,
         currZoom: newZoom
       });
       if (imageDOM) {
+        const {
+          canDragVertical,
+          canDragHorizontal
+        } = this.getCanDragDirection(newImageBound.width, newImageBound.height);
+        const canDrag = canDragVertical || canDragHorizontal;
         this._adapter.setImageCursor(canDrag);
       }
     };
-    this.calcExtremeBounds = () => {
+    this.getExtremeTranslate = (width, height) => {
+      return {
+        x: (width - this.containerWidth) / 2,
+        y: (height - this.containerHeight) / 2
+      };
+    };
+    this.getSafeTranslate = (width, height, translateX, translateY) => {
       const {
-        width,
-        height
-      } = this.getStates();
+        x: extremeX,
+        y: extremeY
+      } = this.getExtremeTranslate(width, height);
       const {
-        width: containerWidth,
-        height: containerHeight
-      } = this._getContainerBounds();
-      let extremeLeft = containerWidth - width;
-      let extremeTop = containerHeight - height;
-      if (this._isImageVertical()) {
-        extremeLeft = containerWidth - height;
-        extremeTop = containerHeight - width;
+        canDragVertical,
+        canDragHorizontal
+      } = this.getCanDragDirection(width, height);
+      let newTranslateX = 0,
+        newTranslateY = 0;
+      if (canDragHorizontal) {
+        newTranslateX = translateX > 0 ? Math.min(translateX, extremeX) : Math.max(translateX, -extremeX);
+      }
+      if (canDragVertical) {
+        newTranslateY = translateY > 0 ? Math.min(translateY, extremeY) : Math.max(translateY, -extremeY);
       }
       return {
-        left: extremeLeft,
-        top: extremeTop
+        x: newTranslateX,
+        y: newTranslateY
       };
     };
-    this.handleMoveImage = e => {
+    this.handleImageMove = e => {
+      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+      const mouseLeftPress = e.buttons === 1;
+      if (mouseLeftPress) {
+        this.moveImage(e);
+      }
+    };
+    this.moveImage = e => {
+      const {
+        clientX,
+        clientY
+      } = e;
       const {
-        offset,
         width,
-        height
+        height,
+        translate
       } = this.getStates();
+      const {
+        rotation
+      } = this.getProps();
+      const imageBound = this.calcBoundingRectSize(width, height, rotation);
       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)) {
-        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;
-        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
-        };
+      } = this.getCanDragDirection(imageBound.width, imageBound.height);
+      if (canDragVertical || canDragHorizontal) {
+        let newTranslateX = canDragHorizontal ? translate.x + clientX - this.startMouseClientPosition.x : translate.x;
+        let newTranslateY = canDragVertical ? translate.y + clientY - this.startMouseClientPosition.y : translate.y;
+        const newTranslate = this.getSafeTranslate(imageBound.width, imageBound.height, newTranslateX, newTranslateY);
         this.setState({
-          offset: _offset,
-          left: this._isImageVertical() ? _offset.x - (width - height) / 2 : _offset.x,
-          top: this._isImageVertical() ? _offset.y + (width - height) / 2 : _offset.y
+          translate: newTranslate
         });
+        this.startMouseClientPosition = {
+          x: clientX,
+          y: clientY
+        };
       }
     };
     this.handleImageMouseDown = e => {
-      this.startMouseOffset = this._getOffset(e);
+      this.startMouseClientPosition = {
+        x: e.clientX,
+        y: e.clientY
+      };
+    };
+    // 鼠标事件的 e.offset 是以 dom 旋转前左上角为零点的, 这个方法会转换为以旋转后元素的外接矩形左上角为零点的 offset
+    this.calcBoundingRectMouseOffset = calcBoundingRectMouseOffset => {
+      const {
+        width,
+        height,
+        offset,
+        rotation = 0
+      } = calcBoundingRectMouseOffset;
+      let degrees = rotation % 360;
+      degrees = degrees >= 0 ? degrees : 360 + degrees;
+      let boundOffsetX = 0,
+        boundOffsetY = 0;
+      switch (degrees) {
+        case 0:
+          boundOffsetX = offset.x;
+          boundOffsetY = offset.y;
+          break;
+        case 90:
+          boundOffsetX = height - offset.y;
+          boundOffsetY = offset.x;
+          break;
+        case 180:
+          boundOffsetX = width - offset.x;
+          boundOffsetY = height - offset.y;
+          break;
+        case 270:
+          boundOffsetX = offset.y;
+          boundOffsetY = width - offset.x;
+          break;
+        default:
+          break;
+      }
+      return {
+        x: boundOffsetX,
+        y: boundOffsetY
+      };
+    };
+  }
+  init() {
+    this._getContainerBoundingRectSize();
+  }
+  calcBoundingRectSize() {
+    let width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    let height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let rotation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    const angleInRadians = rotation * Math.PI / 180;
+    const sinTheta = Math.abs(Math.sin(angleInRadians));
+    const cosTheta = Math.abs(Math.cos(angleInRadians));
+    const boundingWidth = width * cosTheta + height * sinTheta;
+    const boundingHeight = width * sinTheta + height * cosTheta;
+    return {
+      width: boundingWidth,
+      height: boundingHeight
     };
   }
 }

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

@@ -17,6 +17,7 @@ export interface PreviewInnerAdapter<P = Record<string, any>, S = Record<string,
     enabledBodyScroll: () => void;
     getSetDownloadFunc: () => (src: string) => string;
     isValidTarget: (e: any) => boolean;
+    changeImageZoom: (zoom: number, e?: WheelEvent) => void;
 }
 export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewInnerAdapter<P, S>, P, S> {
     constructor(adapter: PreviewInnerAdapter<P, S>);
@@ -32,8 +33,8 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
     mouseMoveHandler: import("lodash").DebouncedFuncLeading<(e: any) => void>;
     updateTimer: () => void;
     clearTimer: () => void;
-    handleWheel: (e: any) => void;
-    onWheel: (e: any) => void;
+    handleWheel: (e: WheelEvent) => void;
+    onWheel: (e: WheelEvent) => void;
     handleMouseUp: (e: any) => void;
     handleMouseDown: (e: any) => void;
     handleKeyDown: (e: any) => void;
@@ -42,7 +43,7 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
     handlePreviewClose: (e: any) => void;
     handleAdjustRatio: (type: RatioType) => void;
     handleRotateImage: (direction: string) => void;
-    handleZoomImage: (newZoom: number, notify?: boolean) => void;
+    handleZoomImage: (newZoom: number, notify?: boolean, e?: WheelEvent) => void;
     preloadGapImage: () => void;
     preloadSingleImage: () => void;
     setLoadSuccessStatus: (src: string) => void;

package/lib/es/image/previewInnerFoundation.js

@@ -86,7 +86,7 @@ export default class PreviewInnerFoundation extends BaseFoundation {
         }
       }
       if (!_isUndefined(_zoom)) {
-        this.handleZoomImage(_zoom);
+        this.handleZoomImage(_zoom, true, e);
       }
     };
     this.handleMouseUp = e => {
@@ -184,7 +184,8 @@ export default class PreviewInnerFoundation extends BaseFoundation {
       const {
         rotation
       } = this.getStates();
-      const newRotation = rotation + (direction === "left" ? 90 : -90);
+      const ROTATE_STEP = 90;
+      const newRotation = rotation + (direction === "left" ? -ROTATE_STEP : ROTATE_STEP);
       this.setState({
         rotation: newRotation
       });
@@ -192,11 +193,13 @@ export default class PreviewInnerFoundation extends BaseFoundation {
     };
     this.handleZoomImage = function (newZoom) {
       let notify = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      let e = arguments.length > 2 ? arguments[2] : undefined;
       const {
         zoom
       } = _this.getStates();
       if (zoom !== newZoom) {
         notify && _this._adapter.notifyZoom(newZoom, newZoom > zoom);
+        _this._adapter.changeImageZoom(newZoom, e);
         _this.setState({
           zoom: newZoom
         });

package/lib/es/upload/foundation.d.ts

@@ -80,6 +80,7 @@ export interface UploadAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyPastingError: (error: Error | PermissionStatus) => void;
 }
 declare class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<UploadAdapter<P, S>, P, S> {
+    destroyState: boolean;
     constructor(adapter: UploadAdapter<P, S>);
     init(): void;
     destroy(): void;

package/lib/es/upload/foundation.js

@@ -43,6 +43,7 @@ const {
 class UploadFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
+    this.destroyState = false;
   }
   init() {
     const {
@@ -62,6 +63,7 @@ class UploadFoundation extends BaseFoundation {
     if (!disabled) {
       this.unbindPastingHandler();
     }
+    this.destroyState = true;
   }
   getError(_ref) {
     let {
@@ -570,22 +572,36 @@ class UploadFoundation extends BaseFoundation {
       xhr.withCredentials = true;
     }
     if (xhr.upload) {
-      xhr.upload.onprogress = e => this.handleProgress({
-        e,
-        fileInstance
-      });
+      xhr.upload.onprogress = e => {
+        if (!this.destroyState) {
+          this.handleProgress({
+            e,
+            fileInstance
+          });
+        } else {
+          xhr.abort();
+        }
+      };
     }
     // Callback function after upload is completed
-    xhr.onload = e => this.handleOnLoad({
-      e,
-      xhr,
-      fileInstance
-    });
-    xhr.onerror = e => this.handleError({
-      e,
-      xhr,
-      fileInstance
-    });
+    xhr.onload = e => {
+      if (!this.destroyState) {
+        this.handleOnLoad({
+          e,
+          xhr,
+          fileInstance
+        });
+      }
+    };
+    xhr.onerror = e => {
+      if (!this.destroyState) {
+        this.handleError({
+          e,
+          xhr,
+          fileInstance
+        });
+      }
+    };
     // add headers
     let headers = option.headers || {};
     if (typeof headers === 'function') {

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.63.0",
+    "version": "2.64.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.63.0",
+        "@douyinfe/semi-animation": "2.64.0-beta.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -28,7 +28,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "1016b6bee4b1837a3971d3c446132b1f49adff08",
+    "gitHead": "57ca3b4704969aa7ea94d4b1ec7d45024ecd61d6",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",