packageDocumentation module import * as React from "react" ; import { Point , Timer } from "@itwin/core-react" ; internal const getDragDistance = ( from , to ) => { return from . getDistanceTo ( to ) ; } ; interface UseDragArgs { readonly initialPosition : React . MutableRefObject < Point | undefined > ; readonly onDrag : ( ) => void ; } function useDrag ( args ) { const { initialPosition , onDrag } = args ; const handlePointerMove = React . useCallback ( ( e ) => { if ( ! initialPosition . current ) return ; const newPosition = new Point ( e . clientX , e . clientY ) ; const dragDistance = getDragDistance ( initialPosition . current , newPosition ) ; if ( dragDistance < 20 ) return ; onDrag ( ) ; } , [ initialPosition , onDrag ] ) ; return { handlePointerMove } ; } interface UseLongPressArgs { readonly initialPosition : React . RefObject < Point | undefined > ; readonly onLongPress : ( ) => void ; } function useLongPress ( args ) { const longPressTimer = React . useRef ( new Timer ( 500 ) ) ; const handlePointerDown = React . useCallback ( ( ) => { longPressTimer . current . start ( ) ; } , [ ] ) ; const handlePointerUp = React . useCallback ( ( ) => { longPressTimer . current . stop ( ) ; } , [ ] ) ; const handlePointerMove = React . useCallback ( ( e ) => { if ( ! args . initialPosition . current ) return ; const newPosition = new Point ( e . clientX , e . clientY ) ; const distance = args . initialPosition . current . getDistanceTo ( newPosition ) ; distance >= 10 && longPressTimer . current . stop ( ) ; } , [ args . initialPosition ] ) ; React . useEffect ( ( ) => { longPressTimer . current . setOnExecute ( args . onLongPress ) ; return ( ) => { longPressTimer . current . setOnExecute ( undefined ) ; } ; } , [ args . onLongPress ] ) ; return { handlePointerDown , handlePointerMove , handlePointerUp } ; } param onClick param onOpenPanel public export function useDragInteraction ( onClick ? , onOpenPanel ? ) { const initialPosition = React . useRef < Point | undefined > ( undefined ) ; const skipClick = React . useRef < boolean > ( false ) ; const handleOpenPanel = React . useCallback ( ( ) => { initialPosition . current = undefined ; skipClick . current = true ; onOpenPanel && onOpenPanel ( ) ; } , [ onOpenPanel ] ) ; const { handlePointerMove : dragPointerMove , } = useDrag ( { initialPosition , onDrag : handleOpenPanel } ) ; const { handlePointerDown : longPressPointerDown , handlePointerMove : longPressPointerMove , handlePointerUp : longPressPointerUp , } = useLongPress ( { initialPosition , onLongPress : handleOpenPanel } ) ; const handleButtonClick = React . useCallback ( ( ) => { if ( skipClick . current ) return ; onClick && onClick ( ) ; } , [ onClick ] ) ; const handlePointerDown = React . useCallback ( ( e ) => { ( e . target instanceof Element ) && e . target . releasePointerCapture ( e . pointerId ) ; initialPosition . current = new Point ( e . clientX , e . clientY ) ; skipClick . current = false ; longPressPointerDown ( ) ; } , [ longPressPointerDown ] ) ; const handlePointerMove = React . useCallback ( ( e ) => { dragPointerMove ( e ) ; longPressPointerMove ( e ) ; } , [ dragPointerMove , longPressPointerMove ] ) ; const handlePointerUp = React . useCallback ( ( ) => { initialPosition . current = undefined ; longPressPointerUp ( ) ; } , [ longPressPointerUp ] ) ; React . useEffect ( ( ) => { document . addEventListener ( "pointermove" , handlePointerMove ) ; document . addEventListener ( "pointerup" , handlePointerUp ) ; return ( ) => { document . removeEventListener ( "pointermove" , handlePointerMove ) ; document . removeEventListener ( "pointerup" , handlePointerUp ) ; } ; } , [ handlePointerMove , handlePointerUp ] ) ; return { handlePointerDown , handleButtonClick } ; }