uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Remapping: Popover tabs initialization accordance with the key action

Browse Source
This commit is contained in:
József Farkas
2016-08-06 17:26:36 +02:00
parent a09bc3cccc
commit b0b76fe1c2
19 changed files with 320 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/popover/key-action-saver.ts
View File

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

26
src/components/popover/popover.component.html
View File

@@ -2,37 +2,37 @@
<div class="row"> <div class="row">
<div class="popover-title menu-tabs"> <div class="popover-title menu-tabs">
<ul class="nav nav-tabs popover-menu"> <ul class="nav nav-tabs popover-menu">
<li #keypress (click)="onListItemClick(0)"> <li #keypress [class.active]="activeTabIndex === 0" (click)="selectTab(0)">
<a class="menu-tabs--item"> <a class="menu-tabs--item">
<i class="fa fa-keyboard-o"></i> <i class="fa fa-keyboard-o"></i>
<span>Keypress</span> <span>Keypress</span>
</a> </a>
</li> </li>
<li #layer (click)="onListItemClick(1)"> <li #layer [class.active]="activeTabIndex === 1" (click)="selectTab(1)">
<a class="menu-tabs--item"> <a class="menu-tabs--item">
<i class="fa fa-clone"></i> <i class="fa fa-clone"></i>
<span>Layer</span> <span>Layer</span>
</a> </a>
</li> </li>
<li #mouse (click)="onListItemClick(2)"> <li #mouse [class.active]="activeTabIndex === 2" (click)="selectTab(2)">
<a class="menu-tabs--item"> <a class="menu-tabs--item">
<i class="fa fa-mouse-pointer"></i> <i class="fa fa-mouse-pointer"></i>
<span>Mouse</span> <span>Mouse</span>
</a> </a>
</li> </li>
<li #macro (click)="onListItemClick(3)"> <li #macro [class.active]="activeTabIndex === 3" (click)="selectTab(3)">
<a class="menu-tabs--item"> <a class="menu-tabs--item">
<i class="fa fa-play"></i> <i class="fa fa-play"></i>
<span>Macro</span> <span>Macro</span>
</a> </a>
</li> </li>
<li #keymap (click)="onListItemClick(4)"> <li #keymap [class.active]="activeTabIndex === 4" (click)="selectTab(4)">
<a class="menu-tabs--item"> <a class="menu-tabs--item">
<i class="fa fa-keyboard-o"></i> <i class="fa fa-keyboard-o"></i>
<span>Keymap</span> <span>Keymap</span>
</a> </a>
</li> </li>
<li #none (click)="onListItemClick(5)"> <li #none [class.active]="activeTabIndex === 5" (click)="selectTab(5)">
<a class="menu-tabs--item"> <a class="menu-tabs--item">
<i class="fa fa-ban"></i> <i class="fa fa-ban"></i>
<span>None</span> <span>None</span>
@@ -41,13 +41,13 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="row" [ngSwitch]="activeListItemIndex"> <div class="row" [ngSwitch]="activeTabIndex">
<keypress-tab #tab *ngSwitchCase="0" class="popover-content"></keypress-tab> <keypress-tab #tab *ngSwitchCase="0" class="popover-content" [defaultKeyAction]="defaultKeyAction"></keypress-tab>
<layer-tab #tab *ngSwitchCase="1" class="popover-content"></layer-tab> <layer-tab #tab *ngSwitchCase="1" class="popover-content" [defaultKeyAction]="defaultKeyAction"></layer-tab>
<mouse-tab #tab *ngSwitchCase="2" class="popover-content"></mouse-tab> <mouse-tab #tab *ngSwitchCase="2" class="popover-content" [defaultKeyAction]="defaultKeyAction"></mouse-tab>
<macro-tab #tab *ngSwitchCase="3" class="popover-content"></macro-tab> <macro-tab #tab *ngSwitchCase="3" class="popover-content" [defaultKeyAction]="defaultKeyAction"></macro-tab>
<keymap-tab #tab *ngSwitchCase="4" class="popover-content"></keymap-tab> <keymap-tab #tab *ngSwitchCase="4" class="popover-content" [defaultKeyAction]="defaultKeyAction"></keymap-tab>
<none-tab #tab *ngSwitchCase="5" class="popover-content"></none-tab> <none-tab #tab *ngSwitchCase="5" class="popover-content" [defaultKeyAction]="defaultKeyAction"></none-tab>
</div> </div>
<div class="row"> <div class="row">
<div class="popover-action"> <div class="popover-action">

64
src/components/popover/popover.component.ts
View File

