Keypress-tab KeystrokeAction remapping.

src/components/popover/tab/keypress/keypress-tab.component.html

@@ -1,18 +1,24 @@
 <div class="scancode-options" style="margin-bottom:10px; margin-top:2px">
     <b class="setting-label" style="position:relative; top:2px;">Scancode:</b>
-    <select2 [data]="scanCodeGroups" [templateResult]="scanCodeTemplateResult" [width]="200"></select2>
+    <select2 #scanCodeSelect [data]="scanCodeGroups" [templateResult]="scanCodeTemplateResult" [width]="200"></select2>
     <capture-keystroke-button></capture-keystroke-button>
 </div>
 <div class="scancode-options">
     <b class="setting-label" style="position:relative; top:-9px; margin-right:4px;">Modifiers:</b>
     <div class="btn-toolbar modifiers" style="display:inline-block">
         <div class="btn-group btn-group-sm modifiers__left">
-            <button type="button" class="btn btn-default" *ngFor="let modifier of leftModifiers">
+            <button type="button" class="btn btn-default"
+                    *ngFor="let modifier of leftModifiers; let index = index"
+                    [ngClass]="{ 'btn-primary': leftModifierSelects[index]}"
+                    (click)="toggleModifier(false, index)">
                 {{modifier}}
             </button>
         </div>
         <div class="btn-group btn-group-sm modifiers__right">
-            <button type="button" class="btn btn-default" *ngFor="let modifier of rightModifiers">
+            <button type="button" class="btn btn-default"
+                    *ngFor="let modifier of rightModifiers; let index = index"
+                    [ngClass]="{ 'btn-primary': rightModifierSelects[index] }"
+                    (click)="toggleModifier(true, index)">
                 {{modifier}}
             </button>
         </div>
@@ -20,6 +26,6 @@
 </div>
 <div class="long-press-container">
     <b class="setting-label" style="position:relative;">Long press action:</b>
-    <select2 [data]="longPressGroups" [width]="140"></select2>
+    <select2 #longPressSelect [data]="longPressGroups" [width]="140"></select2>
     <icon name="question-circle" title="This action happens when the key is being held along with another key."></icon>
 </div>

src/components/popover/tab/keypress/keypress-tab.component.ts

@@ -1,9 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 
 import { CaptureKeystrokeButtonComponent } from '../../widgets/capture-keystroke/capture-keystroke-button.component';
 
 import { KeyAction } from '../../../../../config-serializer/config-items/KeyAction';
+import { KeyModifiers } from '../../../../../config-serializer/config-items/KeyModifiers';
 import { KeystrokeAction } from '../../../../../config-serializer/config-items/KeystrokeAction';
+import { LongPressAction } from '../../../../../config-serializer/config-items/LongPressAction';
 import { KeyActionSaver } from '../../key-action-saver';
 
 import {IconComponent} from '../../widgets/icon/icon.component';
@@ -19,6 +21,11 @@ import {OptionData} from 'ng2-select2/dist/select2';
     directives: [CaptureKeystrokeButtonComponent, IconComponent, SELECT2_DIRECTIVES]
 })
 export class KeypressTabComponent implements OnInit, KeyActionSaver {
+
+    // TODO(@Nejc): We need a type for select2 component instead of any
+    @ViewChild('scanCodeSelect') scanCodeSelect: any;
+    @ViewChild('longPressSelect') longPressSelect: any;
+
     private leftModifiers: string[];
     private rightModifiers: string[];
 
@@ -31,22 +38,68 @@ export class KeypressTabComponent implements OnInit, KeyActionSaver {
     constructor() {
         this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt'];
         this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt'];
-        this.scanCodeGroups = require('json!./scancodes.json');
+        this.scanCodeGroups = [{
+            id: '0',
+            text: 'None'
+        }];
+        this.scanCodeGroups = this.scanCodeGroups.concat(require('json!./scancodes.json'));
         this.longPressGroups = require('json!./longPress.json');
+        this.leftModifierSelects = Array(4).fill(false);
+        this.rightModifierSelects = Array(4).fill(false);
     }
 
     ngOnInit() { }
 
-    getKeyAction(): KeystrokeAction {
-        return undefined;
+    keyActionValid(keystrokeAction?: KeystrokeAction): boolean {
+        if (!keystrokeAction) {
+            keystrokeAction = this.toKeyAction();
+        }
+        return keystrokeAction.scancode > 0 || keystrokeAction.modifierMask > 0;
     }
 
-    keyActionValid(): boolean {
-        return false;
-    }
+    toKeyAction(): KeystrokeAction {
+        let keystrokeAction: KeystrokeAction = new KeystrokeAction();
+        keystrokeAction.scancode = +this.scanCodeSelect.selector.nativeElement.value;
 
-    toKeyAction(): KeyAction {
-        return undefined;
+        let mapper = (x: number) => {
+            if (x < 8) {
+                return Math.floor(x / 2) * 4 + 1 - x; // 1, 0, 3, 2, 5, 4, 7, 6
+            } else {
+                return x;
+            }
+        };
+        keystrokeAction.modifierMask = 0;
+        let modifiers = this.leftModifierSelects.concat(this.rightModifierSelects).map(x => x ? 1 : 0);
+        for (let i = 0; i < modifiers.length; ++i) {
+            keystrokeAction.modifierMask |= modifiers[i] << mapper(i);
+        }
+        let selectedLongPressIndex = 0;
+        let tempIndex: number;
+        const selectedValue: string = this.longPressSelect.selector.nativeElement.value;
+        for (let i = 0; i < this.longPressGroups.length; ++i) {
+            if (this.longPressGroups[i].children) {
+                tempIndex = this.longPressGroups[i].children.findIndex(x => x.id === selectedValue);
+                if (tempIndex >= 0) {
+                    selectedLongPressIndex += tempIndex;
+                    break;
+                } else {
+                    selectedLongPressIndex += this.longPressGroups[i].children.length;
+                }
+            } else {
+                if (this.longPressGroups[i].id === selectedValue) {
+                    break;
+                } else {
+                    ++selectedLongPressIndex;
+                }
+            }
+        }
+
+        keystrokeAction.longPressAction = selectedLongPressIndex === 0 ? undefined : mapper(selectedLongPressIndex - 1);
+        if (!this.keyActionValid(keystrokeAction)) {
+           throw new Error('KeyAction is invalid!');
+        }
+
+        return keystrokeAction;
     }
 
     scanCodeTemplateResult: Function = (state: any) => {
@@ -66,4 +119,9 @@ export class KeypressTabComponent implements OnInit, KeyActionSaver {
             return jQuery('<span class="select2-item">' + state.text + '</span>');
         }
     }
+
+    toggleModifier(right: boolean, index: number) {
+        let modifierSelects: boolean[] = right ? this.rightModifierSelects : this.leftModifierSelects;
+        modifierSelects[index] = !modifierSelects[index];
+    }
 }