amis-rpc-design/node_modules/rc-image/lib/hooks/useImageTransform.js
2023-10-07 19:42:30 +08:00

121 lines
4.4 KiB
JavaScript

"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = useImageTransform;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _css = require("rc-util/lib/Dom/css");
var _isEqual = _interopRequireDefault(require("rc-util/lib/isEqual"));
var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
var _react = require("react");
var initialTransform = {
x: 0,
y: 0,
rotate: 0,
scale: 1,
flipX: false,
flipY: false
};
function useImageTransform(imgRef, minScale, maxScale, onTransform) {
var frame = (0, _react.useRef)(null);
var queue = (0, _react.useRef)([]);
var _useState = (0, _react.useState)(initialTransform),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
transform = _useState2[0],
setTransform = _useState2[1];
var resetTransform = function resetTransform(action) {
setTransform(initialTransform);
if (onTransform && !(0, _isEqual.default)(initialTransform, transform)) {
onTransform({
transform: initialTransform,
action: action
});
}
};
/** Direct update transform */
var updateTransform = function updateTransform(newTransform, action) {
if (frame.current === null) {
queue.current = [];
frame.current = (0, _raf.default)(function () {
setTransform(function (preState) {
var memoState = preState;
queue.current.forEach(function (queueState) {
memoState = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, memoState), queueState);
});
frame.current = null;
onTransform === null || onTransform === void 0 ? void 0 : onTransform({
transform: memoState,
action: action
});
return memoState;
});
});
}
queue.current.push((0, _objectSpread2.default)((0, _objectSpread2.default)({}, transform), newTransform));
};
/** Scale according to the position of clientX and clientY */
var dispatchZoomChange = function dispatchZoomChange(ratio, action, clientX, clientY) {
var _imgRef$current = imgRef.current,
width = _imgRef$current.width,
height = _imgRef$current.height,
offsetWidth = _imgRef$current.offsetWidth,
offsetHeight = _imgRef$current.offsetHeight,
offsetLeft = _imgRef$current.offsetLeft,
offsetTop = _imgRef$current.offsetTop;
var newRatio = ratio;
var newScale = transform.scale * ratio;
if (newScale > maxScale) {
newRatio = maxScale / transform.scale;
newScale = maxScale;
} else if (newScale < minScale) {
newRatio = minScale / transform.scale;
newScale = minScale;
}
/** Default center point scaling */
var mergedClientX = clientX !== null && clientX !== void 0 ? clientX : innerWidth / 2;
var mergedClientY = clientY !== null && clientY !== void 0 ? clientY : innerHeight / 2;
var diffRatio = newRatio - 1;
/** Deviation calculated from image size */
var diffImgX = diffRatio * width * 0.5;
var diffImgY = diffRatio * height * 0.5;
/** The difference between the click position and the edge of the document */
var diffOffsetLeft = diffRatio * (mergedClientX - transform.x - offsetLeft);
var diffOffsetTop = diffRatio * (mergedClientY - transform.y - offsetTop);
/** Final positioning */
var newX = transform.x - (diffOffsetLeft - diffImgX);
var 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) {
var mergedWidth = offsetWidth * newScale;
var mergedHeight = offsetHeight * newScale;
var _getClientSize = (0, _css.getClientSize)(),
clientWidth = _getClientSize.width,
clientHeight = _getClientSize.height;
if (mergedWidth <= clientWidth && mergedHeight <= clientHeight) {
newX = 0;
newY = 0;
}
}
updateTransform({
x: newX,
y: newY,
scale: newScale
}, action);
};
return {
transform: transform,
resetTransform: resetTransform,
updateTransform: updateTransform,
dispatchZoomChange: dispatchZoomChange
};
}