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

Render toggle icon in case of SwitchLayerAction

Browse Source
This commit is contained in:
József Farkas
2016-05-14 19:12:44 +02:00
parent bbd43da945
commit ff1721facc
9 changed files with 226 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/svg-keyboard-key.component.ts → src/components/keys/svg-keyboard-key.component.ts
View File

@@ -1,14 +1,22 @@
import { Component, OnInit, Input, OnChanges, SimpleChange } from '@angular/core';
import {NgSwitch, NgSwitchWhen} from '@angular/common';
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 {MapperService} from '../services/mapper.service';
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 {MapperService} from '../../services/mapper.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';
enum LabelTypes {
Text,
Path
OneLineText,
TwoLineText,
TextIcon,
SingleIcon
}
@Component({
@@ -19,43 +27,46 @@ enum LabelTypes {
[attr.height]="height" [attr.width]="width"
[attr.fill]="fill"
/>
<svg:text
[attr.x]="0"
[attr.y]="height/2"
[attr.text-anchor]="'middle'"
[attr.font-size]="19"
[attr.font-family]="'Helvetica'"
[attr.fill]="'#ffffff'"
style="dominant-baseline: central"
*ngIf="(labelType === enumLabelTypes.Text) && labelSource && labelSource.length > 0">
<tspan
*ngIf="labelSource.length === 1"
[attr.x]="width / 2"
dy="0"
>{{ labelSource[0] }}</tspan>
<template [ngIf]="labelSource.length === 2">
<tspan
*ngFor="let label of labelSource; let index = index"
[attr.x]="width / 2"
[attr.y]="(0.75 - index * 0.5) * height"
dy="0"
>{{ label }}</tspan>
</template>
</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>
`
<svg:g [ngSwitch]="labelType">
<svg:g svg-one-line-text-key *ngSwitchWhen="enumLabelTypes.OneLineText"
[height]="height"
[width]="width"
[text]="labelSource">
</svg:g>
<svg:g svg-two-line-text-key *ngSwitchWhen="enumLabelTypes.TwoLineText"
[height]="height"
[width]="width"
[texts]="labelSource">
</svg:g>
<svg:g svg-text-icon-key *ngSwitchWhen="enumLabelTypes.TextIcon"
[height]="height"
[width]="width"
[text]="labelSource.text"
[icon]="labelSource.icon">
</svg:g>
<svg:g svg-single-icon-key *ngSwitchWhen="enumLabelTypes.SingleIcon"
[height]="height"
[width]="width"
[icon]="labelSource">
</svg:g>
</svg:g>
`,
directives:
[
NgSwitch,
NgSwitchWhen,
SvgOneLineTextKeyComponent,
SvgTwoLineTextKeyComponent,
SvgSingleIconKeyComponent,
SvgTextIconKeyComponent
]
})
export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
@Input() id: string;
@Input() rx: string;
@Input() ry: string;
@Input() height: string;
@Input() width: string;
@Input() height: number;
@Input() width: number;
@Input() keyAction: KeyAction;
/* tslint:disable:no-unused-variable */
@@ -85,7 +96,7 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
return;
}
this.labelType = LabelTypes.Text;
this.labelType = LabelTypes.OneLineText;
if (this.keyAction instanceof KeystrokeModifiersAction) {
let keyAction: KeystrokeModifiersAction = this.keyAction as KeystrokeModifiersAction;
@@ -118,28 +129,45 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
let scancode: number = (this.keyAction as KeystrokeAction).scancode;
let newLabelSource: string[] = this.mapperService.scanCodeToText(scancode);
if (newLabelSource) {
this.labelSource = newLabelSource;
if (newLabelSource.length === 1) {
this.labelSource = newLabelSource[0];
this.labelType = LabelTypes.OneLineText;
} else {
this.labelSource = newLabelSource;
this.labelType = LabelTypes.TwoLineText;
}
} else {
this.labelSource = this.mapperService.scanCodeToSvgImagePath(scancode);
this.labelType = LabelTypes.Path;
this.labelType = LabelTypes.SingleIcon;
}
} else if (this.keyAction instanceof SwitchLayerAction) {
let keyAction: SwitchLayerAction = this.keyAction as SwitchLayerAction;
let newLabelSource: string[] = [];
let newLabelSource: string;
switch (keyAction.layer) {
case LayerName.mod:
newLabelSource.push('Mod');
newLabelSource = 'Mod';
break;
case LayerName.fn:
newLabelSource.push('Fn');
newLabelSource = 'Fn';
break;
case LayerName.mouse:
newLabelSource.push('Mouse');
newLabelSource = 'Mouse';
break;
default:
break;
}
this.labelSource = newLabelSource;
if (keyAction.isLayerToggleable) {
this.labelType = LabelTypes.TextIcon;
this.labelSource = {
text: newLabelSource,
icon: this.mapperService.getIcon('toggle')
};
console.log(keyAction, this.labelSource);
} else {
this.labelType = LabelTypes.OneLineText;
this.labelSource = newLabelSource;
}
}
}

4
src/components/svg-keyboard-key.model.ts → src/components/keys/svg-keyboard-key.model.ts
View File

@@ -4,6 +4,6 @@ export interface SvgKeyboardKey {
y: string;
rx: string;
ry: string;
height: string;
width: string;
height: number;
width: number;
}

32
src/components/keys/svg-one-line-text-key.component.ts Normal file
View File

