import { useOnMouse } from '@/events/useOnMouse' ; import { useOnTouch } from '@/events/useOnTouch' ; import { throttle } from '@/helpers/throttle' ; /**
 * Helper for handling drag&drop (through both mouse and touch).
 */ export const useOnMove = ( trigger , cb , root ) => { let offset = 0 ; let clickElement = null ; const throttledMove = throttle ( cb , 1000 / 60 ) ; useOnMouse ( trigger , { onMouseDown : ( e ) => { clickElement = e . target as any as HTMLElement ; const rect = clickElement . getBoundingClientRect ( ) ; offset = e . clientX - rect . x - rect . width / 2 ; } , onMouseMove : ( e ) => { throttledMove ( e . clientX - offset , clickElement ! ) ; } , onMouseUp : ( ) => { offset = 0 ; clickElement = null ; } , } ) ; useOnTouch ( trigger , { onTouchDown : ( touch ) => { document . documentElement . classList . add ( 'jsr_lockscreen' ) ; clickElement = touch . target as any as HTMLElement ; const rect = clickElement . getBoundingClientRect ( ) ; offset = touch . clientX - rect . x - rect . width / 2 ; } , onTouchMove : ( touch ) => { throttledMove ( touch . clientX - offset , clickElement ! ) ; } , onTouchUp : ( ) => { document . documentElement . classList . remove ( 'jsr_lockscreen' ) ; offset = 0 ; clickElement = null ; } , root , } ) ; } ;