refactor: Layer

src/components/popover/tab/keymap/keymap-tab.component.html

@@ -12,6 +12,6 @@
         <img src="./images/base-layer--blank.svg">
     </div>
     <svg-keyboard *ngIf="selectedKeymap?.abbreviation"
-                [moduleConfig]="selectedKeymap.layers[0].modules.elements">
+                [moduleConfig]="selectedKeymap.layers[0].modules">
     </svg-keyboard>
 </div>

src/components/svg/wrap/svg-keyboard-wrap.component.html

@@ -3,7 +3,7 @@
     <div class="keyboard-slider" (mouseout)="hideTooltip($event)">
         <svg-keyboard *ngFor="let layer of layers"
                       [@layerState]="layer.animation"
-                      [moduleConfig]="layer.modules.elements"
+                      [moduleConfig]="layer.modules"
                       (keyClick)="onKeyClick($event.moduleId, $event.keyId)"
                       (keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"
         >

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

@@ -130,7 +130,7 @@ export class SvgKeyboardWrapComponent implements OnChanges {
     onKeyClick(moduleId: number, keyId: number): void {
         if (!this.popoverShown && this.popoverEnabled) {
             this.keyEditConfig = {
-                keyActions: this.layers[this.currentLayer].modules.elements[moduleId].keyActions.elements,
+                keyActions: this.layers[this.currentLayer].modules[moduleId].keyActions.elements,
                 keyId
             };
 
@@ -140,7 +140,7 @@ export class SvgKeyboardWrapComponent implements OnChanges {
     }
 
     onKeyHover(moduleId: number, event: MouseEvent, over: boolean, keyId: number): void {
-        let keyActionToEdit: KeyAction = this.layers[this.currentLayer].modules.elements[moduleId].keyActions.elements[keyId];
+        let keyActionToEdit: KeyAction = this.layers[this.currentLayer].modules[moduleId].keyActions.elements[keyId];
 
         if (this.tooltipEnabled) {
             if (over) {

src/config-serializer/config-items/Layer.ts

@@ -1,11 +1,11 @@
 import { AnimationKeyboard } from '../../components/svg/wrap';
 import { Serializable } from '../Serializable';
 import { UhkBuffer } from '../UhkBuffer';
-import { Modules } from './Modules';
+import { Module } from './Module';
 
 export class Layer extends Serializable<Layer> {
 
-    modules: Modules;
+    modules: Module[];
     animation: AnimationKeyboard;
 
     constructor(layers?: Layer) {
@@ -14,28 +14,28 @@ export class Layer extends Serializable<Layer> {
             this.animation = 'none';
             return;
         }
-        this.modules = new Modules(layers.modules);
+        this.modules = layers.modules.map(module => new Module(module));
         this.animation = layers.animation;
     }
 
     _fromJsObject(jsObject: any): Layer {
-        this.modules = new Modules().fromJsObject(jsObject.modules);
+        this.modules = jsObject.modules.map((module: any) => new Module().fromJsObject(module));
         return this;
     }
 
     _fromBinary(buffer: UhkBuffer): Layer {
-        this.modules = new Modules().fromBinary(buffer);
+        this.modules = buffer.readArray<Module>(Module);
         return this;
     }
 
     _toJsObject(): any {
         return {
-            modules: this.modules.toJsObject()
+            modules: this.modules.map(module => module.toJsObject())
         };
     }
 
     _toBinary(buffer: UhkBuffer): void {
-        this.modules.toBinary(buffer);
+        buffer.writeArray(this.modules);
     }
 
     toString(): string {