@@ -1,17 +1,4 @@
import { import {Component, OnInit, Input, Output, EventEmitter, ViewChild} from '@angular/core';
Component,
OnInit,
AfterViewInit,
Output,
EventEmitter,
ViewChild,
ViewChildren,
ElementRef,
Renderer,
QueryList,
ChangeDetectorRef
} from '@angular/core';
import {NgSwitch, NgSwitchCase} from '@angular/common'; import {NgSwitch, NgSwitchCase} from '@angular/common';
import {KeyAction} from '../../../config-serializer/config-items/KeyAction'; 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 {KeymapTabComponent} from './tab/keymap/keymap-tab.component';
import {NoneTabComponent} from './tab/none/none-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({ @Component({
moduleId: module.id, moduleId: module.id,
@@ -43,25 +35,36 @@ import {KeyActionSaver} from './key-action-saver';
NoneTabComponent NoneTabComponent
] ]
}) })
export class PopoverComponent implements OnInit, AfterViewInit { export class PopoverComponent implements OnInit {
@Input() defaultKeyAction: KeyAction;
@Output() cancel = new EventEmitter<any>(); @Output() cancel = new EventEmitter<any>();
@Output() remap = new EventEmitter<KeyAction>(); @Output() remap = new EventEmitter<KeyAction>();
@ViewChildren('keypress,layer,mouse,macro,keymap,none') liElementRefs: QueryList<ElementRef>; @ViewChild('tab') selectedTab: Tab;
@ViewChild('tab') selectedTab: KeyActionSaver;
private activeListItemIndex: number; private activeTabIndex: number;
constructor(private renderer: Renderer, private changeDetectorRef: ChangeDetectorRef) { constructor() {
this.activeListItemIndex = -1; this.activeTabIndex = -1;
} }
ngOnInit() { } ngOnInit() {
let tabIndex: number;
ngAfterViewInit() { if (this.defaultKeyAction instanceof KeystrokeAction) {
this.onListItemClick(0); tabIndex = 0;
this.changeDetectorRef.detectChanges(); } 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 { onCancelClick(): void {
@@ -78,13 +81,8 @@ export class PopoverComponent implements OnInit, AfterViewInit {
} }
} }
onListItemClick(index: number): void { selectTab(index: number): void {
let listItems: HTMLLIElement[] = this.liElementRefs.toArray().map(liElementRef => liElementRef.nativeElement); this.activeTabIndex = index;
if (this.activeListItemIndex >= 0) {
this.renderer.setElementClass(listItems[this.activeListItemIndex], 'active', false);
}
this.renderer.setElementClass(listItems[index], 'active', true);
this.activeListItemIndex = index;
} }
} }

8
src/components/popover/tab/keymap/keymap-tab.component.html
View File

@@ -1,12 +1,12 @@
<div> <div>
<b>Switch to keymap:</b> <b>Switch to keymap:</b>
<select2 [data]="keymapOptions" (valueChanged)="onChange($event)" [width]="'100%'"></select2> <select2 [data]="keymapOptions" [selectedValue]="keymapOptions[selectedKeymapIndex + 1].id" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
</div> </div>
<div> <div>
<div> <div *ngIf="selectedKeymapIndex === -1">
<img *ngIf="selectedKeymapIndex === -1" src="/images/base-layer--blank.svg"> <img src="/images/base-layer--blank.svg">
</div> </div>
<svg-keyboard *ngIf="selectedKeymapIndex !== -1" <svg-keyboard *ngIf="selectedKeymapIndex >= 0"
[moduleConfig]="keymaps[selectedKeymapIndex].layers.elements[0].modules.elements"> [moduleConfig]="keymaps[selectedKeymapIndex].layers.elements[0].modules.elements">
</svg-keyboard> </svg-keyboard>
</div> </div>

30
src/components/popover/tab/keymap/keymap-tab.component.ts
View File

@@ -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 {UhkConfigurationService} from '../../../../services/uhk-configuration.service';
import {Keymap} from '../../../../../config-serializer/config-items/Keymap'; 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 {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 {SwitchKeymapAction} from '../../../../../config-serializer/config-items/SwitchKeymapAction';
import {OptionData} from 'ng2-select2/dist/select2'; 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')], styles: [require('./keymap-tab.component.scss')],
directives: [SvgKeyboardComponent, SELECT2_DIRECTIVES] directives: [SvgKeyboardComponent, SELECT2_DIRECTIVES]
}) })
export class KeymapTabComponent implements OnInit, KeyActionSaver { export class KeymapTabComponent implements OnInit, Tab {
@Input() defaultKeyAction: KeyAction;
private keymaps: Keymap[]; private keymaps: Keymap[];
private keymapOptions: Array<OptionData> = []; private keymapOptions: Array<OptionData>;
private selectedKeymapIndex: number; private selectedKeymapIndex: number;
constructor(private uhkConfigurationService: UhkConfigurationService) { constructor(private uhkConfigurationService: UhkConfigurationService) {
this.selectedKeymapIndex = -1;
this.keymaps = []; this.keymaps = [];
this.keymapOptions = [];
this.selectedKeymapIndex = -1;
} }
ngOnInit() { ngOnInit() {
@@ -35,21 +38,32 @@ export class KeymapTabComponent implements OnInit, KeyActionSaver {
text: 'Switch to keymap' 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 { return {
id: keymap.id.toString(), id: keymap.id.toString(),
text: keymap.name text: keymap.name
}; };
})); }));
this.fromKeyAction(this.defaultKeyAction);
} }
// TODO: change to the correct type when the wrapper has added it. // TODO: change to the correct type when the wrapper has added it.
onChange(event: any) { onChange(event: any) {
this.selectedKeymapIndex = parseInt(event.value, 10); this.selectedKeymapIndex = +event.value;
} }
keyActionValid(): boolean { keyActionValid(): boolean {
return this.selectedKeymapIndex !== -1; return this.selectedKeymapIndex >= 0;
}
fromKeyAction(keyAction: KeyAction): boolean {
if (!(keyAction instanceof SwitchKeymapAction)) {
return false;
}
let switchKeymapAction: SwitchKeymapAction = <SwitchKeymapAction>keyAction;
this.selectedKeymapIndex = this.keymaps.findIndex(keymap => switchKeymapAction.keymapId === keymap.id);
return true;
} }
toKeyAction(): SwitchKeymapAction { toKeyAction(): SwitchKeymapAction {

18
src/components/popover/tab/keypress/keypress-tab.component.html
View File

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

114
src/components/popover/tab/keypress/keypress-tab.component.ts
View File

@@ -1,18 +1,15 @@
import { Component, OnInit, ViewChild } from '@angular/core'; import {Component, OnInit, Input} 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 {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2'; import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
import {OptionData} from 'ng2-select2/dist/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({ @Component({
moduleId: module.id, moduleId: module.id,
selector: 'keypress-tab', selector: 'keypress-tab',
@@ -20,11 +17,8 @@ import {OptionData} from 'ng2-select2/dist/select2';
styles: [require('./keypress-tab.component.scss')], styles: [require('./keypress-tab.component.scss')],
directives: [CaptureKeystrokeButtonComponent, IconComponent, SELECT2_DIRECTIVES] directives: [CaptureKeystrokeButtonComponent, IconComponent, SELECT2_DIRECTIVES]
}) })
export class KeypressTabComponent implements OnInit, KeyActionSaver { export class KeypressTabComponent implements OnInit, Tab {
@Input() defaultKeyAction: KeyAction;
// TODO(@Nejc): We need a type for select2 component instead of any
@ViewChild('scanCodeSelect') scanCodeSelect: any;
@ViewChild('longPressSelect') longPressSelect: any;
private leftModifiers: string[]; private leftModifiers: string[];
private rightModifiers: string[]; private rightModifiers: string[];
@@ -35,6 +29,9 @@ export class KeypressTabComponent implements OnInit, KeyActionSaver {
private scanCodeGroups: Array<OptionData>; private scanCodeGroups: Array<OptionData>;
private longPressGroups: Array<OptionData>; private longPressGroups: Array<OptionData>;
private scanCode: number;
private selectedLongPressIndex: number;
constructor() { constructor() {
this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt']; this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt'];
this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt']; this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt'];
@@ -46,9 +43,12 @@ export class KeypressTabComponent implements OnInit, KeyActionSaver {
this.longPressGroups = require('json!./longPress.json'); this.longPressGroups = require('json!./longPress.json');
this.leftModifierSelects = Array(4).fill(false); this.leftModifierSelects = Array(4).fill(false);
this.rightModifierSelects = Array(4).fill(false); this.rightModifierSelects = Array(4).fill(false);
this.selectedLongPressIndex = -1;
} }
ngOnInit() { } ngOnInit() {
this.fromKeyAction(this.defaultKeyAction);
}
keyActionValid(keystrokeAction?: KeystrokeAction): boolean { keyActionValid(keystrokeAction?: KeystrokeAction): boolean {
if (!keystrokeAction) { if (!keystrokeAction) {
@@ -57,46 +57,46 @@ export class KeypressTabComponent implements OnInit, KeyActionSaver {
return keystrokeAction.scancode > 0 || keystrokeAction.modifierMask > 0; return keystrokeAction.scancode > 0 || keystrokeAction.modifierMask > 0;
} }
fromKeyAction(keyAction: KeyAction): boolean {
if (!(keyAction instanceof KeystrokeAction)) {
return false;
}
let keystrokeAction: 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 { toKeyAction(): KeystrokeAction {
let keystrokeAction: KeystrokeAction = new 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; keystrokeAction.modifierMask = 0;
let modifiers = this.leftModifierSelects.concat(this.rightModifierSelects).map(x => x ? 1 : 0); let modifiers = this.leftModifierSelects.concat(this.rightModifierSelects).map(x => x ? 1 : 0);
for (let i = 0; i < modifiers.length; ++i) { for (let i = 0; i < modifiers.length; ++i) {
keystrokeAction.modifierMask |= modifiers[i] << mapper(i); keystrokeAction.modifierMask |= modifiers[i] << this.modifierMapper(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); keystrokeAction.longPressAction = this.selectedLongPressIndex === -1
? undefined
: this.modifierMapper(this.selectedLongPressIndex);
if (!this.keyActionValid(keystrokeAction)) { if (!this.keyActionValid(keystrokeAction)) {
throw new Error('KeyAction is invalid!'); throw new Error('KeyAction is invalid!');
} }
return keystrokeAction; return keystrokeAction;
@@ -124,4 +124,22 @@ export class KeypressTabComponent implements OnInit, KeyActionSaver {
let modifierSelects: boolean[] = right ? this.rightModifierSelects : this.leftModifierSelects; let modifierSelects: boolean[] = right ? this.rightModifierSelects : this.leftModifierSelects;
modifierSelects[index] = !modifierSelects[index]; 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;
}
};
} }

24
src/components/popover/tab/keypress/longPress.json
View File

@@ -1,41 +1,41 @@
[ [
{ {
"id": "none", "id": "-1",
"text": "None" "text": "None"
}, },
{ {
"text": "Modifiers", "text": "Modifiers",
"children": [ "children": [
{ {
"id": "LShift", "id": "0",
"text": "LShift" "text": "LShift"
}, },
{ {
"id": "LCtrl", "id": "1",
"text": "LCtrl" "text": "LCtrl"
}, },
{ {
"id": "LSuper", "id": "2",
"text": "LSuper" "text": "LSuper"
}, },
{ {
"id": "LAlt", "id": "3",
"text": "LAlt" "text": "LAlt"
}, },
{ {
"id": "RShift", "id": "4",
"text": "RShift" "text": "RShift"
}, },
{ {
"id": "RCtrl", "id": "5",
"text": "RCtrl" "text": "RCtrl"
}, },
{ {
"id": "RSuper", "id": "6",
"text": "RSuper" "text": "RSuper"
}, },
{ {
"id": "RAlt", "id": "7",
"text": "RAlt" "text": "RAlt"
} }
] ]
@@ -44,15 +44,15 @@
"text": "Layer switcher", "text": "Layer switcher",
"children": [ "children": [
{ {
"id": "Mod", "id": "8",
"text": "Mod" "text": "Mod"
}, },
{ {
"id": "Mouse", "id": "9",
"text": "Mouse" "text": "Mouse"
}, },
{ {
"id": "Fn", "id": "10",
"text": "Fn" "text": "Fn"
} }
] ]

4
src/components/popover/tab/layer/layer-tab.component.html
View File

@@ -1,6 +1,6 @@
<select2 [data]="toggleData" (valueChanged)="toggleChanged($event)"></select2> <select2 #toggleSelect [data]="toggleData" [selectedValue]="toggle.toString()" (valueChanged)="toggleChanged($event)"></select2>
<span>the</span> <span>the</span>
<select2 [data]="layerData" (valueChanged)="layerChanged($event)"></select2> <select2 #layerSelect [data]="layerData" [selectedValue]="layer.toString()" (valueChanged)="layerChanged($event)"></select2>
<span [ngSwitch]="toggle"> <span [ngSwitch]="toggle">
<template ngSwitchCase="true">layer by pressing this key.</template> <template ngSwitchCase="true">layer by pressing this key.</template>
<template ngSwitchDefault="false">layer by holding this key.</template> <template ngSwitchDefault="false">layer by holding this key.</template>

35
src/components/popover/tab/layer/layer-tab.component.ts
View File

@@ -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 {Select2Component} from 'ng2-select2/dist/select2/select2.component';
import { KeyActionSaver } from '../../key-action-saver';
import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
import {OptionData} from 'ng2-select2/dist/select2'; import {OptionData} from 'ng2-select2/dist/select2';
import {Tab} from '../tab';
@Component({ @Component({
moduleId: module.id, moduleId: module.id,
selector: 'layer-tab', selector: 'layer-tab',
template: require('./layer-tab.component.html'), template: require('./layer-tab.component.html'),
styles: [require('./layer-tab.component.scss')], 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 toggle: boolean;
private layer: LayerName; private layer: LayerName;
@@ -50,12 +55,24 @@ export class LayerTabComponent implements OnInit, KeyActionSaver {
this.layer = LayerName.mod; this.layer = LayerName.mod;
} }
ngOnInit() { } ngOnInit() {
this.fromKeyAction(this.defaultKeyAction);
}
keyActionValid(): boolean { keyActionValid(): boolean {
return true; return true;
} }
fromKeyAction(keyAction: KeyAction): boolean {
if (!(keyAction instanceof SwitchLayerAction)) {
return false;
}
let switchLayerAction: SwitchLayerAction = <SwitchLayerAction>keyAction;
this.toggle = switchLayerAction.isLayerToggleable;
this.layer = switchLayerAction.layer;
return true;
}
toKeyAction(): SwitchLayerAction { toKeyAction(): SwitchLayerAction {
let keyAction = new SwitchLayerAction(); let keyAction = new SwitchLayerAction();
keyAction.isLayerToggleable = this.toggle; keyAction.isLayerToggleable = this.toggle;

2
src/components/popover/tab/macro/macro-tab.component.html
View File

@@ -1,6 +1,6 @@
<div class="macro-selector"> <div class="macro-selector">
<b> Play macro: </b> <b> Play macro: </b>
<select2 [data]="macrosOptions" (valueChanged)="onChange($event)" [width]="'100%'"></select2> <select2 [data]="macroOptions" [selectedValue]="macroOptions[selectedMacroIndex + 1].id" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
</div> </div>
<div class="macro-action-container"> <div class="macro-action-container">
<template [ngIf]="selectedMacroIndex >= 0"> <template [ngIf]="selectedMacroIndex >= 0">

37
src/components/popover/tab/macro/macro-tab.component.ts
View File

@@ -1,11 +1,12 @@
import { Component, OnInit } from '@angular/core'; import {Component, OnInit, Input} from '@angular/core';
import { UhkConfigurationService } from '../../../../services/uhk-configuration.service'; import {UhkConfigurationService} from '../../../../services/uhk-configuration.service';
import { Macro } from '../../../../../config-serializer/config-items/Macro'; import {Macro} from '../../../../../config-serializer/config-items/Macro';
import { PlayMacroAction } from '../../../../../config-serializer/config-items/PlayMacroAction'; import {KeyAction} from '../../../../../config-serializer/config-items/KeyAction';
import {PlayMacroAction} from '../../../../../config-serializer/config-items/PlayMacroAction';
import { KeyActionSaver } from '../../key-action-saver'; import {Tab} from '../tab';
import { MacroItemComponent } from './macro-item.component'; import {MacroItemComponent} from './macro-item.component';
import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2'; import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
import {OptionData} from 'ng2-select2/dist/select2'; import {OptionData} from 'ng2-select2/dist/select2';
@@ -17,40 +18,52 @@ import {OptionData} from 'ng2-select2/dist/select2';
styles: [require('./macro-tab.component.scss')], styles: [require('./macro-tab.component.scss')],
directives: [MacroItemComponent, SELECT2_DIRECTIVES] directives: [MacroItemComponent, SELECT2_DIRECTIVES]
}) })
export class MacroTabComponent implements OnInit, KeyActionSaver { export class MacroTabComponent implements OnInit, Tab {
@Input() defaultKeyAction: KeyAction;
private macros: Macro[]; private macros: Macro[];
private macrosOptions: Array<OptionData> = []; private macroOptions: Array<OptionData>;
private selectedMacroIndex: number; private selectedMacroIndex: number;
constructor(private uhkConfigurationService: UhkConfigurationService) { constructor(private uhkConfigurationService: UhkConfigurationService) {
this.macros = []; this.macros = [];
this.macroOptions = [];
this.selectedMacroIndex = -1; this.selectedMacroIndex = -1;
} }
ngOnInit() { ngOnInit() {
this.macros = this.uhkConfigurationService.getUhkConfiguration().macros.elements; this.macros = this.uhkConfigurationService.getUhkConfiguration().macros.elements;
this.macrosOptions.push({ this.macroOptions.push({
id: '-1', id: '-1',
text: 'Select macro' text: 'Select macro'
}); });
this.macrosOptions = this.macrosOptions.concat(this.macros.map(function(macro: Macro): OptionData { this.macroOptions = this.macroOptions.concat(this.macros.map(function (macro: Macro): OptionData {
return { return {
id: macro.id.toString(), id: macro.id.toString(),
text: macro.name text: macro.name
}; };
})); }));
this.fromKeyAction(this.defaultKeyAction);
} }
// TODO: change to the correct type when the wrapper has added it. // TODO: change to the correct type when the wrapper has added it.
onChange(event: any) { onChange(event: any) {
this.selectedMacroIndex = event.value; this.selectedMacroIndex = +event.value;
} }
keyActionValid(): boolean { keyActionValid(): boolean {
return this.selectedMacroIndex !== -1; return this.selectedMacroIndex >= 0;
}
fromKeyAction(keyAction: KeyAction): boolean {
if (!(keyAction instanceof PlayMacroAction)) {
return false;
}
let playMacroAction: PlayMacroAction = <PlayMacroAction>keyAction;
this.selectedMacroIndex = this.macros.findIndex(macro => playMacroAction.macroId === macro.id);
return true;
} }
toKeyAction(): PlayMacroAction { toKeyAction(): PlayMacroAction {

49
src/components/popover/tab/mouse/mouse-tab.component.html
View File

@@ -1,35 +1,39 @@
<div class="mouse-action col-sm-4"> <div class="mouse-action col-sm-4">
<ul class="nav nav-pills nav-stacked"> <ul class="nav nav-pills nav-stacked">
<li (click)="changePage(0)" [ngClass]="{active: selectedIndex===0}"><a> Move </a></li> <li (click)="changePage(0)" [class.active]="selectedPageIndex === 0"><a> Move </a></li>
<li (click)="changePage(1)" [ngClass]="{active: selectedIndex===1}"><a> Scroll </a></li> <li (click)="changePage(1)" [class.active]="selectedPageIndex === 1"><a> Scroll </a></li>
<li (click)="changePage(2)" [ngClass]="{active: selectedIndex===2}"><a> Click </a></li> <li (click)="changePage(2)" [class.active]="selectedPageIndex === 2"><a> Click </a></li>
<li (click)="changePage(3)" [ngClass]="{active: selectedIndex===3}"><a> Speed </a></li> <li (click)="changePage(3)" [class.active]="selectedPageIndex === 3"><a> Speed </a></li>
</ul> </ul>
</div> </div>
<div class="details col-sm-8" [ngSwitch]="selectedIndex"> <div class="details col-sm-8" [ngSwitch]="selectedPageIndex">
<div *ngSwitchCase="0" class="mouse__config mouse__config--move text-center"> <div *ngSwitchCase="0" class="mouse__config mouse__config--move text-center">
<div class="row"> <div class="row">
<button type="button" class="btn btn-default btn-lg" <button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.moveUp)"> [class.btn-primary]="mouseActionParam === MouseActionParam.moveUp"
(click)="setMouseActionParam(MouseActionParam.moveUp)">
<i class="fa fa-arrow-up"></i> <i class="fa fa-arrow-up"></i>
</button> </button>
</div> </div>
<div class="row"> <div class="row">
<button type="button" class="btn btn-default btn-lg" <button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.moveLeft)"> [class.btn-primary]="mouseActionParam === MouseActionParam.moveLeft"
(click)="setMouseActionParam(MouseActionParam.moveLeft)">
<i class="fa fa-arrow-left"></i> <i class="fa fa-arrow-left"></i>
</button> </button>
<button type="button" class="btn btn-default btn-lg btn-placeholder"> <button type="button" class="btn btn-default btn-lg btn-placeholder">
<i class="fa fa-square"></i> <i class="fa fa-square"></i>
</button> </button>
<button type="button" class="btn btn-default btn-lg" <button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.moveRight)"> [class.btn-primary]="mouseActionParam === MouseActionParam.moveRight"
(click)="setMouseActionParam(MouseActionParam.moveRight)">
<i class="fa fa-arrow-right"></i> <i class="fa fa-arrow-right"></i>
</button> </button>
</div> </div>
<div class="row"> <div class="row">
<button type="button" class="btn btn-default btn-lg" <button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.moveDown)"> [class.btn-primary]="mouseActionParam === MouseActionParam.moveDown"
(click)="setMouseActionParam(MouseActionParam.moveDown)">
<i class="fa fa-arrow-down"></i> <i class="fa fa-arrow-down"></i>
</button> </button>
</div> </div>
@@ -37,26 +41,30 @@
<div *ngSwitchCase="1" class="mouse__config mouse__config--scroll text-center"> <div *ngSwitchCase="1" class="mouse__config mouse__config--scroll text-center">
<div class="row"> <div class="row">
<button type="button" class="btn btn-default btn-lg" <button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.scrollUp)"> [class.btn-primary]="mouseActionParam === MouseActionParam.scrollUp"
(click)="setMouseActionParam(MouseActionParam.scrollUp)">
<i class="fa fa-angle-double-up"></i> <i class="fa fa-angle-double-up"></i>
</button> </button>
</div> </div>
<div class="row"> <div class="row">
<button type="button" class="btn btn-default btn-lg" <button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.scrollLeft)"> [class.btn-primary]="mouseActionParam === MouseActionParam.scrollLeft"
(click)="setMouseActionParam(MouseActionParam.scrollLeft)">
<i class="fa fa-angle-double-left"></i> <i class="fa fa-angle-double-left"></i>
</button> </button>
<button type="button" class="btn btn-default btn-lg btn-placeholder"> <button type="button" class="btn btn-default btn-lg btn-placeholder">
<i class="fa fa-square"></i> <i class="fa fa-square"></i>
</button> </button>
<button type="button" class="btn btn-default btn-lg" <button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.scrollRight)"> [class.btn-primary]="mouseActionParam === MouseActionParam.scrollRight"
(click)="setMouseActionParam(MouseActionParam.scrollRight)">
<i class="fa fa-angle-double-right"></i> <i class="fa fa-angle-double-right"></i>
</button> </button>
</div> </div>
<div class="row"> <div class="row">
<button type="button" class="btn btn-default btn-lg" <button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.scrollDown)"> [class.btn-primary]="mouseActionParam === MouseActionParam.scrollDown"
(click)="setMouseActionParam(MouseActionParam.scrollDown)">
<i class="fa fa-angle-double-down"></i> <i class="fa fa-angle-double-down"></i>
</button> </button>
</div> </div>
@@ -64,11 +72,14 @@
<div *ngSwitchCase="2" class="mouse__config mouse__config--click"> <div *ngSwitchCase="2" class="mouse__config mouse__config--click">
<div class="btn-group col-xs-12" role="group"> <div class="btn-group col-xs-12" role="group">
<button type="button" class="btn btn-default col-xs-4" <button type="button" class="btn btn-default col-xs-4"
(click)="onMouseActionClick($event.target, MouseActionParam.leftClick)">Left</button> [class.btn-primary]="mouseActionParam === MouseActionParam.leftClick"
(click)="setMouseActionParam(MouseActionParam.leftClick)">Left</button>
<button type="button" class="btn btn-default col-xs-4" <button type="button" class="btn btn-default col-xs-4"
(click)="onMouseActionClick($event.target, MouseActionParam.middleClick)">Middle</button> [class.btn-primary]="mouseActionParam === MouseActionParam.middleClick"
(click)="setMouseActionParam(MouseActionParam.middleClick)">Middle</button>
<button type="button" class="btn btn-default col-xs-4" <button type="button" class="btn btn-default col-xs-4"
(click)="onMouseActionClick($event.target, MouseActionParam.rightClick)">Right</button> [class.btn-primary]="mouseActionParam === MouseActionParam.rightClick"
(click)="setMouseActionParam(MouseActionParam.rightClick)">Right</button>
</div> </div>
</div> </div>
<div *ngSwitchCase="3" class="mouse__config mouse__config--speed text-center"> <div *ngSwitchCase="3" class="mouse__config mouse__config--speed text-center">
@@ -78,9 +89,11 @@
</div> </div>
<div class="btn-group btn-group-lg" role="group"> <div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-default" <button type="button" class="btn btn-default"
(click)="onMouseActionClick($event.target, MouseActionParam.decelerate)">-</button> [class.btn-primary]="mouseActionParam === MouseActionParam.decelerate"
(click)="setMouseActionParam(MouseActionParam.decelerate)">-</button>
<button type="button" class="btn btn-default" <button type="button" class="btn btn-default"
(click)="onMouseActionClick($event.target, MouseActionParam.accelerate)">+</button> [class.btn-primary]="mouseActionParam === MouseActionParam.acelerate"
(click)="setMouseActionParam(MouseActionParam.accelerate)">+</button>
</div> </div>
</div> </div>
<div *ngSwitchDefault> <div *ngSwitchDefault>

70
src/components/popover/tab/mouse/mouse-tab.component.ts
View File

@@ -1,7 +1,8 @@
import { Component, OnInit, Renderer} from '@angular/core'; import {Component, OnInit, Input} from '@angular/core';
import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common'; import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common';
import { KeyActionSaver } from '../../key-action-saver'; import {Tab} from '../tab';
import {KeyAction} from '../../../../../config-serializer/config-items/KeyAction';
import {MouseAction, MouseActionParam} from '../../../../../config-serializer/config-items/MouseAction'; import {MouseAction, MouseActionParam} from '../../../../../config-serializer/config-items/MouseAction';
@Component({ @Component({
@@ -11,20 +12,61 @@ import {MouseAction, MouseActionParam} from '../../../../../config-serializer/co
styles: [require('./mouse-tab.component.scss')], styles: [require('./mouse-tab.component.scss')],
directives: [NgSwitch, NgSwitchCase, NgSwitchDefault] directives: [NgSwitch, NgSwitchCase, NgSwitchDefault]
}) })
export class MouseTabComponent implements OnInit, KeyActionSaver { export class MouseTabComponent implements OnInit, Tab {
@Input() defaultKeyAction: KeyAction;
private mouseActionParam: MouseActionParam; private mouseActionParam: MouseActionParam;
private selectedIndex: number; private selectedPageIndex: number;
private selectedButton: HTMLButtonElement;
private MouseActionParam = MouseActionParam; private MouseActionParam = MouseActionParam;
constructor(private renderer: Renderer) { constructor() {
this.selectedIndex = 0; this.selectedPageIndex = 0;
} }
ngOnInit() { } ngOnInit() {
this.fromKeyAction(this.defaultKeyAction);
}
keyActionValid(): boolean { keyActionValid(): boolean {
return !!this.mouseActionParam; return this.mouseActionParam !== undefined;
}
fromKeyAction(keyAction: KeyAction): boolean {
if (!(keyAction instanceof MouseAction)) {
return false;
}
let mouseAction: MouseAction = <MouseAction>keyAction;
this.mouseActionParam = mouseAction.mouseAction;
if (mouseAction.mouseAction === MouseActionParam.moveUp) {
this.selectedPageIndex = 0;
}
switch (mouseAction.mouseAction) {
case MouseActionParam.moveDown:
case MouseActionParam.moveUp:
case MouseActionParam.moveLeft:
case MouseActionParam.moveRight:
this.selectedPageIndex = 0;
break;
case MouseActionParam.scrollDown:
case MouseActionParam.scrollUp:
case MouseActionParam.scrollLeft:
case MouseActionParam.scrollRight:
this.selectedPageIndex = 1;
break;
case MouseActionParam.leftClick:
case MouseActionParam.middleClick:
case MouseActionParam.rightClick:
this.selectedPageIndex = 2;
break;
case MouseActionParam.decelerate:
case MouseActionParam.accelerate:
this.selectedPageIndex = 3;
break;
default:
return false;
}
return true;
} }
toKeyAction(): MouseAction { toKeyAction(): MouseAction {
@@ -41,17 +83,11 @@ export class MouseTabComponent implements OnInit, KeyActionSaver {
console.error(`Invalid index error: ${index}`); console.error(`Invalid index error: ${index}`);
return; return;
} }
this.selectedIndex = index; this.selectedPageIndex = index;
this.mouseActionParam = undefined; this.mouseActionParam = undefined;
this.selectedButton = undefined;
} }
onMouseActionClick(target: HTMLButtonElement, mouseActionParam: MouseActionParam) { setMouseActionParam(mouseActionParam: MouseActionParam) {
if (this.selectedButton) {
this.renderer.setElementClass(this.selectedButton, 'btn-primary', false);
}
this.selectedButton = target;
this.renderer.setElementClass(target, 'btn-primary', true);
this.mouseActionParam = mouseActionParam; this.mouseActionParam = mouseActionParam;
} }

13
src/components/popover/tab/none/none-tab.component.ts
View File

@@ -1,7 +1,8 @@
import { Component, OnInit } from '@angular/core'; import {Component, OnInit } from '@angular/core';
import { KeyActionSaver } from '../../key-action-saver'; import {Tab} from '../tab';
import { NoneAction } from '../../../../../config-serializer/config-items/NoneAction'; import {KeyAction} from '../../../../../config-serializer/config-items/KeyAction';
import {NoneAction} from '../../../../../config-serializer/config-items/NoneAction';
@Component({ @Component({
moduleId: module.id, moduleId: module.id,
@@ -9,7 +10,7 @@ import { NoneAction } from '../../../../../config-serializer/config-items/NoneAc
template: require('./none-tab.component.html'), template: require('./none-tab.component.html'),
styles: [require('./none-tab.component.scss')] styles: [require('./none-tab.component.scss')]
}) })
export class NoneTabComponent implements OnInit, KeyActionSaver { export class NoneTabComponent implements OnInit, Tab {
constructor() { } constructor() { }
ngOnInit() { } ngOnInit() { }
@@ -18,6 +19,10 @@ export class NoneTabComponent implements OnInit, KeyActionSaver {
return true; return true;
} }
fromKeyAction(keyAction: KeyAction): boolean {
return false;
}
toKeyAction(): NoneAction { toKeyAction(): NoneAction {
return new NoneAction(); return new NoneAction();
} }

7
src/components/popover/tab/tab.ts Normal file
View File

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

2
src/components/svg/keys/svg-keyboard-key.component.ts
View File

@@ -124,6 +124,8 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
break; break;
} }
this.labelSource = newLabelSource; this.labelSource = newLabelSource;
} else {
this.labelSource = undefined;
} }
} else if (this.keyAction instanceof SwitchLayerAction) { } else if (this.keyAction instanceof SwitchLayerAction) {
let keyAction: SwitchLayerAction = this.keyAction as SwitchLayerAction; let keyAction: SwitchLayerAction = this.keyAction as SwitchLayerAction;

2
src/components/svg/popover/svg-keyboard-popover.component.html
View File

@@ -1,4 +1,4 @@
<svg-keyboard [moduleConfig]="moduleConfig" <svg-keyboard [moduleConfig]="moduleConfig"
(keyClick)="onKeyClick($event.moduleId, $event.keyId)"> (keyClick)="onKeyClick($event.moduleId, $event.keyId)">
</svg-keyboard> </svg-keyboard>
<popover *ngIf="popoverEnabled" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover> <popover *ngIf="popoverEnabled" [defaultKeyAction]="popoverInitKeyAction" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 221 B

After

Width:  |  Height:  |  Size: 263 B

9
src/components/svg/popover/svg-keyboard-popover.component.ts
View File

@@ -16,6 +16,7 @@ export class SvgKeyboardPopoverComponent implements OnInit {
private popoverEnabled: boolean; private popoverEnabled: boolean;
private keyEditConfig: { moduleId: number, keyId: number }; private keyEditConfig: { moduleId: number, keyId: number };
private popoverInitKeyAction: KeyAction;
constructor() { constructor() {
this.keyEditConfig = { this.keyEditConfig = {
@@ -32,7 +33,9 @@ export class SvgKeyboardPopoverComponent implements OnInit {
moduleId, moduleId,
keyId keyId
}; };
this.showPopover();
let keyActionToEdit: KeyAction = this.moduleConfig[moduleId].keyActions.elements[keyId];
this.showPopover(keyActionToEdit);
} }
} }
@@ -41,12 +44,14 @@ export class SvgKeyboardPopoverComponent implements OnInit {
this.hidePopover(); this.hidePopover();
} }
showPopover(): void { showPopover(keyAction?: KeyAction): void {
this.popoverInitKeyAction = keyAction;
this.popoverEnabled = true; this.popoverEnabled = true;
} }
hidePopover(): void { hidePopover(): void {
this.popoverEnabled = false; this.popoverEnabled = false;
this.popoverInitKeyAction = undefined;
} }
changeKeyAction(keyAction: KeyAction): void { changeKeyAction(keyAction: KeyAction): void {