diff --git a/src/components/popover/key-action-saver.ts b/src/components/popover/key-action-saver.ts deleted file mode 100644 index 56380b9d..00000000 --- a/src/components/popover/key-action-saver.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {KeyAction} from '../../../config-serializer/config-items/KeyAction'; - -export interface KeyActionSaver { - keyActionValid(): boolean; - toKeyAction(): KeyAction; -} diff --git a/src/components/popover/popover.component.html b/src/components/popover/popover.component.html index ba7b06b1..34533f03 100644 --- a/src/components/popover/popover.component.html +++ b/src/components/popover/popover.component.html @@ -2,37 +2,37 @@
-
- - - - - - +
+ + + + + +
diff --git a/src/components/popover/popover.component.ts b/src/components/popover/popover.component.ts index 3abb700f..d6eb85f3 100644 --- a/src/components/popover/popover.component.ts +++ b/src/components/popover/popover.component.ts @@ -1,17 +1,4 @@ -import { - Component, - OnInit, - AfterViewInit, - Output, - EventEmitter, - ViewChild, - ViewChildren, - ElementRef, - Renderer, - QueryList, - ChangeDetectorRef -} from '@angular/core'; - +import {Component, OnInit, Input, Output, EventEmitter, ViewChild} from '@angular/core'; import {NgSwitch, NgSwitchCase} from '@angular/common'; import {KeyAction} from '../../../config-serializer/config-items/KeyAction'; @@ -23,7 +10,12 @@ import {MacroTabComponent} from './tab/macro/macro-tab.component'; import {KeymapTabComponent} from './tab/keymap/keymap-tab.component'; import {NoneTabComponent} from './tab/none/none-tab.component'; -import {KeyActionSaver} from './key-action-saver'; +import {Tab} from './tab/tab'; +import {KeystrokeAction} from '../../../config-serializer/config-items/KeystrokeAction'; +import {SwitchLayerAction} from '../../../config-serializer/config-items/SwitchLayerAction'; +import {MouseAction} from '../../../config-serializer/config-items/MouseAction'; +import {PlayMacroAction} from '../../../config-serializer/config-items/PlayMacroAction'; +import {SwitchKeymapAction} from '../../../config-serializer/config-items/SwitchKeymapAction'; @Component({ moduleId: module.id, @@ -43,25 +35,36 @@ import {KeyActionSaver} from './key-action-saver'; NoneTabComponent ] }) -export class PopoverComponent implements OnInit, AfterViewInit { +export class PopoverComponent implements OnInit { + @Input() defaultKeyAction: KeyAction; @Output() cancel = new EventEmitter(); @Output() remap = new EventEmitter(); - @ViewChildren('keypress,layer,mouse,macro,keymap,none') liElementRefs: QueryList; - @ViewChild('tab') selectedTab: KeyActionSaver; + @ViewChild('tab') selectedTab: Tab; - private activeListItemIndex: number; + private activeTabIndex: number; - constructor(private renderer: Renderer, private changeDetectorRef: ChangeDetectorRef) { - this.activeListItemIndex = -1; + constructor() { + this.activeTabIndex = -1; } - ngOnInit() { } - - ngAfterViewInit() { - this.onListItemClick(0); - this.changeDetectorRef.detectChanges(); + ngOnInit() { + let tabIndex: number; + if (this.defaultKeyAction instanceof KeystrokeAction) { + tabIndex = 0; + } else if (this.defaultKeyAction instanceof SwitchLayerAction) { + tabIndex = 1; + } else if (this.defaultKeyAction instanceof MouseAction) { + tabIndex = 2; + } else if (this.defaultKeyAction instanceof PlayMacroAction) { + tabIndex = 3; + } else if (this.defaultKeyAction instanceof SwitchKeymapAction) { + tabIndex = 4; + } else { + tabIndex = 5; + } + this.selectTab(tabIndex); } onCancelClick(): void { @@ -78,13 +81,8 @@ export class PopoverComponent implements OnInit, AfterViewInit { } } - onListItemClick(index: number): void { - let listItems: HTMLLIElement[] = this.liElementRefs.toArray().map(liElementRef => liElementRef.nativeElement); - if (this.activeListItemIndex >= 0) { - this.renderer.setElementClass(listItems[this.activeListItemIndex], 'active', false); - } - this.renderer.setElementClass(listItems[index], 'active', true); - this.activeListItemIndex = index; + selectTab(index: number): void { + this.activeTabIndex = index; } } diff --git a/src/components/popover/tab/keymap/keymap-tab.component.html b/src/components/popover/tab/keymap/keymap-tab.component.html index dc60b6e7..815efcdf 100644 --- a/src/components/popover/tab/keymap/keymap-tab.component.html +++ b/src/components/popover/tab/keymap/keymap-tab.component.html @@ -1,12 +1,12 @@
Switch to keymap: - +
-
- +
+
-
\ No newline at end of file diff --git a/src/components/popover/tab/keymap/keymap-tab.component.ts b/src/components/popover/tab/keymap/keymap-tab.component.ts index b623201f..0c63e51d 100644 --- a/src/components/popover/tab/keymap/keymap-tab.component.ts +++ b/src/components/popover/tab/keymap/keymap-tab.component.ts @@ -1,9 +1,10 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit, Input} from '@angular/core'; import {UhkConfigurationService} from '../../../../services/uhk-configuration.service'; import {Keymap} from '../../../../../config-serializer/config-items/Keymap'; +import {KeyAction} from '../../../../../config-serializer/config-items/KeyAction'; import {SvgKeyboardComponent} from '../../../svg/keyboard/svg-keyboard.component'; -import {KeyActionSaver} from '../../key-action-saver'; +import {Tab} from '../tab'; import {SwitchKeymapAction} from '../../../../../config-serializer/config-items/SwitchKeymapAction'; import {OptionData} from 'ng2-select2/dist/select2'; @@ -16,15 +17,17 @@ import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2'; styles: [require('./keymap-tab.component.scss')], directives: [SvgKeyboardComponent, SELECT2_DIRECTIVES] }) -export class KeymapTabComponent implements OnInit, KeyActionSaver { +export class KeymapTabComponent implements OnInit, Tab { + @Input() defaultKeyAction: KeyAction; private keymaps: Keymap[]; - private keymapOptions: Array = []; + private keymapOptions: Array; private selectedKeymapIndex: number; constructor(private uhkConfigurationService: UhkConfigurationService) { - this.selectedKeymapIndex = -1; this.keymaps = []; + this.keymapOptions = []; + this.selectedKeymapIndex = -1; } ngOnInit() { @@ -35,21 +38,32 @@ export class KeymapTabComponent implements OnInit, KeyActionSaver { text: 'Switch to keymap' }); - this.keymapOptions = this.keymapOptions.concat(this.keymaps.map(function(keymap: Keymap): OptionData { + this.keymapOptions = this.keymapOptions.concat(this.keymaps.map(function (keymap: Keymap): OptionData { return { id: keymap.id.toString(), text: keymap.name }; })); + + this.fromKeyAction(this.defaultKeyAction); } // TODO: change to the correct type when the wrapper has added it. onChange(event: any) { - this.selectedKeymapIndex = parseInt(event.value, 10); + this.selectedKeymapIndex = +event.value; } keyActionValid(): boolean { - return this.selectedKeymapIndex !== -1; + return this.selectedKeymapIndex >= 0; + } + + fromKeyAction(keyAction: KeyAction): boolean { + if (!(keyAction instanceof SwitchKeymapAction)) { + return false; + } + let switchKeymapAction: SwitchKeymapAction = keyAction; + this.selectedKeymapIndex = this.keymaps.findIndex(keymap => switchKeymapAction.keymapId === keymap.id); + return true; } toKeyAction(): SwitchKeymapAction { diff --git a/src/components/popover/tab/keypress/keypress-tab.component.html b/src/components/popover/tab/keypress/keypress-tab.component.html index 3af8531a..c1312bb9 100644 --- a/src/components/popover/tab/keypress/keypress-tab.component.html +++ b/src/components/popover/tab/keypress/keypress-tab.component.html @@ -1,24 +1,21 @@
Scancode: - +
Modifiers:
-
-
@@ -26,6 +23,7 @@
Long press action: - +
\ No newline at end of file diff --git a/src/components/popover/tab/keypress/keypress-tab.component.ts b/src/components/popover/tab/keypress/keypress-tab.component.ts index 2fd6144b..7cb33550 100644 --- a/src/components/popover/tab/keypress/keypress-tab.component.ts +++ b/src/components/popover/tab/keypress/keypress-tab.component.ts @@ -1,18 +1,15 @@ -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'; +import {Component, OnInit, Input} from '@angular/core'; import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2'; import {OptionData} from 'ng2-select2/dist/select2'; +import {KeyAction} from '../../../../../config-serializer/config-items/KeyAction'; +import {KeystrokeAction} from '../../../../../config-serializer/config-items/KeystrokeAction'; + +import {IconComponent} from '../../widgets/icon/icon.component'; +import {CaptureKeystrokeButtonComponent} from '../../widgets/capture-keystroke/capture-keystroke-button.component'; +import {Tab} from '../tab'; + @Component({ moduleId: module.id, selector: 'keypress-tab', @@ -20,11 +17,8 @@ import {OptionData} from 'ng2-select2/dist/select2'; styles: [require('./keypress-tab.component.scss')], 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; +export class KeypressTabComponent implements OnInit, Tab { + @Input() defaultKeyAction: KeyAction; private leftModifiers: string[]; private rightModifiers: string[]; @@ -35,6 +29,9 @@ export class KeypressTabComponent implements OnInit, KeyActionSaver { private scanCodeGroups: Array; private longPressGroups: Array; + private scanCode: number; + private selectedLongPressIndex: number; + constructor() { this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt']; this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt']; @@ -46,9 +43,12 @@ export class KeypressTabComponent implements OnInit, KeyActionSaver { this.longPressGroups = require('json!./longPress.json'); this.leftModifierSelects = Array(4).fill(false); this.rightModifierSelects = Array(4).fill(false); + this.selectedLongPressIndex = -1; } - ngOnInit() { } + ngOnInit() { + this.fromKeyAction(this.defaultKeyAction); + } keyActionValid(keystrokeAction?: KeystrokeAction): boolean { if (!keystrokeAction) { @@ -57,46 +57,46 @@ export class KeypressTabComponent implements OnInit, KeyActionSaver { return keystrokeAction.scancode > 0 || keystrokeAction.modifierMask > 0; } + fromKeyAction(keyAction: KeyAction): boolean { + if (!(keyAction instanceof KeystrokeAction)) { + return false; + } + let keystrokeAction: KeystrokeAction = keyAction; + // Restore scancode + this.scanCode = keystrokeAction.scancode || 0; + + // Restore modifiers + for (let i = 0; i < this.leftModifierSelects.length; ++i) { + this.leftModifierSelects[this.modifierMapper(i)] = ((keystrokeAction.modifierMask >> i) & 1) === 1; + } + for (let i = 4; i < 4 + this.rightModifierSelects.length; ++i) { + this.rightModifierSelects[this.modifierMapper(i) - 4] = ((keystrokeAction.modifierMask >> i) & 1) === 1; + } + + // Restore longPressAction + if (keystrokeAction.longPressAction !== undefined) { + this.selectedLongPressIndex = this.modifierMapper(keystrokeAction.longPressAction); + } + + return true; + } + toKeyAction(): KeystrokeAction { let keystrokeAction: KeystrokeAction = new KeystrokeAction(); - keystrokeAction.scancode = +this.scanCodeSelect.selector.nativeElement.value; + keystrokeAction.scancode = this.scanCode; - 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.modifierMask |= modifiers[i] << this.modifierMapper(i); } - keystrokeAction.longPressAction = selectedLongPressIndex === 0 ? undefined : mapper(selectedLongPressIndex - 1); + keystrokeAction.longPressAction = this.selectedLongPressIndex === -1 + ? undefined + : this.modifierMapper(this.selectedLongPressIndex); + if (!this.keyActionValid(keystrokeAction)) { - throw new Error('KeyAction is invalid!'); + throw new Error('KeyAction is invalid!'); } return keystrokeAction; @@ -124,4 +124,22 @@ export class KeypressTabComponent implements OnInit, KeyActionSaver { let modifierSelects: boolean[] = right ? this.rightModifierSelects : this.leftModifierSelects; modifierSelects[index] = !modifierSelects[index]; } + + // TODO: change to the correct type when the wrapper has added it. + private onLongpressChange(event: any) { + this.selectedLongPressIndex = +event.value; + } + + // TODO: change to the correct type when the wrapper has added it. + private onScancodeChange(event: any) { + this.scanCode = +event.value; + } + + private modifierMapper(x: number) { + if (x < 8) { + return Math.floor(x / 2) * 4 + 1 - x; // 1, 0, 3, 2, 5, 4, 7, 6 + } else { + return x; + } + }; } diff --git a/src/components/popover/tab/keypress/longPress.json b/src/components/popover/tab/keypress/longPress.json index c405f5b1..03e2acef 100644 --- a/src/components/popover/tab/keypress/longPress.json +++ b/src/components/popover/tab/keypress/longPress.json @@ -1,41 +1,41 @@ [ { - "id": "none", + "id": "-1", "text": "None" }, { "text": "Modifiers", "children": [ { - "id": "LShift", + "id": "0", "text": "LShift" }, { - "id": "LCtrl", + "id": "1", "text": "LCtrl" }, { - "id": "LSuper", + "id": "2", "text": "LSuper" }, { - "id": "LAlt", + "id": "3", "text": "LAlt" }, { - "id": "RShift", + "id": "4", "text": "RShift" }, { - "id": "RCtrl", + "id": "5", "text": "RCtrl" }, { - "id": "RSuper", + "id": "6", "text": "RSuper" }, { - "id": "RAlt", + "id": "7", "text": "RAlt" } ] @@ -44,15 +44,15 @@ "text": "Layer switcher", "children": [ { - "id": "Mod", + "id": "8", "text": "Mod" }, { - "id": "Mouse", + "id": "9", "text": "Mouse" }, { - "id": "Fn", + "id": "10", "text": "Fn" } ] diff --git a/src/components/popover/tab/layer/layer-tab.component.html b/src/components/popover/tab/layer/layer-tab.component.html index 21e7e8d4..715df025 100644 --- a/src/components/popover/tab/layer/layer-tab.component.html +++ b/src/components/popover/tab/layer/layer-tab.component.html @@ -1,6 +1,6 @@ - + the - + diff --git a/src/components/popover/tab/layer/layer-tab.component.ts b/src/components/popover/tab/layer/layer-tab.component.ts index 2dcaa678..30d58c79 100644 --- a/src/components/popover/tab/layer/layer-tab.component.ts +++ b/src/components/popover/tab/layer/layer-tab.component.ts @@ -1,21 +1,26 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit, Input, ViewChild} from '@angular/core'; +import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common'; -import {NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common'; +import {LayerName, SwitchLayerAction} from '../../../../../config-serializer/config-items/SwitchLayerAction'; +import {KeyAction} from '../../../../../config-serializer/config-items/KeyAction'; -import { LayerName, SwitchLayerAction } from '../../../../../config-serializer/config-items/SwitchLayerAction'; -import { KeyActionSaver } from '../../key-action-saver'; - -import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2'; +import {Select2Component} from 'ng2-select2/dist/select2/select2.component'; import {OptionData} from 'ng2-select2/dist/select2'; +import {Tab} from '../tab'; + @Component({ moduleId: module.id, selector: 'layer-tab', template: require('./layer-tab.component.html'), styles: [require('./layer-tab.component.scss')], - directives: [SELECT2_DIRECTIVES, NgSwitch, NgSwitchCase, NgSwitchDefault] + directives: [Select2Component, NgSwitch, NgSwitchCase, NgSwitchDefault] }) -export class LayerTabComponent implements OnInit, KeyActionSaver { +export class LayerTabComponent implements OnInit, Tab { + @Input() defaultKeyAction: KeyAction; + @ViewChild('toggleSelect') toggleSelect2: Select2Component; + @ViewChild('layerSelect') layerSelect2: Select2Component; + private toggle: boolean; private layer: LayerName; @@ -50,12 +55,24 @@ export class LayerTabComponent implements OnInit, KeyActionSaver { this.layer = LayerName.mod; } - ngOnInit() { } + ngOnInit() { + this.fromKeyAction(this.defaultKeyAction); + } keyActionValid(): boolean { return true; } + fromKeyAction(keyAction: KeyAction): boolean { + if (!(keyAction instanceof SwitchLayerAction)) { + return false; + } + let switchLayerAction: SwitchLayerAction = keyAction; + this.toggle = switchLayerAction.isLayerToggleable; + this.layer = switchLayerAction.layer; + return true; + } + toKeyAction(): SwitchLayerAction { let keyAction = new SwitchLayerAction(); keyAction.isLayerToggleable = this.toggle; diff --git a/src/components/popover/tab/macro/macro-tab.component.html b/src/components/popover/tab/macro/macro-tab.component.html index b393d1ef..f636d510 100644 --- a/src/components/popover/tab/macro/macro-tab.component.html +++ b/src/components/popover/tab/macro/macro-tab.component.html @@ -1,6 +1,6 @@
Play macro: - +