72 lines
1.8 KiB
JavaScript
72 lines
1.8 KiB
JavaScript
/**
|
|
* 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;
|