152 lines
4.6 KiB
JavaScript
152 lines
4.6 KiB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
import * as React from 'react';
|
|
import { useState, useRef } from 'react';
|
|
var MIN_SWIPE_DISTANCE = 0.1;
|
|
var STOP_SWIPE_DISTANCE = 0.01;
|
|
var REFRESH_INTERVAL = 20;
|
|
var SPEED_OFF_MULTIPLE = Math.pow(0.995, REFRESH_INTERVAL);
|
|
|
|
// ================================= Hook =================================
|
|
export default function useTouchMove(ref, onOffset) {
|
|
var _useState = useState(),
|
|
_useState2 = _slicedToArray(_useState, 2),
|
|
touchPosition = _useState2[0],
|
|
setTouchPosition = _useState2[1];
|
|
var _useState3 = useState(0),
|
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
lastTimestamp = _useState4[0],
|
|
setLastTimestamp = _useState4[1];
|
|
var _useState5 = useState(0),
|
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
lastTimeDiff = _useState6[0],
|
|
setLastTimeDiff = _useState6[1];
|
|
var _useState7 = useState(),
|
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
lastOffset = _useState8[0],
|
|
setLastOffset = _useState8[1];
|
|
var motionRef = useRef();
|
|
|
|
// ========================= Events =========================
|
|
// >>> Touch events
|
|
function onTouchStart(e) {
|
|
var _e$touches$ = e.touches[0],
|
|
screenX = _e$touches$.screenX,
|
|
screenY = _e$touches$.screenY;
|
|
setTouchPosition({
|
|
x: screenX,
|
|
y: screenY
|
|
});
|
|
window.clearInterval(motionRef.current);
|
|
}
|
|
function onTouchMove(e) {
|
|
if (!touchPosition) return;
|
|
e.preventDefault();
|
|
var _e$touches$2 = e.touches[0],
|
|
screenX = _e$touches$2.screenX,
|
|
screenY = _e$touches$2.screenY;
|
|
setTouchPosition({
|
|
x: screenX,
|
|
y: screenY
|
|
});
|
|
var offsetX = screenX - touchPosition.x;
|
|
var offsetY = screenY - touchPosition.y;
|
|
onOffset(offsetX, offsetY);
|
|
var now = Date.now();
|
|
setLastTimestamp(now);
|
|
setLastTimeDiff(now - lastTimestamp);
|
|
setLastOffset({
|
|
x: offsetX,
|
|
y: offsetY
|
|
});
|
|
}
|
|
function onTouchEnd() {
|
|
if (!touchPosition) return;
|
|
setTouchPosition(null);
|
|
setLastOffset(null);
|
|
|
|
// Swipe if needed
|
|
if (lastOffset) {
|
|
var distanceX = lastOffset.x / lastTimeDiff;
|
|
var distanceY = lastOffset.y / lastTimeDiff;
|
|
var absX = Math.abs(distanceX);
|
|
var absY = Math.abs(distanceY);
|
|
|
|
// Skip swipe if low distance
|
|
if (Math.max(absX, absY) < MIN_SWIPE_DISTANCE) return;
|
|
var currentX = distanceX;
|
|
var currentY = distanceY;
|
|
motionRef.current = window.setInterval(function () {
|
|
if (Math.abs(currentX) < STOP_SWIPE_DISTANCE && Math.abs(currentY) < STOP_SWIPE_DISTANCE) {
|
|
window.clearInterval(motionRef.current);
|
|
return;
|
|
}
|
|
currentX *= SPEED_OFF_MULTIPLE;
|
|
currentY *= SPEED_OFF_MULTIPLE;
|
|
onOffset(currentX * REFRESH_INTERVAL, currentY * REFRESH_INTERVAL);
|
|
}, REFRESH_INTERVAL);
|
|
}
|
|
}
|
|
|
|
// >>> Wheel event
|
|
var lastWheelDirectionRef = useRef();
|
|
function onWheel(e) {
|
|
var deltaX = e.deltaX,
|
|
deltaY = e.deltaY;
|
|
|
|
// Convert both to x & y since wheel only happened on PC
|
|
var mixed = 0;
|
|
var absX = Math.abs(deltaX);
|
|
var absY = Math.abs(deltaY);
|
|
if (absX === absY) {
|
|
mixed = lastWheelDirectionRef.current === 'x' ? deltaX : deltaY;
|
|
} else if (absX > absY) {
|
|
mixed = deltaX;
|
|
lastWheelDirectionRef.current = 'x';
|
|
} else {
|
|
mixed = deltaY;
|
|
lastWheelDirectionRef.current = 'y';
|
|
}
|
|
if (onOffset(-mixed, -mixed)) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
// ========================= Effect =========================
|
|
var touchEventsRef = useRef(null);
|
|
touchEventsRef.current = {
|
|
onTouchStart: onTouchStart,
|
|
onTouchMove: onTouchMove,
|
|
onTouchEnd: onTouchEnd,
|
|
onWheel: onWheel
|
|
};
|
|
React.useEffect(function () {
|
|
function onProxyTouchStart(e) {
|
|
touchEventsRef.current.onTouchStart(e);
|
|
}
|
|
function onProxyTouchMove(e) {
|
|
touchEventsRef.current.onTouchMove(e);
|
|
}
|
|
function onProxyTouchEnd(e) {
|
|
touchEventsRef.current.onTouchEnd(e);
|
|
}
|
|
function onProxyWheel(e) {
|
|
touchEventsRef.current.onWheel(e);
|
|
}
|
|
document.addEventListener('touchmove', onProxyTouchMove, {
|
|
passive: false
|
|
});
|
|
document.addEventListener('touchend', onProxyTouchEnd, {
|
|
passive: false
|
|
});
|
|
|
|
// No need to clean up since element removed
|
|
ref.current.addEventListener('touchstart', onProxyTouchStart, {
|
|
passive: false
|
|
});
|
|
ref.current.addEventListener('wheel', onProxyWheel);
|
|
return function () {
|
|
document.removeEventListener('touchmove', onProxyTouchMove);
|
|
document.removeEventListener('touchend', onProxyTouchEnd);
|
|
};
|
|
}, []);
|
|
} |