Fix key bind animation side effect

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

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

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

@@ -78,6 +78,7 @@ type AnimationKeyboard =
 export class KeyboardSliderComponent implements OnChanges {
     @Input() layers: Layer[];
     @Input() currentLayer: number;
+    @Input() keybindAnimationEnabled: boolean;
     @Output() keyClick = new EventEmitter();
     @Output() keyHover = new EventEmitter();
 

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

@@ -3,6 +3,7 @@
         <svg:g svg-module *ngFor="let module of modules; let i = index"
                 [coverages]="module.coverages"
                 [keyboardKeys]="module.keyboardKeys"
+                [keybindAnimationEnabled]="keybindAnimationEnabled"
                 [attr.transform]="module.attributes.transform"
                 [keyActions]="moduleConfig[i].keyActions"
                 (keyClick)="onKeyClick(i, $event.index, $event.keyTarget)"

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

@@ -10,6 +10,7 @@ import { SvgModule } from '../module';
 })
 export class SvgKeyboardComponent implements OnInit {
     @Input() moduleConfig: Module[];
+    @Input() keybindAnimationEnabled: boolean;
     @Output() keyClick = new EventEmitter();
     @Output() keyHover = new EventEmitter();
 

src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts

@@ -59,6 +59,7 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
     @Input() height: number;
     @Input() width: number;
     @Input() keyAction: KeyAction;
+    @Input() keybindAnimationEnabled: boolean;
     @Output() keyClick = new EventEmitter();
 
     enumLabelTypes = LabelTypes;
@@ -86,7 +87,9 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
         /* tslint:disable:no-string-literal */
         if (changes['keyAction']) {
             this.setLabels();
-            this.animation = 'active';
+            if (this.keybindAnimationEnabled) {
+                this.animation = 'active';
+            }
         }
         /* tslint:enable:no-string-literal */
     }

src/components/svg/module/svg-module.component.html

@@ -5,6 +5,7 @@
         [width]="key.width" [height]="key.height"
         [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'"
         [keyAction]="keyActions[i]"
+        [keybindAnimationEnabled]="keybindAnimationEnabled"
         (keyClick)="onKeyClick(i, $event)"
         (mouseenter)="onKeyHover(i, $event, true)"
         (mouseleave)="onKeyHover(i, $event, false)"

src/components/svg/module/svg-module.component.ts

@@ -13,6 +13,7 @@ export class SvgModuleComponent {
     @Input() coverages: any[];
     @Input() keyboardKeys: SvgKeyboardKey[];
     @Input() keyActions: KeyAction[];
+    @Input() keybindAnimationEnabled: boolean;
     @Output() keyClick = new EventEmitter();
     @Output() keyHover = new EventEmitter();
 

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

@@ -2,6 +2,7 @@
     <layers [class.disabled]="popoverShown" (select)="selectLayer($event.index)" [current]="currentLayer"></layers>
     <keyboard-slider [layers]="layers"
                      [currentLayer]="currentLayer"
+                     [keybindAnimationEnabled]="keybindAnimationEnabled"
                      (keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"
                      (keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"></keyboard-slider>
     <popover [visible]="popoverShown" [keyPosition]="keyPosition" [wrapPosition]="wrapPosition" [defaultKeyAction]="popoverInitKeyAction" [currentKeymap]="keymap" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>

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

@@ -46,6 +46,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     private popoverShown: boolean;
     private keyEditConfig: { moduleId: number, keyId: number };
     private popoverInitKeyAction: KeyAction;
+    private keybindAnimationEnabled: boolean;
     private currentLayer: number = 0;
     private tooltipData: { posTop: number, posLeft: number, content: { name: string, value: string }[], show: boolean };
     private layers: Layer[];
@@ -89,13 +90,18 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     }
 
     ngOnChanges(changes: SimpleChanges) {
-        if (changes['keymap'].previousValue.abbreviation !== changes['keymap'].currentValue.abbreviation) {
+        const keymapChanges = changes['keymap'];
-            this.layers = this.keymap.layers;
+        if (keymapChanges) {
-            this.currentLayer = 0;
-            this.popoverShown = false;
-        } else if (changes['keymap']) {
             this.popoverShown = false;
+            if (keymapChanges.previousValue.abbreviation !== keymapChanges.currentValue.abbreviation) {
+                this.layers = this.keymap.layers;
+                this.currentLayer = 0;
+                this.keybindAnimationEnabled = keymapChanges.isFirstChange();
+            } else {
+                this.keybindAnimationEnabled = true;
+            }
         }
+
     }
 
     onKeyClick(moduleId: number, keyId: number, keyTarget: HTMLElement): void {