Keymap data layer (#95)

This commit is contained in:
Nejc Zdovc
2016-09-18 12:38:42 +02:00
committed by József Farkas
parent fb8cd163ec
commit b78bc5850f
40 changed files with 748 additions and 195 deletions

View File

@@ -46,7 +46,7 @@
<layer-tab #tab *ngSwitchCase="TabName.Layer" class="popover-content" [defaultKeyAction]="defaultKeyAction"></layer-tab>
<mouse-tab #tab *ngSwitchCase="TabName.Mouse" class="popover-content" [defaultKeyAction]="defaultKeyAction"></mouse-tab>
<macro-tab #tab *ngSwitchCase="TabName.Macro" class="popover-content" [defaultKeyAction]="defaultKeyAction"></macro-tab>
<keymap-tab #tab *ngSwitchCase="TabName.Keymap" class="popover-content" [defaultKeyAction]="defaultKeyAction"></keymap-tab>
<keymap-tab #tab *ngSwitchCase="TabName.Keymap" class="popover-content" [defaultKeyAction]="defaultKeyAction" [keymaps]="keymaps$ | async"></keymap-tab>
<none-tab #tab *ngSwitchCase="TabName.None" class="popover-content"></none-tab>
</div>
<div class="row">

View File

@@ -1,4 +1,6 @@
import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { Store } from '@ngrx/store';
import {
KeyAction,
@@ -8,7 +10,12 @@ import {
SwitchKeymapAction,
SwitchLayerAction
} from '../../config-serializer/config-items/key-action';
import {Tab} from './tab/tab';
import { Keymap } from '../../config-serializer/config-items/Keymap';
import { Tab } from './tab/tab';
import { AppState } from '../../store';
import { Observable } from 'rxjs/Observable';
enum TabName {
Keypress,
@@ -38,11 +45,15 @@ export class PopoverComponent implements OnInit {
private TabName = TabName;
/* tslint:enable:no-unused-variable tslint:enable:variable-name */
private activeTab: TabName;
private keymaps$: Observable<Keymap[]>;
constructor() { }
constructor(private store: Store<AppState>) {
this.keymaps$ = store.select((appState: AppState) => appState.keymaps);
}
ngOnInit() {
let tab: TabName;
if (this.defaultKeyAction instanceof KeystrokeAction) {
tab = TabName.Keypress;
} else if (this.defaultKeyAction instanceof SwitchLayerAction) {
@@ -56,6 +67,7 @@ export class PopoverComponent implements OnInit {
} else {
tab = TabName.None;
}
this.selectTab(tab);
}
@@ -76,5 +88,4 @@ export class PopoverComponent implements OnInit {
selectTab(tab: TabName): void {
this.activeTab = tab;
}
}

View File

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

View File

@@ -1,56 +1,55 @@
import {Component, Input, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import {Select2OptionData} from 'ng2-select2/ng2-select2';
import { Select2OptionData } from 'ng2-select2/ng2-select2';
import {KeyAction, SwitchKeymapAction} from '../../../../config-serializer/config-items/key-action';
import {Keymap} from '../../../../config-serializer/config-items/Keymap';
import {Tab} from '../tab';
import {UhkConfigurationService} from '../../../../services/uhk-configuration.service';
import { KeyAction, SwitchKeymapAction } from '../../../../config-serializer/config-items/key-action';
import { Keymap } from '../../../../config-serializer/config-items/Keymap';
import { Tab } from '../tab';
@Component({
selector: 'keymap-tab',
template: require('./keymap-tab.component.html'),
styles: [require('./keymap-tab.component.scss')]
styles: [require('./keymap-tab.component.scss')],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class KeymapTabComponent implements OnInit, Tab {
@Input() defaultKeyAction: KeyAction;
@Input() keymaps: Keymap[];
private keymaps: Keymap[];
private keymapOptions: Array<Select2OptionData>;
private selectedKeymapIndex: number;
private selectedKeymap: Keymap;
constructor(private uhkConfigurationService: UhkConfigurationService) {
this.keymaps = [];
constructor() {
this.keymapOptions = [];
this.selectedKeymapIndex = -1;
}
ngOnInit() {
this.keymaps = this.uhkConfigurationService.getUhkConfiguration().keymaps.elements;
this.keymapOptions.push({
id: '-1',
text: 'Switch to keymap'
});
this.keymapOptions = this.keymapOptions.concat(this.keymaps.map(function (keymap: Keymap): Select2OptionData {
this.keymapOptions = this.keymaps.map((keymap: Keymap): Select2OptionData => {
return {
id: keymap.id.toString(),
id: keymap.abbreviation,
text: keymap.name
};
}));
});
this.fromKeyAction(this.defaultKeyAction);
}
// TODO: change to the correct type when the wrapper has added it.
onChange(event: any) {
this.selectedKeymapIndex = +event.value;
if (event.value === '-1') {
this.selectedKeymap = undefined;
} else {
this.selectedKeymap = this.keymaps.find((keymap: Keymap) => keymap.abbreviation === event.value);
}
}
keyActionValid(): boolean {
return this.selectedKeymapIndex >= 0;
return !!this.selectedKeymap;
}
fromKeyAction(keyAction: KeyAction): boolean {
@@ -58,16 +57,17 @@ export class KeymapTabComponent implements OnInit, Tab {
return false;
}
let switchKeymapAction: SwitchKeymapAction = <SwitchKeymapAction>keyAction;
this.selectedKeymapIndex = this.keymaps.findIndex(keymap => switchKeymapAction.keymapId === keymap.id);
return true;
this.selectedKeymap = this.keymaps
.find((keymap: Keymap) => keymap.abbreviation === switchKeymapAction.keymapAbbreviation);
}
toKeyAction(): SwitchKeymapAction {
if (!this.keyActionValid()) {
throw new Error('KeyAction is not valid. No selected keymap!');
}
let keymapAction = new SwitchKeymapAction();
keymapAction.keymapId = this.keymaps[this.selectedKeymapIndex].id;
keymapAction.keymapAbbreviation = this.selectedKeymap.abbreviation;
return keymapAction;
}
}