123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155 |
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
- import * as React from 'react';
- import { useRef, useState } 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: true
- });
- // No need to clean up since element removed
- ref.current.addEventListener('touchstart', onProxyTouchStart, {
- passive: true
- });
- ref.current.addEventListener('wheel', onProxyWheel, {
- passive: false
- });
- return function () {
- document.removeEventListener('touchmove', onProxyTouchMove);
- document.removeEventListener('touchend', onProxyTouchEnd);
- };
- }, []);
- }
|