Label rendering from svg sprite.

src/boot.ts

@@ -4,10 +4,12 @@ import { HTTP_PROVIDERS } from 'angular2/http';
 import { MainAppComponent } from './main-app.component';
 
 import {DataProviderService} from './services/data-provider.service';
+import {MapperService} from './services/mapper.service';
 
 process.stdout = require('browser-stdout')();
 
 bootstrap(MainAppComponent, [
     HTTP_PROVIDERS,
-    DataProviderService
+    DataProviderService,
+    MapperService
 ]).catch(err => console.error(err));

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

@@ -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"
+                    *ngIf="labelSource.length === 2"
-                    *ngFor="let label of labels; let index = index"
+                    *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;
+            let scancode: number = (this.keyAction as KeystrokeAction).scancode;
-            newLabels = Mapper.scanCodeToText((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;
+
     }
 
 }

src/services/mapper.service.ts

@@ -0,0 +1,121 @@
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class MapperService {
+
+    private scanCodeTextMap = [
+        [], // 0
+        [], // 1
+        [], // 2
+        [], // 3
+        ['A'], // 4
+        ['B'], // 5
+        ['C'], // 6
+        ['D'], // 7
+        ['E'], // 8
+        ['F'], // 9
+        ['G'], // 10
+        ['H'], // 11
+        ['I'], // 12
+        ['J'], // 13
+        ['K'], // 14
+        ['L'], // 15
+        ['M'], // 16
+        ['N'], // 17
+        ['O'], // 18
+        ['P'], // 19
+        ['Q'], // 20
+        ['R'], // 21
+        ['S'], // 22
+        ['T'], // 23
+        ['U'], // 24
+        ['V'], // 25
+        ['W'], // 26
+        ['X'], // 27
+        ['Y'], // 28
+        ['Z'], // 29
+        ['1', '!'], // 30
+        ['2', '@'], // 31
+        ['3', '#'], // 32
+        ['4', '$'], // 33
+        ['5', '%'], // 34
+        ['6', '^'], // 35
+        ['7', '&'], // 36
+        ['8', '*'], // 37
+        ['9', '('], // 38
+        ['0', ')'], // 39
+        ['Enter'], // 40 - Enter
+        ['Esc'], // 41 - Escape
+        ['←'], // 42 - Backspace
+        ['Tab'], // 43 - Tab
+        ['Space'], // 44 - Space
+        ['-', '_'], // 45
+        ['=', '+'], // 46
+        ['[', '{'], // 47
+        [']', '}'], // 48
+        ['\\', '|'], // 49
+        [], // 50 NON_US_HASHMARK_AND_TILDE
+        [';', ':'], // 51
+        ['\'', '"'], // 52
+        ['`', '~'], // 53
+        [',', '<'], // 54
+        ['.', '>'], // 55
+        ['/', '?'], // 56
+        ['Caps Lock'], // 57
+        ['F1'], // 58
+        ['F2'], // 59
+        ['F3'], // 60
+        ['F4'], // 61
+        ['F5'], // 62
+        ['F6'], // 63
+        ['F7'], // 64
+        ['F8'], // 65
+        ['F9'], // 66
+        ['F10'], // 67
+        ['F11'], // 68
+        ['F12'], // 69
+        ['PrtScn'], // 70 - Print Screen
+        ['Scroll Lock'], // 71
+        ['Pause'], // 72
+        ['Insert'], // 73
+        ['Home'], // 74
+        ['PgUp'], // 75
+        ['Del'], // 76
+        ['End'], // 77
+        ['PgDn'], // 78
+        undefined, // 79 Right arrow
+        undefined, // 80 Left arrow
+        undefined, // 81 Down arrow
+        undefined // 82 Up arrow
+    ];
+
+    private scanCodeFileName: Map<number, string>;
+
+    constructor() {
+        this.initScanCodeFileName();
+    }
+
+    public scanCodeToText(scanCode: number): string[] {
+        if (this.scanCodeTextMap.length < scanCode) {
+            return [];
+        }
+        return this.scanCodeTextMap[scanCode];
+    }
+
+    public scanCodeToSvgImagePath(scanCode: number): string {
+        let fileName: string = this.scanCodeFileName[scanCode];
+        if (fileName) {
+            return 'build/compiled_sprite.svg#' + fileName;
+        }
+        return undefined;
+    }
+
+    private initScanCodeFileName(): void {
+        this.scanCodeFileName = new Map<number, string>();
+        this.scanCodeFileName[79] = 'icon-kbd__mod--arrow-right';
+        this.scanCodeFileName[80] = 'icon-kbd__mod--arrow-left';
+        this.scanCodeFileName[81] = 'icon-kbd__mod--arrow-down';
+        this.scanCodeFileName[82] = 'icon-kbd__mod--arrow-up';
+    }
+
+}

src/utils/mapper.ts

@@ -1,70 +0,0 @@
-export class Mapper {
-
-    private static scanCodeMap = [
-        [], // 0
-        [], // 1
-        [], // 2
-        [], // 3
-        ['A'], // 4
-        ['B'], // 5
-        ['C'], // 6
-        ['D'], // 7
-        ['E'], // 8
-        ['F'], // 9
-        ['G'], // 10
-        ['H'], // 11
-        ['I'], // 12
-        ['J'], // 13
-        ['K'], // 14
-        ['L'], // 15
-        ['M'], // 16
-        ['N'], // 17
-        ['O'], // 18
-        ['P'], // 19
-        ['Q'], // 20
-        ['R'], // 21
-        ['S'], // 22
-        ['T'], // 23
-        ['U'], // 24
-        ['V'], // 25
-        ['W'], // 26
-        ['X'], // 27
-        ['Y'], // 28
-        ['Z'], // 29
-        ['1', '!'], // 30
-        ['2', '@'], // 31
-        ['3', '#'], // 32
-        ['4', '$'], // 33
-        ['5', '%'], // 34
-        ['6', '^'], // 35
-        ['7', '&'], // 36
-        ['8', '*'], // 37
-        ['9', '('], // 38
-        ['0', ')'], // 39
-        ['Enter'], // 40 - Enter
-        ['Esc'], // 41 - Escape
-        ['←'], // 42 - Backspace
-        ['Tab'], // 43 - Tab
-        ['Space'], // 44 - Space
-        ['-', '_'], // 45
-        ['=', '+'], // 46
-        ['[', '{'], // 47
-        [']', '}'], // 48
-        ['\\', '|'], // 49
-        [], // 50 NON_US_HASHMARK_AND_TILDE
-        [';', ':'], // 51
-        ['\'', '"'], // 52
-        ['`', '~'], // 53
-        [',', '<'], // 54
-        ['.', '>'], // 55
-        ['/', '?'], // 56
-        ['Caps Lock'] // 57
-    ];
-
-    public static scanCodeToText(scanCode: number): string[] {
-        if (Mapper.scanCodeMap.length < scanCode) {
-            return [];
-        }
-        return Mapper.scanCodeMap[scanCode];
-    }
-}