@@ -0,0 +1,32 @@
import { Component, OnInit, Input } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'g[svg-one-line-text-key]',
template:
`
<svg:text
[attr.x]="0"
[attr.y]="height / 2"
[attr.text-anchor]="'middle'"
[attr.font-size]="19"
[attr.font-family]="'Helvetica'"
[attr.fill]="'#ffffff'"
style="dominant-baseline: central">
<tspan
[attr.x]="width / 2"
dy="0"
>{{ text }}</tspan>
</svg:text>
`
})
export class SvgOneLineTextKeyComponent implements OnInit {
@Input() height: number;
@Input() width: number;
@Input() text: string;
constructor() { }
ngOnInit() { }
}

24
src/components/keys/svg-single-icon-key.component.ts Normal file
View File

@@ -0,0 +1,24 @@
import { Component, OnInit, Input } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'g[svg-single-icon-key]',
template:
`
<svg:use [attr.xlink:href]="icon"
[attr.width]="width / 3" [attr.height]="height / 3"
[attr.x]="width / 3" [attr.y]="height / 3"
fill="white">
</svg:use>
`
})
export class SvgSingleIconKeyComponent implements OnInit {
@Input() width: number;
@Input() height: number;
@Input() icon: string;
constructor() { }
ngOnInit() { }
}

39
src/components/keys/svg-text-icon-key.component.ts Normal file
View File

@@ -0,0 +1,39 @@
import { Component, OnInit, Input } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'g[svg-text-icon-key]',
template:
`
<svg:text
[attr.x]="0"
[attr.y]="width > 2*height? height / 2 : height / 3"
[attr.text-anchor]="width > 2*height ? 'end' : 'middle'"
[attr.font-size]="19"
[attr.font-family]="'Helvetica'"
[attr.fill]="'#ffffff'"
style="dominant-baseline: central">
<tspan [attr.x]="width > 2*height ?0.6*width : width / 2">{{ text }}</tspan>
</svg:text>
<svg:use [attr.xlink:href]="icon"
[attr.width]="width / 3"
[attr.height]="height / 3"
[attr.x]="width > 2*height ? width * 0.6 : width / 3"
[attr.y]="width > 2*height ? height / 3 : height / 2"
fill="white">
</svg:use>
`
})
export class SvgTextIconKeyComponent implements OnInit {
@Input() width: number;
@Input() height: number;
@Input() text: string;
@Input() icon: string;
constructor() { }
ngOnInit() {
console.log(this);
}
}

34
src/components/keys/svg-two-line-text-key.component.ts Normal file
View File

@@ -0,0 +1,34 @@
import { Component, OnInit, Input } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'g[svg-two-line-text-key]',
template:
`
<svg:text
[attr.x]="0"
[attr.y]="height/2"
[attr.text-anchor]="'middle'"
[attr.font-size]="19"
[attr.font-family]="'Helvetica'"
[attr.fill]="'#ffffff'"
style="dominant-baseline: central">
<tspan
*ngFor="let text of texts; let index = index"
[attr.x]="width / 2"
[attr.y]="(0.75 - index * 0.5) * height"
dy="0"
>{{ text }}</tspan>
</svg:text>
`
})
export class SvgTwoLineTextKeyComponent implements OnInit {
@Input() height: number;
@Input() width: number;
@Input() texts: string[];
constructor() { }
ngOnInit() { }
}

4
src/components/svg-module.component.ts
View File

@@ -1,7 +1,7 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import {SvgKeyboardKey} from './svg-keyboard-key.model';
import {SvgKeyboardKeyComponent} from './svg-keyboard-key.component';
import {SvgKeyboardKey} from './keys/svg-keyboard-key.model';
import {SvgKeyboardKeyComponent} from './keys/svg-keyboard-key.component';
import {KeyAction} from '../../config-serializer/config-items/KeyAction';
@Component({

8
src/components/svg-module.model.ts
View File

@@ -1,4 +1,4 @@
import {SvgKeyboardKey} from './svg-keyboard-key.model';
import {SvgKeyboardKey} from './keys/svg-keyboard-key.model';
export class SvgModule {
private coverages: any[];
@@ -6,7 +6,11 @@ export class SvgModule {
private attributes: any;
constructor(obj: { rect: any[], path: any[], $: Object }) {
this.keyboardKeys = obj.rect.map(rect => rect.$);
this.keyboardKeys = obj.rect.map(rect => rect.$).map(rect => {
rect.height = +rect.height;
rect.width = +rect.width;
return rect;
});
this.coverages = obj.path;
this.attributes = obj.$;
}

12
src/services/mapper.service.ts
View File

@@ -90,9 +90,11 @@ export class MapperService {
];
private scanCodeFileName: Map<number, string>;
private nameToFileName: Map<string, string>;
constructor() {
this.initScanCodeFileName();
this.initNameToFileNames();
}
public scanCodeToText(scanCode: number): string[] {
@@ -107,6 +109,10 @@ export class MapperService {
return undefined;
}
public getIcon(iconName: string): string {
return 'build/compiled_sprite.svg#' + this.nameToFileName.get(iconName);
}
private initScanCodeFileName(): void {
this.scanCodeFileName = new Map<number, string>();
this.scanCodeFileName[79] = 'icon-kbd__mod--arrow-right';
@@ -116,4 +122,10 @@ export class MapperService {
this.scanCodeFileName[118] = 'icon-kbd__mod--menu';
}
private initNameToFileNames(): void {
this.nameToFileName = new Map<string, string>();
this.nameToFileName.set('toggle', 'icon-kbd__fn--toggle');
}
}