Merge pull request #48 from Dimava/feature/mousebind

Mouse keybinds

src/js/core/click_detector.js

@@ -311,7 +311,7 @@ export class ClickDetector {
         const position = /** @type {typeof ClickDetector} */ (this.constructor).extractPointerPosition(event);
 
         if (event instanceof MouseEvent) {
-            const isRightClick = event.which == 3;
+            const isRightClick = event.button === 2;
             if (isRightClick) {
                 // Ignore right clicks
                 this.rightClick.dispatch(position, event);
@@ -384,7 +384,7 @@ export class ClickDetector {
         }
 
         if (event instanceof MouseEvent) {
-            const isRightClick = event.which == 3;
+            const isRightClick = event.button === 2;
             if (isRightClick) {
                 return;
             }

src/js/core/input_distributor.js

@@ -141,8 +141,13 @@ export class InputDistributor {
     bindToEvents() {
         window.addEventListener("popstate", this.handleBackButton.bind(this), false);
         document.addEventListener("backbutton", this.handleBackButton.bind(this), false);
-        window.addEventListener("keydown", this.handleKeydown.bind(this));
-        window.addEventListener("keyup", this.handleKeyup.bind(this));
+
+        window.addEventListener("keydown", this.handleKeyMouseDown.bind(this));
+        window.addEventListener("keyup", this.handleKeyMouseUp.bind(this));
+
+        window.addEventListener("mousedown", this.handleKeyMouseDown.bind(this));
+        window.addEventListener("mouseup", this.handleKeyMouseUp.bind(this));
+
         window.addEventListener("blur", this.handleBlur.bind(this));
     }
 
@@ -182,25 +187,28 @@ export class InputDistributor {
     }
 
     /**
-     * @param {KeyboardEvent} event
+     * @param {KeyboardEvent | MouseEvent} event
      */
-    handleKeydown(event) {
+    handleKeyMouseDown(event) {
+        const keyCode = event instanceof MouseEvent ? event.button + 1 : event.keyCode;
         if (
-            event.keyCode === 9 || // TAB
-            event.keyCode === 16 || // SHIFT
-            event.keyCode === 17 || // CTRL
-            event.keyCode === 18 || // ALT
-            (event.keyCode >= 112 && event.keyCode < 122) // F1 - F10
+            keyCode === 4 || // MB4
+            keyCode === 5 || // MB5
+            keyCode === 9 || // TAB
+            keyCode === 16 || // SHIFT
+            keyCode === 17 || // CTRL
+            keyCode === 18 || // ALT
+            (keyCode >= 112 && keyCode < 122) // F1 - F10
         ) {
             event.preventDefault();
         }
 
-        const isInitial = !this.keysDown.has(event.keyCode);
-        this.keysDown.add(event.keyCode);
+        const isInitial = !this.keysDown.has(keyCode);
+        this.keysDown.add(keyCode);
 
         if (
             this.forwardToReceiver("keydown", {
-                keyCode: event.keyCode,
+                keyCode: keyCode,
                 shift: event.shiftKey,
                 alt: event.altKey,
                 initial: isInitial,
@@ -210,8 +218,7 @@ export class InputDistributor {
             return;
         }
 
-        const code = event.keyCode;
-        if (code === 27) {
+        if (keyCode === 27) {
             // Escape key
             event.preventDefault();
             event.stopPropagation();
@@ -220,13 +227,14 @@ export class InputDistributor {
     }
 
     /**
-     * @param {KeyboardEvent} event
+     * @param {KeyboardEvent | MouseEvent} event
      */
-    handleKeyup(event) {
-        this.keysDown.delete(event.keyCode);
+    handleKeyMouseUp(event) {
+        const keyCode = event instanceof MouseEvent ? event.button + 1 : event.keyCode;
+        this.keysDown.delete(keyCode);
 
         this.forwardToReceiver("keyup", {
-            keyCode: event.keyCode,
+            keyCode: keyCode,
             shift: event.shiftKey,
             alt: event.altKey,
         });

src/js/game/camera.js

@@ -440,11 +440,11 @@ export class Camera extends BasicSerializableObject {
         }
 
         this.touchPostMoveVelocity = new Vector(0, 0);
-        if (event.which === 1) {
+        if (event.button === 0) {
             this.combinedSingleTouchStartHandler(event.clientX, event.clientY);
-        } else if (event.which === 2) {
+        } else if (event.button === 1) {
             this.downPreHandler.dispatch(new Vector(event.clientX, event.clientY), enumMouseButton.middle);
-        } else if (event.which === 3) {
+        } else if (event.button === 2) {
             this.downPreHandler.dispatch(new Vector(event.clientX, event.clientY), enumMouseButton.right);
         }
         return false;
@@ -464,7 +464,7 @@ export class Camera extends BasicSerializableObject {
             return;
         }
 
-        if (event.which === 1) {
+        if (event.button === 0) {
             this.combinedSingleTouchMoveHandler(event.clientX, event.clientY);
         }
 

src/js/game/key_action_mapper.js

@@ -89,6 +89,16 @@ for (const categoryId in KEYMAPPINGS) {
  */
 export function getStringForKeyCode(code) {
     switch (code) {
+        case 1:
+            return "LMB";
+        case 2:
+            return "MMB";
+        case 3:
+            return "RMB";
+        case 4:
+            return "MB4";
+        case 5:
+            return "MB5";
         case 8:
             return "⌫";
         case 9:

src/js/states/keybindings.js

@@ -121,9 +121,23 @@ export class KeybindingsState extends TextualGameState {
             this.updateKeybindings();
         });
 
-        dialog.inputReciever.backButton.add(() => {});
+        const clickListener = event => {
+            if (event.target.tagName == "BUTTON") {
+                return;
+            }
+            event.preventDefault();
+            const keyCode = event.button + 1;
+
+            this.app.settings.updateKeybindingOverride(id, keyCode);
 
+            this.dialogs.closeDialog(dialog);
+            this.updateKeybindings();
+        };
+
+        dialog.inputReciever.backButton.add(() => {});
         this.dialogs.internalShowDialog(dialog);
+        dialog.element.addEventListener("mousedown", clickListener);
+
         this.app.sound.playUiSound(SOUNDS.dialogOk);
     }