chore: upgrade angular => 7.x (#925)

* Merge branch 'master' into chore-upgrade-angular-to-7

* reformat files of the store

* set preserveWhitespaces = true

* delete console.log from AutoGrowInputComponent

* fix null pinter exception when set the keyaction on an undefined key

* speed tuning

* delete svg-keyboard-key animation

* revert electron logger upgrade

* improve animation speed of scg-keyboard-key component

* fix: popover keymap tab visibility

* fix: remove btn-line css class

package.json

@@ -34,7 +34,7 @@
     "autoprefixer": "6.5.3",
     "buffer": "5.0.6",
     "check-node-version": "^3.2.0",
-    "copy-webpack-plugin": "4.0.1",
+    "copy-webpack-plugin": "5.0.0",
     "copyfiles": "^2.0.0",
     "core-js": "2.4.1",
     "cross-env": "5.0.5",
@@ -53,28 +53,31 @@
     "file-loader": "0.10.0",
     "fs-extra": "5.0.0",
     "gh-pages": "2.0.1",
+    "html-webpack-plugin": "3.2.0",
     "jasmine": "2.8.0",
     "jasmine-core": "2.8.0",
     "jasmine-node": "2.0.1",
     "jasmine-ts": "0.3.0",
     "jsonfile": "4.0.0",
-    "lerna": "^3.13.0",
+    "lerna": "3.13.0",
     "lodash": "4.17.11",
     "mkdirp": "0.5.1",
     "node-hid": "0.7.3",
     "npm-run-all": "4.0.2",
     "nrf-intel-hex": "1.3.0",
+    "postcss-url": "8.0.0",
     "pre-commit": "1.2.2",
     "request": "2.88.0",
     "rimraf": "2.6.1",
     "source-map-support": "0.5.9",
     "stylelint": "9.6.0",
     "svg-sprite": "1.5.0",
-    "ts-loader": "2.3.1",
+    "ts-loader": "5.3.3",
     "ts-node": "7.0.1",
-    "tslint": "5.9.1",
+    "tslint": "5.13.0",
-    "typescript": "2.8.4",
+    "typescript": "3.3.3",
-    "webpack": "3.12.0"
+    "webpack": "4.29.5",
+    "webpack-cli": "3.2.3"
   },
   "pre-commit": [
     "precommit-msg"

packages/kboot/tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "../../tsconfig.json"
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./"
+  }
 }

packages/uhk-agent/src/services/device.service.ts

@@ -14,7 +14,7 @@ import {
     UpdateFirmwareData
 } from 'uhk-common';
 import { snooze, UhkHidDevice, UhkOperations } from 'uhk-usb';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 import { interval } from 'rxjs/observable/interval';
 import { fromPromise } from 'rxjs/observable/fromPromise';
 import { distinctUntilChanged, startWith, switchMap, tap } from 'rxjs/operators';

packages/uhk-common/package-lock.json

@@ -4,6 +4,25 @@
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
+		"base64-js": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
+			"integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw=="
+		},
+		"buffer": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.2.1.tgz",
+			"integrity": "sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==",
+			"requires": {
+				"base64-js": "^1.0.2",
+				"ieee754": "^1.1.4"
+			}
+		},
+		"ieee754": {
+			"version": "1.1.12",
+			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.12.tgz",
+			"integrity": "sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA=="
+		},
 		"tslib": {
 			"version": "1.9.3",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",

packages/uhk-common/package.json

@@ -20,6 +20,7 @@
     "lint": "tslint --project tsconfig.json"
   },
   "dependencies": {
+    "buffer": "5.2.1",
     "tslib": "1.9.3"
   },
   "license": "GPL-3.0",

packages/uhk-common/src/config-serializer/config-items/key-action/keystroke-action.spec.ts

