From 42686f4221a8f4bd679dc4bf40a7e5c33b5be787 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Farkas=20J=C3=B3zsef?= <fjozsef001@gmail.com>
Date: Wed, 14 Dec 2016 21:12:31 +0100
Subject: [PATCH] Cleanup unused functionality in keyboard wrap

---
 .../slider/keyboard-slider.component.html     |  4 ++--
 .../slider/keyboard-slider.component.ts       | 22 ++++++++++++++-----
 src/components/svg/wrap/animation.ts          |  5 -----
 src/components/svg/wrap/index.ts              |  1 -
 .../svg/wrap/svg-keyboard-wrap.component.html |  2 +-
 .../svg/wrap/svg-keyboard-wrap.component.ts   | 19 +---------------
 src/config-serializer/config-items/Layer.ts   |  3 ---
 7 files changed, 21 insertions(+), 35 deletions(-)
 delete mode 100644 src/components/svg/wrap/animation.ts

diff --git a/src/components/keyboard/slider/keyboard-slider.component.html b/src/components/keyboard/slider/keyboard-slider.component.html
index 19690d00..0d1812ac 100644
--- a/src/components/keyboard/slider/keyboard-slider.component.html
+++ b/src/components/keyboard/slider/keyboard-slider.component.html
@@ -1,5 +1,5 @@
-<svg-keyboard *ngFor="let layer of layers; trackBy: trackKeyboard"
-                      [@layerState]="layer.animation"
+<svg-keyboard *ngFor="let layer of layers; let index = index; trackBy: trackKeyboard"
+                      [@layerState]="layerAnimationState[index]"
                       [moduleConfig]="layer.modules"
                       (keyClick)="keyClick.emit($event)"
                       (keyHover)="keyHover.emit($event)">
diff --git a/src/components/keyboard/slider/keyboard-slider.component.ts b/src/components/keyboard/slider/keyboard-slider.component.ts
index 39e450bb..f676e2e4 100644
--- a/src/components/keyboard/slider/keyboard-slider.component.ts
+++ b/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.layers[index].animation = 'leftIn';
+            this.layerAnimationState[oldIndex] = 'leftOut';
+            this.layerAnimationState[index] = 'leftIn';
         } else {
-            this.layers[oldIndex].animation = 'rightOut';
-            this.layers[index].animation = 'rightIn';
+            this.layerAnimationState[oldIndex] = 'rightOut';
+            this.layerAnimationState[index] = 'rightIn';
         }
 
     }
diff --git a/src/components/svg/wrap/animation.ts b/src/components/svg/wrap/animation.ts
deleted file mode 100644
index 8d60d48b..00000000
--- a/src/components/svg/wrap/animation.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type AnimationKeyboard =
-    'leftIn' |
-    'leftOut' |
-    'rightIn' |
-    'rightOut';
diff --git a/src/components/svg/wrap/index.ts b/src/components/svg/wrap/index.ts
index 3f099917..74c0407b 100644
--- a/src/components/svg/wrap/index.ts
+++ b/src/components/svg/wrap/index.ts
@@ -1,2 +1 @@
 export * from './svg-keyboard-wrap.component';
-export * from './animation';
diff --git a/src/components/svg/wrap/svg-keyboard-wrap.component.html b/src/components/svg/wrap/svg-keyboard-wrap.component.html
index f4764794..e0c6ee51 100644
--- a/src/components/svg/wrap/svg-keyboard-wrap.component.html
+++ b/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)"
diff --git a/src/components/svg/wrap/svg-keyboard-wrap.component.ts b/src/components/svg/wrap/svg-keyboard-wrap.component.ts
index 0374f502..b67af34c 100644
--- a/src/components/svg/wrap/svg-keyboard-wrap.component.ts
+++ b/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 {
-        if (index > oldIndex) {
-            this.layers[oldIndex].animation = 'leftOut';
-            this.layers[index].animation = 'leftIn';
-        } else {
-            this.layers[oldIndex].animation = 'rightOut';
-            this.layers[index].animation = 'rightIn';
-        }
-
+    selectLayer(index: number): void {
         this.currentLayer = index;
     }
 
-    trackKeyboard(index: number) {
-        return index;
-    }
-
 }
diff --git a/src/config-serializer/config-items/Layer.ts b/src/config-serializer/config-items/Layer.ts
index 2c269fa7..5d79148f 100644
--- a/src/config-serializer/config-items/Layer.ts
+++ b/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 {