Add missing keyboard-key labels
This commit is contained in:
@@ -48,4 +48,8 @@ export class KeystrokeModifiersAction extends KeyAction {
|
||||
isModifierActive(modifier: KeyModifiers): boolean {
|
||||
return (this.modifierMask & modifier) > 0;
|
||||
}
|
||||
|
||||
isOnlyOneModifierActive(): boolean {
|
||||
return this.modifierMask !== 0 && !(this.modifierMask & this.modifierMask - 1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import {keyActionType, KeyActionId, KeyAction} from './KeyAction';
|
||||
import {UhkBuffer} from '../UhkBuffer';
|
||||
|
||||
enum LayerName {
|
||||
export enum LayerName {
|
||||
mod,
|
||||
fn,
|
||||
mouse
|
||||
@@ -12,18 +12,18 @@ export class SwitchLayerAction extends KeyAction {
|
||||
isLayerToggleable: boolean;
|
||||
|
||||
// @assertEnum(LayerName)
|
||||
private layer: LayerName;
|
||||
private _layer: LayerName;
|
||||
|
||||
_fromJsObject(jsObject: any): SwitchLayerAction {
|
||||
this.assertKeyActionType(jsObject);
|
||||
this.layer = LayerName[<string> jsObject.layer];
|
||||
this._layer = LayerName[<string> jsObject.layer];
|
||||
this.isLayerToggleable = jsObject.toggle;
|
||||
return this;
|
||||
}
|
||||
|
||||
_fromBinary(buffer: UhkBuffer): SwitchLayerAction {
|
||||
this.readAndAssertKeyActionId(buffer);
|
||||
this.layer = buffer.readUInt8();
|
||||
this._layer = buffer.readUInt8();
|
||||
this.isLayerToggleable = buffer.readBoolean();
|
||||
return this;
|
||||
}
|
||||
@@ -45,4 +45,8 @@ export class SwitchLayerAction extends KeyAction {
|
||||
toString(): string {
|
||||
return `<SwitchLayerAction layer="${this.layer}" toggle="${this.isLayerToggleable}">`;
|
||||
}
|
||||
|
||||
get layer() {
|
||||
return this._layer;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -132,6 +132,36 @@
|
||||
{
|
||||
"keyActionType": "keystroke",
|
||||
"scancode": 56
|
||||
},
|
||||
{
|
||||
"keyActionType": "keystrokeModifiers",
|
||||
"modifierMask": 32
|
||||
},
|
||||
{
|
||||
"keyActionType": "keystroke",
|
||||
"scancode": 44
|
||||
},
|
||||
{
|
||||
"keyActionType": "switchLayer",
|
||||
"layer": "fn",
|
||||
"toggle": false
|
||||
},
|
||||
{
|
||||
"keyActionType": "keystrokeModifiers",
|
||||
"modifierMask": 64
|
||||
},
|
||||
{
|
||||
"keyActionType": "keystrokeModifiers",
|
||||
"modifierMask": 128
|
||||
},
|
||||
{
|
||||
"keyActionType": "keystrokeModifiers",
|
||||
"modifierMask": 16
|
||||
},
|
||||
{
|
||||
"keyActionType": "switchLayer",
|
||||
"layer": "mod",
|
||||
"toggle": false
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -11,15 +11,16 @@ import { Component, OnInit, Input } from 'angular2/core';
|
||||
<svg:text
|
||||
[attr.x]="0"
|
||||
[attr.y]="height/2"
|
||||
[attr.text-anchor]="start"
|
||||
[attr.text-anchor]="'middle'"
|
||||
[attr.font-size]="19"
|
||||
[attr.font-family]="Helvetica"
|
||||
fill="#ffffff"
|
||||
*ngIf="asciiCode && asciiCode.length > 0">
|
||||
[attr.font-family]="'Helvetica'"
|
||||
[attr.fill]="'#ffffff'"
|
||||
[attr.style]="'dominant-baseline: central'"
|
||||
*ngIf="labels && labels.length > 0">
|
||||
<tspan
|
||||
x="0"
|
||||
[attr.x]="width / 2"
|
||||
dy="0"
|
||||
id="SvgjsTspan1180">{{asciiCode[0]}}</tspan>
|
||||
id="SvgjsTspan1180">{{ labels[0] }}</tspan>
|
||||
</svg:text>
|
||||
`
|
||||
})
|
||||
@@ -29,10 +30,10 @@ export class SvgKeyboardKeyComponent implements OnInit {
|
||||
@Input() ry: string;
|
||||
@Input() height: string;
|
||||
@Input() width: string;
|
||||
@Input() asciiCode: string[];
|
||||
@Input() labels: string[];
|
||||
|
||||
constructor() {
|
||||
this.asciiCode = [];
|
||||
this.labels = [];
|
||||
}
|
||||
|
||||
ngOnInit() { }
|
||||
|
||||
@@ -4,6 +4,8 @@ import {SvgKeyboardKey} from './svg-keyboard-key.model';
|
||||
import {SvgKeyboardKeyComponent} from './svg-keyboard-key.component';
|
||||
import {KeyAction} from '../../config-serializer/config-items/KeyAction';
|
||||
import {KeystrokeAction} from '../../config-serializer/config-items/KeystrokeAction';
|
||||
import {KeystrokeModifiersAction, KeyModifiers} from '../../config-serializer/config-items/KeystrokeModifiersAction';
|
||||
import {SwitchLayerAction, LayerName} from '../../config-serializer/config-items/SwitchLayerAction';
|
||||
import {Mapper} from '../utils/mapper';
|
||||
|
||||
@Component({
|
||||
@@ -16,7 +18,7 @@ import {Mapper} from '../utils/mapper';
|
||||
[rx]="key.rx" [ry]="key.ry"
|
||||
[width]="key.width" [height]="key.height"
|
||||
[attr.transform]="'translate(' + key.x + ' ' + key.y + ')'"
|
||||
[asciiCode]="asciiCodes[i]"
|
||||
[labels]="labels[i]"
|
||||
/>
|
||||
`,
|
||||
directives: [SvgKeyboardKeyComponent]
|
||||
@@ -25,40 +27,78 @@ export class SvgModuleComponent implements OnInit, OnChanges {
|
||||
@Input() coverages: any[];
|
||||
@Input() keyboardKeys: SvgKeyboardKey[];
|
||||
@Input() keyActions: KeyAction[];
|
||||
private asciiCodes: string[][];
|
||||
private labels: string[][];
|
||||
|
||||
constructor() {
|
||||
this.keyboardKeys = [];
|
||||
this.asciiCodes = [];
|
||||
this.labels = [];
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.setAsciiCodes();
|
||||
this.setLabels();
|
||||
console.log(this);
|
||||
}
|
||||
|
||||
ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
|
||||
/* tslint:disable:no-string-literal */
|
||||
if (changes['keyActions']) {
|
||||
this.setAsciiCodes();
|
||||
this.setLabels();
|
||||
}
|
||||
/* tslint:enable:no-string-literal */
|
||||
|
||||
}
|
||||
|
||||
private setAsciiCodes(): void {
|
||||
private setLabels(): void {
|
||||
if (!this.keyActions) {
|
||||
return;
|
||||
}
|
||||
let newAsciiCodes: string[][] = [];
|
||||
let newLabels: string[][] = [];
|
||||
this.keyActions.forEach((keyAction: KeyAction) => {
|
||||
if (keyAction instanceof KeystrokeAction) {
|
||||
newAsciiCodes.push(Mapper.scanCodeToText((keyAction as KeystrokeAction).scancode));
|
||||
if (keyAction instanceof KeystrokeModifiersAction) {
|
||||
if (keyAction.isOnlyOneModifierActive()) {
|
||||
switch (keyAction.modifierMask) {
|
||||
case KeyModifiers.leftCtrl:
|
||||
case KeyModifiers.rightCtrl:
|
||||
newLabels.push(['Ctrl']);
|
||||
break;
|
||||
case KeyModifiers.leftShift:
|
||||
case KeyModifiers.rightShift:
|
||||
newLabels.push(['Shift']);
|
||||
break;
|
||||
case KeyModifiers.leftAlt:
|
||||
case KeyModifiers.rightAlt:
|
||||
newLabels.push(['Alt']);
|
||||
break;
|
||||
case KeyModifiers.leftGui:
|
||||
case KeyModifiers.rightGui:
|
||||
newLabels.push(['Super']);
|
||||
break;
|
||||
default:
|
||||
newLabels.push(['Undefined']);
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else if (keyAction instanceof KeystrokeAction) {
|
||||
newLabels.push(Mapper.scanCodeToText((keyAction as KeystrokeAction).scancode));
|
||||
} else if (keyAction instanceof SwitchLayerAction) {
|
||||
switch (keyAction.layer) {
|
||||
case LayerName.mod:
|
||||
newLabels.push(['Mod']);
|
||||
break;
|
||||
case LayerName.fn:
|
||||
newLabels.push(['Fn']);
|
||||
break;
|
||||
case LayerName.mouse:
|
||||
newLabels.push(['Mouse']);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
newAsciiCodes.push([]);
|
||||
newLabels.push([]);
|
||||
}
|
||||
});
|
||||
this.asciiCodes = newAsciiCodes;
|
||||
this.labels = newLabels;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user