1

2026-05-25 17:08:18 +08:00
parent df501f6151
commit f1259b71b5
9178 changed files with 1626125 additions and 0 deletions
@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useImageTransform;
+var _util = require("../util");
+var _isEqual = _interopRequireDefault(require("@rc-component/util/lib/isEqual"));
+var _raf = _interopRequireDefault(require("@rc-component/util/lib/raf"));
+var _react = require("react");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const initialTransform = {
+  x: 0,
+  y: 0,
+  rotate: 0,
+  scale: 1,
+  flipX: false,
+  flipY: false
+};
+function useImageTransform(imgRef, minScale, maxScale, onTransform) {
+  const frame = (0, _react.useRef)(null);
+  const queue = (0, _react.useRef)([]);
+  const [transform, setTransform] = (0, _react.useState)(initialTransform);
+  const resetTransform = action => {
+    setTransform(initialTransform);
+    if (!(0, _isEqual.default)(initialTransform, transform)) {
+      onTransform?.({
+        transform: initialTransform,
+        action
+      });
+    }
+  };
+
+  /** Direct update transform */
+  const updateTransform = (newTransform, action) => {
+    if (frame.current === null) {
+      queue.current = [];
+      frame.current = (0, _raf.default)(() => {
+        setTransform(preState => {
+          let memoState = preState;
+          queue.current.forEach(queueState => {
+            memoState = {
+              ...memoState,
+              ...queueState
+            };
+          });
+          frame.current = null;
+          onTransform?.({
+            transform: memoState,
+            action
+          });
+          return memoState;
+        });
+      });
+    }
+    queue.current.push({
+      ...transform,
+      ...newTransform
+    });
+  };
+
+  /** Scale according to the position of centerX and centerY */
+  const dispatchZoomChange = (ratio, action, centerX, centerY, isTouch) => {
+    const {
+      width,
+      height,
+      offsetWidth,
+      offsetHeight,
+      offsetLeft,
+      offsetTop
+    } = imgRef.current;
+    let newRatio = ratio;
+    let newScale = transform.scale * ratio;
+    if (newScale > maxScale) {
+      newScale = maxScale;
+      newRatio = maxScale / transform.scale;
+    } else if (newScale < minScale) {
+      // For mobile interactions, allow scaling down to the minimum scale.
+      newScale = isTouch ? newScale : minScale;
+      newRatio = newScale / transform.scale;
+    }
+
+    /** Default center point scaling */
+    const mergedCenterX = centerX ?? innerWidth / 2;
+    const mergedCenterY = centerY ?? innerHeight / 2;
+    const diffRatio = newRatio - 1;
+    /** Deviation calculated from image size */
+    const diffImgX = diffRatio * width * 0.5;
+    const diffImgY = diffRatio * height * 0.5;
+    /** The difference between the click position and the edge of the document */
+    const diffOffsetLeft = diffRatio * (mergedCenterX - transform.x - offsetLeft);
+    const diffOffsetTop = diffRatio * (mergedCenterY - transform.y - offsetTop);
+    /** Final positioning */
+    let newX = transform.x - (diffOffsetLeft - diffImgX);
+    let newY = transform.y - (diffOffsetTop - diffImgY);
+
+    /**
+     * When zooming the image
+     * When the image size is smaller than the width and height of the window, the position is initialized
+     */
+    if (ratio < 1 && newScale === 1) {
+      const mergedWidth = offsetWidth * newScale;
+      const mergedHeight = offsetHeight * newScale;
+      const {
+        width: clientWidth,
+        height: clientHeight
+      } = (0, _util.getClientSize)();
+      if (mergedWidth <= clientWidth && mergedHeight <= clientHeight) {
+        newX = 0;
+        newY = 0;
+      }
+    }
+    updateTransform({
+      x: newX,
+      y: newY,
+      scale: newScale
+    }, action);
+  };
+  return {
+    transform,
+    resetTransform,
+    updateTransform,
+    dispatchZoomChange
+  };
+}