Render toggle icon in case of SwitchLayerAction

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

@@ -0,0 +1,175 @@
+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 {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 {
+    OneLineText,
+    TwoLineText,
+    TextIcon,
+    SingleIcon
+}
+
+@Component({
+    selector: 'g[svg-keyboard-key]',
+    template:
+    `
+        <svg:rect [id]="id" [attr.rx]="rx"          [attr.ry]="ry"
+                            [attr.height]="height"  [attr.width]="width"
+                            [attr.fill]="fill"
+        />
+        <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: number;
+    @Input() width: number;
+    @Input() keyAction: KeyAction;
+
+    /* tslint:disable:no-unused-variable */
+    /* It is used in the template */
+    private enumLabelTypes = LabelTypes;
+    /* tslint:enable:no-unused-variable */
+
+    private labelSource: any;
+    private labelType: LabelTypes;
+
+    constructor(private mapperService: MapperService) { }
+
+    ngOnInit() {
+        this.setLabels();
+    }
+
+    ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
+        /* tslint:disable:no-string-literal */
+        if (changes['keyAction']) {
+            this.setLabels();
+        }
+        /* tslint:enable:no-string-literal */
+    }
+
+    private setLabels(): void {
+        if (!this.keyAction) {
+            return;
+        }
+
+        this.labelType = LabelTypes.OneLineText;
+
+        if (this.keyAction instanceof KeystrokeModifiersAction) {
+            let keyAction: KeystrokeModifiersAction = this.keyAction as KeystrokeModifiersAction;
+            let newLabelSource: string[] = [];
+            if (keyAction.isOnlyOneModifierActive()) {
+                switch (keyAction.modifierMask) {
+                    case KeyModifiers.leftCtrl:
+                    case KeyModifiers.rightCtrl:
+                        newLabelSource.push('Ctrl');
+                        break;
+                    case KeyModifiers.leftShift:
+                    case KeyModifiers.rightShift:
+                        newLabelSource.push('Shift');
+                        break;
+                    case KeyModifiers.leftAlt:
+                    case KeyModifiers.rightAlt:
+                        newLabelSource.push('Alt');
+                        break;
+                    case KeyModifiers.leftGui:
+                    case KeyModifiers.rightGui:
+                        newLabelSource.push('Super');
+                        break;
+                    default:
+                        newLabelSource.push('Undefined');
+                        break;
+                }
+            }
+            this.labelSource = newLabelSource;
+        } else if (this.keyAction instanceof KeystrokeAction) {
+            let scancode: number = (this.keyAction as KeystrokeAction).scancode;
+            let newLabelSource: string[] = this.mapperService.scanCodeToText(scancode);
+            if (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.SingleIcon;
+            }
+        } else if (this.keyAction instanceof SwitchLayerAction) {
+            let keyAction: SwitchLayerAction = this.keyAction as SwitchLayerAction;
+            let newLabelSource: string;
+            switch (keyAction.layer) {
+                case LayerName.mod:
+                    newLabelSource = 'Mod';
+                    break;
+                case LayerName.fn:
+                    newLabelSource = 'Fn';
+                    break;
+                case LayerName.mouse:
+                    newLabelSource = 'Mouse';
+                    break;
+                default:
+                    break;
+            }
+
+            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

@@ -0,0 +1,9 @@
+export interface SvgKeyboardKey {
+    id: string;
+    x: string;
+    y: string;
+    rx: string;
+    ry: string;
+    height: number;
+    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() { }
+
+}