uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Label rendering from svg sprite.

Browse Source
This commit is contained in:
József Farkas
2016-05-02 22:31:39 +02:00
parent 83074e9d88
commit 1e14de3a4e
4 changed files with 175 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/svg-keyboard-key.component.ts
View File

@@ -4,7 +4,12 @@ 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';
import {MapperService} from '../services/mapper.service';
enum LabelTypes {
Text,
Path
}
@Component({
selector: 'g[svg-keyboard-key]',
@@ -22,20 +27,26 @@ import {Mapper} from '../utils/mapper';
[attr.font-family]="'Helvetica'"
[attr.fill]="'#ffffff'"
[attr.style]="'dominant-baseline: central'"
*ngIf="labels && labels.length > 0">
*ngIf="(labelType === enumLabelTypes.Text) && labelSource && labelSource.length > 0">
<tspan
*ngIf="labels.length === 1"
*ngIf="labelSource.length === 1"
[attr.x]="width / 2"
dy="0"
>{{ labels[0] }}</tspan>
>{{ labelSource[0] }}</tspan>
<tspan
*ngIf="labels.length === 2"
*ngFor="let label of labels; let index = index"
*ngIf="labelSource.length === 2"
*ngFor="let label of labelSource; let index = index"
[attr.x]="width / 2"
[attr.y]="(0.75 - index * 0.5) * height"
dy="0"
>{{ label }}</tspan>
</svg:text>
<svg:use [attr.xlink:href]="labelSource"
[attr.width]="width / 3" [attr.height]="height / 3"
[attr.x]="width / 3" [attr.y]="height / 3"
fill="white"
*ngIf="(labelType === enumLabelTypes.Path) && labelSource">
</svg:use>
`
})
export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
@@ -46,9 +57,15 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
@Input() width: string;
@Input() keyAction: KeyAction;
private labels: any[];
/* tslint:disable:no-unused-variable */
/* It is used in the template */
private enumLabelTypes = LabelTypes;
/* tslint:enable:no-unused-variable */
constructor() { }
private labelSource: any;
private labelType: LabelTypes;
constructor(private mapperService: MapperService) { }
ngOnInit() {
this.setLabels();
@@ -60,59 +77,70 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
this.setLabels();
}
/* tslint:enable:no-string-literal */
}
private setLabels(): void {
if (!this.keyAction) {
return;
}
let newLabels: string[] = [];
this.labelType = LabelTypes.Text;
if (this.keyAction instanceof KeystrokeModifiersAction) {
let keyAction: KeystrokeModifiersAction = <KeystrokeModifiersAction> this.keyAction;
let keyAction: KeystrokeModifiersAction = this.keyAction as KeystrokeModifiersAction;
let newLabelSource: string[] = [];
if (keyAction.isOnlyOneModifierActive()) {
switch (keyAction.modifierMask) {
case KeyModifiers.leftCtrl:
case KeyModifiers.rightCtrl:
newLabels.push('Ctrl');
newLabelSource.push('Ctrl');
break;
case KeyModifiers.leftShift:
case KeyModifiers.rightShift:
newLabels.push('Shift');
newLabelSource.push('Shift');
break;
case KeyModifiers.leftAlt:
case KeyModifiers.rightAlt:
newLabels.push('Alt');
newLabelSource.push('Alt');
break;
case KeyModifiers.leftGui:
case KeyModifiers.rightGui:
newLabels.push('Super');
newLabelSource.push('Super');
break;
default:
newLabels.push('Undefined');
newLabelSource.push('Undefined');
break;
}
}
this.labelSource = newLabelSource;
} else if (this.keyAction instanceof KeystrokeAction) {
let keyAction: KeystrokeAction = <KeystrokeAction> this.keyAction;
newLabels = Mapper.scanCodeToText((keyAction as KeystrokeAction).scancode);
let scancode: number = (this.keyAction as KeystrokeAction).scancode;
let newLabelSource: string[] = this.mapperService.scanCodeToText(scancode);
if (newLabelSource) {
this.labelSource = newLabelSource;
} else {
this.labelSource = this.mapperService.scanCodeToSvgImagePath(scancode);
this.labelType = LabelTypes.Path;
}
} else if (this.keyAction instanceof SwitchLayerAction) {
let keyAction: SwitchLayerAction = <SwitchLayerAction> this.keyAction;
let keyAction: SwitchLayerAction = this.keyAction as SwitchLayerAction;
let newLabelSource: string[] = [];
switch (keyAction.layer) {
case LayerName.mod:
newLabels.push('Mod');
newLabelSource.push('Mod');
break;
case LayerName.fn:
newLabels.push('Fn');
newLabelSource.push('Fn');
break;
case LayerName.mouse:
newLabels.push('Mouse');
newLabelSource.push('Mouse');
break;
default:
break;
}
this.labelSource = newLabelSource;
}
this.labels = newLabels;
}
}