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

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

@@ -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<any>();
@Output() remap = new EventEmitter<KeyAction>();
@ViewChildren('keypress,layer,mouse,macro,keymap,none') liElementRefs: QueryList<ElementRef>;
@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;
}
}

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

@@ -1,12 +1,12 @@
<div>
<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>
<img *ngIf="selectedKeymapIndex === -1" src="/images/base-layer--blank.svg">
<div *ngIf="selectedKeymapIndex === -1">
<img src="/images/base-layer--blank.svg">
</div>
<svg-keyboard *ngIf="selectedKeymapIndex !== -1"
<svg-keyboard *ngIf="selectedKeymapIndex >= 0"
[moduleConfig]="keymaps[selectedKeymapIndex].layers.elements[0].modules.elements">
</svg-keyboard>
</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 {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<OptionData> = [];
private keymapOptions: Array<OptionData>;
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 = <SwitchKeymapAction>keyAction;
this.selectedKeymapIndex = this.keymaps.findIndex(keymap => switchKeymapAction.keymapId === keymap.id);
return true;
}
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">
<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>
</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; let index = index"
[ngClass]="{ 'btn-primary': leftModifierSelects[index]}"
(click)="toggleModifier(false, index)">
<button type="button" class="btn btn-default" *ngFor="let modifier of leftModifiers; let index = index" [class.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; let index = index"
[ngClass]="{ 'btn-primary': rightModifierSelects[index] }"
(click)="toggleModifier(true, index)">
<button type="button" class="btn btn-default" *ngFor="let modifier of rightModifiers; let index = index" [class.btn-primary]="rightModifierSelects[index]"
(click)="toggleModifier(true, index)">
{{modifier}}
</button>
</div>
@@ -26,6 +23,7 @@
</div>
<div class="long-press-container">
<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>
</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 { 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<OptionData>;
private longPressGroups: Array<OptionData>;
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 = <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;
}
};
}

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

