SwitchKeymap rendering
This commit is contained in:
@@ -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];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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": [
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
41
src/components/keys/svg-switch-keymap-key.component.ts
Normal file
41
src/components/keys/svg-switch-keymap-key.component.ts
Normal 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');
|
||||
}
|
||||
|
||||
}
|
||||
@@ -32,8 +32,6 @@ export class SvgTextIconKeyComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
console.log(this);
|
||||
}
|
||||
ngOnInit() { }
|
||||
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
19
src/services/uhk-configuration.service.ts
Normal file
19
src/services/uhk-configuration.service.ts
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user