ANSI and ISO layout handling (#309)

* Read left and right modules

* Add missing styles

* Calculate indices from ids

* Skip missing keys

* Align key actions to match the order specified by the svg

* Fix svg key hover

* Fix key hover

Without using css important

shared/src/components/svg/module/svg-module.component.html

@@ -1,14 +1,18 @@
-<svg:path *ngFor="let path of coverages" [attr.d]="path.$.d" />
-<svg:g svg-keyboard-key *ngFor="let key of keyboardKeys; let i = index"
-        [id]="key.id"
-        [rx]="key.rx" [ry]="key.ry"
-        [width]="key.width" [height]="key.height"
-        [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'"
-        [keyAction]="keyActions[i]"
-        [keybindAnimationEnabled]="keybindAnimationEnabled"
-        [capturingEnabled]="capturingEnabled"
-        (keyClick)="onKeyClick(i, $event)"
-        (capture)="onCapture(i, $event)"
-        (mouseenter)="onKeyHover(i, $event, true)"
-        (mouseleave)="onKeyHover(i, $event, false)"
-/>
+<svg:path *ngFor="let path of coverages" [attr.d]="path.$.d" [attr.style]="path.$.style | safeStyle" />
+<ng-container *ngFor="let key of keyboardKeys; let i = index">
+    <svg:g svg-keyboard-key
+            *ngIf="key"
+            [id]="key.id"
+            [rx]="key.rx" [ry]="key.ry"
+            [width]="key.width" [height]="key.height"
+            [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'"
+            [attr.fill]="key.fill"
+            [keyAction]="keyActions[i]"
+            [keybindAnimationEnabled]="keybindAnimationEnabled"
+            [capturingEnabled]="capturingEnabled"
+            (keyClick)="onKeyClick(i, $event)"
+            (capture)="onCapture(i, $event)"
+            (mouseenter)="onKeyHover(i, $event, true)"
+            (mouseleave)="onKeyHover(i, $event, false)"
+    />
+</ng-container>

shared/src/components/svg/module/svg-module.model.ts

@@ -1,16 +1,21 @@
 import { SvgKeyboardKey } from '../keys';
 
 export class SvgModule {
-    private coverages: any[];
-    private keyboardKeys: SvgKeyboardKey[];
-    private attributes: any;
+    coverages: any[];
+    keyboardKeys: SvgKeyboardKey[];
+    attributes: any;
 
     constructor(obj: { rect: any[], path: any[], $: Object }) {
-        this.keyboardKeys = obj.rect.map(rect => rect.$).map(rect => {
-            rect.height = +rect.height;
-            rect.width = +rect.width;
-            return rect;
-        });
+        let index: number;
+        const keys = obj.rect.map(rect => rect.$);
+        this.keyboardKeys = [];
+        for (let i = 0; i < keys.length; ++i) {
+            index = keys[i].id.slice(4) - 1; // remove 'key-' then switch to index from 0
+            keys[i].height = +keys[i].height;
+            keys[i].width = +keys[i].width;
+            keys[i].fill = keys[i].style.slice(5); // remove 'fill:'
+            this.keyboardKeys[index] = keys[i];
+        }
         this.coverages = obj.path;
         this.attributes = obj.$;
     }