@@ -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"
}
]

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>
<select2 [data]="layerData" (valueChanged)="layerChanged($event)"></select2>
<select2 #layerSelect [data]="layerData" [selectedValue]="layer.toString()" (valueChanged)="layerChanged($event)"></select2>
<span [ngSwitch]="toggle">
<template ngSwitchCase="true">layer by pressing 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 { 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 = <SwitchLayerAction>keyAction;
this.toggle = switchLayerAction.isLayerToggleable;
this.layer = switchLayerAction.layer;
return true;
}
toKeyAction(): SwitchLayerAction {
let keyAction = new SwitchLayerAction();
keyAction.isLayerToggleable = this.toggle;

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

@@ -1,6 +1,6 @@
<div class="macro-selector">
<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 class="macro-action-container">
<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 { Macro } from '../../../../../config-serializer/config-items/Macro';
import { PlayMacroAction } from '../../../../../config-serializer/config-items/PlayMacroAction';
import {UhkConfigurationService} from '../../../../services/uhk-configuration.service';
import {Macro} from '../../../../../config-serializer/config-items/Macro';
import {KeyAction} from '../../../../../config-serializer/config-items/KeyAction';
import {PlayMacroAction} from '../../../../../config-serializer/config-items/PlayMacroAction';
import { KeyActionSaver } from '../../key-action-saver';
import { MacroItemComponent } from './macro-item.component';
import {Tab} from '../tab';
import {MacroItemComponent} from './macro-item.component';
import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-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')],
directives: [MacroItemComponent, SELECT2_DIRECTIVES]
})
export class MacroTabComponent implements OnInit, KeyActionSaver {
export class MacroTabComponent implements OnInit, Tab {
@Input() defaultKeyAction: KeyAction;
private macros: Macro[];
private macrosOptions: Array<OptionData> = [];
private macroOptions: Array<OptionData>;
private selectedMacroIndex: number;
constructor(private uhkConfigurationService: UhkConfigurationService) {
this.macros = [];
this.macroOptions = [];
this.selectedMacroIndex = -1;
}
ngOnInit() {
this.macros = this.uhkConfigurationService.getUhkConfiguration().macros.elements;
this.macrosOptions.push({
this.macroOptions.push({
id: '-1',
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 {
id: macro.id.toString(),
text: macro.name
};
}));
this.fromKeyAction(this.defaultKeyAction);
}
// TODO: change to the correct type when the wrapper has added it.
onChange(event: any) {
this.selectedMacroIndex = event.value;
this.selectedMacroIndex = +event.value;
}
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 {

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

@@ -1,35 +1,39 @@
<div class="mouse-action col-sm-4">
<ul class="nav nav-pills nav-stacked">
<li (click)="changePage(0)" [ngClass]="{active: selectedIndex===0}"><a> Move </a></li>
<li (click)="changePage(1)" [ngClass]="{active: selectedIndex===1}"><a> Scroll </a></li>
<li (click)="changePage(2)" [ngClass]="{active: selectedIndex===2}"><a> Click </a></li>
<li (click)="changePage(3)" [ngClass]="{active: selectedIndex===3}"><a> Speed </a></li>
<li (click)="changePage(0)" [class.active]="selectedPageIndex === 0"><a> Move </a></li>
<li (click)="changePage(1)" [class.active]="selectedPageIndex === 1"><a> Scroll </a></li>
<li (click)="changePage(2)" [class.active]="selectedPageIndex === 2"><a> Click </a></li>
<li (click)="changePage(3)" [class.active]="selectedPageIndex === 3"><a> Speed </a></li>
</ul>
</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 class="row">
<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>
</button>
</div>
<div class="row">
<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>
</button>
<button type="button" class="btn btn-default btn-lg btn-placeholder">
<i class="fa fa-square"></i>
</button>
<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>
</button>
</div>
<div class="row">
<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>
</button>
</div>
@@ -37,26 +41,30 @@
<div *ngSwitchCase="1" class="mouse__config mouse__config--scroll text-center">
<div class="row">
<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>
</button>
</div>
<div class="row">
<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>
</button>
<button type="button" class="btn btn-default btn-lg btn-placeholder">
<i class="fa fa-square"></i>
</button>
<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>
</button>
</div>
<div class="row">
<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>
</button>
</div>
@@ -64,11 +72,14 @@
<div *ngSwitchCase="2" class="mouse__config mouse__config--click">
<div class="btn-group col-xs-12" role="group">
<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"
(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"
(click)="onMouseActionClick($event.target, MouseActionParam.rightClick)">Right</button>
[class.btn-primary]="mouseActionParam === MouseActionParam.rightClick"
(click)="setMouseActionParam(MouseActionParam.rightClick)">Right</button>
</div>
</div>
<div *ngSwitchCase="3" class="mouse__config mouse__config--speed text-center">
@@ -78,9 +89,11 @@
</div>
<div class="btn-group btn-group-lg" role="group">
<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"
(click)="onMouseActionClick($event.target, MouseActionParam.accelerate)">+</button>
[class.btn-primary]="mouseActionParam === MouseActionParam.acelerate"
(click)="setMouseActionParam(MouseActionParam.accelerate)">+</button>
</div>
</div>
<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 { 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';
@Component({
@@ -11,20 +12,61 @@ import {MouseAction, MouseActionParam} from '../../../../../config-serializer/co
styles: [require('./mouse-tab.component.scss')],
directives: [NgSwitch, NgSwitchCase, NgSwitchDefault]
})
export class MouseTabComponent implements OnInit, KeyActionSaver {
export class MouseTabComponent implements OnInit, Tab {
@Input() defaultKeyAction: KeyAction;
private mouseActionParam: MouseActionParam;
private selectedIndex: number;
private selectedButton: HTMLButtonElement;
private selectedPageIndex: number;
private MouseActionParam = MouseActionParam;
constructor(private renderer: Renderer) {
this.selectedIndex = 0;
constructor() {
this.selectedPageIndex = 0;
}
ngOnInit() { }
ngOnInit() {
this.fromKeyAction(this.defaultKeyAction);
}
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 {
@@ -41,17 +83,11 @@ export class MouseTabComponent implements OnInit, KeyActionSaver {
console.error(`Invalid index error: ${index}`);
return;
}
this.selectedIndex = index;
this.selectedPageIndex = index;
this.mouseActionParam = undefined;
this.selectedButton = undefined;
}
onMouseActionClick(target: HTMLButtonElement, mouseActionParam: MouseActionParam) {
if (this.selectedButton) {
this.renderer.setElementClass(this.selectedButton, 'btn-primary', false);
}
this.selectedButton = target;
this.renderer.setElementClass(target, 'btn-primary', true);
setMouseActionParam(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 { NoneAction } from '../../../../../config-serializer/config-items/NoneAction';
import {Tab} from '../tab';
import {KeyAction} from '../../../../../config-serializer/config-items/KeyAction';
import {NoneAction} from '../../../../../config-serializer/config-items/NoneAction';
@Component({
moduleId: module.id,
@@ -9,7 +10,7 @@ import { NoneAction } from '../../../../../config-serializer/config-items/NoneAc
template: require('./none-tab.component.html'),
styles: [require('./none-tab.component.scss')]
})
export class NoneTabComponent implements OnInit, KeyActionSaver {
export class NoneTabComponent implements OnInit, Tab {
constructor() { }
ngOnInit() { }
@@ -18,6 +19,10 @@ export class NoneTabComponent implements OnInit, KeyActionSaver {
return true;
}
fromKeyAction(keyAction: KeyAction): boolean {
return false;
}
toKeyAction(): 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;
}
this.labelSource = newLabelSource;
} else {
this.labelSource = undefined;
}
} else if (this.keyAction instanceof 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"
(keyClick)="onKeyClick($event.moduleId, $event.keyId)">
</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 keyEditConfig: { moduleId: number, keyId: number };
private popoverInitKeyAction: KeyAction;
constructor() {
this.keyEditConfig = {
@@ -32,7 +33,9 @@ export class SvgKeyboardPopoverComponent implements OnInit {
moduleId,
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();
}
showPopover(): void {
showPopover(keyAction?: KeyAction): void {
this.popoverInitKeyAction = keyAction;
this.popoverEnabled = true;
}
hidePopover(): void {
this.popoverEnabled = false;
this.popoverInitKeyAction = undefined;
}
changeKeyAction(keyAction: KeyAction): void {