Render toggle icon in case of SwitchLayerAction

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 {KeyAction} from '../../../config-serializer/config-items/KeyAction';
-import {KeystrokeAction} from '../../config-serializer/config-items/KeystrokeAction';
+import {KeystrokeAction} from '../../../config-serializer/config-items/KeystrokeAction';
-import {KeystrokeModifiersAction, KeyModifiers} from '../../config-serializer/config-items/KeystrokeModifiersAction';
+import {KeystrokeModifiersAction, KeyModifiers} from '../../../config-serializer/config-items/KeystrokeModifiersAction';
-import {SwitchLayerAction, LayerName}  from '../../config-serializer/config-items/SwitchLayerAction';
+import {SwitchLayerAction, LayerName}  from '../../../config-serializer/config-items/SwitchLayerAction';
-import {MapperService} from '../services/mapper.service';
+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,
+    OneLineText,
-    Path
+    TwoLineText,
+    TextIcon,
+    SingleIcon
 }
 
 @Component({
@@ -19,43 +27,46 @@ enum LabelTypes {
                             [attr.height]="height"  [attr.width]="width"
                             [attr.fill]="fill"
         />
-         <svg:text
+        <svg:g [ngSwitch]="labelType">
-            [attr.x]="0"
+            <svg:g svg-one-line-text-key *ngSwitchWhen="enumLabelTypes.OneLineText"
-            [attr.y]="height/2"
+                    [height]="height"
-            [attr.text-anchor]="'middle'"
+                    [width]="width"
-            [attr.font-size]="19"
+                    [text]="labelSource">
-            [attr.font-family]="'Helvetica'"
+            </svg:g>
-            [attr.fill]="'#ffffff'"
+            <svg:g svg-two-line-text-key *ngSwitchWhen="enumLabelTypes.TwoLineText"
-            style="dominant-baseline: central"
+                    [height]="height"
-            *ngIf="(labelType === enumLabelTypes.Text) && labelSource && labelSource.length > 0">
+                    [width]="width"
-                 <tspan
+                    [texts]="labelSource">
-                    *ngIf="labelSource.length === 1"
+            </svg:g>
-                    [attr.x]="width / 2"
+            <svg:g svg-text-icon-key *ngSwitchWhen="enumLabelTypes.TextIcon"
-                    dy="0"
+                    [height]="height"
-                    >{{ labelSource[0] }}</tspan>
+                    [width]="width"
-                <template [ngIf]="labelSource.length === 2">
+                    [text]="labelSource.text"
-                    <tspan
+                    [icon]="labelSource.icon">
-                        *ngFor="let label of labelSource; let index = index"
+            </svg:g>
-                        [attr.x]="width / 2"
+            <svg:g svg-single-icon-key *ngSwitchWhen="enumLabelTypes.SingleIcon"
-                        [attr.y]="(0.75 - index * 0.5) * height"
+                    [height]="height"
-                        dy="0"
+                    [width]="width"
-                        >{{ label }}</tspan>
+                    [icon]="labelSource">
-                </template>
+            </svg:g>
-         </svg:text>
+        </svg:g>
-         <svg:use [attr.xlink:href]="labelSource"
+     `,
-                [attr.width]="width / 3" [attr.height]="height / 3"
+    directives:
-                [attr.x]="width / 3" [attr.y]="height / 3"
+    [
-                fill="white"
+        NgSwitch,
-                *ngIf="(labelType === enumLabelTypes.Path) && labelSource">
+        NgSwitchWhen,
-         </svg:use>
+        SvgOneLineTextKeyComponent,
-     `
+        SvgTwoLineTextKeyComponent,
+        SvgSingleIconKeyComponent,
+        SvgTextIconKeyComponent
+    ]
 })
 export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
     @Input() id: string;
     @Input() rx: string;
     @Input() ry: string;
-    @Input() height: string;
+    @Input() height: number;
-    @Input() width: string;
+    @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;
+            }
         }
 
     }

src/components/keys/svg-keyboard-key.model.ts

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

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:
+    `
+         <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() { }
+
+}

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:
+    `
+        <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() { }
+
+}

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:
+    `
+         <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);
+    }
+
+}

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:
+    `
+         <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() { }
+
+}

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 {SvgKeyboardKey} from './keys/svg-keyboard-key.model';
-import {SvgKeyboardKeyComponent} from './svg-keyboard-key.component';
+import {SvgKeyboardKeyComponent} from './keys/svg-keyboard-key.component';
 import {KeyAction} from '../../config-serializer/config-items/KeyAction';
 
 @Component({

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.$;
     }

src/services/mapper.service.ts

@@ -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');
+    }
+
+
 }