Use one svg and render all keys of modules on it

src/components/keyboard-button-group.component.ts

@@ -1,34 +0,0 @@
-import { Component, OnInit, Input } from 'angular2/core';
-
-import {KeyboardButtonComponent} from './keyboard-button.component';
-import {KeyboardButton} from './keyboard-button.model';
-
-@Component({
-    selector: 'keyboard-button-group',
-    template:
-    `
-        <keyboard-button *ngFor="#keyboardButton of keyboardButtons"
-                            [id]="keyboardButton.id" [fill]="keyboardButton.fill"
-                            [rx]="keyboardButton.rx" [ry]="keyboardButton.ry"
-                            [height]="keyboardButton.height" [width]="keyboardButton.width">
-        </keyboard-button>
-    `,
-    styles:
-    [`
-        :host {
-            display: flex;
-        }
-
-        keyboard-button {
-            border: 2px solid transparent;
-        }
-    `],
-    directives: [KeyboardButtonComponent]
-})
-export class KeyboardButtonGroupComponent implements OnInit {
-    @Input() keyboardButtons: KeyboardButton[];
-    constructor() { }
-
-    ngOnInit() { }
-
-}

src/components/keyboard-button.component.ts

@@ -1,30 +0,0 @@
-import { Component, OnInit, Input } from 'angular2/core';
-
-@Component({
-    selector: 'keyboard-button',
-    template:
-    `
-         <svg xmlns="http://www.w3.org/2000/svg" [attr.width]="width" [attr.height]="height" [attr.fill]="fill">
-             <rect [id]="id" [attr.rx]="rx" [attr.ry]="ry" [attr.height]="height" [attr.width]="width"/>
-         </svg>
-     `,
-    styles:
-    [`
-        :host {
-           display: flex;
-        }
-    `]
-})
-export class KeyboardButtonComponent implements OnInit {
-    @Input() id: string;
-    @Input() rx: string;
-    @Input() ry: string;
-    @Input() height: string;
-    @Input() width: string;
-    @Input() fill: string;
-
-    constructor() { }
-
-    ngOnInit() { }
-
-}

src/components/keyboard-key.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit, Input } from 'angular2/core';
+
+@Component({
+    selector: 'g[uhk-keyboard-key]',
+    template:
+    `
+        <svg:rect [id]="id" [attr.rx]="rx"          [attr.ry]="ry"
+                            [attr.height]="height"  [attr.width]="width"
+                            [attr.fill]="fill"
+        />
+     `
+})
+export class KeyboardKeyComponent implements OnInit {
+    @Input() id: string;
+    @Input() rx: string;
+    @Input() ry: string;
+    @Input() height: string;
+    @Input() width: string;
+    @Input() fill: string;
+
+    constructor() { }
+
+    ngOnInit() { }
+
+}

src/components/keyboard-key.model.ts

@@ -1,4 +1,4 @@
-export interface KeyboardButton {
+export interface KeyboardKey {
     id: string;
     x: string;
     y: string;

src/components/keyboard.component.ts

@@ -7,36 +7,42 @@ import {Module, ModuleComponent} from './module';
     selector: 'keyboard',
     template:
     `
-        <module *ngIf="modules.length > 0"
-                [case]="modules[0].case"
-                [keyboardButtons]="modules[0].keyboardButtons"
-                [fill]="modules[0].fill">
-        </module>
+        <svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="viewBox" height="100%" width="100%">
+            <svg:g [attr.transform]="transform">
+                <svg:g uhk-module *ngFor="#module of modules"
+                        [case]="module.case"
+                        [keyboardKeys]="module.keyboardKeys"
+                        [fill]="module.fill"
+                        [attr.transform]="module.attributes.transform"
+                />
+            </svg:g>
+        </svg>
     `,
     styles:
     [`
         :host {
             display: flex;
-            height: 100%;
             width: 100%;
+            height: 100%;
         }
     `],
     directives: [ModuleComponent]
 })
 export class KeyboardComponent implements OnInit {
+    private viewBox: string;
     private modules: Module[];
+    private svg: any;
+    private transform: string;
 
     constructor(private dps: DataProviderService) {
         this.modules = [];
     }
 
     ngOnInit() {
-        this.loadKeyboardModules();
-    }
-
-    private loadKeyboardModules(): void {
-        let svg: any = this.dps.getBaseLayer();
-        this.modules = svg.g[0].g.map(obj => new Module(obj, svg.g[0].$.fill));
+        this.svg = this.dps.getBaseLayer();
+        this.viewBox = this.svg.$.viewBox;
+        this.transform = this.svg.g[0].$.transform;
+        this.modules = this.svg.g[0].g.map(obj => new Module(obj, this.svg.g[0].$.fill));
     }
 
 }

