@stackoverfloweth/vue-compositions
Version:
A collection of reusable vue compositions.
45 lines • 1.74 kB
JavaScript
import { onScopeDispose, reactive, ref } from 'vue';
import { useGlobalEventListener } from '../useGlobalEventListener';
const position = reactive({ x: 0, y: 0 });
const positionAtLastClick = reactive({ x: 0, y: 0 });
const updatePositionAtLastClick = () => {
Object.assign(positionAtLastClick, position);
};
const updateMousePosition = (event) => {
position.x = event.clientX;
position.y = event.clientY;
if (positionAtLastClick.x === 0 && positionAtLastClick.y === 0) {
updatePositionAtLastClick();
}
};
const listeners = ref(0);
const { add: addMouseMoveEventListener, remove: removeMouseMoveEventListener } = useGlobalEventListener('mousemove', updateMousePosition, { passive: true });
const { add: addClickEventListener, remove: removeClickEventListener } = useGlobalEventListener('click', updatePositionAtLastClick, { capture: true });
const { add: addContextMenuEventListener, remove: removeContextMenuEventListener } = useGlobalEventListener('contextmenu', updatePositionAtLastClick, { capture: true });
function tryTeardownEventListeners() {
if (listeners.value > 0) {
return;
}
removeMouseMoveEventListener();
removeClickEventListener();
removeContextMenuEventListener();
}
function addEventListeners() {
// These have no effect if the event listeners are already added
addMouseMoveEventListener();
addClickEventListener();
addContextMenuEventListener();
}
export function useMousePosition() {
listeners.value += 1;
addEventListeners();
onScopeDispose(() => {
listeners.value -= 1;
tryTeardownEventListeners();
});
return {
position,
positionAtLastClick,
};
}
//# sourceMappingURL=useMousePosition.js.map