import { Ref , onUnmounted , ref , onMounted , unref } from '@vue/composition-api' ; import { getHTMLElement } from '@/utils' ; export default function useMouseEvents ( target , { ignorePredicate , onMove , onDown , onDrag , onUp , } ) { const mouseX = ref ( 0 ) ; const mouseY = ref ( 0 ) ; const mousePressed = ref ( false ) ; let targetEl ; function onMouseMove ( e ) { mouseX . value = e . pageX ; mouseY . value = e . pageY ; if ( ! mousePressed . value && onMove ) { onMove ( e ) ; } else if ( mousePressed . value && onDrag ) { onDrag ( e ) ; } } function onMouseToggle ( e ) { const pressed = e . type === 'mousedown' ; if ( ( pressed && ignorePredicate && ignorePredicate ( e ) ) || ( ! pressed && ! mousePressed . value ) ) { return ; } if ( e . button === 0 ) { mousePressed . value = pressed ; if ( pressed && onDown ) { onDown ( e ) ; } else if ( ! pressed && onUp ) { onUp ( e ) ; } } } onMounted ( ( ) => { targetEl = getHTMLElement ( target ) ; if ( ! targetEl ) return ; targetEl . addEventListener ( 'mousemove' , onMouseMove ) ; targetEl . addEventListener ( 'mousedown' , onMouseToggle ) ; window . addEventListener ( 'mouseup' , onMouseToggle ) ; } ) ; onUnmounted ( ( ) => { if ( ! targetEl ) return ; targetEl . removeEventListener ( 'mousemove' , onMouseMove ) ; targetEl . removeEventListener ( 'mousedown' , onMouseToggle ) ; window . removeEventListener ( 'mouseup' , onMouseToggle ) ; } ) ; return { mouseX , mouseY , mousePressed } ; }