rc-image - npm Package Compare versions

Comparing version 5.12.2 to 5.13.0

es/Preview.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
@@ -3,0 +3,0 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {

es/Preview.js

@@ -7,6 +7,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var _excluded = ["prefixCls", "src", "alt", "onClose", "afterClose", "visible", "icons", "rootClassName", "getContainer", "countRender", "scaleStep", "transitionName", "maskTransitionName"];
-import * as React from 'react';
-import Portal from '@rc-component/portal';
+import React, { useState, useEffect, useCallback, useRef, useContext } from 'react';
 import Dialog from 'rc-dialog';
-import CSSMotion from 'rc-motion';
 import classnames from 'classnames';
@@ -16,18 +14,9 @@ import addEventListener from "rc-util/es/Dom/addEventListener";
 import { warning } from "rc-util/es/warning";
-import useFrameSetState from "./hooks/useFrameSetState";
+import { context } from "./PreviewGroup";
+import Operations from "./Operations";
+import useImageTransform from "./hooks/useImageTransform";
 import getFixScaleEleTransPosition from "./getFixScaleEleTransPosition";
-import { context } from "./PreviewGroup";
-var useState = React.useState,
-    useEffect = React.useEffect,
-    useCallback = React.useCallback,
-    useRef = React.useRef,
-    useContext = React.useContext;
-var initialPosition = {
-  x: 0,
-  y: 0
-};
+import { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from "./previewConfig";
 
 var Preview = function Preview(props) {
-  var _countRender;
-
   var prefixCls = props.prefixCls,
@@ -52,37 +41,14 @@ src = props.src,
 
-  var rotateLeft = icons.rotateLeft,
-      rotateRight = icons.rotateRight,
-      zoomIn = icons.zoomIn,
-      zoomOut = icons.zoomOut,
-      close = icons.close,
-      left = icons.left,
-      right = icons.right;
-
-  var _useState = useState(1),
-      _useState2 = _slicedToArray(_useState, 2),
-      scale = _useState2[0],
-      setScale = _useState2[1];
-
-  var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      rotate = _useState4[0],
-      setRotate = _useState4[1];
-
-  var _useFrameSetState = useFrameSetState(initialPosition),
-      _useFrameSetState2 = _slicedToArray(_useFrameSetState, 2),
-      position = _useFrameSetState2[0],
-      setPosition = _useFrameSetState2[1];
-
   var imgRef = useRef();
-  var originPositionRef = useRef({
-    originX: 0,
-    originY: 0,
+  var downPositionRef = useRef({
     deltaX: 0,
-    deltaY: 0
+    deltaY: 0,
+    transformX: 0,
+    transformY: 0
   });
 
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isMoving = _useState6[0],
-      setMoving = _useState6[1];
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMoving = _useState2[0],
+      setMoving = _useState2[1];
 
@@ -102,35 +68,27 @@ var _useContext = useContext(context),
 
-  var _useState7 = useState({
-    wheelDirection: 0
-  }),
-      _useState8 = _slicedToArray(_useState7, 2),
-      lastWheelZoomDirection = _useState8[0],
-      setLastWheelZoomDirection = _useState8[1];
+  var _useImageTransform = useImageTransform(imgRef),
+      transform = _useImageTransform.transform,
+      resetTransform = _useImageTransform.resetTransform,
+      updateTransform = _useImageTransform.updateTransform,
+      dispatchZoonChange = _useImageTransform.dispatchZoonChange;
 
+  var rotate = transform.rotate,
+      scale = transform.scale;
+  var wrapClassName = classnames(_defineProperty({}, "".concat(prefixCls, "-moving"), isMoving));
+
   var onAfterClose = function onAfterClose() {
-    setScale(1);
-    setRotate(0);
-    setPosition(initialPosition);
+    resetTransform();
   };
 
   var onZoomIn = function onZoomIn() {
-    setScale(function (value) {
-      return value + scaleStep;
-    });
-    setPosition(initialPosition);
+    dispatchZoonChange(BASE_SCALE_RATIO + scaleStep);
   };
 
   var onZoomOut = function onZoomOut() {
-    if (scale > 1) {
-      setScale(function (value) {
-        return value - scaleStep;
-      });
-    }
-
-    setPosition(initialPosition);
+    dispatchZoonChange(BASE_SCALE_RATIO - scaleStep);
   };
 
   var onRotateRight = function onRotateRight() {
-    setRotate(function (value) {
-      return value + 90;
+    updateTransform({
+      rotate: rotate + 90
     });
@@ -140,4 +98,4 @@ };
   var onRotateLeft = function onRotateLeft() {
-    setRotate(function (value) {
-      return value - 90;
+    updateTransform({
+      rotate: rotate - 90
     });
@@ -147,4 +105,3 @@ };
   var onSwitchLeft = function onSwitchLeft(event) {
-    event.preventDefault(); // Without this mask close will abnormal
-
+    event.preventDefault();
     event.stopPropagation();
@@ -158,4 +115,3 @@
   var onSwitchRight = function onSwitchRight(event) {
-    event.preventDefault(); // Without this mask close will abnormal
-
+    event.preventDefault();
     event.stopPropagation();
@@ -168,30 +124,16 @@
 
-  var wrapClassName = classnames(_defineProperty({}, "".concat(prefixCls, "-moving"), isMoving));
-  var toolClassName = "".concat(prefixCls, "-operations-operation");
-  var iconClassName = "".concat(prefixCls, "-operations-icon");
-  var tools = [{
-    icon: close,
-    onClick: onClose,
-    type: 'close'
-  }, {
-    icon: zoomIn,
-    onClick: onZoomIn,
-    type: 'zoomIn'
-  }, {
-    icon: zoomOut,
-    onClick: onZoomOut,
-    type: 'zoomOut',
-    disabled: scale === 1
-  }, {
-    icon: rotateRight,
-    onClick: onRotateRight,
-    type: 'rotateRight'
-  }, {
-    icon: rotateLeft,
-    onClick: onRotateLeft,
-    type: 'rotateLeft'
-  }];
-
   var onMouseUp = function onMouseUp() {
     if (visible && isMoving) {
+      setMoving(false);
+      /** No need to restore the position when the picture is not moved, So as not to interfere with the click */
+
+      var _downPositionRef$curr = downPositionRef.current,
+          transformX = _downPositionRef$curr.transformX,
+          transformY = _downPositionRef$curr.transformY;
+      var hasChangedPosition = transform.x !== transformX && transform.y !== transformY;
+
+      if (!hasChangedPosition) {
+        return;
+      }
+
       var width = imgRef.current.offsetWidth * scale;
@@ -201,11 +143,10 @@ var height = imgRef.current.offsetHeight * scale; // eslint-disable-next-line @typescript-eslint/no-shadow
       var _imgRef$current$getBo = imgRef.current.getBoundingClientRect(),
-          _left = _imgRef$current$getBo.left,
+          left = _imgRef$current$getBo.left,
           top = _imgRef$current$getBo.top;
 
       var isRotate = rotate % 180 !== 0;
-      setMoving(false);
-      var fixState = getFixScaleEleTransPosition(isRotate ? height : width, isRotate ? width : height, _left, top);
+      var fixState = getFixScaleEleTransPosition(isRotate ? height : width, isRotate ? width : height, left, top);
 
       if (fixState) {
-        setPosition(_objectSpread({}, fixState));
+        updateTransform(_objectSpread({}, fixState));
       }
@@ -218,9 +159,10 @@ }
     if (event.button !== 0) return;
-    event.preventDefault(); // Without this mask close will abnormal
-
+    event.preventDefault();
     event.stopPropagation();
-    originPositionRef.current.deltaX = event.pageX - position.x;
-    originPositionRef.current.deltaY = event.pageY - position.y;
-    originPositionRef.current.originX = position.x;
-    originPositionRef.current.originY = position.y;
+    downPositionRef.current = {
+      deltaX: event.pageX - transform.x,
+      deltaY: event.pageY - transform.y,
+      transformX: transform.x,
+      transformY: transform.y
+    };
     setMoving(true);
@@ -231,5 +173,5 @@ };
     if (visible && isMoving) {
-      setPosition({
-        x: event.pageX - originPositionRef.current.deltaX,
-        y: event.pageY - originPositionRef.current.deltaY
+      updateTransform({
+        x: event.pageX - downPositionRef.current.deltaX,
+        y: event.pageY - downPositionRef.current.deltaY
       });
@@ -239,9 +181,16 @@ }
 
-  var onWheelMove = function onWheelMove(event) {
-    if (!visible) return;
-    event.preventDefault();
-    var wheelDirection = event.deltaY;
-    setLastWheelZoomDirection({
-      wheelDirection: wheelDirection
-    });
+  var onWheel = function onWheel(event) {
+    if (!visible || event.deltaY == 0) return; // Scale ratio depends on the deltaY size
+
+    var scaleRatio = Math.abs(event.deltaY / 100); // Limit the maximum scale ratio
+
+    var mergedScaleRatio = Math.min(scaleRatio, WHEEL_MAX_SCALE_RATIO); // Scale the ratio each time
+
+    var ratio = BASE_SCALE_RATIO + mergedScaleRatio * scaleStep;
+
+    if (event.deltaY > 0) {
+      ratio = BASE_SCALE_RATIO / ratio;
+    }
+
+    dispatchZoonChange(ratio, event.clientX, event.clientY);
   };
@@ -263,11 +212,13 @@
 
-  var onDoubleClick = function onDoubleClick() {
+  var onDoubleClick = function onDoubleClick(event) {
     if (visible) {
       if (scale !== 1) {
-        setScale(1);
+        updateTransform({
+          x: 0,
+          y: 0,
+          scale: 1
+        });
+      } else {
+        dispatchZoonChange(BASE_SCALE_RATIO + scaleStep, event.clientX, event.clientY);
       }
-
-      if (position.x !== initialPosition.x || position.y !== initialPosition.y) {
-        setPosition(initialPosition);
-      }
     }
@@ -277,11 +228,2 @@ };
   useEffect(function () {
-    var wheelDirection = lastWheelZoomDirection.wheelDirection;
-
-    if (wheelDirection > 0) {
-      onZoomOut();
-    } else if (wheelDirection < 0) {
-      onZoomIn();
-    }
-  }, [lastWheelZoomDirection]);
-  useEffect(function () {
     var onTopMouseUpListener;
@@ -291,5 +233,2 @@ var onTopMouseMoveListener;
     var onMouseMoveListener = addEventListener(window, 'mousemove', onMouseMove, false);
-    var onScrollWheelListener = addEventListener(window, 'wheel', onWheelMove, {
-      passive: false
-    });
     var onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false);
@@ -315,3 +254,2 @@
       onMouseMoveListener.remove();
-      onScrollWheelListener.remove();
       onKeyDownListener.remove();
@@ -326,27 +264,2 @@ /* istanbul ignore next */
   }, [visible, isMoving, onKeyDown]);
-  var operations = /*#__PURE__*/React.createElement(React.Fragment, null, showLeftOrRightSwitches && /*#__PURE__*/React.createElement("div", {
-    className: classnames("".concat(prefixCls, "-switch-left"), _defineProperty({}, "".concat(prefixCls, "-switch-left-disabled"), currentPreviewIndex === 0)),
-    onClick: onSwitchLeft
-  }, left), showLeftOrRightSwitches && /*#__PURE__*/React.createElement("div", {
-    className: classnames("".concat(prefixCls, "-switch-right"), _defineProperty({}, "".concat(prefixCls, "-switch-right-disabled"), currentPreviewIndex === previewGroupCount - 1)),
-    onClick: onSwitchRight
-  }, right), /*#__PURE__*/React.createElement("ul", {
-    className: "".concat(prefixCls, "-operations")
-  }, showOperationsProgress && /*#__PURE__*/React.createElement("li", {
-    className: "".concat(prefixCls, "-operations-progress")
-  }, (_countRender = countRender === null || countRender === void 0 ? void 0 : countRender(currentPreviewIndex + 1, previewGroupCount)) !== null && _countRender !== void 0 ? _countRender : "".concat(currentPreviewIndex + 1, " / ").concat(previewGroupCount)), tools.map(function (_ref) {
-    var _classnames4;
-
-    var icon = _ref.icon,
-        onClick = _ref.onClick,
-        type = _ref.type,
-        disabled = _ref.disabled;
-    return /*#__PURE__*/React.createElement("li", {
-      className: classnames(toolClassName, (_classnames4 = {}, _defineProperty(_classnames4, "".concat(prefixCls, "-operations-operation-").concat(type), true), _defineProperty(_classnames4, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled), _classnames4)),
-      onClick: onClick,
-      key: type
-    }, /*#__PURE__*/React.isValidElement(icon) ? /*#__PURE__*/React.cloneElement(icon, {
-      className: iconClassName
-    }) : icon);
-  })));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog, _extends({
@@ -365,9 +278,7 @@ transitionName: transitionName,
   }, restProps), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-img-wrapper"),
-    style: {
-      transform: "translate3d(".concat(position.x, "px, ").concat(position.y, "px, 0)")
-    }
+    className: "".concat(prefixCls, "-img-wrapper")
   }, /*#__PURE__*/React.createElement("img", {
     width: props.width,
     height: props.height,
+    onWheel: onWheel,
     onMouseDown: onMouseDown,
@@ -380,17 +291,24 @@ onDoubleClick: onDoubleClick,
     style: {
-      transform: "scale3d(".concat(scale, ", ").concat(scale, ", 1) rotate(").concat(rotate, "deg)")
+      transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0) scale3d(").concat(scale, ", ").concat(scale, ", 1) rotate(").concat(rotate, "deg)")
     }
-  }))), /*#__PURE__*/React.createElement(CSSMotion, {
+  }))), /*#__PURE__*/React.createElement(Operations, {
     visible: visible,
-    motionName: maskTransitionName
-  }, function (_ref2) {
-    var className = _ref2.className,
-        style = _ref2.style;
-    return /*#__PURE__*/React.createElement(Portal, {
-      open: true,
-      getContainer: getContainer !== null && getContainer !== void 0 ? getContainer : document.body
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classnames("".concat(prefixCls, "-operations-wrapper"), className, rootClassName),
-      style: style
-    }, operations));
+    maskTransitionName: maskTransitionName,
+    getContainer: getContainer,
+    prefixCls: prefixCls,
+    rootClassName: rootClassName,
+    icons: icons,
+    countRender: countRender,
+    showSwitch: showLeftOrRightSwitches,
+    showProgress: showOperationsProgress,
+    current: currentPreviewIndex,
+    count: previewGroupCount,
+    scale: scale,
+    onSwitchLeft: onSwitchLeft,
+    onSwitchRight: onSwitchRight,
+    onZoomIn: onZoomIn,
+    onZoomOut: onZoomOut,
+    onRotateRight: onRotateRight,
+    onRotateLeft: onRotateLeft,
+    onClose: onClose
   }));
@@ -397,0 +315,0 @@ };

lib/Preview.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
@@ -3,0 +3,0 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {

lib/Preview.js

@@ -22,12 +22,8 @@ "use strict";
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _portal = _interopRequireDefault(require("@rc-component/portal"));
-
 var _rcDialog = _interopRequireDefault(require("rc-dialog"));
 
-var _rcMotion = _interopRequireDefault(require("rc-motion"));
+var _classnames2 = _interopRequireDefault(require("classnames"));
 
-var _classnames5 = _interopRequireDefault(require("classnames"));
-
 var _addEventListener = _interopRequireDefault(require("rc-util/lib/Dom/addEventListener"));
@@ -39,7 +35,11 @@
 
-var _useFrameSetState3 = _interopRequireDefault(require("./hooks/useFrameSetState"));
+var _PreviewGroup = require("./PreviewGroup");
 
+var _Operations = _interopRequireDefault(require("./Operations"));
+
+var _useImageTransform2 = _interopRequireDefault(require("./hooks/useImageTransform"));
+
 var _getFixScaleEleTransPosition = _interopRequireDefault(require("./getFixScaleEleTransPosition"));
 
-var _PreviewGroup = require("./PreviewGroup");
+var _previewConfig = require("./previewConfig");
 
@@ -52,15 +52,3 @@ var _excluded = ["prefixCls", "src", "alt", "onClose", "afterClose", "visible", "icons", "rootClassName", "getContainer", "countRender", "scaleStep", "transitionName", "maskTransitionName"];
 
-var useState = React.useState,
-    useEffect = React.useEffect,
-    useCallback = React.useCallback,
-    useRef = React.useRef,
-    useContext = React.useContext;
-var initialPosition = {
-  x: 0,
-  y: 0
-};
-
 var Preview = function Preview(props) {
-  var _countRender;
-
   var prefixCls = props.prefixCls,
@@ -84,39 +72,16 @@ src = props.src,
       restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var rotateLeft = icons.rotateLeft,
-      rotateRight = icons.rotateRight,
-      zoomIn = icons.zoomIn,
-      zoomOut = icons.zoomOut,
-      close = icons.close,
-      left = icons.left,
-      right = icons.right;
-
-  var _useState = useState(1),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      scale = _useState2[0],
-      setScale = _useState2[1];
-
-  var _useState3 = useState(0),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      rotate = _useState4[0],
-      setRotate = _useState4[1];
-
-  var _useFrameSetState = (0, _useFrameSetState3.default)(initialPosition),
-      _useFrameSetState2 = (0, _slicedToArray2.default)(_useFrameSetState, 2),
-      position = _useFrameSetState2[0],
-      setPosition = _useFrameSetState2[1];
-
-  var imgRef = useRef();
-  var originPositionRef = useRef({
-    originX: 0,
-    originY: 0,
+  var imgRef = (0, _react.useRef)();
+  var downPositionRef = (0, _react.useRef)({
     deltaX: 0,
-    deltaY: 0
+    deltaY: 0,
+    transformX: 0,
+    transformY: 0
   });
 
-  var _useState5 = useState(false),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isMoving = _useState6[0],
-      setMoving = _useState6[1];
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isMoving = _useState2[0],
+      setMoving = _useState2[1];
 
-  var _useContext = useContext(_PreviewGroup.context),
+  var _useContext = (0, _react.useContext)(_PreviewGroup.context),
       previewUrls = _useContext.previewUrls,
@@ -134,35 +99,27 @@ current = _useContext.current,
 
-  var _useState7 = useState({
-    wheelDirection: 0
-  }),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      lastWheelZoomDirection = _useState8[0],
-      setLastWheelZoomDirection = _useState8[1];
+  var _useImageTransform = (0, _useImageTransform2.default)(imgRef),
+      transform = _useImageTransform.transform,
+      resetTransform = _useImageTransform.resetTransform,
+      updateTransform = _useImageTransform.updateTransform,
+      dispatchZoonChange = _useImageTransform.dispatchZoonChange;
 
+  var rotate = transform.rotate,
+      scale = transform.scale;
+  var wrapClassName = (0, _classnames2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-moving"), isMoving));
+
   var onAfterClose = function onAfterClose() {
-    setScale(1);
-    setRotate(0);
-    setPosition(initialPosition);
+    resetTransform();
   };
 
   var onZoomIn = function onZoomIn() {
-    setScale(function (value) {
-      return value + scaleStep;
-    });
-    setPosition(initialPosition);
+    dispatchZoonChange(_previewConfig.BASE_SCALE_RATIO + scaleStep);
   };
 
   var onZoomOut = function onZoomOut() {
-    if (scale > 1) {
-      setScale(function (value) {
-        return value - scaleStep;
-      });
-    }
-
-    setPosition(initialPosition);
+    dispatchZoonChange(_previewConfig.BASE_SCALE_RATIO - scaleStep);
   };
 
   var onRotateRight = function onRotateRight() {
-    setRotate(function (value) {
-      return value + 90;
+    updateTransform({
+      rotate: rotate + 90
     });
@@ -172,4 +129,4 @@ };
   var onRotateLeft = function onRotateLeft() {
-    setRotate(function (value) {
-      return value - 90;
+    updateTransform({
+      rotate: rotate - 90
     });
@@ -179,4 +136,3 @@ };
   var onSwitchLeft = function onSwitchLeft(event) {
-    event.preventDefault(); // Without this mask close will abnormal
-
+    event.preventDefault();
     event.stopPropagation();
@@ -190,4 +146,3 @@
   var onSwitchRight = function onSwitchRight(event) {
-    event.preventDefault(); // Without this mask close will abnormal
-
+    event.preventDefault();
     event.stopPropagation();
@@ -200,30 +155,16 @@
 
-  var wrapClassName = (0, _classnames5.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-moving"), isMoving));
-  var toolClassName = "".concat(prefixCls, "-operations-operation");
-  var iconClassName = "".concat(prefixCls, "-operations-icon");
-  var tools = [{
-    icon: close,
-    onClick: onClose,
-    type: 'close'
-  }, {
-    icon: zoomIn,
-    onClick: onZoomIn,
-    type: 'zoomIn'
-  }, {
-    icon: zoomOut,
-    onClick: onZoomOut,
-    type: 'zoomOut',
-    disabled: scale === 1
-  }, {
-    icon: rotateRight,
-    onClick: onRotateRight,
-    type: 'rotateRight'
-  }, {
-    icon: rotateLeft,
-    onClick: onRotateLeft,
-    type: 'rotateLeft'
-  }];
-
   var onMouseUp = function onMouseUp() {
     if (visible && isMoving) {
+      setMoving(false);
+      /** No need to restore the position when the picture is not moved, So as not to interfere with the click */
+
+      var _downPositionRef$curr = downPositionRef.current,
+          transformX = _downPositionRef$curr.transformX,
+          transformY = _downPositionRef$curr.transformY;
+      var hasChangedPosition = transform.x !== transformX && transform.y !== transformY;
+
+      if (!hasChangedPosition) {
+        return;
+      }
+
       var width = imgRef.current.offsetWidth * scale;
@@ -233,11 +174,10 @@ var height = imgRef.current.offsetHeight * scale; // eslint-disable-next-line @typescript-eslint/no-shadow
       var _imgRef$current$getBo = imgRef.current.getBoundingClientRect(),
-          _left = _imgRef$current$getBo.left,
+          left = _imgRef$current$getBo.left,
           top = _imgRef$current$getBo.top;
 
       var isRotate = rotate % 180 !== 0;
-      setMoving(false);
-      var fixState = (0, _getFixScaleEleTransPosition.default)(isRotate ? height : width, isRotate ? width : height, _left, top);
+      var fixState = (0, _getFixScaleEleTransPosition.default)(isRotate ? height : width, isRotate ? width : height, left, top);
 
       if (fixState) {
-        setPosition((0, _objectSpread2.default)({}, fixState));
+        updateTransform((0, _objectSpread2.default)({}, fixState));
       }
@@ -250,9 +190,10 @@ }
     if (event.button !== 0) return;
-    event.preventDefault(); // Without this mask close will abnormal
-
+    event.preventDefault();
     event.stopPropagation();
-    originPositionRef.current.deltaX = event.pageX - position.x;
-    originPositionRef.current.deltaY = event.pageY - position.y;
-    originPositionRef.current.originX = position.x;
-    originPositionRef.current.originY = position.y;
+    downPositionRef.current = {
+      deltaX: event.pageX - transform.x,
+      deltaY: event.pageY - transform.y,
+      transformX: transform.x,
+      transformY: transform.y
+    };
     setMoving(true);
@@ -263,5 +204,5 @@ };
     if (visible && isMoving) {
-      setPosition({
-        x: event.pageX - originPositionRef.current.deltaX,
-        y: event.pageY - originPositionRef.current.deltaY
+      updateTransform({
+        x: event.pageX - downPositionRef.current.deltaX,
+        y: event.pageY - downPositionRef.current.deltaY
       });
@@ -271,12 +212,19 @@ }
 
-  var onWheelMove = function onWheelMove(event) {
-    if (!visible) return;
-    event.preventDefault();
-    var wheelDirection = event.deltaY;
-    setLastWheelZoomDirection({
-      wheelDirection: wheelDirection
-    });
+  var onWheel = function onWheel(event) {
+    if (!visible || event.deltaY == 0) return; // Scale ratio depends on the deltaY size
+
+    var scaleRatio = Math.abs(event.deltaY / 100); // Limit the maximum scale ratio
+
+    var mergedScaleRatio = Math.min(scaleRatio, _previewConfig.WHEEL_MAX_SCALE_RATIO); // Scale the ratio each time
+
+    var ratio = _previewConfig.BASE_SCALE_RATIO + mergedScaleRatio * scaleStep;
+
+    if (event.deltaY > 0) {
+      ratio = _previewConfig.BASE_SCALE_RATIO / ratio;
+    }
+
+    dispatchZoonChange(ratio, event.clientX, event.clientY);
   };
 
-  var onKeyDown = useCallback(function (event) {
+  var onKeyDown = (0, _react.useCallback)(function (event) {
     if (!visible || !showLeftOrRightSwitches) return;
@@ -295,24 +243,17 @@
 
-  var onDoubleClick = function onDoubleClick() {
+  var onDoubleClick = function onDoubleClick(event) {
     if (visible) {
       if (scale !== 1) {
-        setScale(1);
+        updateTransform({
+          x: 0,
+          y: 0,
+          scale: 1
+        });
+      } else {
+        dispatchZoonChange(_previewConfig.BASE_SCALE_RATIO + scaleStep, event.clientX, event.clientY);
       }
-
-      if (position.x !== initialPosition.x || position.y !== initialPosition.y) {
-        setPosition(initialPosition);
-      }
     }
   };
 
-  useEffect(function () {
-    var wheelDirection = lastWheelZoomDirection.wheelDirection;
-
-    if (wheelDirection > 0) {
-      onZoomOut();
-    } else if (wheelDirection < 0) {
-      onZoomIn();
-    }
-  }, [lastWheelZoomDirection]);
-  useEffect(function () {
+  (0, _react.useEffect)(function () {
     var onTopMouseUpListener;
@@ -322,5 +263,2 @@ var onTopMouseMoveListener;
     var onMouseMoveListener = (0, _addEventListener.default)(window, 'mousemove', onMouseMove, false);
-    var onScrollWheelListener = (0, _addEventListener.default)(window, 'wheel', onWheelMove, {
-      passive: false
-    });
     var onKeyDownListener = (0, _addEventListener.default)(window, 'keydown', onKeyDown, false);
@@ -346,3 +284,2 @@
       onMouseMoveListener.remove();
-      onScrollWheelListener.remove();
       onKeyDownListener.remove();
@@ -357,28 +294,3 @@ /* istanbul ignore next */
   }, [visible, isMoving, onKeyDown]);
-  var operations = /*#__PURE__*/React.createElement(React.Fragment, null, showLeftOrRightSwitches && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames5.default)("".concat(prefixCls, "-switch-left"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-left-disabled"), currentPreviewIndex === 0)),
-    onClick: onSwitchLeft
-  }, left), showLeftOrRightSwitches && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames5.default)("".concat(prefixCls, "-switch-right"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-right-disabled"), currentPreviewIndex === previewGroupCount - 1)),
-    onClick: onSwitchRight
-  }, right), /*#__PURE__*/React.createElement("ul", {
-    className: "".concat(prefixCls, "-operations")
-  }, showOperationsProgress && /*#__PURE__*/React.createElement("li", {
-    className: "".concat(prefixCls, "-operations-progress")
-  }, (_countRender = countRender === null || countRender === void 0 ? void 0 : countRender(currentPreviewIndex + 1, previewGroupCount)) !== null && _countRender !== void 0 ? _countRender : "".concat(currentPreviewIndex + 1, " / ").concat(previewGroupCount)), tools.map(function (_ref) {
-    var _classnames4;
-
-    var icon = _ref.icon,
-        onClick = _ref.onClick,
-        type = _ref.type,
-        disabled = _ref.disabled;
-    return /*#__PURE__*/React.createElement("li", {
-      className: (0, _classnames5.default)(toolClassName, (_classnames4 = {}, (0, _defineProperty2.default)(_classnames4, "".concat(prefixCls, "-operations-operation-").concat(type), true), (0, _defineProperty2.default)(_classnames4, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled), _classnames4)),
-      onClick: onClick,
-      key: type
-    }, /*#__PURE__*/React.isValidElement(icon) ? /*#__PURE__*/React.cloneElement(icon, {
-      className: iconClassName
-    }) : icon);
-  })));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_rcDialog.default, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_rcDialog.default, (0, _extends2.default)({
     transitionName: transitionName,
@@ -395,10 +307,8 @@ maskTransitionName: maskTransitionName,
     getContainer: getContainer
-  }, restProps), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-img-wrapper"),
-    style: {
-      transform: "translate3d(".concat(position.x, "px, ").concat(position.y, "px, 0)")
-    }
-  }, /*#__PURE__*/React.createElement("img", {
+  }, restProps), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-img-wrapper")
+  }, /*#__PURE__*/_react.default.createElement("img", {
     width: props.width,
     height: props.height,
+    onWheel: onWheel,
     onMouseDown: onMouseDown,
@@ -411,17 +321,24 @@ onDoubleClick: onDoubleClick,
     style: {
-      transform: "scale3d(".concat(scale, ", ").concat(scale, ", 1) rotate(").concat(rotate, "deg)")
+      transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0) scale3d(").concat(scale, ", ").concat(scale, ", 1) rotate(").concat(rotate, "deg)")
     }
-  }))), /*#__PURE__*/React.createElement(_rcMotion.default, {
+  }))), /*#__PURE__*/_react.default.createElement(_Operations.default, {
     visible: visible,
-    motionName: maskTransitionName
-  }, function (_ref2) {
-    var className = _ref2.className,
-        style = _ref2.style;
-    return /*#__PURE__*/React.createElement(_portal.default, {
-      open: true,
-      getContainer: getContainer !== null && getContainer !== void 0 ? getContainer : document.body
-    }, /*#__PURE__*/React.createElement("div", {
-      className: (0, _classnames5.default)("".concat(prefixCls, "-operations-wrapper"), className, rootClassName),
-      style: style
-    }, operations));
+    maskTransitionName: maskTransitionName,
+    getContainer: getContainer,
+    prefixCls: prefixCls,
+    rootClassName: rootClassName,
+    icons: icons,
+    countRender: countRender,
+    showSwitch: showLeftOrRightSwitches,
+    showProgress: showOperationsProgress,
+    current: currentPreviewIndex,
+    count: previewGroupCount,
+    scale: scale,
+    onSwitchLeft: onSwitchLeft,
+    onSwitchRight: onSwitchRight,
+    onZoomIn: onZoomIn,
+    onZoomOut: onZoomOut,
+    onRotateRight: onRotateRight,
+    onRotateLeft: onRotateLeft,
+    onClose: onClose
   }));
@@ -428,0 +345,0 @@ };

package.json

 {
   "name": "rc-image",
-  "version": "5.12.2",
+  "version": "5.13.0",
   "description": "React easy to use image component",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

105590

increased by12.13%

Number of package files

36

increased by28.57%

Lines of code

2446

increased by12.98%

No dependency changes