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
2019-03-04 10:27:25 +01:00
parent b1b2f1d431
commit 33c910d70c
84 changed files with 6227 additions and 7814 deletions
--- a/packages/uhk-web/src/app/components/add-on/add-on.component.ts
+++ b/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({
--- a/packages/uhk-web/src/app/components/agent/about/about.component.ts
+++ b/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';

--- a/packages/uhk-web/src/app/components/agent/settings/settings.component.ts
+++ b/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';
--- a/packages/uhk-web/src/app/components/auto-grow-input/auto-grow-input.component.ts
+++ b/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;
        }
--- a/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.ts
+++ b/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 { Subscription } from 'rxjs/Subscription';
+import { Observable, Subscription } from 'rxjs';
 import { Constants, HardwareModules, VersionInformation } from 'uhk-common';

 import { OpenUrlInNewWindowAction } from '../../../store/actions/app';
--- a/packages/uhk-web/src/app/components/device/led-brightness/led-brightness.component.ts
+++ b/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 { Subscription } from 'rxjs/Subscription';
+import { Observable, Subscription } from 'rxjs';
 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>) {}
--- a/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.ts
+++ b/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>) {
--- a/packages/uhk-web/src/app/components/device/recovery-mode/recovery-mode.component.ts
+++ b/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';
--- a/packages/uhk-web/src/app/components/device/restore-configuration/restore-configuration.component.ts
+++ b/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';
--- a/packages/uhk-web/src/app/components/file-upload/file-upload.component.ts
+++ b/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({
--- a/packages/uhk-web/src/app/components/keyboard/slider/keyboard-slider.component.html
+++ b/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)"
--- a/packages/uhk-web/src/app/components/keyboard/slider/keyboard-slider.component.ts
+++ b/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>();
--- a/packages/uhk-web/src/app/components/keymap/edit/keymap-edit-guard.service.ts
+++ b/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 { of } from 'rxjs/observable/of';
+import { Observable, of } from 'rxjs';
 import { switchMap, tap } from 'rxjs/operators';

 import { Store } from '@ngrx/store';
--- a/packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.html
+++ b/packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.html
@@ -1,14 +1,15 @@
-<ng-template [ngIf]="keymap$ | async">
-    <keymap-header [keymap]="keymap$ | async"
+<ng-template [ngIf]="keymap">
+    <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>
--- a/packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.ts
+++ b/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() {
--- a/packages/uhk-web/src/app/components/macro/edit/macro-edit.component.ts
+++ b/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',
--- a/packages/uhk-web/src/app/components/macro/list/macro-list.component.html
+++ b/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"
--- a/packages/uhk-web/src/app/components/macro/list/macro-list.component.ts
+++ b/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,
--- a/packages/uhk-web/src/app/components/macro/not-found/macro-not-found-guard.service.ts
+++ b/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';

--- a/packages/uhk-web/src/app/components/missing-device/missing-device.component.ts
+++ b/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';
--- a/packages/uhk-web/src/app/components/popover/popover.component.ts
+++ b/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 } from 'rxjs/BehaviorSubject';
+import { BehaviorSubject, Observable } from 'rxjs';
 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();
--- a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.ts
+++ b/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';
--- a/packages/uhk-web/src/app/components/privilege-checker/privilege-checker.component.ts
+++ b/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';
--- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.ts
+++ b/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';
--- a/packages/uhk-web/src/app/components/slider-wrapper/slider-wrapper.component.ts
+++ b/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 { Observer } from 'rxjs/Observer';
+import { Observable, Observer } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

 export interface SliderPips {
--- a/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html
+++ b/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)" />
--- a/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts
+++ b/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>();
--- a/packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html
+++ b/packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html
@@ -1,6 +1,6 @@
-<svg:rect [@change]="changeAnimation"
-          (@change.done)="onChangeAnimationDone()"
-          [@active]="active"
+<svg:rect #svgRec
+          class="svg-rec"
+          [class.active]="active"
          [id]="id"
          [attr.rx]="rx"
          [attr.ry]="ry"
--- a/packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.scss
+++ b/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;
+    }
+}
--- a/packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts
+++ b/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,
-    SimpleChange, ChangeDetectionStrategy
+    Component,
+    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 subscription: Subscription;
-    private scanCodePressed: boolean;
+    private scanCodePressed = false;
    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() {
-        this.setLabels();
-    }
-
-    ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
+    ngOnChanges(changes: SimpleChanges) {
        if (changes['keyAction']) {
            this.setLabels();
-            if (this.keybindAnimationEnabled) {
-                this.changeAnimation = 'active';
-            }
        }
-    }

-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-
-    onChangeAnimationDone() {
-        this.changeAnimation = 'inactive';
+        if (changes['blink'] && changes['blink'].currentValue) {
+            this.blinkSvgRec();
+        }
    }

    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);
+        }
+    }
 }
--- a/packages/uhk-web/src/app/components/svg/module/svg-module.component.html
+++ b/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)"
--- a/packages/uhk-web/src/app/components/svg/module/svg-module.component.ts
+++ b/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 { KeyAction } from 'uhk-common';
+import {
+    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}`;
+    }
 }
--- a/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.html
+++ b/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)"
--- a/packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts
+++ b/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 { of } from 'rxjs/observable/of';
+import { Observable, of } from 'rxjs';
 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
--- a/packages/uhk-web/src/app/components/uhk-header/uhk-header.ts
+++ b/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';