src/components/module.component.ts

@@ -1,54 +1,32 @@
-import { Component, OnInit, Input, DynamicComponentLoader, ElementRef, ComponentRef } from 'angular2/core';
+import { Component, OnInit, Input} from 'angular2/core';
 
-import {KeyboardButton} from './keyboard-button.model';
-import {KeyboardButtonGroupComponent} from './keyboard-button-group.component';
+import {KeyboardKey} from './keyboard-key.model';
+import {KeyboardKeyComponent} from './keyboard-key.component';
 
 @Component({
-    selector: 'module',
+    selector: 'g[uhk-module]',
     template:
     `
-        <div #row></div>
+        <svg:g uhk-keyboard-key *ngFor="#key of keyboardKeys"
+                [id]="key.id" [fill]="key.fill"
+                [rx]="key.rx" [ry]="key.ry"
+                [width]="key.width" [height]="key.height"
+                [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'"
+        />
     `,
-    styles:
-    [`
-        :host {
-            display: flex;
-            height: 100%;
-            width: 100%;
-            flex-direction: column;
-        }
-    `]
+    directives: [KeyboardKeyComponent]
 })
 export class ModuleComponent implements OnInit {
     @Input() case: any;
-    @Input() keyboardButtons: KeyboardButton[];
+    @Input() keyboardKeys: KeyboardKey[];
     @Input() fill: string;
 
-    constructor(private dcl: DynamicComponentLoader, private elementRef: ElementRef) {
-        this.keyboardButtons = [];
+    constructor() {
+        this.keyboardKeys = [];
     }
 
     ngOnInit() {
-        this.getButtonGroups().forEach(buttonGroup => {
-            this.dcl.loadIntoLocation(KeyboardButtonGroupComponent, this.elementRef, 'row')
-                .then((bttnComponentRef: ComponentRef) => {
-                    let group: KeyboardButtonGroupComponent = bttnComponentRef.instance;
-                    group.keyboardButtons = buttonGroup;
-                });
-        });
-    }
 
-    private getButtonGroups(): KeyboardButton[][] {
-        let buttonGroups: KeyboardButton[][] = [];
-        let buttonGroup: KeyboardButton[] = [];
-        this.keyboardButtons.forEach(keyboardButton => {
-            if (buttonGroup.length > 0 && buttonGroup[buttonGroup.length - 1].y !== keyboardButton.y) {
-                buttonGroups.push(buttonGroup);
-                buttonGroup = [];
-            }
-            buttonGroup.push(keyboardButton);
-        });
-        return buttonGroups;
     }
 
 }

src/components/module.model.ts

@@ -1,12 +1,14 @@
-import {KeyboardButton} from './keyboard-button.model';
+import {KeyboardKey} from './keyboard-key.model';
 
 export class Module {
     private case: any;
-    private keyboardButtons: KeyboardButton[];
+    private keyboardKeys: KeyboardKey[];
+    private attributes: any;
 
-    constructor(obj: { rect: any[], path: any[] }, fill?: string) {
-        this.keyboardButtons = obj.rect.map(rect => rect.$);
-        this.keyboardButtons.forEach(keyboardButton => keyboardButton.fill = fill ? fill : 'black');
+    constructor(obj: { rect: any[], path: any[], $: Object }, fill?: string) {
+        this.keyboardKeys = obj.rect.map(rect => rect.$);
+        this.keyboardKeys.forEach(keyboardKey => keyboardKey.fill = fill ? fill : 'black');
         this.case = obj.path[0].$;
+        this.attributes = obj.$;
     }
 }