From ff1721faccca710a82e11d05df2d223129d6574e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B3zsef=20Farkas?= Date: Sat, 14 May 2016 19:12:44 +0200 Subject: [PATCH] Render toggle icon in case of SwitchLayerAction --- .../{ => keys}/svg-keyboard-key.component.ts | 122 +++++++++++------- .../{ => keys}/svg-keyboard-key.model.ts | 4 +- .../keys/svg-one-line-text-key.component.ts | 32 +++++ .../keys/svg-single-icon-key.component.ts | 24 ++++ .../keys/svg-text-icon-key.component.ts | 39 ++++++ .../keys/svg-two-line-text-key.component.ts | 34 +++++ src/components/svg-module.component.ts | 4 +- src/components/svg-module.model.ts | 8 +- src/services/mapper.service.ts | 12 ++ 9 files changed, 226 insertions(+), 53 deletions(-) rename src/components/{ => keys}/svg-keyboard-key.component.ts (51%) rename src/components/{ => keys}/svg-keyboard-key.model.ts (74%) create mode 100644 src/components/keys/svg-one-line-text-key.component.ts create mode 100644 src/components/keys/svg-single-icon-key.component.ts create mode 100644 src/components/keys/svg-text-icon-key.component.ts create mode 100644 src/components/keys/svg-two-line-text-key.component.ts diff --git a/src/components/svg-keyboard-key.component.ts b/src/components/keys/svg-keyboard-key.component.ts similarity index 51% rename from src/components/svg-keyboard-key.component.ts rename to src/components/keys/svg-keyboard-key.component.ts index ee8d4577..1edcf01b 100644 --- a/src/components/svg-keyboard-key.component.ts +++ b/src/components/keys/svg-keyboard-key.component.ts @@ -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" /> - - {{ labelSource[0] }} - - - - - ` + + + + + + + + + + + `, + 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; + } } } diff --git a/src/components/svg-keyboard-key.model.ts b/src/components/keys/svg-keyboard-key.model.ts similarity index 74% rename from src/components/svg-keyboard-key.model.ts rename to src/components/keys/svg-keyboard-key.model.ts index 9c6dc15d..ba12620e 100644 --- a/src/components/svg-keyboard-key.model.ts +++ b/src/components/keys/svg-keyboard-key.model.ts @@ -4,6 +4,6 @@ export interface SvgKeyboardKey { y: string; rx: string; ry: string; - height: string; - width: string; + height: number; + width: number; } diff --git a/src/components/keys/svg-one-line-text-key.component.ts b/src/components/keys/svg-one-line-text-key.component.ts new file mode 100644 index 00000000..a512f4d3 --- /dev/null +++ b/src/components/keys/svg-one-line-text-key.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'g[svg-one-line-text-key]', + template: + ` + + {{ text }} + + ` +}) +export class SvgOneLineTextKeyComponent implements OnInit { + @Input() height: number; + @Input() width: number; + @Input() text: string; + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/components/keys/svg-single-icon-key.component.ts b/src/components/keys/svg-single-icon-key.component.ts new file mode 100644 index 00000000..a99cef46 --- /dev/null +++ b/src/components/keys/svg-single-icon-key.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'g[svg-single-icon-key]', + template: + ` + + + ` +}) +export class SvgSingleIconKeyComponent implements OnInit { + @Input() width: number; + @Input() height: number; + @Input() icon: string; + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/components/keys/svg-text-icon-key.component.ts b/src/components/keys/svg-text-icon-key.component.ts new file mode 100644 index 00000000..b4229a5f --- /dev/null +++ b/src/components/keys/svg-text-icon-key.component.ts @@ -0,0 +1,39 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'g[svg-text-icon-key]', + template: + ` + + {{ text }} + + + + ` +}) +export class SvgTextIconKeyComponent implements OnInit { + @Input() width: number; + @Input() height: number; + @Input() text: string; + @Input() icon: string; + + constructor() { } + + ngOnInit() { + console.log(this); + } + +} diff --git a/src/components/keys/svg-two-line-text-key.component.ts b/src/components/keys/svg-two-line-text-key.component.ts new file mode 100644 index 00000000..672ede80 --- /dev/null +++ b/src/components/keys/svg-two-line-text-key.component.ts @@ -0,0 +1,34 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'g[svg-two-line-text-key]', + template: + ` + + {{ text }} + + ` +}) +export class SvgTwoLineTextKeyComponent implements OnInit { + @Input() height: number; + @Input() width: number; + @Input() texts: string[]; + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/components/svg-module.component.ts b/src/components/svg-module.component.ts index 7552fb3a..9da91a88 100644 --- a/src/components/svg-module.component.ts +++ b/src/components/svg-module.component.ts @@ -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({ diff --git a/src/components/svg-module.model.ts b/src/components/svg-module.model.ts index 2c25415d..da3b7d99 100644 --- a/src/components/svg-module.model.ts +++ b/src/components/svg-module.model.ts @@ -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.$; } diff --git a/src/services/mapper.service.ts b/src/services/mapper.service.ts index 02484bcb..0aa7350c 100644 --- a/src/services/mapper.service.ts +++ b/src/services/mapper.service.ts @@ -90,9 +90,11 @@ export class MapperService { ]; private scanCodeFileName: Map; + private nameToFileName: Map; 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(); 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(); + this.nameToFileName.set('toggle', 'icon-kbd__fn--toggle'); + } + + }