asdf-games/asdf/controls/MouseControls.js

/**
 * MouseControls class
 */
class MouseControls {
  /**
   * Sets container element where handlers will listen
   * @param {*} [container] Container element, defaults to document.body
   */
  constructor(container) {
    this.el = container || document.body;
    // State
    this.pos = { x: 0, y: 0 };
    this.isDown = false;
    this.pressed = false;
    this.released = false;
    // Handlers
    document.addEventListener('mousemove', this.move.bind(this), false);
    document.addEventListener('mousedown', this.down.bind(this), false);
    document.addEventListener('mouseup', this.up.bind(this), false);
  }

  /**
   * Recalculates mouse position based on the position of the container
   * @param {{ clientX: number, clientY: number}} param0 Native mouse event x and y values
   */
  mousePosFromEvent({ clientX, clientY }) {
    const { el, pos } = this;
    const rect = el.getBoundingClientRect();
    const xr = el.width / el.clientWidth;
    const yr = el.height / el.clientHeight;
    pos.x = (clientX - rect.left) * xr;
    pos.y = (clientY - rect.top) * yr;
  }

  /**
   * Calls mousePosFromEvent() on mouse move
   * @param {*} e Event
   */
  move(e) {
    this.mousePosFromEvent(e);
  }

  /**
   * Handles mouseDown event and calls mousePosFromEvent() to determine the exact pixel
   * @param {*} e Event
   */
  down(e) {
    this.isDown = true;
    this.pressed = true;
    this.mousePosFromEvent(e);
  }

  /**
   * Handles mouseUp event and calls mousePosFromEvent() to determine the exact pixel
   * @param {*} e Event
   */
  up() {
    this.isDown = false;
    this.released = true;
  }

  /**
   * Resets pressed and released values to make sure they are only true on a press or release
   */
  update() {
    this.released = false;
    this.pressed = false;
  }
}

export default MouseControls;