refactor: mouse events

packages/input/src/action-registry.js

@@ -10,6 +10,7 @@ export default class ActionRegistry extends decorate(Class) {
     joystickButton: {},
     joystickMove: {},
     key: {},
+    mouseButton: {},
     wheel: {},
   };
 
@@ -54,6 +55,8 @@ export default class ActionRegistry extends decorate(Class) {
     this.normalizer.on('joystickMove', this.onJoystickMove, this);
     this.normalizer.on('keyDown', this.onKeyDown, this);
     this.normalizer.on('keyUp', this.onKeyUp, this);
+    this.normalizer.on('mouseButtonDown', this.onMouseButtonDown, this);
+    this.normalizer.on('mouseButtonUp', this.onMouseButtonUp, this);
     this.normalizer.on('wheelDown', this.onWheelDown, this);
     this.normalizer.on('wheelUp', this.onWheelUp, this);
   }
@@ -65,7 +68,7 @@ export default class ActionRegistry extends decorate(Class) {
           const {action, axis} = this.$$listen[type][input][i];
           if (
             (axis > 0 && value > 0.01)
-            || (axis < 0 && value < 0.01)
+            || (axis < 0 && value < -0.01)
           ) {
             this.$$stream.push({
               action,
@@ -110,6 +113,29 @@ export default class ActionRegistry extends decorate(Class) {
     this.onInput('key', key, 0, 'keyUp');
   }
 
+  onMouseButtonDown(event) {
+    for (let i = 0; i < 8; ++i) {
+      // eslint-disable-next-line no-bitwise
+      const index = 1 << i;
+      // eslint-disable-next-line no-bitwise
+      if (event.buttons & index) {
+        this.onInput('mouseButton', index, 1, 'mouseButtonDown');
+      }
+    }
+  }
+
+  onMouseButtonUp(event) {
+    for (let i = 0; i < 8; ++i) {
+      // eslint-disable-next-line no-bitwise
+      const index = 1 << i;
+      // @todo kinda imprecise. should we track?
+      // eslint-disable-next-line no-bitwise
+      if (!(event.buttons & index)) {
+        this.onInput('mouseButton', index, 0, 'mouseButtonUp');
+      }
+    }
+  }
+
   onWheelDown(delta) {
     this.onInput('wheel', 'down', delta, 'wheelDown');
   }
@@ -128,6 +154,8 @@ export default class ActionRegistry extends decorate(Class) {
     }
     this.normalizer.off('keyUp', this.onKeyUp);
     this.normalizer.off('keyDown', this.onKeyDown);
+    this.normalizer.off('mouseButtonUp', this.onMouseButtonUp);
+    this.normalizer.off('mouseButtonDown', this.onMouseButtonDown);
     this.normalizer.off('wheelUp', this.onWheelUp);
     this.normalizer.off('wheelDown', this.onWheelDown);
     this.normalizer.off('joystickButtonPress', this.onJoystickButtonPress);

packages/input/src/client/mouse-event.js

@@ -0,0 +1,12 @@
+export default class MouseEvent {
+
+  constructor(event) {
+    this.nativeEvent = event;
+    this.buttons = event.buttons;
+    this.position = [
+      event.clientX,
+      event.clientY,
+    ];
+  }
+
+}

packages/input/src/client/normalizer.js

@@ -1,6 +1,7 @@
 import {Class, compose, EventEmitter} from '@flecks/core';
 import Gamepads from 'gamepads';
 
+import MouseEvent from './mouse-event';
 import PointerEvent from './pointer-event';
 
 const decorate = compose(
@@ -28,6 +29,9 @@ export default class InputNormalizer extends decorate(Class) {
     this.onGamepadDisconnect = this.onGamepadDisconnect.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
     this.onKeyUp = this.onKeyUp.bind(this);
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseUp = this.onMouseUp.bind(this);
     this.onPointerDown = this.onPointerDown.bind(this);
     this.onPointerMove = this.onPointerMove.bind(this);
     this.onPointerUp = this.onPointerUp.bind(this);
@@ -57,6 +61,9 @@ export default class InputNormalizer extends decorate(Class) {
     window.addEventListener('blur', this.onBlur);
     this.target.addEventListener('keydown', this.onKeyDown);
     this.targetForKeyUp.addEventListener('keyup', this.onKeyUp);
+    this.target.addEventListener('mousedown', this.onMouseDown);
+    this.target.addEventListener('mousemove', this.onMouseMove);
+    window.addEventListener('mouseup', this.onMouseUp);
     if ('undefined' !== typeof window.PointerEvent) {
       this.target.addEventListener('pointerdown', this.onPointerDown);
       this.target.addEventListener('pointermove', this.onPointerMove);
@@ -134,6 +141,18 @@ export default class InputNormalizer extends decorate(Class) {
     }, 20);
   }
 
+  onMouseDown(event) {
+    this.emit('mouseButtonDown', new MouseEvent(event));
+  }
+
+  onMouseMove(event) {
+    this.emit('mouseMove', new MouseEvent(event));
+  }
+
+  onMouseUp(event) {
+    this.emit('mouseButtonUp', new MouseEvent(event));
+  }
+
   onPointerDown(event) {
     this.emit('pointerDown', new PointerEvent(event));
   }
@@ -195,6 +214,9 @@ export default class InputNormalizer extends decorate(Class) {
     window.removeEventListener('blur', this.onBlur);
     this.target.removeEventListener('keydown', this.onKeyDown);
     this.targetForKeyUp.removeEventListener('keyup', this.onKeyUp);
+    this.target.removeEventListener('mousedown', this.onMouseDown);
+    this.target.removeEventListener('mousemove', this.onMouseMove);
+    window.removeEventListener('mouseup', this.onMouseUp);
     if ('undefined' !== typeof window.PointerEvent) {
       this.target.removeEventListener('pointerdown', this.onPointerDown);
       this.target.removeEventListener('pointermove', this.onPointerMove);