SwitchKeymap rendering

This commit is contained in:
József Farkas
2016-05-16 12:38:37 +02:00
parent 570202bd99
commit 5759d2db1e
8 changed files with 124 additions and 15 deletions

View File

@@ -1,6 +1,7 @@
import {Serializable} from '../Serializable';
import {ModuleConfigurations} from './ModuleConfigurations';
import {KeyMaps} from './KeyMaps';
import {KeyMap} from './KeyMap';
import {Macros} from './Macros';
import {UhkBuffer} from '../UhkBuffer';
import {assertUInt8, assertUInt32} from '../assert';
@@ -85,4 +86,13 @@ export class UhkConfiguration extends Serializable<UhkConfiguration> {
toString(): string {
return `<UhkConfiguration signature="${this.signature}">`;
}
getKeymap(keymapId: number): KeyMap {
let keyMaps: KeyMap[] = this.keyMaps.elements;
for (let i = 0; i < keyMaps.length; ++i) {
if (keymapId === keyMaps[i].id) {
return keyMaps[i];
}
}
}
}

View File

@@ -392,7 +392,8 @@
"keyActionType": "none"
},
{
"keyActionType": "none"
"keyActionType": "switchKeymap",
"keymapId": 2
},
{
"keyActionType": "none"
@@ -824,6 +825,28 @@
]
}
]
},
{
"id": 2,
"isDefault": false,
"abbreviation": "DVR",
"name": "DVR",
"layers": [
{
"modules": [
{
"id": 0,
"pointerRole": "move",
"keyActions": []
},
{
"id": 1,
"pointerRole": "move",
"keyActions": []
}
]
}
]
}
],
"macros": [

View File

@@ -6,17 +6,22 @@ import {KeystrokeAction} from '../../../config-serializer/config-items/Keystroke
import {KeystrokeModifiersAction, KeyModifiers} from '../../../config-serializer/config-items/KeystrokeModifiersAction';
import {SwitchLayerAction, LayerName} from '../../../config-serializer/config-items/SwitchLayerAction';
import {MapperService} from '../../services/mapper.service';
import {SwitchKeymapAction} from '../../../config-serializer/config-items/SwitchKeymapAction';
import {UhkConfiguration} from '../../../config-serializer/config-items/UhkConfiguration';
import {UhkConfigurationService} from '../../services/uhk-configuration.service';
import {SvgOneLineTextKeyComponent} from './svg-one-line-text-key.component';
import {SvgTwoLineTextKeyComponent} from './svg-two-line-text-key.component';
import {SvgSingleIconKeyComponent} from './svg-single-icon-key.component';
import {SvgTextIconKeyComponent} from './svg-text-icon-key.component';
import {SvgSwitchKeymapKeyComponent} from './svg-switch-keymap-key.component';
enum LabelTypes {
OneLineText,
TwoLineText,
TextIcon,
SingleIcon
SingleIcon,
SwitchKeymap
}
@Component({
@@ -49,6 +54,11 @@ enum LabelTypes {
[width]="width"
[icon]="labelSource">
</svg:g>
<svg:g svg-switch-keymap-key *ngSwitchWhen="enumLabelTypes.SwitchKeymap"
[height]="height"
[width]="width"
[abbreviation]="labelSource">
</svg:g>
</svg:g>
`,
directives:
@@ -58,7 +68,8 @@ enum LabelTypes {
SvgOneLineTextKeyComponent,
SvgTwoLineTextKeyComponent,
SvgSingleIconKeyComponent,
SvgTextIconKeyComponent
SvgTextIconKeyComponent,
SvgSwitchKeymapKeyComponent
]
})
export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
@@ -77,7 +88,7 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
private labelSource: any;
private labelType: LabelTypes;
constructor(private mapperService: MapperService) { }
constructor(private mapperService: MapperService, private uhkConfigurationService: UhkConfigurationService) { }
ngOnInit() {
this.setLabels();
@@ -163,11 +174,15 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
text: newLabelSource,
icon: this.mapperService.getIcon('toggle')
};
console.log(keyAction, this.labelSource);
} else {
this.labelType = LabelTypes.OneLineText;
this.labelSource = newLabelSource;
}
} else if (this.keyAction instanceof SwitchKeymapAction) {
let keyAction: SwitchKeymapAction = this.keyAction as SwitchKeymapAction;
this.labelType = LabelTypes.SwitchKeymap;
let uhkConfiguration: UhkConfiguration = this.uhkConfigurationService.getUhkConfiguration();
this.labelSource = uhkConfiguration.getKeymap(keyAction.keymapId).abbreviation;
}
}

View File

@@ -0,0 +1,41 @@
import { Component, OnInit, Input } from '@angular/core';
import {MapperService} from '../../services/mapper.service';
@Component({
moduleId: module.id,
selector: 'g[svg-switch-keymap-key]',
template:
`
<svg:use [attr.xlink:href]="icon"
[attr.width]="width / 4"
[attr.height]="height / 4"
[attr.x]="width * 3 / 8"
[attr.y]="height / 5"
fill="white">
</svg:use>
<svg:text
[attr.x]="0"
[attr.y]="height * 2 / 3"
[attr.text-anchor]="'middle'"
[attr.font-size]="19"
[attr.font-family]="'Helvetica'"
[attr.fill]="'#ffffff'"
style="dominant-baseline: central">
<tspan [attr.x]="width / 2">{{ abbreviation }}</tspan>
</svg:text>
`
})
export class SvgSwitchKeymapKeyComponent implements OnInit {
@Input() width: number;
@Input() height: number;
@Input() abbreviation: string;
private icon: string;
constructor(private mapperService: MapperService) { }
ngOnInit() {
this.icon = this.mapperService.getIcon('switch-keymap');
}
}

View File

@@ -32,8 +32,6 @@ export class SvgTextIconKeyComponent implements OnInit {
constructor() { }
ngOnInit() {
console.log(this);
}
ngOnInit() { }
}

View File

@@ -1,12 +1,12 @@
import { Component, OnInit, AfterViewInit, Renderer, ViewChildren, QueryList, ElementRef} from '@angular/core';
import {UhkConfiguration} from '../config-serializer/config-items/UhkConfiguration';
import {Layers} from '../config-serializer/config-items/Layers';
import {SvgKeyboardComponent} from './components/svg-keyboard.component';
import {SvgModule} from './components/svg-module.model';
import {DataProviderService} from './services/data-provider.service';
import {UhkConfigurationService} from './services/uhk-configuration.service';
@Component({
selector: 'main-app',
@@ -96,7 +96,8 @@ import {DataProviderService} from './services/data-provider.service';
}
`],
directives: [SvgKeyboardComponent]
directives: [SvgKeyboardComponent],
providers: [UhkConfigurationService]
})
export class MainAppComponent implements OnInit, AfterViewInit {
@ViewChildren('baseButton,modButton,fnButton,mouseButton')
@@ -115,7 +116,11 @@ export class MainAppComponent implements OnInit, AfterViewInit {
private numAnimationInProgress: number;
constructor(private renderer: Renderer, private dps: DataProviderService) {
constructor(
private renderer: Renderer,
private dps: DataProviderService,
private uhkConfigurationService: UhkConfigurationService
) {
this.buttons = [];
this.keyboards = [];
this.selectedLayerIndex = -1;
@@ -132,9 +137,7 @@ export class MainAppComponent implements OnInit, AfterViewInit {
this.modules = svg.g[0].g.map(obj => new SvgModule(obj));
this.modules = [this.modules[1], this.modules[0]]; // TODO: remove if the svg will be correct
let uhkConfig: UhkConfiguration = new UhkConfiguration();
uhkConfig.fromJsObject(this.dps.getUHKConfig());
this.layers = uhkConfig.keyMaps.elements[0].layers;
this.layers = this.uhkConfigurationService.getUhkConfiguration().keyMaps.elements[0].layers;
}

View File

@@ -125,7 +125,7 @@ export class MapperService {
private initNameToFileNames(): void {
this.nameToFileName = new Map<string, string>();
this.nameToFileName.set('toggle', 'icon-kbd__fn--toggle');
this.nameToFileName.set('switch-keymap', 'icon-kbd__mod--switch-layout');
}
}

View File

@@ -0,0 +1,19 @@
import { Injectable } from '@angular/core';
import {DataProviderService} from './data-provider.service';
import {UhkConfiguration} from '../../config-serializer/config-items/UhkConfiguration';
@Injectable()
export class UhkConfigurationService {
private configuration: UhkConfiguration;
constructor(private dataProviderService: DataProviderService) {
this.configuration = new UhkConfiguration().fromJsObject(this.dataProviderService.getUHKConfig());
}
getUhkConfiguration(): UhkConfiguration {
return this.configuration;
}
}