@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
207 lines (206 loc) • 8.12 kB
JavaScript
import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
function getTouch(el, x, y) {
return {
identifier: Date.now(),
target: el,
pageX: x,
pageY: y,
clientX: x,
clientY: y,
radiusX: 2.5,
radiusY: 2.5,
rotationAngle: 10,
force: 0.5
};
}
// Trigger pointer/touch event
export function trigger(wrapper, eventName) {
var x = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 0, y = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 0, options = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : {};
var el = 'element' in wrapper ? wrapper.element : wrapper;
var touchList = options.touchList || [
getTouch(el, x, y)
];
if (options.x || options.y) {
touchList.push(getTouch(el, options.x, options.y));
}
var event = document.createEvent('CustomEvent');
event.initCustomEvent(eventName, true, true, {});
Object.assign(event, {
clientX: x,
clientY: y,
touches: touchList,
targetTouches: touchList,
changedTouches: touchList
});
el.dispatchEvent(event);
}
export function sleep() {
var delay = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
return new Promise(function(resolve) {
setTimeout(resolve, delay);
});
}
// simulate drag gesture
export function triggerDrag(el) {
var relativeX = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, relativeY = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 0;
var x = relativeX;
var y = relativeY;
var startX = 0;
var startY = 0;
if (relativeX < 0) {
startX = Math.abs(relativeX);
x = 0;
}
if (relativeY < 0) {
startY = Math.abs(relativeY);
y = 0;
}
trigger(el, 'touchstart', startX, startY);
trigger(el, 'touchmove', x / 4, y / 4);
trigger(el, 'touchmove', x / 3, y / 3);
trigger(el, 'touchmove', x / 2, y / 2);
trigger(el, 'touchmove', x, y);
trigger(el, 'touchend', x, y);
}
/**
* 模拟触摸移动方法
* @param {HTMLElement} element 要进行触摸移动的 HTML 元素
* @param {number} startX 起始触摸点的 X 坐标
* @param {number} startY 起始触摸点的 Y 坐标
* @param {number} endX 结束触摸点的 X 坐标
* @param {number} endY 结束触摸点的 Y 坐标
* @param {number} duration 移动持续时间（毫秒）
*/ export function simulateTouchMove(element, startX, startY, endX, endY, duration) {
return _simulateTouchMove.apply(this, arguments);
}
function _simulateTouchMove() {
_simulateTouchMove = _async_to_generator(function(element, startX, startY, endX, endY, duration) {
var touch, touchList, distanceX, distanceY, startTime, elapsed, progress, currentX, currentY, currentTouch, currentTouchList;
return _ts_generator(this, function(_state) {
switch(_state.label){
case 0:
touch = getTouch(element, startX, startY);
touchList = [
touch
];
// 触摸开始事件
trigger(element, 'touchstart', startX, startY, {
touchList: touchList
});
distanceX = endX - startX;
distanceY = endY - startY;
startTime = Date.now();
_state.label = 1;
case 1:
if (!(Date.now() - startTime < duration)) return [
3,
3
];
elapsed = Date.now() - startTime;
progress = elapsed / duration;
currentX = startX + distanceX * progress;
currentY = startY + distanceY * progress;
currentTouch = getTouch(element, currentX, currentY);
currentTouchList = [
currentTouch
];
trigger(element, 'touchmove', currentX, currentY, {
touchList: currentTouchList
});
return [
4,
sleep(duration / 100)
];
case 2:
_state.sent();
return [
3,
1
];
case 3:
// 触摸结束事件
trigger(element, 'touchend', endX, endY, {
touchList: touchList
});
return [
2
];
}
});
});
return _simulateTouchMove.apply(this, arguments);
}
/**
* 模拟触摸缩放方法
* @param {HTMLElement} element 要进行缩放操作的 HTML 元素
* @param {number} startDistance 起始触摸点的距离
* @param {number} endDistance 结束触摸点的距离
* @param {number} duration 缩放持续时间（毫秒）
*/ export function simulateTouchZoom(element, startDistance, endDistance, duration) {
return _simulateTouchZoom.apply(this, arguments);
}
function _simulateTouchZoom() {
_simulateTouchZoom = _async_to_generator(function(element, startDistance, endDistance, duration) {
var centerX, centerY, startScale, endScale, startTouches, endTouches, progress, currentScale, currentDistance, currentTouches;
return _ts_generator(this, function(_state) {
switch(_state.label){
case 0:
centerX = element.clientWidth / 2;
centerY = element.clientHeight / 2;
startScale = startDistance / endDistance;
endScale = 1;
startTouches = [
getTouch(element, centerX - startDistance / 2, centerY),
getTouch(element, centerX + startDistance / 2, centerY)
];
endTouches = [
getTouch(element, centerX - endDistance / 2, centerY),
getTouch(element, centerX + endDistance / 2, centerY)
];
// 触摸开始事件
trigger(element, 'touchstart', centerX, centerY, {
touchList: startTouches
});
progress = 0;
_state.label = 1;
case 1:
if (!(progress < 1)) return [
3,
4
];
currentScale = startScale + (endScale - startScale) * progress;
currentDistance = startDistance / currentScale;
currentTouches = [
getTouch(element, centerX - currentDistance / 2, centerY),
getTouch(element, centerX + currentDistance / 2, centerY)
];
trigger(element, 'touchmove', centerX, centerY, {
touchList: currentTouches
});
return [
4,
sleep(duration / 100)
];
case 2:
_state.sent();
_state.label = 3;
case 3:
progress += 0.01;
return [
3,
1
];
case 4:
// 触摸结束事件
trigger(element, 'touchend', centerX, centerY, {
touchList: endTouches
});
return [
2
];
}
});
});
return _simulateTouchZoom.apply(this, arguments);
}