Add initial keyboard-key rendering

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

@@ -8,6 +8,19 @@ import { Component, OnInit, Input } from 'angular2/core';
                             [attr.height]="height"  [attr.width]="width"
                             [attr.fill]="fill"
         />
+         <svg:text
+            [attr.x]="0"
+            [attr.y]="height/2"
+            [attr.text-anchor]="start"
+            [attr.font-size]="19"
+            [attr.font-family]="Helvetica"
+            fill="#ffffff"
+            *ngIf="asciiCode && asciiCode.length > 0">
+                <tspan
+                    x="0"
+                    dy="0"
+                    id="SvgjsTspan1180">{{asciiCode[0]}}</tspan>
+         </svg:text>
      `
 })
 export class SvgKeyboardKeyComponent implements OnInit {
@@ -16,8 +29,11 @@ export class SvgKeyboardKeyComponent implements OnInit {
     @Input() ry: string;
     @Input() height: string;
     @Input() width: string;
+    @Input() asciiCode: string[];
 
-    constructor() { }
+    constructor() {
+        this.asciiCode = [];
+    }
 
     ngOnInit() { }
 

src/components/svg-keyboard.component.ts

@@ -1,19 +1,23 @@
 import { Component, OnInit} from 'angular2/core';
 
 import {DataProviderService} from '../services/data-provider.service';
+import {Module} from '../../config-serializer/config-items/Module';
 import {SvgModule} from './svg-module.model';
 import {SvgModuleComponent} from './svg-module.component';
 
+import {UhkConfiguration} from '../../config-serializer/config-items/UhkConfiguration';
+
 @Component({
     selector: 'svg-keyboard',
     template:
     `
         <svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="viewBox" height="100%" width="100%">
             <svg:g [attr.transform]="transform" [attr.fill]="fill">
-                <svg:g svg-module *ngFor="#module of modules"
+                <svg:g svg-module *ngFor="#module of modules; #i = index"
                         [coverages]="module.coverages"
                         [keyboardKeys]="module.keyboardKeys"
                         [attr.transform]="module.attributes.transform"
+                        [keyActions]="moduleConfig[i].keyActions.elements"
                 />
             </svg:g>
         </svg>
@@ -34,6 +38,7 @@ export class SvgKeyboardComponent implements OnInit {
     private svg: any;
     private transform: string;
     private fill: string;
+    private moduleConfig: Module[];
 
     constructor(private dps: DataProviderService) {
         this.modules = [];
@@ -45,6 +50,14 @@ export class SvgKeyboardComponent implements OnInit {
         this.transform = this.svg.g[0].$.transform;
         this.fill = this.svg.g[0].$.fill;
         this.modules = this.svg.g[0].g.map(obj => new SvgModule(obj));
+
+        let uhkConfig: UhkConfiguration = new UhkConfiguration();
+        uhkConfig.fromJsObject(this.dps.getUHKConfig());
+        this.moduleConfig = uhkConfig.keyMaps.elements[0].layers.elements[0].modules.elements;
+        this.modules = this.svg.g[0].g.map(obj => {
+            return new SvgModule(obj);
+        });
+        this.modules = [this.modules[1], this.modules[0]]; // TODO: remove if the svg will be correct
     }
 
 }

src/components/svg-module.component.ts

@@ -1,32 +1,64 @@
-import { Component, OnInit, Input} from 'angular2/core';
+import { Component, OnInit, OnChanges, Input, SimpleChange} from 'angular2/core';
 
 import {SvgKeyboardKey} from './svg-keyboard-key.model';
 import {SvgKeyboardKeyComponent} from './svg-keyboard-key.component';
+import {KeyAction} from '../../config-serializer/config-items/KeyAction';
+import {KeystrokeAction} from '../../config-serializer/config-items/KeystrokeAction';
+import {Mapper} from '../utils/mapper';
 
 @Component({
     selector: 'g[svg-module]',
     template:
     `
         <svg:path *ngFor="#path of coverages" [attr.d]="path.$.d"/>
-        <svg:g svg-keyboard-key *ngFor="#key of keyboardKeys"
+        <svg:g svg-keyboard-key *ngFor="#key of keyboardKeys; #i = index"
                 [id]="key.id"
                 [rx]="key.rx" [ry]="key.ry"
                 [width]="key.width" [height]="key.height"
                 [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'"
+                [asciiCode]="asciiCodes[i]"
         />
     `,
     directives: [SvgKeyboardKeyComponent]
 })
-export class SvgModuleComponent implements OnInit {
+export class SvgModuleComponent implements OnInit, OnChanges {
     @Input() coverages: any[];
     @Input() keyboardKeys: SvgKeyboardKey[];
+    @Input() keyActions: KeyAction[];
+    private asciiCodes: string[][];
 
     constructor() {
         this.keyboardKeys = [];
+        this.asciiCodes = [];
     }
 
     ngOnInit() {
+        this.setAsciiCodes();
+        console.log(this);
+    }
+
+    ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
+        /* tslint:disable:no-string-literal */
+        if (changes['keyActions']) {
+            this.setAsciiCodes();
+        }
+        /* tslint:enable:no-string-literal */
 
     }
 
+    private setAsciiCodes(): void {
+        if (!this.keyActions) {
+            return;
+        }
+        let newAsciiCodes: string[][] = [];
+        this.keyActions.forEach((keyAction: KeyAction) => {
+            if (keyAction instanceof KeystrokeAction) {
+                newAsciiCodes.push(Mapper.scanCodeToText((keyAction as KeystrokeAction).scancode));
+            } else {
+                newAsciiCodes.push([]);
+            }
+        });
+        this.asciiCodes = newAsciiCodes;
+    }
+
 }