Cleanup unused functionality in keyboard wrap

src/components/keyboard/slider/keyboard-slider.component.html

@@ -1,5 +1,5 @@
-<svg-keyboard *ngFor="let layer of layers; trackBy: trackKeyboard"
+<svg-keyboard *ngFor="let layer of layers; let index = index; trackBy: trackKeyboard"
-                      [@layerState]="layer.animation"
+                      [@layerState]="layerAnimationState[index]"
                       [moduleConfig]="layer.modules"
                       (keyClick)="keyClick.emit($event)"
                       (keyHover)="keyHover.emit($event)">

src/components/keyboard/slider/keyboard-slider.component.ts

@@ -16,11 +16,17 @@ import {
 
 import { Layer } from '../../../config-serializer/config-items/Layer';
 
+type AnimationKeyboard =
+    'leftIn' |
+    'leftOut' |
+    'rightIn' |
+    'rightOut';
+
 @Component({
     selector: 'keyboard-slider',
     template: require('./keyboard-slider.component.html'),
     styles: [require('./keyboard-slider.component.scss')],
-    changeDetection: ChangeDetectionStrategy.Default,
+    changeDetection: ChangeDetectionStrategy.OnPush,
     // We use 101%, because there was still a trace of the keyboard in the screen when animation was done
     animations: [
         trigger('layerState', [
@@ -75,7 +81,13 @@ export class KeyboardSliderComponent implements OnChanges {
     @Output() keyClick = new EventEmitter();
     @Output() keyHover = new EventEmitter();
 
+    private layerAnimationState: AnimationKeyboard[];
+
     ngOnChanges(changes: SimpleChanges) {
+        if (changes['layers']) {
+            this.layerAnimationState = this.layers.map<AnimationKeyboard>(() => 'leftOut');
+            this.layerAnimationState[this.currentLayer] = 'leftIn';
+        }
         const layerChange = changes['currentLayer'];
         if (layerChange) {
             const prevValue = layerChange.isFirstChange() ? layerChange.currentValue : layerChange.previousValue;
@@ -89,11 +101,11 @@ export class KeyboardSliderComponent implements OnChanges {
 
     onLayerChange(oldIndex: number, index: number): void {
         if (index > oldIndex) {
-            this.layers[oldIndex].animation = 'leftOut';
+            this.layerAnimationState[oldIndex] = 'leftOut';
-            this.layers[index].animation = 'leftIn';
+            this.layerAnimationState[index] = 'leftIn';
         } else {
-            this.layers[oldIndex].animation = 'rightOut';
+            this.layerAnimationState[oldIndex] = 'rightOut';
-            this.layers[index].animation = 'rightIn';
+            this.layerAnimationState[index] = 'rightIn';
         }
 
     }

src/components/svg/wrap/animation.ts

@@ -1,5 +0,0 @@
-export type AnimationKeyboard =
-    'leftIn' |
-    'leftOut' |
-    'rightIn' |
-    'rightOut';

src/components/svg/wrap/index.ts

@@ -1,2 +1 @@
 export * from './svg-keyboard-wrap.component';
-export * from './animation';

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

@@ -1,5 +1,5 @@
 <template ngIf="layers">
-    <layers [class.disabled]="popoverShown" (select)="selectLayer($event.oldIndex, $event.index)" [current]="currentLayer"></layers>
+    <layers [class.disabled]="popoverShown" (select)="selectLayer($event.index)" [current]="currentLayer"></layers>
     <keyboard-slider [layers]="layers"
                      [currentLayer]="currentLayer"
                      (keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"

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

@@ -93,11 +93,6 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
             this.layers = this.keymap.layers;
             this.currentLayer = 0;
             this.popoverShown = false;
-
-            if (this.layers.length > 0) {
-                this.layers.forEach(element => element.animation = 'leftOut');
-                this.layers[0].animation = 'leftIn';
-            }
         } else if (changes['keymap']) {
             this.popoverShown = false;
         }
@@ -262,20 +257,8 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
         this.popoverShown = false;
     }
 
-    selectLayer(oldIndex: number, index: number): void {
+    selectLayer(index: number): void {
-        if (index > oldIndex) {
-            this.layers[oldIndex].animation = 'leftOut';
-            this.layers[index].animation = 'leftIn';
-        } else {
-            this.layers[oldIndex].animation = 'rightOut';
-            this.layers[index].animation = 'rightIn';
-        }
-
         this.currentLayer = index;
     }
 
-    trackKeyboard(index: number) {
-        return index;
-    }
-
 }

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

@@ -1,4 +1,3 @@
-import { AnimationKeyboard } from '../../components/svg/wrap';
 import { Serializable } from '../Serializable';
 import { UhkBuffer } from '../UhkBuffer';
 import { Keymap } from './Keymap';
@@ -8,7 +7,6 @@ import { Module } from './Module';
 export class Layer extends Serializable<Layer> {
 
     modules: Module[];
-    animation: AnimationKeyboard;
 
     constructor(layers?: Layer, getKeymap?: (abbrevation: string) => Keymap, getMacro?: (macroId: number) => Macro) {
         super();
@@ -16,7 +14,6 @@ export class Layer extends Serializable<Layer> {
             return;
         }
         this.modules = layers.modules.map(module => new Module(module, getKeymap, getMacro));
-        this.animation = layers.animation;
     }
 
     fromJsonObject(jsonObject: any, getKeymap?: (abbrevation: string) => Keymap, getMacro?: (macroId: number) => Macro): Layer {