@@ -52,7 +52,7 @@ describe('keystroke-action', () => {
 
         it('should not change the "type" to "shortMedia" when is "longMedia" if scancode < 256', () => {
             const action = new KeystrokeAction();
-            action.type = KeystrokeType.longMedia;
+            action.type = KeystrokeType.longMedia as any;
             action.scancode = 125;
             expect(action.type).toEqual(KeystrokeType.shortMedia);
         });
@@ -67,7 +67,7 @@ describe('keystroke-action', () => {
 
         it('should not change the "type" to "longMedia" when is "shortMedia" if scancode >= 256', () => {
             const action = new KeystrokeAction();
-            action.type = KeystrokeType.shortMedia;
+            action.type = KeystrokeType.shortMedia as any;
             action.scancode = 256;
             expect(action.type).toEqual(KeystrokeType.longMedia);
         });
@@ -145,7 +145,7 @@ describe('keystroke-action', () => {
         });
 
         it('should change the value to "longMedia" if scancode >= 256 and value "shortMedia"', () => {
-            const value = KeystrokeType.shortMedia;
+            const value = KeystrokeType.shortMedia as any;
             const scancode = 256;
             const action = new KeystrokeAction();
             action.scancode = scancode;
@@ -165,7 +165,7 @@ describe('keystroke-action', () => {
         });
 
         it('should change the value to "shortMedia" if scancode < 256 and value "longMedia"', () => {
-            const value = KeystrokeType.longMedia;
+            const value = KeystrokeType.longMedia as any;
             const scancode = 100;
             const action = new KeystrokeAction();
             action.scancode = scancode;

packages/uhk-common/src/config-serializer/uhk-buffer.ts

@@ -1,3 +1,6 @@
+// / need to load the buffer package from dependency instead of use node default buffer
+import { Buffer } from 'buffer/';
+
 export class UhkBuffer {
 
     static simpleElementWriter<T>(buffer: UhkBuffer, element: T): void {

packages/uhk-web/.angular-cli.json

@@ -1,70 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "uhk"
-  },
-  "apps": [
-    {
-      "name": "web",
-      "root": "src",
-      "outDir": "./dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main-web.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
-        "../node_modules/nouislider/distribute/nouislider.min.css",
-        "styles.scss"
-      ],
-      "scripts": [
-        "../node_modules/bootstrap/dist/js/bootstrap.js",
-        "../node_modules/nouislider/distribute/nouislider.js"
-      ],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "scss",
-    "component": {
-    },
-    "serve": {
-      "port": 8080
-    }
-  }
-}

packages/uhk-web/angular.json

@@ -0,0 +1,194 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": ".",
+  "defaultProject": "uhk-web",
+  "projects": {
+    "uhk-web": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {
+        "@schematics/angular:component": {
+          "styleext": "scss"
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "baseHref": "",
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main-web.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/nouislider/distribute/nouislider.min.css",
+              "src/styles.scss"
+            ],
+            "scripts": [
+              "node_modules/bootstrap/dist/js/bootstrap.js",
+              "node_modules/nouislider/distribute/nouislider.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "uhk-web:build",
+            "port": 8080
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "uhk-web:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "uhk-web:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/nouislider/distribute/nouislider.min.css",
+              "src/styles.scss"
+            ],
+            "scripts": [
+              "node_modules/bootstrap/dist/js/bootstrap.js",
+              "node_modules/nouislider/distribute/nouislider.js"
+            ],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.renderer.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "uhk-renderer": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {
+        "@schematics/angular:component": {
+          "styleext": "scss"
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular-builders/custom-webpack:browser",
+          "options": {
+            "customWebpackConfig": {
+              "path": "./webpack.config.js",
+              "mergeStrategies": {
+                "target": "replace",
+                "node": "replace"
+              }
+            },
+            "baseHref": "",
+            "outputPath": "../uhk-agent/dist/renderer",
+            "index": "src/index.html",
+            "main": "src/main-renderer.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.renderer.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/nouislider/distribute/nouislider.min.css",
+              "src/styles.scss"
+            ],
+            "scripts": [
+              "node_modules/bootstrap/dist/js/bootstrap.js",
+              "node_modules/nouislider/distribute/nouislider.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        }
+      }
+    }
+  }
+}

packages/uhk-web/package.json

@@ -6,9 +6,9 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "run-p -sn build:*",
-    "build:web": "ng build --prod --aot --base-href=\"\"",
+    "build:web": "ng build --prod --aot",
-    "build:renderer": "cross-env AOT_BUILD=true webpack --config webpack.config.js",
+    "build:renderer": "ng build --prod --aot --project=uhk-renderer",
-    "server:renderer": "webpack --config webpack.config.js --watch",
+    "server:renderer": "ng build --project=uhk-renderer --watch",
     "test-skip": "ng test --watch false",
     "lint": "run-p -snc lint:*",
     "lint:ng": "ng lint",
@@ -19,65 +19,62 @@
   },
   "private": true,
   "devDependencies": {
-    "@angular/animations": "5.2.9",
+    "@angular/animations": "7.2.6",
-    "@angular/cli": "1.7.4",
+    "@angular-builders/custom-webpack": "7.3.1",
-    "@angular/common": "5.2.9",
+    "@angular/cli": "7.3.2",
-    "@angular/compiler": "5.2.9",
+    "@angular/common": "7.2.6",
-    "@angular/compiler-cli": "5.2.9",
+    "@angular/compiler": "7.2.6",
-    "@angular/core": "5.2.9",
+    "@angular/compiler-cli": "7.2.6",
-    "@angular-devkit/build-optimizer": "0.3.2",
+    "@angular/core": "7.2.6",
-    "@angular/forms": "5.2.9",
+    "@angular-devkit/build-angular": "0.13.3",
-    "@angular/http": "5.2.9",
+    "@angular-devkit/build-optimizer": "0.13.3",
-    "@angular/language-service": "5.2.9",
+    "@angular-devkit/core": "7.3.2",
-    "@angular/platform-browser": "5.2.9",
+    "@angular/forms": "7.2.6",
-    "@angular/platform-browser-dynamic": "5.2.9",
+    "@angular/http": "7.2.6",
-    "@angular/router": "5.2.9",
+    "@angular/language-service": "7.2.6",
-    "@ngrx/effects": "4.0.5",
+    "@angular/platform-browser": "7.2.6",
-    "@ngrx/router-store": "4.0.4",
+    "@angular/platform-browser-dynamic": "7.2.6",
-    "@ngrx/store": "4.0.3",
+    "@angular/router": "7.2.6",
-    "@ngrx/store-devtools": "4.0.0",
+    "@ngtools/webpack": "7.3.3",
+    "@ngrx/effects": "7.2.0",
+    "@ngrx/router-store": "7.2.0",
+    "@ngrx/store": "7.2.0",
+    "@ngrx/store-devtools": "7.2.0",
     "@ngrx/store-log-monitor": "3.0.2",
-    "@types/electron-devtools-installer": "2.0.2",
     "@types/electron-settings": "3.0.0",
     "@types/file-saver": "0.0.1",
     "@types/jasmine": "2.8.8",
     "@types/jasminewd2": "2.0.3",
     "@types/usb": "1.1.3",
-    "angular-confirmation-popover": "3.2.0",
+    "angular-confirmation-popover": "4.2.0",
-    "angular-notifier": "2.0.0",
+    "angular-notifier": "4.1.1",
     "autoprefixer": "^7.2.3",
     "bootstrap": "3.3.7",
-    "buffer": "5.0.6",
+    "codelyzer": "4.5.0",
-    "circular-dependency-plugin": "^4.2.1",
-    "codelyzer": "3.0.1",
     "dragula": "3.7.2",
     "font-awesome": "4.7.0",
-    "html-webpack-plugin": "^2.29.0",
+    "jasmine-core": "3.3.0",
-    "jasmine-core": "3.2.1",
     "jasmine-spec-reporter": "4.2.1",
     "jquery": "3.2.1",
-    "jsonfile": "3.0.1",
+    "karma": "3.1.4",
-    "karma": "3.0.0",
     "karma-chrome-launcher": "2.2.0",
-    "karma-coverage-istanbul-reporter": "2.0.1",
+    "karma-coverage-istanbul-reporter": "2.0.5",
     "karma-jasmine": "1.1.2",
     "karma-jasmine-html-reporter": "1.3.1",
-    "ng2-dragula": "1.5.0",
+    "ng2-dragula": "2.1.1",
-    "ng2-nouislider": "^1.7.7",
+    "ng2-nouislider": "1.7.13",
     "ngx-clipboard": "10.0.0",
-    "@ert78gb/ngx-select-ex": "3.7.2",
+    "ngx-select-ex": "3.6.8",
     "ngrx-store-freeze": "0.1.9",
-    "nouislider": "^11.1.0",
+    "nouislider": "13.1.1",
-    "postcss-url": "^7.1.2",
     "protractor": "5.4.0",
-    "rxjs": "5.5.8",
+    "reselect": "3.0.1",
+    "rxjs": "6.4.0",
     "semver": "5.6.0",
     "ts-keycode-enum": "^1.0.6",
     "uhk-common": "1.0.0",
     "xml-loader": "1.2.1",
-    "zone.js": "0.8.26",
+    "zone.js": "0.8.26"
-    "@angular-devkit/core": "0.3.2",
-    "@ngtools/webpack": "1.10.2"
   },
   "dependencies": {
     "classlist.js": "1.1.20150312",

packages/uhk-web/src/app/app.component.ts

@@ -1,7 +1,6 @@
 import { Component, HostListener, ViewEncapsulation, OnDestroy } from '@angular/core';
 import { animate, style, transition, trigger } from '@angular/animations';
-import { Observable } from 'rxjs/Observable';
+import { Observable, Subscription } from 'rxjs';
-import { Subscription } from 'rxjs/Subscription';
 import { Action, Store } from '@ngrx/store';
 
 import { DoNotUpdateAppAction, UpdateAppAction } from './store/actions/app-update.action';

packages/uhk-web/src/app/components/add-on/add-on.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { pluck } from 'rxjs/operators';
 
 @Component({

packages/uhk-web/src/app/components/agent/about/about.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { Constants } from 'uhk-common';
 

packages/uhk-web/src/app/components/agent/settings/settings.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { AutoUpdateSettings } from 'uhk-common';
 
 import { AppState, getAutoUpdateSettings, getCheckingForUpdate } from '../../../store';

packages/uhk-web/src/app/components/auto-grow-input/auto-grow-input.component.ts

@@ -78,7 +78,6 @@ export class AutoGrowInputComponent implements ControlValueAccessor {
     }
 
     writeValue(obj: any): void {
-        console.log('write', new Date());
         if (this.model === obj) {
             return;
         }

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnDestroy } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { Observable, Subscription } from 'rxjs';
-import { Subscription } from 'rxjs/Subscription';
 import { Constants, HardwareModules, VersionInformation } from 'uhk-common';
 
 import { OpenUrlInNewWindowAction } from '../../../store/actions/app';

packages/uhk-web/src/app/components/device/led-brightness/led-brightness.component.ts

@@ -1,10 +1,9 @@
-import { AfterViewInit, Component, OnInit, OnDestroy, ViewChildren, QueryList } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState, getUserConfiguration } from '../../../store';
 import { SetUserConfigurationValueAction } from '../../../store/actions/user-config';
 import { SliderPips } from '../../slider-wrapper/slider-wrapper.component';
-import { Observable } from 'rxjs/Observable';
+import { Observable, Subscription } from 'rxjs';
-import { Subscription } from 'rxjs/Subscription';
 import { UserConfiguration } from 'uhk-common';
 
 @Component({
@@ -26,7 +25,7 @@ export class LEDBrightnessComponent implements OnInit, OnDestroy {
         stepped: true
     };
 
-    private userConfig$: Store<UserConfiguration>;
+    private userConfig$: Observable<UserConfiguration>;
     private userConfigSubscription: Subscription;
 
     constructor(private store: Store<AppState>) {}

packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.ts

@@ -3,7 +3,7 @@ import { Store } from '@ngrx/store';
 import { AppState, getUserConfiguration } from '../../../store';
 import { SetUserConfigurationValueAction } from '../../../store/actions/user-config';
 import { SliderPips, SliderProps } from '../../slider-wrapper/slider-wrapper.component';
-import { Subscription } from 'rxjs/Subscription';
+import { Observable, Subscription } from 'rxjs';
 import { UserConfiguration } from 'uhk-common';
 import { ResetMouseSpeedSettingsAction } from '../../../store/actions/device';
 
@@ -113,7 +113,7 @@ export class MouseSpeedComponent implements OnInit, OnDestroy {
         step: 1
     };
 
-    private userConfig$: Store<UserConfiguration>;
+    private userConfig$: Observable<UserConfiguration>;
     private userConfigSubscription: Subscription;
 
     constructor(private store: Store<AppState>) {

packages/uhk-web/src/app/components/device/recovery-mode/recovery-mode.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { XtermLog } from '../../../models/xterm-log';
 import { AppState, flashFirmwareButtonDisbabled, updatingFirmware, xtermLog } from '../../../store';

packages/uhk-web/src/app/components/device/restore-configuration/restore-configuration.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { AppState, getBackupUserConfigurationState } from '../../../store';
 import { ResetUserConfigurationAction, RestoreUserConfigurationFromBackupAction } from '../../../store/actions/device';

packages/uhk-web/src/app/components/file-upload/file-upload.component.ts

@@ -23,7 +23,7 @@ export class FileUploadComponent {
 
         const fileReader = new FileReader();
         fileReader.onloadend = function () {
-            const arrayBuffer = new Uint8Array(fileReader.result);
+            const arrayBuffer = new Uint8Array(fileReader.result as ArrayBuffer);
             const target = event.target || event.srcElement || event.currentTarget;
             target.value = null;
             this.fileChanged.emit({

packages/uhk-web/src/app/components/keyboard/slider/keyboard-slider.component.html

@@ -1,7 +1,6 @@
 <svg-keyboard *ngFor="let layer of layers; let index = index; trackBy: trackKeyboard"
               [@layerState]="layerAnimationState[index]"
               [moduleConfig]="layer.modules"
-              [keybindAnimationEnabled]="keybindAnimationEnabled"
               [halvesSplit]="halvesSplit"
               [capturingEnabled]="capturingEnabled"
               [selectedKey]="selectedKey"
@@ -9,6 +8,7 @@
               [keyboardLayout]="keyboardLayout"
               [description]="description"
               [showDescription]="true"
+              [lastEditedKey]="lastEditedKey"
               oncontextmenu="return false;"
               (keyClick)="keyClick.emit($event)"
               (keyHover)="keyHover.emit($event)"

packages/uhk-web/src/app/components/keyboard/slider/keyboard-slider.component.ts

@@ -8,6 +8,7 @@ import {
     SvgKeyboardKeyClickEvent,
     SvgKeyHoverEvent
 } from '../../../models/svg-key-events';
+import { LastEditedKey } from '../../../models';
 
 type AnimationKeyboard =
     'init' |
@@ -81,12 +82,12 @@ type AnimationKeyboard =
 export class KeyboardSliderComponent implements OnChanges {
     @Input() layers: Layer[];
     @Input() currentLayer: number;
-    @Input() keybindAnimationEnabled: boolean;
     @Input() capturingEnabled: boolean;
     @Input() halvesSplit: boolean;
     @Input() selectedKey: { layerId: number, moduleId: number, keyId: number };
     @Input() keyboardLayout = KeyboardLayout.ANSI;
     @Input() description: string;
+    @Input() lastEditedKey: LastEditedKey;
     @Output() keyClick = new EventEmitter<SvgKeyboardKeyClickEvent>();
     @Output() keyHover = new EventEmitter<SvgKeyHoverEvent>();
     @Output() capture = new EventEmitter<SvgKeyboardCaptureEvent>();

packages/uhk-web/src/app/components/keymap/edit/keymap-edit-guard.service.ts

@@ -2,8 +2,7 @@ import { Injectable } from '@angular/core';
 import { CanActivate, Router } from '@angular/router';
 import { Keymap } from 'uhk-common';
 
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
-import { of } from 'rxjs/observable/of';
 import { switchMap, tap } from 'rxjs/operators';
 
 import { Store } from '@ngrx/store';

packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.html

@@ -1,14 +1,15 @@
-<ng-template [ngIf]="keymap$ | async">
+<ng-template [ngIf]="keymap">
-    <keymap-header [keymap]="keymap$ | async"
+    <keymap-header [keymap]="keymap"
                    [deletable]="deletable$ | async"
                    (downloadClick)="downloadKeymap()"></keymap-header>
-    <svg-keyboard-wrap [keymap]="keymap$ | async"
+    <svg-keyboard-wrap [keymap]="keymap"
                        [halvesSplit]="keyboardSplit"
                        [keyboardLayout]="keyboardLayout$ | async"
                        [allowLayerDoubleTap]="allowLayerDoubleTap$ | async"
+                       [lastEditedKey]="lastEditedKey$ | async"
                        (descriptionChanged)="descriptionChanged($event)"></svg-keyboard-wrap>
 </ng-template>
 
-<div *ngIf="!(keymap$ | async)" class="not-found">
+<div *ngIf="!keymap" class="not-found">
     Sorry, there is no keymap with this abbreviation.
 </div>

packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, HostListener, OnDestroy } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnDestroy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Keymap } from 'uhk-common';
@@ -14,11 +14,13 @@ import {
     isKeymapDeletable,
     layerDoubleTapSupported,
     AppState,
-    getKeyboardLayout
+    getKeyboardLayout,
+    lastEditedKey
 } from '../../../store';
 import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
 import { EditDescriptionAction, SelectKeymapAction } from '../../../store/actions/keymap';
 import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription';
+import { LastEditedKey } from '../../../models';
 
 @Component({
     selector: 'keymap-edit',
@@ -37,11 +39,15 @@ export class KeymapEditComponent implements OnDestroy {
     keymap$: Observable<Keymap>;
     keyboardLayout$: Observable<KeyboardLayout>;
     allowLayerDoubleTap$: Observable<boolean>;
+    lastEditedKey$: Observable<LastEditedKey>;
+    keymap: Keymap;
 
     private routeSubscription: Subscription;
+    private keymapSubscription: Subscription;
 
     constructor(protected store: Store<AppState>,
-                route: ActivatedRoute) {
+                route: ActivatedRoute,
+                private cdRef: ChangeDetectorRef) {
         this.routeSubscription = route
             .params
             .pipe(
@@ -50,15 +56,22 @@ export class KeymapEditComponent implements OnDestroy {
             .subscribe(abbr => store.dispatch(new SelectKeymapAction(abbr)));
 
         this.keymap$ = store.select(getSelectedKeymap);
+        this.keymapSubscription = this.keymap$
+            .subscribe(keymap => {
+                this.keymap = keymap;
+                this.cdRef.markForCheck();
+            });
 
         this.deletable$ = store.select(isKeymapDeletable);
 
         this.keyboardLayout$ = store.select(getKeyboardLayout);
         this.allowLayerDoubleTap$ = store.select(layerDoubleTapSupported);
+        this.lastEditedKey$ = store.select(lastEditedKey);
     }
 
     ngOnDestroy(): void {
         this.routeSubscription.unsubscribe();
+        this.keymapSubscription.unsubscribe();
     }
 
     downloadKeymap() {

packages/uhk-web/src/app/components/macro/edit/macro-edit.component.ts

@@ -4,6 +4,7 @@ import { Store } from '@ngrx/store';
 import { Macro, MacroAction } from 'uhk-common';
 
 import { Observable, Subscription } from 'rxjs';
+import { pluck } from 'rxjs/operators';
 
 import {
     AddMacroActionAction,
@@ -13,7 +14,6 @@ import {
     SelectMacroAction
 } from '../../../store/actions/macro';
 import { AppState, getSelectedMacro, macroPlaybackSupported } from '../../../store';
-import { pluck } from 'rxjs/operators';
 
 @Component({
     selector: 'macro-edit',

packages/uhk-web/src/app/components/macro/list/macro-list.component.html

@@ -1,7 +1,7 @@
 <div class="row list-container">
     <div class="col-xs-10 col-xs-offset-1 list-group">
     <p *ngIf="!macroPlaybackSupported"><i>Please note that macro playback is not implemented yet. You can create macros, but they won't have any effect until firmware support is implemented. We're working on this.</i></p>
-        <div class="macro-actions-container" [dragula]="'macroActions'" [dragulaModel]="macro.macroActions">
+        <div class="macro-actions-container" [dragula]="'macroActions'" [(dragulaModel)]="macro.macroActions">
             <macro-item *ngFor="let macroAction of macro.macroActions; let macroActionIndex = index"
                         [macroAction]="macroAction"
                         [editable]="true"

packages/uhk-web/src/app/components/macro/list/macro-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, Output, QueryList, ViewChildren, forwardRef } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { DragulaService } from 'ng2-dragula/ng2-dragula';
+import { DragulaService } from 'ng2-dragula';
 import { Macro, MacroAction, KeyMacroAction, KeystrokeAction, MacroKeySubAction } from 'uhk-common';
 
 import { MapperService } from '../../../services/mapper.service';
@@ -53,17 +53,17 @@ export class MacroListComponent {
         private dragulaService: DragulaService
     ) {
         /* tslint:disable:no-unused-variable: Used by Dragula. */
-        dragulaService.setOptions('macroActions', {
+        dragulaService.createGroup('macroActions', {
             moves: function (el: any, container: any, handle: any) {
                 return handle.className.includes('action--movable');
             }
         });
 
-        dragulaService.drag.subscribe((value: any) => {
+        dragulaService.drag('macroActions').subscribe((value: any) => {
             this.dragIndex = +value[1].getAttribute('data-index');
         });
 
-        dragulaService.drop.subscribe((value: any) => {
+        dragulaService.drop('macroActions').subscribe((value: any) => {
             if (value[4]) {
                 this.reorder.emit({
                     macroId: this.macro.id,

packages/uhk-web/src/app/components/macro/not-found/macro-not-found-guard.service.ts

@@ -2,9 +2,8 @@ import { Injectable } from '@angular/core';
 import { CanActivate, Router } from '@angular/router';
 import { Macro } from 'uhk-common';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import 'rxjs/add/operator/let';
 
 import { Store } from '@ngrx/store';
 

packages/uhk-web/src/app/components/missing-device/missing-device.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { AppState, getMissingDeviceState } from '../../store';
 import { MissingDeviceState } from '../../models/missing-device-state';

packages/uhk-web/src/app/components/popover/popover.component.ts

@@ -14,8 +14,7 @@ import {
 import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
 
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { BehaviorSubject, Observable } from 'rxjs';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { combineLatest, map } from 'rxjs/operators';
 
 import {
@@ -162,7 +161,7 @@ export class PopoverComponent implements OnChanges {
     }
 
     ngOnChanges(change: SimpleChanges) {
-        let tab: TabHeader;
+        let tab: TabHeader = this.tabHeaders[5];
 
         if (this.keyPosition && this.wrapPosition && (change['keyPosition'] || change['wrapPosition'])) {
             this.calculatePosition();

packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 import { KeyAction, Macro, PlayMacroAction } from 'uhk-common';
 
 import { Tab } from '../tab';

packages/uhk-web/src/app/components/privilege-checker/privilege-checker.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { AppState, getPrivilegePageState } from '../../store';
 import { SetPrivilegeOnLinuxAction } from '../../store/actions/device';

packages/uhk-web/src/app/components/side-menu/side-menu.component.ts

@@ -11,7 +11,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
 
 import { Store } from '@ngrx/store';
 
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { AppState, getSideMenuPageState } from '../../store';
 import { AddMacroAction } from '../../store/actions/macro';

packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.ts

@@ -1,8 +1,7 @@
 import { AfterViewInit, Component, EventEmitter, forwardRef, Input, Output, OnDestroy, ViewChild } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NouisliderComponent } from 'ng2-nouislider';
-import { Observable } from 'rxjs/Observable';
+import { Observable, Observer } from 'rxjs';
-import { Observer } from 'rxjs/Observer';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 export interface SliderPips {

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html

@@ -6,13 +6,14 @@
            *ngFor="let module of modules; let i = index"
            [coverages]="module.coverages"
            [keyboardKeys]="module.keyboardKeys"
-           [keybindAnimationEnabled]="keybindAnimationEnabled"
            [capturingEnabled]="capturingEnabled"
            [attr.transform]="module.attributes.transform"
            [keyActions]="moduleConfig[i].keyActions"
            [selectedKey]="selectedKey"
            [@split]="moduleAnimationStates[i]"
            [selected]="selectedKey?.moduleId === i"
+           [lastEdited]="lastEditedKey?.moduleId === i"
+           [lastEditedKeyId]="lastEditedKey?.key"
            (keyClick)="onKeyClick(i, $event)"
            (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)"
            (capture)="onCapture(i, $event)" />

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, Input, Output, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
 import { animate, state, trigger, style, transition } from '@angular/animations';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import { Module } from 'uhk-common';
@@ -13,6 +13,7 @@ import {
     SvgKeyboardCaptureEvent,
     SvgModuleKeyClickEvent
 } from '../../../models/svg-key-events';
+import { LastEditedKey } from '../../../models';
 
 @Component({
     selector: 'svg-keyboard',
@@ -41,9 +42,8 @@ import {
         ])
     ]
 })
-export class SvgKeyboardComponent implements OnInit {
+export class SvgKeyboardComponent {
     @Input() moduleConfig: Module[];
-    @Input() keybindAnimationEnabled: boolean;
     @Input() capturingEnabled: boolean;
     @Input() selectedKey: { layerId: number, moduleId: number, keyId: number };
     @Input() selected: boolean;
@@ -51,6 +51,7 @@ export class SvgKeyboardComponent implements OnInit {
     @Input() keyboardLayout = KeyboardLayout.ANSI;
     @Input() description: string;
     @Input() showDescription = false;
+    @Input() lastEditedKey: LastEditedKey;
     @Output() keyClick = new EventEmitter<SvgKeyboardKeyClickEvent>();
     @Output() keyHover = new EventEmitter<SvgKeyHoverEvent>();
     @Output() capture = new EventEmitter<SvgKeyboardCaptureEvent>();

packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html

@@ -1,6 +1,6 @@
-<svg:rect [@change]="changeAnimation"
+<svg:rect #svgRec
-          (@change.done)="onChangeAnimationDone()"
+          class="svg-rec"
-          [@active]="active"
+          [class.active]="active"
           [id]="id"
           [attr.rx]="rx"
           [attr.ry]="ry"

packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.scss

@@ -10,3 +10,27 @@
         fill: #494949;
     }
 }
+
+.svg-rec {
+    transition-timing-function: ease-out;
+    transition: 0.2s;
+
+    &.active {
+        fill: #4099e5;
+        transition-timing-function: ease-in;
+        transition: 0s;
+    }
+
+    &.blink {
+        animation: blinkingRec 1s 1 ease-out;
+    }
+}
+
+@keyframes blinkingRec {
+    0% {
+        fill: #ffffff;
+    }
+    100% {
+        fill: #333333;
+    }
+}

packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts

@@ -1,13 +1,17 @@
 import {
-    Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, OnInit, Output,
+    Component,
-    SimpleChange, ChangeDetectionStrategy
+    ElementRef,
+    EventEmitter,
+    HostListener,
+    Input,
+    OnChanges,
+    Output,
+    ChangeDetectionStrategy,
+    SimpleChanges,
+    ViewChild
 } from '@angular/core';
-import { animate, group, state, style, transition, trigger } from '@angular/animations';
+import { animate, state, style, transition, trigger } from '@angular/animations';
-
 import { Store } from '@ngrx/store';
-
-import { Subscription } from 'rxjs/Subscription';
-
 import { Key } from 'ts-keycode-enum';
 
 import {
@@ -26,7 +30,7 @@ import {
 import { CaptureService } from '../../../../services/capture.service';
 import { MapperService } from '../../../../services/mapper.service';
 
-import { AppState, getMacros } from '../../../../store';
+import { AppState } from '../../../../store';
 import { SvgKeyCaptureEvent, SvgKeyClickEvent } from '../../../../models/svg-key-events';
 import { OperatingSystem } from '../../../../models/operating-system';
 import { KeyModifierModel } from '../../../../models/key-modifier-model';
@@ -45,22 +49,6 @@ enum LabelTypes {
 
 @Component({
     animations: [
-        trigger('change', [
-            transition('inactive => active', [
-                style({ fill: '#fff' }),
-                group([
-                    animate('1s ease-out', style({
-                        fill: '#333'
-                    }))
-                ])
-            ])
-        ]),
-        trigger('active', [
-            // http://colorblendy.com/#!/multiply/4099e5/cccccc
-            state('1', style({ fill: '#4099e5' })), // Signature blue color blending
-            transition('1 => *', animate('200ms')),
-            transition('* => 1', animate('0ms')) // Instant color to blue
-        ]),
         trigger('recording', [
             state('inactive', style({
                 fill: 'rgba(204, 0, 0, 1)'
@@ -76,32 +64,32 @@ enum LabelTypes {
     styleUrls: ['./svg-keyboard-key.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
+export class SvgKeyboardKeyComponent implements OnChanges {
     @Input() id: string;
     @Input() rx: string;
     @Input() ry: string;
     @Input() height: number;
     @Input() width: number;
     @Input() keyAction: KeyAction;
-    @Input() keybindAnimationEnabled: boolean;
     @Input() capturingEnabled: boolean;
     @Input() active: boolean;
+    @Input() macroMap = new Map<number, Macro>();
+    @Input() blink: boolean;
 
     @Output() keyClick = new EventEmitter<SvgKeyClickEvent>();
     @Output() capture = new EventEmitter<SvgKeyCaptureEvent>();
 
+    @ViewChild('svgRec') svgRec: ElementRef<HTMLElement>;
+
     enumLabelTypes = LabelTypes;
 
-    changeAnimation: string = 'inactive';
     recordAnimation: string;
     recording: boolean;
     labelType: LabelTypes;
 
     labelSource: any;
     secondaryText: string;
-    macros: Macro[];
+    private scanCodePressed = false;
-    private subscription: Subscription;
-    private scanCodePressed: boolean;
     private pressedShiftLocation = -1;
     private pressedAltLocation = -1;
     private altPressed = false;
@@ -113,12 +101,6 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
         private element: ElementRef,
         private captureService: CaptureService
     ) {
-        this.subscription = store.select(getMacros)
-            .subscribe((macros: Macro[]) => this.macros = macros);
-
-        this.reset();
-        this.captureService.populateMapping();
-        this.scanCodePressed = false;
     }
 
     @HostListener('click', ['$event'])
@@ -156,12 +138,10 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
         if (e.keyCode === Key.Alt && this.pressedAltLocation > -1) {
             this.pressedAltLocation = -1;
             e.preventDefault();
-        }
+        } else if (e.keyCode === Key.Shift && this.pressedShiftLocation > -1) {
-        else if (e.keyCode === Key.Shift && this.pressedShiftLocation > -1) {
             this.pressedShiftLocation = -1;
             e.preventDefault();
-        }
+        } else if (this.scanCodePressed) {
-        else if (this.scanCodePressed) {
             e.preventDefault();
             this.scanCodePressed = false;
         } else if (this.recording) {
@@ -209,25 +189,14 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
         this.reset();
     }
 
-    ngOnInit() {
+    ngOnChanges(changes: SimpleChanges) {
-        this.setLabels();
-    }
-
-    ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
         if (changes['keyAction']) {
             this.setLabels();
-            if (this.keybindAnimationEnabled) {
-                this.changeAnimation = 'active';
-            }
         }
-    }
 
-    ngOnDestroy() {
+        if (changes['blink'] && changes['blink'].currentValue) {
-        this.subscription.unsubscribe();
+            this.blinkSvgRec();
-    }
+        }
-
-    onChangeAnimationDone() {
-        this.changeAnimation = 'inactive';
     }
 
     onRecordingAnimationDone() {
@@ -240,7 +209,6 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
 
     private reset() {
         this.recording = false;
-        this.changeAnimation = 'inactive';
         this.captureService.initModifiers();
         this.shiftPressed = false;
         this.altPressed = false;
@@ -363,7 +331,7 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
             this.labelSource = keyAction.keymapAbbreviation;
         } else if (this.keyAction instanceof PlayMacroAction) {
             const keyAction: PlayMacroAction = this.keyAction as PlayMacroAction;
-            const macro: Macro = this.macros.find((_macro: Macro) => _macro.id === keyAction.macroId);
+            const macro: Macro = this.macroMap.get(keyAction.macroId);
             this.labelType = LabelTypes.IconText;
             this.labelSource = {
                 icon: this.mapper.getIcon('macro'),
@@ -376,4 +344,15 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
             this.labelSource = undefined;
         }
     }
+
+    private blinkSvgRec(): void {
+        if (this.svgRec) {
+            this.svgRec.nativeElement.classList.remove('blink');
+            setTimeout(() => {
+                if (this.svgRec) {
+                    this.svgRec.nativeElement.classList.add('blink');
+                }
+            }, 10);
+        }
+    }
 }

packages/uhk-web/src/app/components/svg/module/svg-module.component.html

@@ -1,5 +1,5 @@
 <svg:path *ngFor="let path of coverages" [attr.d]="path.$.d" [attr.style]="path.$.style | safeStyle" />
-<ng-container *ngFor="let key of keyboardKeys; let i = index">
+<ng-container *ngFor="let key of keyboardKeys; let i = index; trackBy:keyboardKeysTrackBy">
     <svg:g svg-keyboard-key
             *ngIf="key"
             [id]="key.id"
@@ -10,8 +10,9 @@
             tabindex="-1"
             [keyAction]="keyActions[i]"
             [active]="selected && i == selectedKey.keyId"
-            [keybindAnimationEnabled]="keybindAnimationEnabled"
             [capturingEnabled]="capturingEnabled"
+            [macroMap]="macroMap"
+            [blink]="lastEdited && lastEditedKeyId === key.id"
             (keyClick)="onKeyClick(i, $event)"
             (capture)="onCapture(i, $event)"
             (mouseenter)="onKeyHover(i, $event, true)"

packages/uhk-web/src/app/components/svg/module/svg-module.component.ts

@@ -1,13 +1,23 @@
-import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
+import {
-import { KeyAction } from 'uhk-common';
+    Component,
+    EventEmitter,
+    Input,
+    OnDestroy,
+    Output,
+    ChangeDetectionStrategy
+} from '@angular/core';
+import { Store } from '@ngrx/store';
+import { KeyAction, Macro } from 'uhk-common';
+import { Subscription } from 'rxjs';
 
 import { SvgKeyboardKey } from '../keys';
 import {
     SvgKeyCaptureEvent,
     SvgKeyClickEvent,
-        SvgModuleCaptureEvent,
+    SvgModuleCaptureEvent,
     SvgModuleKeyClickEvent
 } from '../../../models/svg-key-events';
+import { AppState, getMacroMap } from '../../../store';
 
 @Component({
     selector: 'g[svg-module]',
@@ -15,20 +25,30 @@ import {
     styleUrls: ['./svg-module.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SvgModuleComponent {
+export class SvgModuleComponent implements OnDestroy {
     @Input() coverages: any[];
     @Input() keyboardKeys: SvgKeyboardKey[];
     @Input() keyActions: KeyAction[];
     @Input() selectedKey: { layerId: number, moduleId: number, keyId: number };
     @Input() selected: boolean;
-    @Input() keybindAnimationEnabled: boolean;
     @Input() capturingEnabled: boolean;
+    @Input() lastEdited: boolean;
+    @Input() lastEditedKeyId: string;
     @Output() keyClick = new EventEmitter<SvgModuleKeyClickEvent>();
     @Output() keyHover = new EventEmitter();
     @Output() capture = new EventEmitter<SvgModuleCaptureEvent>();
 
-    constructor() {
+    private macroMap: Map<number, Macro>;
+    private macroMapSubscription: Subscription;
+
+    constructor(private store: Store<AppState>) {
         this.keyboardKeys = [];
+        this.macroMapSubscription = store.select(getMacroMap)
+            .subscribe(map => this.macroMap = map);
+    }
+
+    ngOnDestroy(): void {
+        this.macroMapSubscription.unsubscribe();
     }
 
     onKeyClick(keyId: number, event: SvgKeyClickEvent): void {
@@ -52,4 +72,8 @@ export class SvgModuleComponent {
             keyId
         });
     }
+
+    keyboardKeysTrackBy(index: number, key: SvgKeyboardKey): string {
+        return `${index}`;
+    }
 }

packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.html

@@ -2,12 +2,12 @@
     <layers [class.disabled]="popoverShown" (select)="selectLayer($event.index)" [current]="currentLayer"></layers>
     <keyboard-slider [layers]="layers"
                      [currentLayer]="currentLayer"
-                     [keybindAnimationEnabled]="keybindAnimationEnabled"
                      [capturingEnabled]="popoverEnabled"
                      [selectedKey]="selectedKey"
                      [halvesSplit]="halvesSplit"
                      [keyboardLayout]="keyboardLayout"
                      [description]="keymap.description"
+                     [lastEditedKey]="lastEditedKey"
                      (keyClick)="onKeyClick($event)"
                      (keyHover)="onKeyHover($event)"
                      (capture)="onCapture($event)"

packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts

@@ -13,8 +13,7 @@ import {
     ViewChild
 } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import { of } from 'rxjs/observable/of';
 import { map } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 
@@ -49,6 +48,7 @@ import {
 } from '../../../models/svg-key-events';
 import { RemapInfo } from '../../../models/remap-info';
 import { mapLeftRigthModifierToKeyActionModifier } from '../../../util';
+import { LastEditedKey } from '../../../models';
 
 interface NameValuePair {
     name: string;
@@ -68,6 +68,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     @Input() halvesSplit: boolean;
     @Input() keyboardLayout: KeyboardLayout.ANSI;
     @Input() allowLayerDoubleTap: boolean;
+    @Input() lastEditedKey: LastEditedKey;
 
     @Output() descriptionChanged = new EventEmitter<ChangeKeymapDescription>();
 
@@ -77,7 +78,6 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     keyEditConfig: { moduleId: number, keyId: number };
     selectedKey: { layerId: number, moduleId: number, keyId: number };
     popoverInitKeyAction: KeyAction;
-    keybindAnimationEnabled: boolean;
     currentLayer: number = 0;
     tooltipData: {
         posTop: number,
@@ -109,7 +109,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
         this.tooltipData = {
             posTop: 0,
             posLeft: 0,
-            content: Observable.of([]),
+            content: of([]),
             show: false
         };
     }
@@ -139,14 +139,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
         if (keymapChanges) {
             this.popoverShown = false;
             this.layers = this.keymap.layers;
-            if (keymapChanges.isFirstChange() ||
-                keymapChanges.previousValue.abbreviation !== keymapChanges.currentValue.abbreviation) {
-                this.keybindAnimationEnabled = keymapChanges.isFirstChange();
-            } else {
-                this.keybindAnimationEnabled = true;
-            }
         }
-
     }
 
     onKeyClick(event: SvgKeyboardKeyClickEvent): void {
@@ -302,7 +295,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
                     value: SecondaryRoleAction[keystrokeAction.secondaryRoleAction]
                 });
             }
-            return Observable.of(content);
+            return of(content);
         } else if (keyAction instanceof MouseAction) {
             const mouseAction: MouseAction = keyAction;
             const content: NameValuePair[] =
@@ -316,7 +309,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
                         value: camelCaseToSentence(MouseActionParam[mouseAction.mouseAction])
                     }
                 ];
-            return Observable.of(content);
+            return of(content);
         } else if (keyAction instanceof PlayMacroAction) {
             const playMacroAction: PlayMacroAction = keyAction;
             return this.store

packages/uhk-web/src/app/components/uhk-header/uhk-header.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { Notification } from 'uhk-common';
 import { AppState, getUndoableNotification } from '../../store';

packages/uhk-web/src/app/models/index.ts

@@ -0,0 +1 @@
+export * from './last-edited-key';

packages/uhk-web/src/app/models/last-edited-key.ts

@@ -0,0 +1,9 @@
+export interface LastEditedKey {
+    moduleId: number;
+    key: string;
+}
+
+export const defaultLastEditKey = (): LastEditedKey => ({
+    moduleId: -1,
+    key: ''
+});

packages/uhk-web/src/app/services/capture.service.ts

@@ -16,6 +16,7 @@ export class CaptureService {
         this.leftModifiers = new Map<number, KeyModifierModel>();
         this.rightModifiers = new Map<number, KeyModifierModel>();
         this.mapping = new Map<number, number>();
+        this.populateMapping();
     }
 
     public getMap(code: number) {

packages/uhk-web/src/app/services/mapper.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { KeyModifiers, KeystrokeType, SecondaryRoleAction } from 'uhk-common';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { AppState, getOperatingSystem } from '../store';
 import { OperatingSystem } from '../models/operating-system';

packages/uhk-web/src/app/services/uhk-device-bootloader-not-active.guard.ts

@@ -2,7 +2,7 @@ import { CanActivate, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 
 import { AppState, bootloaderActive } from '../store';

packages/uhk-web/src/app/services/uhk-device-connected.guard.ts

@@ -2,7 +2,7 @@ import { CanActivate, Router } from '@angular/router';
 import { Injectable } from '@angular/core';
 import { Store } from '@ngrx/store';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
 import { AppState, deviceConnected } from '../store/index';

packages/uhk-web/src/app/services/uhk-device-disconnected.guard.ts

@@ -1,7 +1,7 @@
 import { CanActivate, Router } from '@angular/router';
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 
 import { AppState, deviceConnected } from '../store';

packages/uhk-web/src/app/services/uhk-device-initialized.guard.ts

@@ -1,7 +1,7 @@
 import { CanActivate, Router } from '@angular/router';
 import { Injectable } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
 import { AppState, hasDevicePermission } from '../store/index';

packages/uhk-web/src/app/services/uhk-device-loaded.guard.ts

@@ -2,7 +2,7 @@ import { CanActivate, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
 import { AppState, deviceConfigurationLoaded } from '../store';

packages/uhk-web/src/app/services/uhk-device-loading.guard.ts

@@ -2,7 +2,7 @@ import { CanActivate, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 
 import { AppState, deviceConfigurationLoaded } from '../store';

packages/uhk-web/src/app/services/uhk-device-uninitialized.guard.ts

@@ -1,7 +1,7 @@
 import { CanActivate, Router } from '@angular/router';
 import { Injectable } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 
 import { AppState, hasDevicePermission } from '../store';

packages/uhk-web/src/app/shared.module.ts

@@ -6,8 +6,8 @@ import { HttpClientModule } from '@angular/common/http';
 import { NotifierModule } from 'angular-notifier';
 import { ConfirmationPopoverModule } from 'angular-confirmation-popover';
 
-import { DragulaModule } from 'ng2-dragula/ng2-dragula';
+import { DragulaModule } from 'ng2-dragula';
-import { NgxSelectModule } from '@ert78gb/ngx-select-ex';
+import { NgxSelectModule } from 'ngx-select-ex';
 import { NouisliderModule } from 'ng2-nouislider';
 import { ClipboardModule } from 'ngx-clipboard';
 
@@ -198,9 +198,13 @@ import { UdevRulesComponent } from './components/udev-rules/udev-rules.component
         CommonModule,
         BrowserAnimationsModule,
         FormsModule,
-        DragulaModule,
+        DragulaModule.forRoot(),
         routing,
-        NgxSelectModule,
+        NgxSelectModule.forRoot({
+            keepSelectedItems: true,
+            optionValueField: 'id',
+            optionTextField: 'text'
+        }),
         NouisliderModule,
         NotifierModule.withConfig(angularNotifierConfig),
         ConfirmationPopoverModule.forRoot({

packages/uhk-web/src/app/store/actions/app-update.action.ts

@@ -37,7 +37,8 @@ export class UpdatingAction implements Action {
 export class UpdateErrorAction implements Action {
     type = ActionTypes.UpdateError;
 
-    constructor(public payload: any) {}
+    constructor(public payload: any) {
+    }
 }
 
 export type Actions

packages/uhk-web/src/app/store/actions/auto-update-settings.ts

@@ -29,6 +29,7 @@ export class CheckForUpdateNowAction implements Action {
 
 export class CheckForUpdateSuccessAction implements Action {
     type = ActionTypes.CheckForUpdateSuccess;
+
     constructor(public payload?: string) {
     }
 }

packages/uhk-web/src/app/store/actions/contributors.action.ts

@@ -12,6 +12,7 @@ export enum ActionTypes {
 export class GetAgentContributorsAction implements Action {
     type = ActionTypes.GetAgentContributors;
 }
+
 export class FetchAgentContributorsAction implements Action {
     type = ActionTypes.FetchAgentContributors;
 }

packages/uhk-web/src/app/store/effects/app-update.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Action } from '@ngrx/store';
-import { Actions, Effect } from '@ngrx/effects';
+import { Actions, Effect, ofType } from '@ngrx/effects';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { first, map, tap } from 'rxjs/operators';
 
 import { LogService, NotificationType } from 'uhk-common';
@@ -15,8 +15,8 @@ import { AppUpdateRendererService } from '../../services/app-update-renderer.ser
 export class AppUpdateEffect {
     @Effect({ dispatch: false })
     appStart$: Observable<Action> = this.actions$
-        .ofType(ActionTypes.UpdateApp)
         .pipe(
+            ofType(ActionTypes.UpdateApp),
             first(),
             tap(() => {
                 this.appUpdateRendererService.sendUpdateAndRestartApp();
@@ -24,8 +24,8 @@ export class AppUpdateEffect {
         );
 
     @Effect({ dispatch: false }) checkForUpdate$ = this.actions$
-        .ofType<CheckForUpdateNowAction>(AutoUpdateActionTypes.CheckForUpdateNow)
         .pipe(
+            ofType<CheckForUpdateNowAction>(AutoUpdateActionTypes.CheckForUpdateNow),
             map(action => action.payload),
             tap((allowPrerelease: boolean) => {
                 this.logService.debug('[AppUpdateEffect] call checkForUpdate');
@@ -34,8 +34,8 @@ export class AppUpdateEffect {
         );
 
     @Effect() handleError$: Observable<Action> = this.actions$
-        .ofType<UpdateErrorAction>(ActionTypes.UpdateError)
         .pipe(
+            ofType<UpdateErrorAction>(ActionTypes.UpdateError),
             map(action => action.payload),
             map((message: string) => {
                 return new ShowNotificationAction({

packages/uhk-web/src/app/store/effects/app.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { Action, Store } from '@ngrx/store';
-import { Actions, Effect } from '@ngrx/effects';
+import { Actions, Effect, ofType } from '@ngrx/effects';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
-import { map, startWith, tap, withLatestFrom } from 'rxjs/operators';
+import { map, mergeMap, startWith, tap, withLatestFrom } from 'rxjs/operators';
 import { NotifierService } from 'angular-notifier';
 
 import { AppStartInfo, LogService, Notification, NotificationType } from 'uhk-common';
@@ -26,8 +26,8 @@ export class ApplicationEffects {
 
     @Effect()
     appStart$: Observable<Action> = this.actions$
-        .ofType(ActionTypes.AppBootstrapped)
         .pipe(
+            ofType(ActionTypes.AppBootstrapped),
             startWith(new AppStartedAction()),
             tap(() => {
                 this.logService.info('Renderer appStart effect start');
@@ -37,17 +37,19 @@ export class ApplicationEffects {
             })
         );
 
-    @Effect({dispatch: false})
+    @Effect({ dispatch: false })
     appStartInfo$: Observable<Action> = this.actions$
-        .ofType(ActionTypes.LoadAppStartInfo)
-        .do(() => {
-            this.appRendererService.getAppStartInfo();
-        });
-
-    @Effect({dispatch: false})
-    showNotification$: Observable<Action> = this.actions$
-        .ofType<ShowNotificationAction>(ActionTypes.AppShowNotification)
         .pipe(
+            ofType(ActionTypes.LoadAppStartInfo),
+            tap(() => {
+                this.appRendererService.getAppStartInfo();
+            })
+        );
+
+    @Effect({ dispatch: false })
+    showNotification$: Observable<Action> = this.actions$
+        .pipe(
+            ofType<ShowNotificationAction>(ActionTypes.AppShowNotification),
             map(action => action.payload),
             tap((notification: Notification) => {
                 if (notification.type === NotificationType.Undoable) {
@@ -59,24 +61,28 @@ export class ApplicationEffects {
 
     @Effect()
     processStartInfo$: Observable<Action> = this.actions$
-        .ofType<ProcessAppStartInfoAction>(ActionTypes.AppProcessStartInfo)
+        .pipe(
-        .map(action => action.payload)
+            ofType<ProcessAppStartInfoAction>(ActionTypes.AppProcessStartInfo),
-        .mergeMap((appInfo: AppStartInfo) => {
+            map(action => action.payload),
-            this.logService.debug('[AppEffect][processStartInfo] payload:', appInfo);
+            mergeMap((appInfo: AppStartInfo) => {
-            return [
+                this.logService.debug('[AppEffect][processStartInfo] payload:', appInfo);
-                new ApplyAppStartInfoAction(appInfo),
+                return [
-                new ConnectionStateChangedAction(appInfo.deviceConnectionState)
+                    new ApplyAppStartInfoAction(appInfo),
-            ];
+                    new ConnectionStateChangedAction(appInfo.deviceConnectionState)
-        });
+                ];
+            })
+        );
 
     @Effect() undoLastNotification$: Observable<Action> = this.actions$
-        .ofType<UndoLastAction>(ActionTypes.UndoLast)
-        .map(action => action.payload)
-        .mergeMap((action: Action) => [action, new DismissUndoNotificationAction()]);
-
-    @Effect({dispatch: false}) openUrlInNewWindow$ = this.actions$
-        .ofType<OpenUrlInNewWindowAction>(ActionTypes.OpenUrlInNewWindow)
         .pipe(
+            ofType<UndoLastAction>(ActionTypes.UndoLast),
+            map(action => action.payload),
+            mergeMap((action: Action) => [action, new DismissUndoNotificationAction()])
+        );
+
+    @Effect({ dispatch: false }) openUrlInNewWindow$ = this.actions$
+        .pipe(
+            ofType<OpenUrlInNewWindowAction>(ActionTypes.OpenUrlInNewWindow),
             withLatestFrom(this.store.select(runningInElectron)),
             tap(([action, inElectron]) => {
                 const url = action.payload;

packages/uhk-web/src/app/store/effects/auto-update-settings.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
-import { Actions, Effect, toPayload } from '@ngrx/effects';
+import { Actions, Effect, ofType } from '@ngrx/effects';
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
 import { Action, Store } from '@ngrx/store';
 import { map, startWith, switchMap, withLatestFrom } from 'rxjs/operators';
 
@@ -10,7 +10,9 @@ import {
     ActionTypes,
     LoadAutoUpdateSettingsAction,
     LoadAutoUpdateSettingsSuccessAction,
-    SaveAutoUpdateSettingsSuccessAction
+    SaveAutoUpdateSettingsSuccessAction,
+    CheckForUpdateSuccessAction,
+    CheckForUpdateFailedAction
 } from '../actions/auto-update-settings';
 
 import { DataStorageRepositoryService } from '../../services/datastorage-repository.service';
@@ -21,21 +23,21 @@ import { ShowNotificationAction } from '../actions/app';
 @Injectable()
 export class AutoUpdateSettingsEffects {
     @Effect() loadUserConfig$: Observable<Action> = this.actions$
-        .ofType(ActionTypes.LoadAutoUpdateSettings)
         .pipe(
+            ofType(ActionTypes.LoadAutoUpdateSettings),
             startWith(new LoadAutoUpdateSettingsAction()),
             switchMap(() => {
                 let settings: AutoUpdateSettings = this.dataStorageRepository.getAutoUpdateSettings();
                 if (!settings) {
                     settings = initialState;
                 }
-                return Observable.of(new LoadAutoUpdateSettingsSuccessAction(settings));
+                return of(new LoadAutoUpdateSettingsSuccessAction(settings));
             })
         );
 
     @Effect() saveAutoUpdateConfig$: Observable<Action> = this.actions$
-        .ofType(ActionTypes.ToggleCheckForUpdateOnStartup, ActionTypes.TogglePreReleaseFlag)
         .pipe(
+            ofType(ActionTypes.ToggleCheckForUpdateOnStartup, ActionTypes.TogglePreReleaseFlag),
             withLatestFrom(this.store.select(getAutoUpdateSettings)),
             map(([action, config]) => {
                 this.dataStorageRepository.saveAutoUpdateSettings(config);
@@ -44,9 +46,10 @@ export class AutoUpdateSettingsEffects {
         );
 
     @Effect() sendNotification$: Observable<Action> = this.actions$
-        .ofType(ActionTypes.CheckForUpdateFailed, ActionTypes.CheckForUpdateSuccess)
         .pipe(
-            map(toPayload),
+            ofType<CheckForUpdateSuccessAction | CheckForUpdateFailedAction>(
+                ActionTypes.CheckForUpdateFailed, ActionTypes.CheckForUpdateSuccess),
+            map(action => action.payload),
             map((message: string) => {
                 return new ShowNotificationAction({
                     type: NotificationType.Info,

packages/uhk-web/src/app/store/effects/contributors.effect.ts

@@ -1,11 +1,9 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Actions, Effect } from '@ngrx/effects';
+import { Actions, Effect, ofType } from '@ngrx/effects';
 import { Action, Store } from '@ngrx/store';
 
-import { Observable } from 'rxjs/Observable';
+import { from, Observable, of } from 'rxjs';
-import { from } from 'rxjs/observable/from';
-import { of } from 'rxjs/observable/of';
 import { map, switchMap, catchError, reduce, mergeMap, withLatestFrom } from 'rxjs/operators';
 
 import { Constants } from 'uhk-common';
@@ -23,8 +21,8 @@ import {
 @Injectable()
 export class ContributorsEffect {
     @Effect() getContributors$: Observable<Action> = this.actions$
-        .ofType<GetAgentContributorsAction>(ActionTypes.GetAgentContributors)
         .pipe(
+            ofType<GetAgentContributorsAction>(ActionTypes.GetAgentContributors),
             withLatestFrom(this.store.select(contributors)),
             map(([action, state]) => {
                 if (state.contributors.length === 0) {
@@ -35,8 +33,8 @@ export class ContributorsEffect {
         );
 
     @Effect() fetchContributors$: Observable<Action> = this.actions$
-        .ofType<FetchAgentContributorsAction>(ActionTypes.FetchAgentContributors)
         .pipe(
+            ofType<FetchAgentContributorsAction>(ActionTypes.FetchAgentContributors),
             mergeMap(() => this.http.get<UHKContributor[]>(Constants.AGENT_CONTRIBUTORS_GITHUB_API_URL)),
             switchMap((response: UHKContributor[]) => {
                 return from(response).pipe(
@@ -63,5 +61,6 @@ export class ContributorsEffect {
             catchError(error => of(new AgentContributorsNotAvailableAction(error)))
         );
 
-    constructor(private store: Store<AppState>, private actions$: Actions, private http: HttpClient) {}
+    constructor(private store: Store<AppState>, private actions$: Actions, private http: HttpClient) {
+    }
 }

packages/uhk-web/src/app/store/effects/device.ts

@@ -1,11 +1,8 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { Action, Store } from '@ngrx/store';
-import { Actions, Effect } from '@ngrx/effects';
+import { Actions, Effect, ofType } from '@ngrx/effects';
-import { Observable } from 'rxjs/Observable';
+import { EMPTY, Observable, of, timer } from 'rxjs';
-import { of } from 'rxjs/observable/of';
-import { empty } from 'rxjs/observable/empty';
-import { timer } from 'rxjs/observable/timer';
 import { map, mergeMap, switchMap, tap, withLatestFrom } from 'rxjs/operators';
 
 import {
@@ -52,8 +49,8 @@ import { getVersions } from '../../util';
 export class DeviceEffects {
     @Effect()
     deviceConnectionStateChange$: Observable<Action> = this.actions$
-        .ofType<ConnectionStateChangedAction>(ActionTypes.ConnectionStateChanged)
         .pipe(
+            ofType<ConnectionStateChangedAction>(ActionTypes.ConnectionStateChanged),
             withLatestFrom(this.store.select(getRouterState), this.store.select(deviceConnected)),
             tap(([action, route]) => {
                 const state = action.payload;
@@ -80,17 +77,17 @@ export class DeviceEffects {
                 const payload = action.payload;
 
                 if (connected && payload.hasPermission && payload.zeroInterfaceAvailable) {
-                    return Observable.of(new LoadConfigFromDeviceAction());
+                    return of(new LoadConfigFromDeviceAction());
                 }
 
-                return empty();
+                return EMPTY;
             })
         );
 
     @Effect({ dispatch: false })
     setPrivilegeOnLinux$: Observable<Action> = this.actions$
-        .ofType(ActionTypes.SetPrivilegeOnLinux)
         .pipe(
+            ofType(ActionTypes.SetPrivilegeOnLinux),
             tap(() => {
                 this.deviceRendererService.setPrivilegeOnLinux();
             })
@@ -98,13 +95,13 @@ export class DeviceEffects {
 
     @Effect()
     setPrivilegeOnLinuxReply$: Observable<Action> = this.actions$
-        .ofType<SetPrivilegeOnLinuxReplyAction>(ActionTypes.SetPrivilegeOnLinuxReply)
         .pipe(
+            ofType<SetPrivilegeOnLinuxReplyAction>(ActionTypes.SetPrivilegeOnLinuxReply),
             map(action => action.payload),
-            switchMap((response: any): any => {
+            switchMap((response: any) => {
                 if (response.success) {
                     this.appRendererService.getAppStartInfo();
-                    return empty();
+                    return EMPTY;
                 }
 
                 return of(new SetupPermissionErrorAction(response.error));
@@ -113,22 +110,23 @@ export class DeviceEffects {
 
     @Effect({ dispatch: false })
     saveConfiguration$: Observable<Action> = this.actions$
-        .ofType(ActionTypes.SaveConfiguration)
         .pipe(
+            ofType(ActionTypes.SaveConfiguration),
             withLatestFrom(this.store),
             tap(([action, state]) => {
                 setTimeout(() => this.sendUserConfigToKeyboard(
                     state.userConfiguration.userConfiguration,
                     state.app.hardwareConfig),
-                           100);
+                    100);
             }),
-            switchMap(() => empty())
+            switchMap(() => EMPTY
+            )
         );
 
     @Effect()
     saveConfigurationReply$: Observable<Action> = this.actions$
-        .ofType<SaveConfigurationReplyAction>(ActionTypes.SaveConfigurationReply)
         .pipe(
+            ofType<SaveConfigurationReplyAction>(ActionTypes.SaveConfigurationReply),
             map(action => action.payload),
             mergeMap((response: IpcResponse) => {
                 if (response.success) {
@@ -149,27 +147,29 @@ export class DeviceEffects {
 
     @Effect()
     autoHideSaveToKeyboardButton$: Observable<Action> = this.actions$
-        .ofType(ActionTypes.SaveToKeyboardSuccess)
         .pipe(
+            ofType(ActionTypes.SaveToKeyboardSuccess),
             withLatestFrom(this.store),
             switchMap(([action, state]) => timer(1000)
-                .mergeMap(() => {
+                .pipe(
-                    const actions = [new HideSaveToKeyboardButton()];
+                    mergeMap(() => {
+                        const actions = [new HideSaveToKeyboardButton()];
 
-                    if (state.device.hasBackupUserConfiguration) {
+                        if (state.device.hasBackupUserConfiguration) {
-                        actions.push(new RestoreUserConfigurationFromBackupSuccessAction());
+                            actions.push(new RestoreUserConfigurationFromBackupSuccessAction());
-                        this.router.navigate(['/']);
+                            this.router.navigate(['/']);
-                    }
+                        }
 
-                    return actions;
+                        return actions;
-                })
+                    })
+                )
             )
         );
 
     @Effect()
     resetMouseSpeedSettings$: Observable<Action> = this.actions$
-        .ofType(ActionTypes.ResetMouseSpeedSettings)
         .pipe(
+            ofType(ActionTypes.ResetMouseSpeedSettings),
             switchMap(() => {
                 const config = this.defaultUserConfigurationService.getDefault();
                 const mouseSpeedDefaultSettings = {};
@@ -193,8 +193,8 @@ export class DeviceEffects {
         );
 
     @Effect() resetUserConfiguration$: Observable<Action> = this.actions$
-        .ofType(ActionTypes.ResetUserConfiguration)
         .pipe(
+            ofType(ActionTypes.ResetUserConfiguration),
             switchMap(() => {
                 const config = this.defaultUserConfigurationService.getDefault();
                 return of(new LoadResetUserConfigurationAction(config));
@@ -202,11 +202,11 @@ export class DeviceEffects {
         );
 
     @Effect() saveResetUserConfigurationToDevice$ = this.actions$
-        .ofType<ApplyUserConfigurationFromFileAction
-            | LoadResetUserConfigurationAction>(
-            UserConfigActions.LoadResetUserConfiguration,
-            UserConfigActions.ApplyUserConfigurationFromFile)
         .pipe(
+            ofType<ApplyUserConfigurationFromFileAction
+                | LoadResetUserConfigurationAction>(
+                UserConfigActions.LoadResetUserConfiguration,
+                UserConfigActions.ApplyUserConfigurationFromFile),
             map(action => action.payload),
             switchMap((config: UserConfiguration) => {
                 this.dataStorageRepository.saveConfig(config);
@@ -216,16 +216,16 @@ export class DeviceEffects {
         );
 
     @Effect({ dispatch: false }) updateFirmware$ = this.actions$
-        .ofType<UpdateFirmwareAction>(ActionTypes.UpdateFirmware)
         .pipe(
+            ofType<UpdateFirmwareAction>(ActionTypes.UpdateFirmware),
             tap(() => this.deviceRendererService.updateFirmware({
                 versionInformation: getVersions()
             }))
         );
 
     @Effect({ dispatch: false }) updateFirmwareWith$ = this.actions$
-        .ofType<UpdateFirmwareWithAction>(ActionTypes.UpdateFirmwareWith)
         .pipe(
+            ofType<UpdateFirmwareWithAction>(ActionTypes.UpdateFirmwareWith),
             map(action => action.payload),
             tap(data => this.deviceRendererService.updateFirmware({
                 versionInformation: getVersions(),
@@ -234,14 +234,14 @@ export class DeviceEffects {
         );
 
     @Effect() updateFirmwareReply$ = this.actions$
-        .ofType<UpdateFirmwareReplyAction>(ActionTypes.UpdateFirmwareReply)
         .pipe(
+            ofType<UpdateFirmwareReplyAction>(ActionTypes.UpdateFirmwareReply),
             map(action => action.payload),
             switchMap((response: FirmwareUpgradeIpcResponse)
                 : Observable<UpdateFirmwareSuccessAction | UpdateFirmwareFailedAction> => {
 
                 if (response.success) {
-                    return Observable.of(new UpdateFirmwareSuccessAction(response.modules));
+                    return of(new UpdateFirmwareSuccessAction(response.modules));
                 }
 
                 return of(new UpdateFirmwareFailedAction({
@@ -252,26 +252,26 @@ export class DeviceEffects {
         );
 
     @Effect() restoreUserConfiguration$ = this.actions$
-        .ofType<ResetUserConfigurationAction>(ActionTypes.RestoreConfigurationFromBackup)
         .pipe(
+            ofType<ResetUserConfigurationAction>(ActionTypes.RestoreConfigurationFromBackup),
             map(() => new SaveConfigurationAction())
         );
 
     @Effect({ dispatch: false }) recoveryDevice$ = this.actions$
-        .ofType<RecoveryDeviceAction>(ActionTypes.RecoveryDevice)
         .pipe(
+            ofType<RecoveryDeviceAction>(ActionTypes.RecoveryDevice),
             tap(() => this.deviceRendererService.recoveryDevice())
         );
 
     @Effect({ dispatch: false }) enableUsbStackTest$ = this.actions$
-        .ofType<EnableUsbStackTestAction>(ActionTypes.EnableUsbStackTest)
         .pipe(
+            ofType<EnableUsbStackTestAction>(ActionTypes.EnableUsbStackTest),
             tap(() => this.deviceRendererService.enableUsbStackTest())
         );
 
     @Effect({ dispatch: false }) startConnectionPoller$ = this.actions$
-        .ofType(ActionTypes.StartConnectionPoller)
         .pipe(
+            ofType(ActionTypes.StartConnectionPoller),
             tap(() => this.deviceRendererService.startConnectionPoller())
         );
 

packages/uhk-web/src/app/store/effects/keymap.ts

@@ -1,10 +1,9 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { Actions, Effect } from '@ngrx/effects';
+import { Actions, Effect, ofType } from '@ngrx/effects';
 import { Action, Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
-import { of } from 'rxjs/observable/of';
 import { map, pairwise, startWith, switchMap, tap, withLatestFrom } from 'rxjs/operators';
 
 import { Keymap } from 'uhk-common';
@@ -16,8 +15,8 @@ import { AppState, getKeymaps } from '../index';
 export class KeymapEffects {
 
     @Effect() loadKeymaps$: Observable<Action> = this.actions$
-        .ofType(Keymaps.ActionTypes.LoadKeymaps)
         .pipe(
+            ofType(Keymaps.ActionTypes.LoadKeymaps),
             startWith(new Keymaps.LoadKeymapsAction()),
             switchMap(() => {
                 const presetsRequireContext = (<any>require).context('../../../res/presets', false, /.json$/);
@@ -29,8 +28,8 @@ export class KeymapEffects {
         );
 
     @Effect({ dispatch: false }) addOrDuplicate$: any = this.actions$
-        .ofType(Keymaps.ActionTypes.Add, Keymaps.ActionTypes.Duplicate)
         .pipe(
+            ofType(Keymaps.ActionTypes.Add, Keymaps.ActionTypes.Duplicate),
             withLatestFrom(this.store.select(getKeymaps)
                 .pipe(
                     pairwise()
@@ -44,8 +43,8 @@ export class KeymapEffects {
         );
 
     @Effect({ dispatch: false }) remove$: any = this.actions$
-        .ofType(Keymaps.ActionTypes.Remove)
         .pipe(
+            ofType(Keymaps.ActionTypes.Remove),
             withLatestFrom(this.store.select(getKeymaps)),
             map(latest => latest[1]),
             tap(keymaps => {
@@ -59,8 +58,8 @@ export class KeymapEffects {
         );
 
     @Effect({ dispatch: false }) editAbbr$: any = this.actions$
-        .ofType(Keymaps.ActionTypes.EditAbbr)
         .pipe(
+            ofType(Keymaps.ActionTypes.EditAbbr),
             withLatestFrom(this.store.select(getKeymaps)),
             tap(([action, keymaps]: [Keymaps.EditKeymapAbbreviationAction, Keymap[]]) => {
                 for (const keymap of keymaps) {
@@ -72,5 +71,6 @@ export class KeymapEffects {
             })
         );
 
-    constructor(private actions$: Actions, private router: Router, private store: Store<AppState>) { }
+    constructor(private actions$: Actions, private router: Router, private store: Store<AppState>) {
+    }
 }

packages/uhk-web/src/app/store/effects/macro.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { Actions, Effect } from '@ngrx/effects';
+import { Actions, Effect, ofType } from '@ngrx/effects';
 import { Store, Action } from '@ngrx/store';
 import { map, pairwise, tap, withLatestFrom } from 'rxjs/operators';
 
@@ -15,8 +15,8 @@ import { findNewItem } from '../../util';
 export class MacroEffects {
 
     @Effect({ dispatch: false }) remove$: any = this.actions$
-        .ofType<Macros.RemoveMacroAction>(Macros.ActionTypes.Remove)
         .pipe(
+            ofType<Macros.RemoveMacroAction>(Macros.ActionTypes.Remove),
             tap(action => this.store.dispatch(new Keymaps.CheckMacroAction(action.payload))),
             withLatestFrom(this.store.select(getMacros)),
             map(([action, macros]) => macros),
@@ -31,14 +31,15 @@ export class MacroEffects {
         );
 
     @Effect({ dispatch: false }) addOrDuplicate$: any = this.actions$
-        .ofType(Macros.ActionTypes.Add, Macros.ActionTypes.Duplicate)
         .pipe(
+            ofType<Macros.AddMacroAction | Macros.DuplicateMacroAction>(
+                Macros.ActionTypes.Add, Macros.ActionTypes.Duplicate),
             withLatestFrom(this.store.select(getMacros)
                 .pipe(
                     pairwise()
                 )
             ),
-            map(([action, latest]) => ([action, latest[0], latest[1]])),
+            map(([action, latest]: [Action, Macro[][]]) => ([action, latest[0], latest[1]])),
             tap(([action, prevMacros, newMacros]: [Action, Macro[], Macro[]]) => {
                 const newMacro = findNewItem(prevMacros, newMacros);
                 const commands = ['/macro', newMacro.id];

packages/uhk-web/src/app/store/effects/user-config.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
-import { Actions, Effect } from '@ngrx/effects';
+import { Actions, Effect, ofType } from '@ngrx/effects';
-import { Observable } from 'rxjs/Observable';
+import { defer, Observable, of } from 'rxjs';
-import { defer } from 'rxjs/observable/defer';
-import { of } from 'rxjs/observable/of';
 import { map, mergeMap, tap, withLatestFrom } from 'rxjs/operators';
 import { Action, Store } from '@ngrx/store';
 import { saveAs } from 'file-saver';
@@ -55,17 +53,17 @@ export class UserConfigEffects {
         return of(new LoadUserConfigSuccessAction(this.getUserConfiguration()));
     });
 
-    @Effect() saveUserConfig$: Observable<Action> = (this.actions$
+    @Effect() saveUserConfig$: Observable<Action> = this.actions$
-        .ofType(
-            Keymaps.ActionTypes.Add, Keymaps.ActionTypes.Duplicate, Keymaps.ActionTypes.EditName, Keymaps.ActionTypes.EditAbbr,
-            Keymaps.ActionTypes.SetDefault, Keymaps.ActionTypes.Remove, Keymaps.ActionTypes.SaveKey,
-            Keymaps.ActionTypes.EditDescription,
-            Macros.ActionTypes.Add, Macros.ActionTypes.Duplicate, Macros.ActionTypes.EditName, Macros.ActionTypes.Remove,
-            Macros.ActionTypes.AddAction, Macros.ActionTypes.SaveAction, Macros.ActionTypes.DeleteAction,
-            Macros.ActionTypes.ReorderAction,
-            ActionTypes.RenameUserConfiguration, ActionTypes.SetUserConfigurationValue
-        ) as Observable<Keymaps.Actions | Macros.Actions | RenameUserConfigurationAction>)
         .pipe(
+            ofType(
+                Keymaps.ActionTypes.Add, Keymaps.ActionTypes.Duplicate, Keymaps.ActionTypes.EditName,
+                Keymaps.ActionTypes.EditAbbr, Keymaps.ActionTypes.SetDefault, Keymaps.ActionTypes.Remove,
+                Keymaps.ActionTypes.SaveKey, Keymaps.ActionTypes.EditDescription,
+                Macros.ActionTypes.Add, Macros.ActionTypes.Duplicate, Macros.ActionTypes.EditName, Macros.ActionTypes.Remove,
+                Macros.ActionTypes.AddAction, Macros.ActionTypes.SaveAction, Macros.ActionTypes.DeleteAction,
+                Macros.ActionTypes.ReorderAction,
+                ActionTypes.RenameUserConfiguration, ActionTypes.SetUserConfigurationValue
+            ),
             withLatestFrom(this.store.select(getUserConfiguration), this.store.select(getPrevUserConfiguration)),
             mergeMap(([action, config, prevUserConfiguration]) => {
                 config.recalculateConfigurationLength();
@@ -102,8 +100,8 @@ export class UserConfigEffects {
         );
 
     @Effect() undoUserConfig$: Observable<Action> = this.actions$
-        .ofType<UndoLastAction>(Keymaps.ActionTypes.UndoLastAction)
         .pipe(
+            ofType<UndoLastAction>(Keymaps.ActionTypes.UndoLastAction),
             map(action => action.payload),
             mergeMap((payload: UndoUserConfigData) => {
                 const config = new UserConfiguration().fromJsonObject(payload.config);
@@ -115,14 +113,14 @@ export class UserConfigEffects {
         );
 
     @Effect({ dispatch: false }) loadConfigFromDevice$ = this.actions$
-        .ofType(ActionTypes.LoadConfigFromDevice)
         .pipe(
+            ofType(ActionTypes.LoadConfigFromDevice),
             tap(() => this.deviceRendererService.loadConfigurationFromKeyboard())
         );
 
     @Effect() loadConfigFromDeviceReply$ = this.actions$
-        .ofType<LoadConfigFromDeviceReplyAction>(ActionTypes.LoadConfigFromDeviceReply)
         .pipe(
+            ofType<LoadConfigFromDeviceReplyAction>(ActionTypes.LoadConfigFromDeviceReply),
             withLatestFrom(this.store.select(getRouterState)),
             mergeMap(([action, route]): any => {
                 const data: ConfigurationReply = action.payload;
@@ -178,8 +176,8 @@ export class UserConfigEffects {
         );
 
     @Effect({ dispatch: false }) saveUserConfigInJsonFile$ = this.actions$
-        .ofType(ActionTypes.SaveUserConfigInJsonFile)
         .pipe(
+            ofType(ActionTypes.SaveUserConfigInJsonFile),
             withLatestFrom(this.store.select(getUserConfiguration)),
             tap(([action, userConfiguration]) => {
                 const asString = JSON.stringify(userConfiguration.toJsonObject(), null, 2);
@@ -189,8 +187,8 @@ export class UserConfigEffects {
         );
 
     @Effect({ dispatch: false }) saveUserConfigInBinFile$ = this.actions$
-        .ofType(ActionTypes.SaveUserConfigInBinFile)
         .pipe(
+            ofType(ActionTypes.SaveUserConfigInBinFile),
             withLatestFrom(this.store.select(getUserConfiguration)),
             tap(([action, userConfiguration]) => {
                 const uhkBuffer = new UhkBuffer();
@@ -201,8 +199,8 @@ export class UserConfigEffects {
         );
 
     @Effect() loadUserConfigurationFromFile$ = this.actions$
-        .ofType<LoadUserConfigurationFromFileAction>(ActionTypes.LoadUserConfigurationFromFile)
         .pipe(
+            ofType<LoadUserConfigurationFromFileAction>(ActionTypes.LoadUserConfigurationFromFile),
             map(action => action.payload),
             map((info: UploadFileData) => {
                 try {

packages/uhk-web/src/app/store/index.ts

@@ -54,6 +54,8 @@ export const getMacros = createSelector(userConfigState, fromUserConfig.getMacro
 export const getSelectedMacro = createSelector(userConfigState, fromUserConfig.getSelectedMacro);
 export const isKeymapDeletable = createSelector(userConfigState, fromUserConfig.isKeymapDeletable);
 export const hasMacro = createSelector(userConfigState, fromUserConfig.hasMacro);
+export const getMacroMap = createSelector(userConfigState, fromUserConfig.getMacroMap);
+export const lastEditedKey = createSelector(userConfigState, fromUserConfig.lastEditedKey);
 
 export const appState = (state: AppState) => state.app;
 export const showAddonMenu = createSelector(appState, fromApp.showAddonMenu);

packages/uhk-web/src/app/store/reducers/contributors.reducer.ts

@@ -18,14 +18,14 @@ export function reducer(state = initialState, action: Contributors.Actions) {
         case Contributors.ActionTypes.GetAgentContributors: {
             return {
                 ...state
-             };
+            };
         }
 
         case Contributors.ActionTypes.FetchAgentContributors: {
             return {
                 ...state,
                 isLoading: true
-             };
+            };
         }
 
         case Contributors.ActionTypes.AgentContributorsAvailable: {
@@ -33,7 +33,7 @@ export function reducer(state = initialState, action: Contributors.Actions) {
                 ...state,
                 contributors: (<Contributors.AgentContributorsAvailableAction>action).payload,
                 isLoading: false
-             };
+            };
         }
 
         case Contributors.ActionTypes.AgentContributorsNotAvailable: {
@@ -41,7 +41,7 @@ export function reducer(state = initialState, action: Contributors.Actions) {
                 ...state,
                 error: (<Contributors.AgentContributorsNotAvailableAction>action).payload,
                 isLoading: false
-             };
+            };
         }
 
         default:

packages/uhk-web/src/app/store/reducers/device.ts

@@ -45,7 +45,7 @@ export const initialState: State = {
             firmwareVersion: ''
         }
     },
-    log: [{message: '', cssClass: XtermCssClass.standard}],
+    log: [{ message: '', cssClass: XtermCssClass.standard }],
     restoringUserConfiguration: false,
     hasBackupUserConfiguration: false
 };
@@ -131,7 +131,7 @@ export function reducer(state = initialState, action: Action): State {
                 firmwareUpdateFinished: false,
                 firmwareUpdateFailed: false,
                 firmwareUpdateSuccess: false,
-                log: [{message: 'Start flashing firmware', cssClass: XtermCssClass.standard}]
+                log: [{ message: 'Start flashing firmware', cssClass: XtermCssClass.standard }]
             };
 
         case Device.ActionTypes.UpdateFirmwareSuccess:
@@ -211,7 +211,7 @@ export function reducer(state = initialState, action: Action): State {
             return {
                 ...state,
                 updatingFirmware: true,
-                log: [{message: '', cssClass: XtermCssClass.standard}]
+                log: [{ message: '', cssClass: XtermCssClass.standard }]
             };
         }
         default:

packages/uhk-web/src/app/store/reducers/preset.ts

@@ -7,7 +7,7 @@ export const initialState: Keymap[] = [];
 export function reducer(state = initialState, action: Keymaps.Actions): Keymap[] {
     switch (action.type) {
         case Keymaps.ActionTypes.LoadKeymapsSuccess: {
-            return (action as Keymaps.LoadKeymapSuccessAction).payload ;
+            return (action as Keymaps.LoadKeymapSuccessAction).payload;
         }
 
         default:

packages/uhk-web/src/app/store/reducers/user-configuration.ts

@@ -15,15 +15,18 @@ import * as KeymapActions from '../actions/keymap';
 import * as MacroActions from '../actions/macro';
 import * as UserConfig from '../actions/user-config';
 import { isValidName } from '../../util';
+import { defaultLastEditKey, LastEditedKey } from '../../models';
 
 export interface State {
     userConfiguration: UserConfiguration;
     selectedKeymapAbbr?: string;
     selectedMacroId?: number;
+    lastEditedKey: LastEditedKey;
 }
 
 export const initialState: State = {
-    userConfiguration: new UserConfiguration()
+    userConfiguration: new UserConfiguration(),
+    lastEditedKey: defaultLastEditKey()
 };
 
 export function reducer(
@@ -216,8 +219,7 @@ export function reducer(
                                         setKeyActionToLayer(layer, moduleIndex, keyIndex, null);
                                     }
                                 }
-                            }
+                            } else {
-                            else {
                                 setKeyActionToLayer(layer, moduleIndex, keyIndex, clonedAction);
                             }
                         }
@@ -231,7 +233,11 @@ export function reducer(
 
             return {
                 ...state,
-                userConfiguration
+                userConfiguration,
+                lastEditedKey: {
+                    key: 'key-' + (keyIndex + 1),
+                    moduleId: moduleIndex
+                }
             };
         }
 
@@ -481,7 +487,8 @@ export function reducer(
         case KeymapActions.ActionTypes.Select:
             return {
                 ...state,
-                selectedKeymapAbbr: (action as KeymapActions.SelectKeymapAction).payload
+                selectedKeymapAbbr: (action as KeymapActions.SelectKeymapAction).payload,
+                lastEditedKey: defaultLastEditKey()
             };
 
         case MacroActions.ActionTypes.Select:
@@ -515,6 +522,11 @@ export const getSelectedMacro = (state: State): Macro => {
 };
 export const isKeymapDeletable = (state: State): boolean => state.userConfiguration.keymaps.length > 1;
 export const hasMacro = (state: State): boolean => state.userConfiguration.macros.length > 0;
+export const reduceMacroToMap = (map: Map<number, Macro>, macro: Macro) => map.set(macro.id, macro);
+export const getMacroMap = (state: State): Map<number, Macro> => {
+    return state.userConfiguration.macros.reduce(reduceMacroToMap, new Map());
+};
+export const lastEditedKey = (state: State): LastEditedKey => state.lastEditedKey;
 
 function generateAbbr(keymaps: Keymap[], abbr: string): string {
     const chars: string[] = '23456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

packages/uhk-web/src/environments/environment.ts

@@ -1,7 +1,7 @@
 // The file contents for the current environment will overwrite these during build.
 // The build system defaults to the dev environment which uses `environment.ts`, but if you do
 // `ng build --env=prod` then `environment.prod.ts` will be used instead.
-// The list of which env maps to which file can be found in `.angular-cli.json`.
+// The list of which env maps to which file can be found in `angular.json`.
 
 export const environment = {
   production: false

packages/uhk-web/src/polyfills.ts

@@ -60,6 +60,13 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
 // This is hack of jQuery module loading logic
 // When loading in electron jQuery detect it is a node app and not load themself into window
 window['$'] = window['jQuery'] = require('../node_modules/jquery/dist/jquery.js');
+
+// Other hack to survive
+// https://github.com/valor-software/ng2-dragula/issues/849#issuecomment-385518621
+if (!(window as any).global) {
+    (window as any).global = window;
+}
+
 /**
  * Date, currency, decimal and percent pipes.
  * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10

packages/uhk-web/src/renderer/models/sender-message.ts

@@ -1,4 +1,4 @@
-import { Observer } from 'rxjs/Observer';
+import { Observer } from 'rxjs';
 
 export interface SenderMessage {
     buffer: Buffer;

packages/uhk-web/src/tsconfig.app.json

@@ -11,8 +11,5 @@
   "exclude": [
     "test.ts",
     "**/*.spec.ts"
-  ],
+  ]
-  "angularCompilerOptions": {
-    "preserveWhitespaces": false
-  }
 }

packages/uhk-web/src/tsconfig.renderer.json

@@ -13,8 +13,5 @@
   "exclude": [
     "test.ts",
     "**/*.spec.ts"
-  ],
+  ]
-  "angularCompilerOptions": {
-    "preserveWhitespaces": false
-  }
 }

packages/uhk-web/tsconfig.json

@@ -16,5 +16,8 @@
       "@angular/*": ["../node_modules/@angular/*"],
       "rxjs/*": ["../node_modules/rxjs/*"]
     }
+  },
+  "angularCompilerOptions": {
+    "preserveWhitespaces": true
   }
 }

tslint.json

@@ -40,7 +40,7 @@
       true,
       "ban-single-arg-parens"
     ],
-    "radix": true,
+    "radix": false,
     "switch-default": true,
     "triple-equals": true,
     "eofline": true,
@@ -63,7 +63,6 @@
     "align": [
       true,
       "parameters",
-      "arguments",
       "statements"
     ],
     "comment-format": [