Keymap data layer (#95)
This commit is contained in:
committed by
József Farkas
parent
fb8cd163ec
commit
b78bc5850f
@@ -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">
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user