Enable OnPush change detection strategy in SvgKeyboardWrapComponent

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

@@ -1,7 +1,7 @@
 <template ngIf="layers">
     <layers [class.disabled]="popoverShown" (select)="selectLayer($event.oldIndex, $event.index)" [current]="currentLayer"></layers>
     <div class="keyboard-slider" (mouseout)="hideTooltip($event)">
-        <svg-keyboard *ngFor="let layer of layers"
+        <svg-keyboard *ngFor="let layer of layers; trackBy: trackKeyboard"
                       [@layerState]="layer.animation"
                       [moduleConfig]="layer.modules"
                       (keyClick)="onKeyClick($event.moduleId, $event.keyId)"

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

@@ -1,4 +1,5 @@
 import {
+    ChangeDetectionStrategy,
     Component,
     Input,
     OnChanges,
@@ -44,6 +45,7 @@ import { KeymapActions } from '../../../store/actions';
     selector: 'svg-keyboard-wrap',
     template: require('./svg-keyboard-wrap.component.html'),
     styles: [require('./svg-keyboard-wrap.component.scss')],
+    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', [
@@ -92,7 +94,7 @@ export class SvgKeyboardWrapComponent implements OnChanges {
     @Input() tooltipEnabled: boolean = false;
 
     private popoverShown: boolean;
-    private keyEditConfig: { keyActions: KeyAction[], keyId: number };
+    private keyEditConfig: { moduleId: number, keyId: number };
     private popoverInitKeyAction: KeyAction;
     private currentLayer: number = 0;
     private tooltipData: { posTop: number, posLeft: number, content: { name: string, value: string }[], shown: boolean };
@@ -100,7 +102,7 @@ export class SvgKeyboardWrapComponent implements OnChanges {
 
     constructor(private store: Store<AppState>, private mapper: MapperService) {
         this.keyEditConfig = {
-            keyActions: undefined,
+            moduleId: undefined,
             keyId: undefined
         };
 
@@ -130,11 +132,11 @@ export class SvgKeyboardWrapComponent implements OnChanges {
     onKeyClick(moduleId: number, keyId: number): void {
         if (!this.popoverShown && this.popoverEnabled) {
             this.keyEditConfig = {
-                keyActions: this.layers[this.currentLayer].modules[moduleId].keyActions,
+                moduleId,
                 keyId
             };
 
-            let keyActionToEdit: KeyAction = this.keyEditConfig.keyActions[keyId];
+            const keyActionToEdit: KeyAction = this.layers[this.currentLayer].modules[moduleId].keyActions[keyId];
             this.showPopover(keyActionToEdit);
         }
     }
@@ -152,8 +154,14 @@ export class SvgKeyboardWrapComponent implements OnChanges {
     }
 
     onRemap(keyAction: KeyAction): void {
-        this.changeKeyAction(keyAction);
-        this.store.dispatch(KeymapActions.saveKey(this.keymap));
+        this.store.dispatch(
+            KeymapActions.saveKey(
+                this.keymap,
+                this.currentLayer,
+                this.keyEditConfig.moduleId,
+                this.keyEditConfig.keyId,
+                keyAction)
+        );
         this.hidePopover();
     }
 
@@ -309,11 +317,6 @@ export class SvgKeyboardWrapComponent implements OnChanges {
         this.popoverInitKeyAction = undefined;
     }
 
-    changeKeyAction(keyAction: KeyAction): void {
-        let keyId = this.keyEditConfig.keyId;
-        this.keyEditConfig.keyActions[keyId] = keyAction;
-    }
-
     selectLayer(oldIndex: number, index: number): void {
         if (index > oldIndex) {
             this.layers[oldIndex].animation = 'leftOut';
@@ -325,4 +328,8 @@ export class SvgKeyboardWrapComponent implements OnChanges {
 
         this.currentLayer = index;
     }
+
+    trackKeyboard(index: number) {
+        return index;
+    }
 }

src/store/actions/keymap.ts

@@ -1,5 +1,6 @@
 import { Action } from '@ngrx/store';
 
+import { KeyAction } from '../../config-serializer/config-items/key-action';
 import { Keymap } from '../../config-serializer/config-items/Keymap';
 
 export namespace KeymapActions {
@@ -60,10 +61,16 @@ export namespace KeymapActions {
         };
     }
 
-    export function saveKey(keymap: Keymap): Action {
+    export function saveKey(keymap: Keymap, layer: number, module: number, key: number, keyAction: KeyAction): Action {
         return {
             type: KeymapActions.SAVE_KEY,
-            payload: keymap
+            payload: {
+                keymap,
+                layer,
+                module,
+                key,
+                keyAction
+            }
         };
     }
 }

src/store/reducers/keymap.ts

@@ -4,7 +4,10 @@ import { Action } from '@ngrx/store';
 import 'rxjs/add/operator/map';
 import { Observable } from 'rxjs/Observable';
 
+import { Helper as KeyActionHelper } from '../../config-serializer/config-items/key-action';
 import { Keymap } from '../../config-serializer/config-items/Keymap';
+import { Layer } from '../../config-serializer/config-items/Layer';
+import { Module } from '../../config-serializer/config-items/Module';
 import { KeymapActions } from '../actions';
 import { AppState, KeymapState } from '../index';
 
@@ -12,7 +15,7 @@ const initialState: KeymapState = {
     entities: []
 };
 
-export default function(state = initialState, action: Action): KeymapState {
+export default function (state = initialState, action: Action): KeymapState {
     let newState: Keymap[];
 
     switch (action.type) {
@@ -80,13 +83,13 @@ export default function(state = initialState, action: Action): KeymapState {
             let isDefault: boolean;
 
             let filtered: Keymap[] = state.entities.filter((keymap: Keymap) => {
-                    if (keymap.abbreviation === action.payload) {
-                        isDefault = keymap.isDefault;
-                        return false;
-                    }
-
-                    return true;
+                if (keymap.abbreviation === action.payload) {
+                    isDefault = keymap.isDefault;
+                    return false;
                 }
+
+                return true;
+            }
             );
 
             // If deleted one is default set default keymap to the first on the list of keymaps
@@ -99,11 +102,29 @@ export default function(state = initialState, action: Action): KeymapState {
             };
 
         case KeymapActions.SAVE_KEY:
-            let changedKeymap: Keymap = new Keymap;
+
+            const keymap: Keymap = action.payload.keymap;
+            const changedKeymap: Keymap = new Keymap();
+            Object.assign(changedKeymap, keymap);
+
+            const layerIndex: number = action.payload.layer;
+            const layer: Layer = changedKeymap.layers[layerIndex];
+            const changedLayer: Layer = new Layer();
+            Object.assign(changedLayer, layer);
+            changedKeymap.layers[layerIndex] = changedLayer;
+
+            const moduleIndex: number = action.payload.module;
+            const module: Module = changedLayer.modules[moduleIndex];
+            const changedModule: Module = new Module();
+            Object.assign(changedModule, module);
+            changedLayer.modules[moduleIndex] = changedModule;
+
+            const keyIndex: number = action.payload.key;
+            changedModule.keyActions[keyIndex] = KeyActionHelper.createKeyAction(action.payload.keyAction);
 
             newState = state.entities.map((keymap: Keymap) => {
-                if (keymap.abbreviation === action.payload.abbreviation) {
-                    keymap = Object.assign(changedKeymap, action.payload);
+                if (keymap.abbreviation === changedKeymap.abbreviation) {
+                    keymap = changedKeymap;
                 }
 
                 return keymap;