Move svg processing from main to service.

src/components/svg-keyboard.component.ts

@@ -4,6 +4,7 @@ import {Module} from '../../config-serializer/config-items/Module';
 import {SvgModule} from './svg-module.model';
 import {SvgModuleComponent} from './svg-module.component';
 import {PopoverComponent} from './popover/popover.component';
+import {DataProviderService} from '../services/data-provider.service';
 
 @Component({
     selector: 'svg-keyboard',
@@ -34,17 +35,20 @@ import {PopoverComponent} from './popover/popover.component';
     directives: [SvgModuleComponent, PopoverComponent]
 })
 export class SvgKeyboardComponent implements OnInit {
-    @Input() svgAttributes: { viewBox: string, transform: string, fill: string };
-    @Input() modules: SvgModule[];
     @Input() moduleConfig: Module[];
 
+    private modules: SvgModule[];
     private popoverEnabled: boolean;
+    private svgAttributes: { viewBox: string, transform: string, fill: string };
 
-    constructor() {
+    constructor(private dps: DataProviderService) {
         this.modules = [];
+        this.svgAttributes = this.dps.getKeyboardSvgAttributes();
     }
 
-    ngOnInit() { }
+    ngOnInit() {
+        this.modules = this.dps.getSvgModules();
+    }
 
     onEditKeyActionRequest(moduleId: number, keyId: number): void {
         this.showPopover();

src/main-app.component.ts

@@ -3,9 +3,6 @@ import { Component, OnInit, AfterViewInit, Renderer, ViewChildren, QueryList, El
 import {Layers} from '../config-serializer/config-items/Layers';
 
 import {SvgKeyboardComponent} from './components/svg-keyboard.component';
-import {SvgModule} from './components/svg-module.model';
-
-import {DataProviderService} from './services/data-provider.service';
 import {UhkConfigurationService} from './services/uhk-configuration.service';
 
 @Component({
@@ -28,8 +25,6 @@ import {UhkConfigurationService} from './services/uhk-configuration.service';
         </div>
         <div>
             <svg-keyboard *ngFor="let layer of layers.elements"
-                            [svgAttributes]="svgAttributes"
-                            [modules]="modules"
                             [moduleConfig]="layer.modules.elements"
                             (animationend)="onKeyboardAnimationEnd($event)"
                             hidden>
@@ -51,15 +46,12 @@ export class MainAppComponent implements OnInit, AfterViewInit {
     private keyboards: ElementRef[];
     private selectedLayerIndex: number;
 
-    private svgAttributes: { viewBox: string, transform: string, fill: string };
-    private modules: SvgModule[];
     private layers: Layers;
 
     private numAnimationInProgress: number;
 
     constructor(
         private renderer: Renderer,
-        private dps: DataProviderService,
         private uhkConfigurationService: UhkConfigurationService
     ) {
         this.buttons = [];
@@ -69,17 +61,7 @@ export class MainAppComponent implements OnInit, AfterViewInit {
     }
 
     ngOnInit() {
-        let svg: any = this.dps.getBaseLayer();
-        this.svgAttributes = {
-            viewBox: svg.$.viewBox,
-            transform: svg.g[0].$.transform,
-            fill: svg.g[0].$.fill
-        };
-        this.modules = svg.g[0].g.map(obj => new SvgModule(obj));
-        this.modules = [this.modules[1], this.modules[0]]; // TODO: remove if the svg will be correct
-
         this.layers = this.uhkConfigurationService.getUhkConfiguration().keyMaps.elements[0].layers;
-
     }
 
     ngAfterViewInit() {

src/services/data-provider.service.ts

@@ -1,16 +1,32 @@
 import { Injectable } from '@angular/core';
 
+import {SvgModule} from '../components/svg-module.model';
+
 @Injectable()
 export class DataProviderService {
 
     constructor() { }
 
-    getBaseLayer(): any {
-        return require('xml!../../images/base-layer.svg').svg;
-    }
-
     getUHKConfig(): any {
         return require('json!../../config-serializer/uhk-config.json');
     }
 
+    getKeyboardSvgAttributes(): { viewBox: string, transform: string, fill: string } {
+        let svg: any = this.getBaseLayer();
+        return {
+            viewBox: svg.$.viewBox,
+            transform: svg.g[0].$.transform,
+            fill: svg.g[0].$.fill
+        };
+    }
+
+    getSvgModules(): SvgModule[] {
+        let modules = this.getBaseLayer().g[0].g.map(obj => new SvgModule(obj));
+        return [modules[1], modules[0]]; // TODO: remove if the svg will be correct
+    }
+
+    private getBaseLayer(): any {
+        return require('xml!../../images/base-layer.svg').svg;
+    }
+
 }