import { useRef } from 'react' ; interface Options { el : HTMLElement ; rotationAngle ? : number ; onSwipeLeft ? : ( e : React . TouchEvent ) => void ; onSwipeRight ? : ( e : React . TouchEvent ) => void ; } type Pos = { x : number ; y : number ; } ; function rotateXYByAngle ( pos , angle = 0 ) { if ( angle === 0 ) return pos ; const angleInRadians = ( Math . PI / 180 ) * angle ; const x = pos . x * Math . cos ( angleInRadians ) + pos . y * Math . sin ( angleInRadians ) ; const y = pos . y * Math . cos ( angleInRadians ) - pos . x * Math . sin ( angleInRadians ) ; return { x , y } ; } export const useTouch = ( options ) => { const state = useRef < { pos : Pos ; } > ( { pos : { x : 0 , y : 0 } } ) ; if ( ! options . el ) { return ; } const attactEvent = ( eventName , eventFn ) => { options . el . addEventListener ( eventName , eventFn ) ; } ; const checkTouch = ( e ) => { if ( e . touches && e . touches . length > 1 ) { return false ; } return true ; } ; const onStart = ( e ) => { if ( ! checkTouch ( e ) ) return ; const { clientX , clientY } = e . touches [ 0 ] ; state . current . pos . x = clientX ; state . current . pos . y = clientY ; e . preventDefault ( ) ; } ; const onMove = ( e ) => { if ( ! checkTouch ( e ) ) return ; const { clientX , clientY } = e . touches [ 0 ] ; e . preventDefault ( ) ; } ; const onEnd = ( e ) => { e . preventDefault ( ) ; } ; attactEvent ( 'touchstart' , onStart ) ; attactEvent ( 'touchmove' , onMove ) ; attactEvent ( 'touchend' , onEnd ) ; } ;