|
| 1 | +import { useRef, useState } from "@lynx-js/react"; |
| 2 | +import type { BaseTouchEvent, Target } from "@lynx-js/types"; |
| 3 | + |
| 4 | +const LONG_PRESS_DURATION = 400; |
| 5 | +const MOVE_THRESHOLD = 5; |
| 6 | + |
| 7 | +const DEFAULT_RIGHT = 16; |
| 8 | +const DEFAULT_BOTTOM = 84; |
| 9 | + |
| 10 | +let savedRight = DEFAULT_RIGHT; |
| 11 | +let savedBottom = DEFAULT_BOTTOM; |
| 12 | + |
| 13 | +export function useLongPressDrag(onTap: () => void) { |
| 14 | + const [right, setRight] = useState(savedRight); |
| 15 | + const [bottom, setBottom] = useState(savedBottom); |
| 16 | + const [phase, setPhase] = useState<"idle" | "dragging" | "releasing">("idle"); |
| 17 | + const [tempRight, setTempRight] = useState(savedRight); |
| 18 | + const [tempBottom, setTempBottom] = useState(savedBottom); |
| 19 | + |
| 20 | + const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null); |
| 21 | + const draggingRef = useRef(false); |
| 22 | + const startRef = useRef({ x: 0, y: 0, r: 0, b: 0 }); |
| 23 | + |
| 24 | + const clearTimer = () => { |
| 25 | + if (timerRef.current) { |
| 26 | + clearTimeout(timerRef.current); |
| 27 | + timerRef.current = null; |
| 28 | + } |
| 29 | + }; |
| 30 | + |
| 31 | + const handleTouchStart = (e: BaseTouchEvent<Target>) => { |
| 32 | + startRef.current = { |
| 33 | + x: e.detail.x, |
| 34 | + y: e.detail.y, |
| 35 | + r: right, |
| 36 | + b: bottom, |
| 37 | + }; |
| 38 | + draggingRef.current = false; |
| 39 | + |
| 40 | + timerRef.current = setTimeout(() => { |
| 41 | + draggingRef.current = true; |
| 42 | + setPhase("dragging"); |
| 43 | + setTempRight(right); |
| 44 | + setTempBottom(bottom); |
| 45 | + }, LONG_PRESS_DURATION); |
| 46 | + }; |
| 47 | + |
| 48 | + const handleTouchMove = (e: BaseTouchEvent<Target>) => { |
| 49 | + const dx = e.detail.x - startRef.current.x; |
| 50 | + const dy = e.detail.y - startRef.current.y; |
| 51 | + |
| 52 | + if ( |
| 53 | + !draggingRef.current && |
| 54 | + (Math.abs(dx) > MOVE_THRESHOLD || Math.abs(dy) > MOVE_THRESHOLD) |
| 55 | + ) { |
| 56 | + clearTimer(); |
| 57 | + } |
| 58 | + |
| 59 | + if (!draggingRef.current) return; |
| 60 | + |
| 61 | + // right/bottom 기준이므로 방향 반전 |
| 62 | + setTempRight(startRef.current.r - dx); |
| 63 | + setTempBottom(startRef.current.b - dy); |
| 64 | + }; |
| 65 | + |
| 66 | + const handleTouchEnd = () => { |
| 67 | + clearTimer(); |
| 68 | + |
| 69 | + if (draggingRef.current) { |
| 70 | + setRight(tempRight); |
| 71 | + setBottom(tempBottom); |
| 72 | + savedRight = tempRight; |
| 73 | + savedBottom = tempBottom; |
| 74 | + setPhase("releasing"); |
| 75 | + draggingRef.current = false; |
| 76 | + setTimeout(() => setPhase("idle"), 300); |
| 77 | + } else { |
| 78 | + onTap(); |
| 79 | + } |
| 80 | + }; |
| 81 | + |
| 82 | + const isDragging = phase === "dragging"; |
| 83 | + |
| 84 | + return { |
| 85 | + phase, |
| 86 | + right: isDragging ? tempRight : right, |
| 87 | + bottom: isDragging ? tempBottom : bottom, |
| 88 | + clearTimer, |
| 89 | + handlers: { |
| 90 | + bindtouchstart: handleTouchStart, |
| 91 | + bindtouchmove: handleTouchMove, |
| 92 | + bindtouchend: handleTouchEnd, |
| 93 | + }, |
| 94 | + }; |
| 95 | +} |
0 commit comments