Remapping support for tabs

src/components/popover/key-action-saver.ts

@@ -0,0 +1,6 @@
+import {KeyAction} from '../../../config-serializer/config-items/KeyAction';
+
+export interface KeyActionSaver {
+    keyActionValid(): boolean;
+    toKeyAction(): KeyAction;
+}

src/components/popover/popover.component.ts

@@ -4,6 +4,7 @@ import {
     AfterViewInit,
     Output,
     EventEmitter,
+    ViewChild,
     ViewChildren,
     ElementRef,
     Renderer,
@@ -13,6 +14,8 @@ import {
 
 import {NgSwitch, NgSwitchWhen} from '@angular/common';
 
+import {KeyAction} from '../../../config-serializer/config-items/KeyAction';
+
 import {KeypressTabComponent} from './tab/keypress-tab.component';
 import {LayerTabComponent} from './tab/layer-tab.component';
 import {MouseTabComponent} from './tab/mouse-tab.component';
@@ -20,6 +23,8 @@ import {MacroTabComponent} from './tab/macro-tab.component';
 import {KeymapTabComponent} from './tab/keymap-tab.component';
 import {NoneTabComponent} from './tab/none-tab.component';
 
+import {KeyActionSaver} from './key-action-saver';
+
 @Component({
     moduleId: module.id,
     selector: 'popover',
@@ -70,12 +75,12 @@ import {NoneTabComponent} from './tab/none-tab.component';
             </div>
             <div class="row" [ngSwitch]="activeListItemIndex">
                 <div class="popover-content">
-                    <keypress-tab *ngSwitchWhen="0"></keypress-tab>
-                    <layer-tab *ngSwitchWhen="1"></layer-tab>
-                    <mouse-tab *ngSwitchWhen="2"></mouse-tab>
-                    <macro-tab *ngSwitchWhen="3"></macro-tab>
-                    <keymap-tab *ngSwitchWhen="4"></keymap-tab>
-                    <none-tab *ngSwitchWhen="5"></none-tab>
+                    <keypress-tab #tab *ngSwitchWhen="0"></keypress-tab>
+                    <layer-tab #tab *ngSwitchWhen="1"></layer-tab>
+                    <mouse-tab #tab *ngSwitchWhen="2"></mouse-tab>
+                    <macro-tab #tab *ngSwitchWhen="3"></macro-tab>
+                    <keymap-tab #tab *ngSwitchWhen="4"></keymap-tab>
+                    <none-tab #tab *ngSwitchWhen="5"></none-tab>
                 </div>
             </div>
             <div class="row">
@@ -86,7 +91,7 @@ import {NoneTabComponent} from './tab/none-tab.component';
             </div>
         </div>
     `,
-    styles: [ require('./popover.component.scss') ],
+    styles: [require('./popover.component.scss')],
     host: { 'class': 'popover' },
     directives:
     [
@@ -101,8 +106,12 @@ import {NoneTabComponent} from './tab/none-tab.component';
     ]
 })
 export class PopoverComponent implements OnInit, AfterViewInit {
+
     @Output() cancel = new EventEmitter<any>();
+    @Output() remap = new EventEmitter<KeyAction>();
+
     @ViewChildren('keypress,layer,mouse,macro,keymap,none') liElementRefs: QueryList<ElementRef>;
+    @ViewChild('tab') selectedTab: KeyActionSaver;
 
     private activeListItemIndex: number;
 
@@ -122,7 +131,13 @@ export class PopoverComponent implements OnInit, AfterViewInit {
     }
 
     onRemapKey(): void {
-
+        try {
+            let keyAction = this.selectedTab.toKeyAction();
+            this.remap.emit(keyAction);
+        } catch (e) {
+            // TODO: show error dialog
+            console.error(e);
+        }
     }
 
     onListItemClick(index: number): void {

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

@@ -3,6 +3,8 @@ import { Component, OnInit } from '@angular/core';
 import {UhkConfigurationService} from '../../../services/uhk-configuration.service';
 import {Keymap} from '../../../../config-serializer/config-items/Keymap';
 import {SvgKeyboardComponent} from '../../svg-keyboard.component';
+import {KeyActionSaver} from '../key-action-saver';
+import {SwitchKeymapAction} from '../../../../config-serializer/config-items/SwitchKeymapAction';
 
 @Component({
     moduleId: module.id,
@@ -28,7 +30,7 @@ import {SvgKeyboardComponent} from '../../svg-keyboard.component';
     styles: [require('./keymap-tab.component.scss')],
     directives: [SvgKeyboardComponent]
 })
-export class KeymapTabComponent implements OnInit {
+export class KeymapTabComponent implements OnInit, KeyActionSaver {
 
     private keymaps: Keymap[];
     private selectedKeymapIndex: number;
@@ -40,4 +42,17 @@ export class KeymapTabComponent implements OnInit {
 
     ngOnInit() { }
 
+    keyActionValid(): boolean {
+        return this.selectedKeymapIndex !== -1;
+    }
+
+    toKeyAction(): SwitchKeymapAction {
+        if (!this.keyActionValid()) {
+            throw new Error('KeyAction is not valid. No selected keymap!');
+        }
+        let keymapAction = new SwitchKeymapAction();
+        keymapAction.keymapId = this.keymaps[this.selectedKeymapIndex].id;
+        return keymapAction;
+    }
+
 }

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

@@ -2,9 +2,11 @@ import { Component, OnInit } from '@angular/core';
 
 import { CaptureKeystrokeButtonComponent } from '../widgets/capture-keystroke-button.component';
 
+import { KeyAction } from '../../../../config-serializer/config-items/KeyAction';
 import { KeystrokeAction } from '../../../../config-serializer/config-items/KeystrokeAction';
 import { KeystrokeModifiersAction } from '../../../../config-serializer/config-items/KeystrokeModifiersAction';
 import { KeystrokeWithModifiersAction } from '../../../../config-serializer/config-items/KeystrokeWithModifiersAction';
+import { KeyActionSaver } from '../key-action-saver';
 
 @Component({
     moduleId: module.id,
@@ -45,7 +47,7 @@ import { KeystrokeWithModifiersAction } from '../../../../config-serializer/conf
     `,
     directives: [CaptureKeystrokeButtonComponent]
 })
-export class KeypressTabComponent implements OnInit {
+export class KeypressTabComponent implements OnInit, KeyActionSaver {
     private leftModifiers: string[];
     private rightModifiers: string[];
 
@@ -63,4 +65,11 @@ export class KeypressTabComponent implements OnInit {
         return;
     }
 
+    keyActionValid(): boolean {
+        return false;
+    }
+
+    toKeyAction(): KeyAction {
+        return undefined;
+    }
 }

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

@@ -1,28 +1,48 @@
 import { Component, OnInit } from '@angular/core';
 
+import { LayerName, SwitchLayerAction } from '../../../../config-serializer/config-items/SwitchLayerAction';
+import { KeyActionSaver } from '../key-action-saver';
+
 @Component({
     moduleId: module.id,
     selector: 'layer-tab',
     template:
     `
-        <select>
-            <option> Activate </option>
-            <option> Toggle </option>
+        <select [(ngModel)]="toggle">
+            <option [ngValue]="false"> Activate </option>
+            <option [ngValue]="true"> Toggle </option>
         </select>
         <span>the</span>
-        <select>
-            <option> Mod </option>
-            <option> Fn </option>
-            <option> Mouse </option>
+        <select [(ngModel)]="layer">
+            <option [ngValue]="0"> Mod </option>
+            <option [ngValue]="1"> Fn </option>
+            <option [ngValue]="2"> Mouse </option>
         </select>
         <span>
         layer by holding this key.
         </span>
     `
 })
-export class LayerTabComponent implements OnInit {
-    constructor() { }
+export class LayerTabComponent implements OnInit, KeyActionSaver {
+    private toggle: boolean;
+    private layer: LayerName;
+
+    constructor() {
+        this.toggle = false;
+        this.layer = LayerName.mod;
+    }
 
     ngOnInit() { }
 
+    keyActionValid(): boolean {
+        return true;
+    }
+
+    toKeyAction(): SwitchLayerAction {
+        let keyAction = new SwitchLayerAction();
+        keyAction.isLayerToggleable = this.toggle;
+        keyAction.layer = this.layer;
+        return keyAction;
+    }
+
 }

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

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
+import { KeyActionSaver } from '../key-action-saver';
+import { KeyAction } from '../../../../config-serializer/config-items/KeyAction';
+
 @Component({
     moduleId: module.id,
     selector: 'macro-tab',
@@ -8,9 +11,17 @@ import { Component, OnInit } from '@angular/core';
         Macro
     `
 })
-export class MacroTabComponent implements OnInit {
+export class MacroTabComponent implements OnInit, KeyActionSaver {
     constructor() { }
 
     ngOnInit() { }
 
+    keyActionValid(): boolean {
+        return false;
+    }
+
+    toKeyAction(): KeyAction {
+        return undefined;
+    }
+
 }

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

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
+import { KeyActionSaver } from '../key-action-saver';
+import { KeyAction } from '../../../../config-serializer/config-items/KeyAction';
+
 @Component({
     moduleId: module.id,
     selector: 'mouse-tab',
@@ -16,11 +19,19 @@ import { Component, OnInit } from '@angular/core';
         <div class="details">
         </div>
     `,
-    styles: [ require('./mouse-tab.component.scss') ]
+    styles: [require('./mouse-tab.component.scss')]
 })
-export class MouseTabComponent implements OnInit {
+export class MouseTabComponent implements OnInit, KeyActionSaver {
     constructor() { }
 
     ngOnInit() { }
 
+    keyActionValid(): boolean {
+        return false;
+    }
+
+    toKeyAction(): KeyAction {
+        return undefined;
+    }
+
 }

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

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
+import { KeyActionSaver } from '../key-action-saver';
+import { NoneAction } from '../../../../config-serializer/config-items/NoneAction';
+
 @Component({
     moduleId: module.id,
     selector: 'none-tab',
@@ -13,9 +16,17 @@ import { Component, OnInit } from '@angular/core';
         }
     `]
 })
-export class NoneTabComponent implements OnInit {
+export class NoneTabComponent implements OnInit, KeyActionSaver {
     constructor() { }
 
     ngOnInit() { }
 
+    keyActionValid(): boolean {
+        return true;
+    }
+
+    toKeyAction(): NoneAction {
+        return new NoneAction();
+    }
+
 }

src/components/svg-keyboard-popover.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input} from '@angular/core';
 
 import {Module} from '../../config-serializer/config-items/Module';
+import {KeyAction} from '../../config-serializer/config-items/KeyAction';
 import {SvgKeyboardComponent} from './svg-keyboard.component';
 import {PopoverComponent} from './popover/popover.component';
 
@@ -11,7 +12,7 @@ import {PopoverComponent} from './popover/popover.component';
         <svg-keyboard [moduleConfig]="moduleConfig"
                     (keyClick)="onKeyClick($event.moduleId, $event.keyId)">
         </svg-keyboard>
-        <popover *ngIf="popoverEnabled" (cancel)="hidePopover()"></popover>
+        <popover *ngIf="popoverEnabled" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
     `,
     styles:
     [`
@@ -28,13 +29,30 @@ export class SvgKeyboardPopoverComponent implements OnInit {
     @Input() moduleConfig: Module[];
 
     private popoverEnabled: boolean;
+    private keyEditConfig: { moduleId: number, keyId: number };
 
-    constructor() { }
+    constructor() {
+        this.keyEditConfig = {
+            moduleId: undefined,
+            keyId: undefined
+        };
+    }
 
     ngOnInit() { }
 
     onKeyClick(moduleId: number, keyId: number): void {
-        this.showPopover();
+        if (!this.popoverEnabled) {
+            this.keyEditConfig = {
+                moduleId,
+                keyId
+            };
+            this.showPopover();
+        }
+    }
+
+    onRemap(keyAction: KeyAction): void {
+        this.changeKeyAction(keyAction);
+        this.hidePopover();
     }
 
     showPopover(): void {
@@ -45,4 +63,10 @@ export class SvgKeyboardPopoverComponent implements OnInit {
         this.popoverEnabled = false;
     }
 
+    changeKeyAction(keyAction: KeyAction): void {
+        let moduleId = this.keyEditConfig.moduleId;
+        let keyId = this.keyEditConfig.keyId;
+        this.moduleConfig[moduleId].keyActions.elements[keyId] = keyAction;
+    }
+
 }