Animate between different layers

src/components/svg-keyboard.component.ts

@@ -1,18 +1,15 @@
-import { Component, OnInit} from 'angular2/core';
+import { Component, OnInit, Input} 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 xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="svgAttributes.viewBox" height="100%" width="100%">
+            <svg:g [attr.transform]="svgAttributes.transform" [attr.fill]="svgAttributes.fill">
                 <svg:g svg-module *ngFor="let module of modules; let i = index"
                         [coverages]="module.coverages"
                         [keyboardKeys]="module.keyboardKeys"
@@ -33,31 +30,14 @@ import {UhkConfiguration} from '../../config-serializer/config-items/UhkConfigur
     directives: [SvgModuleComponent]
 })
 export class SvgKeyboardComponent implements OnInit {
-    private viewBox: string;
-    private modules: SvgModule[];
-    private svg: any;
-    private transform: string;
-    private fill: string;
-    private moduleConfig: Module[];
+    @Input() svgAttributes: { viewBox: string, transform: string, fill: string };
+    @Input() modules: SvgModule[];
+    @Input() moduleConfig: Module[];
 
-    constructor(private dps: DataProviderService) {
+    constructor() {
         this.modules = [];
     }
 
-    ngOnInit() {
-        this.svg = this.dps.getBaseLayer();
-        this.viewBox = this.svg.$.viewBox;
-        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
-    }
+    ngOnInit() { }
 
 }

src/components/svg-module.component.ts

@@ -36,7 +36,6 @@ export class SvgModuleComponent implements OnInit, OnChanges {
 
     ngOnInit() {
         this.setLabels();
-        console.log(this);
     }
 
     ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {