124 lines
5.2 KiB
JavaScript
124 lines
5.2 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = useMouseEvent;
|
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
var _addEventListener = _interopRequireDefault(require("rc-util/lib/Dom/addEventListener"));
|
|
var _warning = require("rc-util/lib/warning");
|
|
var _react = require("react");
|
|
var _getFixScaleEleTransPosition = _interopRequireDefault(require("../getFixScaleEleTransPosition"));
|
|
var _previewConfig = require("../previewConfig");
|
|
function useMouseEvent(imgRef, movable, visible, scaleStep, transform, updateTransform, dispatchZoomChange) {
|
|
var rotate = transform.rotate,
|
|
scale = transform.scale,
|
|
x = transform.x,
|
|
y = transform.y;
|
|
var _useState = (0, _react.useState)(false),
|
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
isMoving = _useState2[0],
|
|
setMoving = _useState2[1];
|
|
var startPositionInfo = (0, _react.useRef)({
|
|
diffX: 0,
|
|
diffY: 0,
|
|
transformX: 0,
|
|
transformY: 0
|
|
});
|
|
var onMouseDown = function onMouseDown(event) {
|
|
// Only allow main button
|
|
if (!movable || event.button !== 0) return;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
startPositionInfo.current = {
|
|
diffX: event.pageX - x,
|
|
diffY: event.pageY - y,
|
|
transformX: x,
|
|
transformY: y
|
|
};
|
|
setMoving(true);
|
|
};
|
|
var onMouseMove = function onMouseMove(event) {
|
|
if (visible && isMoving) {
|
|
updateTransform({
|
|
x: event.pageX - startPositionInfo.current.diffX,
|
|
y: event.pageY - startPositionInfo.current.diffY
|
|
}, 'move');
|
|
}
|
|
};
|
|
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 _startPositionInfo$cu = startPositionInfo.current,
|
|
transformX = _startPositionInfo$cu.transformX,
|
|
transformY = _startPositionInfo$cu.transformY;
|
|
var hasChangedPosition = x !== transformX && y !== transformY;
|
|
if (!hasChangedPosition) return;
|
|
var width = imgRef.current.offsetWidth * scale;
|
|
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,
|
|
top = _imgRef$current$getBo.top;
|
|
var isRotate = rotate % 180 !== 0;
|
|
var fixState = (0, _getFixScaleEleTransPosition.default)(isRotate ? height : width, isRotate ? width : height, left, top);
|
|
if (fixState) {
|
|
updateTransform((0, _objectSpread2.default)({}, fixState), 'dragRebound');
|
|
}
|
|
}
|
|
};
|
|
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;
|
|
}
|
|
dispatchZoomChange(ratio, 'wheel', event.clientX, event.clientY);
|
|
};
|
|
(0, _react.useEffect)(function () {
|
|
var onTopMouseUpListener;
|
|
var onTopMouseMoveListener;
|
|
var onMouseUpListener;
|
|
var onMouseMoveListener;
|
|
if (movable) {
|
|
onMouseUpListener = (0, _addEventListener.default)(window, 'mouseup', onMouseUp, false);
|
|
onMouseMoveListener = (0, _addEventListener.default)(window, 'mousemove', onMouseMove, false);
|
|
try {
|
|
// Resolve if in iframe lost event
|
|
/* istanbul ignore next */
|
|
if (window.top !== window.self) {
|
|
onTopMouseUpListener = (0, _addEventListener.default)(window.top, 'mouseup', onMouseUp, false);
|
|
onTopMouseMoveListener = (0, _addEventListener.default)(window.top, 'mousemove', onMouseMove, false);
|
|
}
|
|
} catch (error) {
|
|
/* istanbul ignore next */
|
|
(0, _warning.warning)(false, "[rc-image] ".concat(error));
|
|
}
|
|
}
|
|
return function () {
|
|
var _onMouseUpListener, _onMouseMoveListener, _onTopMouseUpListener, _onTopMouseMoveListen;
|
|
(_onMouseUpListener = onMouseUpListener) === null || _onMouseUpListener === void 0 || _onMouseUpListener.remove();
|
|
(_onMouseMoveListener = onMouseMoveListener) === null || _onMouseMoveListener === void 0 || _onMouseMoveListener.remove();
|
|
/* istanbul ignore next */
|
|
(_onTopMouseUpListener = onTopMouseUpListener) === null || _onTopMouseUpListener === void 0 || _onTopMouseUpListener.remove();
|
|
/* istanbul ignore next */
|
|
(_onTopMouseMoveListen = onTopMouseMoveListener) === null || _onTopMouseMoveListen === void 0 || _onTopMouseMoveListen.remove();
|
|
};
|
|
}, [visible, isMoving, x, y, rotate, movable]);
|
|
return {
|
|
isMoving: isMoving,
|
|
onMouseDown: onMouseDown,
|
|
onMouseMove: onMouseMove,
|
|
onMouseUp: onMouseUp,
|
|
onWheel: onWheel
|
|
};
|
|
} |