vue-hooks-plus/lib/useMouse/index.js

Vue hooks library

"use strict";
const useEventListener = require("../useEventListener");
const domTarget = require("../utils/domTarget");
const vue = require("vue");
const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const useEventListener__default = /* @__PURE__ */ _interopDefaultLegacy(useEventListener);
const initState = {
  screenX: NaN,
  screenY: NaN,
  clientX: NaN,
  clientY: NaN,
  pageX: NaN,
  pageY: NaN,
  elementX: NaN,
  elementY: NaN,
  elementH: NaN,
  elementW: NaN,
  elementPosX: NaN,
  elementPosY: NaN
};
function useMouse(target) {
  const state = vue.ref(initState);
  useEventListener__default.default(
    "mousemove",
    (event) => {
      const { screenX, screenY, clientX, clientY, pageX, pageY } = event;
      const newState = {
        screenX,
        screenY,
        clientX,
        clientY,
        pageX,
        pageY,
        elementX: NaN,
        elementY: NaN,
        elementH: NaN,
        elementW: NaN,
        elementPosX: NaN,
        elementPosY: NaN
      };
      const targetElement = domTarget.getTargetElement(target);
      if (targetElement) {
        const { left, top, width, height } = targetElement.getBoundingClientRect();
        newState.elementPosX = left + window.pageXOffset;
        newState.elementPosY = top + window.pageYOffset;
        newState.elementX = pageX - newState.elementPosX;
        newState.elementY = pageY - newState.elementPosY;
        newState.elementW = width;
        newState.elementH = height;
      }
      state.value = newState;
    },
    {
      target: document
    }
  );
  return vue.readonly(state);
}
module.exports = useMouse;