Merge branch 'master' of github.com:UltimateHackingKeyboard/agent

NPM_UPDATES.md

@@ -1,7 +1,8 @@
 We get requests from time to time to update our NPM dependencies because they contain vulnerabilities according to `npm audit`. Such issues will be closed without further consideration due to the following reasons:
 
-1. Often times, 3rd party packages are affected by vulnerabilities which we cannot fix.
+1. Usually, the affected packages are not runtime dependencies of Agent, but devDependencies which are only needed for developing Agent.
-2. We can't just blindly update all of the packages because that'd likely break Agent as it happened in the past. Each of the updates must be carefully tested, and we don't have the manpower to do it on a daily basis.
+2. Often times, 3rd party packages are affected by vulnerabilities which we cannot fix.
-3. Sometimes `npm audit` signals false vulnerabilities.
+3. We can't just blindly update all of the packages because that'd likely break Agent as it has happened in the past. Each of the updates must be carefully tested, and we don't have the manpower to do it on a daily basis.
+4. Sometimes `npm audit` signals false vulnerabilities.
 
 We routinely update our dependencies on a best effort basis.

packages/uhk-web/package.json

@@ -19,29 +19,28 @@
   },
   "private": true,
   "devDependencies": {
-    "@angular/animations": "7.2.15",
+    "@angular/animations": "8.2.2",
-    "@angular-builders/custom-webpack": "7.3.1",
+    "@angular-builders/custom-webpack": "8.1.0",
-    "@angular/cli": "7.3.9",
+    "@angular/cli": "8.2.1",
-    "@angular/common": "7.2.15",
+    "@angular/common": "8.2.2",
-    "@angular/compiler": "7.2.15",
+    "@angular/compiler": "8.2.2",
-    "@angular/compiler-cli": "7.2.15",
+    "@angular/compiler-cli": "8.2.2",
-    "@angular/core": "7.2.15",
+    "@angular/core": "8.2.2",
-    "@angular-devkit/build-angular": "0.13.9",
+    "@angular-devkit/build-angular": "0.802.1",
-    "@angular-devkit/build-optimizer": "0.13.9",
+    "@angular-devkit/build-optimizer": "0.802.1",
-    "@angular-devkit/core": "7.3.9",
+    "@angular-devkit/core": "8.2.1",
-    "@angular/forms": "7.2.15",
+    "@angular/forms": "8.2.2",
-    "@angular/http": "7.2.15",
+    "@angular/language-service": "8.2.2",
-    "@angular/language-service": "7.2.15",
+    "@angular/platform-browser": "8.2.2",
-    "@angular/platform-browser": "7.2.15",
+    "@angular/platform-browser-dynamic": "8.2.2",
-    "@angular/platform-browser-dynamic": "7.2.15",
+    "@angular/router": "8.2.2",
-    "@angular/router": "7.2.15",
+    "@ngtools/webpack": "8.2.1",
-    "@ngtools/webpack": "7.3.9",
+    "@ngrx/effects": "8.2.0",
-    "@ngrx/effects": "7.4.0",
+    "@ngrx/router-store": "8.2.0",
-    "@ngrx/router-store": "7.4.0",
+    "@ngrx/store": "8.2.0",
-    "@ngrx/store": "7.4.0",
+    "@ngrx/store-devtools": "8.2.0",
-    "@ngrx/store-devtools": "7.4.0",
     "@ngrx/store-log-monitor": "3.0.2",
-    "angular-confirmation-popover": "4.2.0",
+    "angular-confirmation-popover": "4.2.1",
     "angular-notifier": "4.1.1",
     "bootstrap": "3.4.1",
     "codelyzer": "4.5.0",
@@ -56,19 +55,18 @@
     "karma-jasmine": "1.1.2",
     "karma-jasmine-html-reporter": "1.3.1",
     "ng2-dragula": "2.1.1",
-    "ng2-nouislider": "1.7.13",
+    "ng2-nouislider": "1.8.2",
-    "ngx-clipboard": "10.0.0",
+    "ngx-clipboard": "12.2.0",
-    "ngx-select-ex": "3.6.8",
+    "ngx-select-ex": "3.7.0",
-    "ngrx-store-freeze": "0.1.9",
+    "ngrx-store-freeze": "0.2.4",
-    "nouislider": "13.1.1",
+    "nouislider": "14.0.2",
     "protractor": "5.4.0",
-    "reselect": "3.0.1",
+    "rxjs": "6.5.2",
-    "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.10.0"
   },
   "dependencies": {
     "classlist.js": "1.1.20150312",

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

@@ -1,7 +1,7 @@
-import { Component, Input, ViewChild, ElementRef, OnInit } from '@angular/core';
+import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 
-import { AppState } from '../../../../store/index';
+import { AppState } from '../../../../store';
 
 import { UHKContributor } from '../../../../models/uhk-contributor';
 
@@ -10,9 +10,9 @@ import { UHKContributor } from '../../../../models/uhk-contributor';
     templateUrl: './contributor-badge.component.html',
     styleUrls: ['./contributor-badge.component.scss']
 })
-export class ContributorBadgeComponent implements OnInit {
+export class ContributorBadgeComponent implements AfterViewInit {
     @Input() contributor: UHKContributor;
-    @ViewChild('badge') badge: ElementRef;
+    @ViewChild('badge', { static: false }) badge: ElementRef;
 
     get name(): string {
         return this.contributor.login;
@@ -29,7 +29,7 @@ export class ContributorBadgeComponent implements OnInit {
     constructor(private store: Store<AppState>) {
     }
 
-    ngOnInit(): void {
+    ngAfterViewInit(): void {
         (this.badge.nativeElement as HTMLImageElement).src = URL.createObjectURL(this.contributor.avatar);
     }
 }

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

@@ -30,7 +30,7 @@ export class AutoGrowInputComponent implements ControlValueAccessor {
     @Input() maxParentWidthPercent = 1;
     @Input() css: string;
 
-    @ViewChild('inputControl') inputControl: ElementRef;
+    @ViewChild('inputControl', { static: true }) inputControl: ElementRef;
 
     disabled: boolean;
 

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

@@ -39,8 +39,8 @@ export class KeymapHeaderComponent implements OnChanges {
     @Input() deletable: boolean;
     @Output() downloadClick = new EventEmitter<void>();
 
-    @ViewChild('name') keymapName: ElementRef;
+    @ViewChild('name', { static: true }) keymapName: ElementRef;
-    @ViewChild('abbr') keymapAbbr: ElementRef;
+    @ViewChild('abbr', { static: true }) keymapAbbr: ElementRef;
 
     starTitle: string;
     trashTitle: string = DEFAULT_TRASH_TITLE;

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

@@ -31,7 +31,8 @@ export class MacroActionEditorComponent implements OnInit {
     @Output() save = new EventEmitter<MacroAction>();
     @Output() cancel = new EventEmitter<void>();
 
-    @ViewChild('tab') selectedTab: MacroTextTabComponent | MacroKeyTabComponent | MacroMouseTabComponent | MacroDelayTabComponent;
+    // tslint:disable-next-line:max-line-length
+    @ViewChild('tab', { static: false }) selectedTab: MacroTextTabComponent | MacroKeyTabComponent | MacroMouseTabComponent | MacroDelayTabComponent;
 
     editableMacroAction: MacroAction;
     activeTab: TabName;

packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.ts

@@ -1,10 +1,8 @@
 import {
     ChangeDetectionStrategy,
     Component,
-    ElementRef,
     Input,
-    OnInit,
+    OnInit
-    ViewChild
 } from '@angular/core';
 import { DelayMacroAction } from 'uhk-common';
 
@@ -21,7 +19,6 @@ const INITIAL_DELAY = 0.5; // In seconds
 })
 export class MacroDelayTabComponent extends MacroBaseComponent implements OnInit {
     @Input() macroAction: DelayMacroAction;
-    @ViewChild('macroDelayInput') input: ElementRef;
 
     presets: number[] = [0.1, 0.5, 1, 5, 10];
 

packages/uhk-web/src/app/components/macro/action-editor/tab/key/macro-key.component.ts

@@ -21,8 +21,7 @@ enum TabName {
 })
 export class MacroKeyTabComponent extends MacroBaseComponent implements OnInit {
     @Input() macroAction: KeyMacroAction;
-    @ViewChild('tab') selectedTab: Tab;
+    @ViewChild('keypressTab', { static: true }) keypressTab: KeypressTabComponent;
-    @ViewChild('keypressTab') keypressTab: KeypressTabComponent;
 
     /* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
     TabName = TabName;

packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 import {
     MacroMouseSubAction,
@@ -7,7 +7,6 @@ import {
     MoveMouseMacroAction,
     ScrollMouseMacroAction
 } from 'uhk-common';
-import { Tab } from '../../../../popover/tab';
 import { MacroBaseComponent } from '../macro-base.component';
 
 type MouseMacroAction = MouseButtonMacroAction | MoveMouseMacroAction | ScrollMouseMacroAction;
@@ -31,7 +30,6 @@ enum TabName {
 })
 export class MacroMouseTabComponent extends MacroBaseComponent implements OnInit {
     @Input() macroAction: MouseMacroAction;
-    @ViewChild('tab') selectedTab: Tab;
 
     /* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
     MouseButtons = MouseButtons;

packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.ts

@@ -20,7 +20,7 @@ const NON_ASCII_REGEXP = /[^\x00-\x7F]/g;
 })
 export class MacroTextTabComponent extends MacroBaseComponent implements OnInit, AfterViewInit {
     @Input() macroAction: TextMacroAction;
-    @ViewChild('macroTextInput') input: ElementRef;
+    @ViewChild('macroTextInput', { static: false } ) input: ElementRef;
 
     constructor() { super(); }
 

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

@@ -26,7 +26,7 @@ import * as util from '../../../util';
 export class MacroHeaderComponent implements AfterViewInit, OnChanges {
     @Input() macro: Macro;
     @Input() isNew: boolean;
-    @ViewChild('macroName') macroName: ElementRef;
+    @ViewChild('macroName', { static: true }) macroName: ElementRef;
 
     constructor(private store: Store<AppState>, private renderer: Renderer2) { }
 

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

@@ -46,7 +46,6 @@ export class MacroListComponent {
     newMacro: Macro = undefined;
     showNew: boolean = false;
     private activeEdit: number = undefined;
-    private dragIndex: number;
 
     constructor(
         private mapper: MapperService,
@@ -59,16 +58,18 @@ export class MacroListComponent {
             }
         });
 
-        dragulaService.drag('macroActions').subscribe((value: any) => {
+        dragulaService.drop('macroActions').subscribe(value => {
-            this.dragIndex = +value[1].getAttribute('data-index');
+            if (value.el) {
-        });
+                let newIndex = this.macroItems.length - 1;
+
+                if (value.sibling) {
+                    newIndex = (+value.sibling.getAttribute('data-index') - 1);
+                }
 
-        dragulaService.drop('macroActions').subscribe((value: any) => {
-            if (value[4]) {
                 this.reorder.emit({
                     macroId: this.macro.id,
-                    oldIndex: this.dragIndex,
+                    oldIndex: +value.el.getAttribute('data-index'),
-                    newIndex: +value[4].getAttribute('data-index')
+                    newIndex
                 });
             }
         });

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

@@ -98,8 +98,8 @@ export class PopoverComponent implements OnChanges {
     @Output() cancel = new EventEmitter<any>();
     @Output() remap = new EventEmitter<KeyActionRemap>();
 
-    @ViewChild('tab') selectedTab: Tab;
+    @ViewChild('tab', { static: false }) selectedTab: Tab;
-    @ViewChild('popover') popoverHost: ElementRef;
+    @ViewChild('popover', { static: false }) popoverHost: ElementRef;
 
     tabName = TabName;
     keyActionValid: boolean;

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

@@ -2,10 +2,9 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
-    ElementRef,
+    OnDestroy,
-    OnDestroy, OnInit,
+    OnInit,
-    Renderer2,
+    Renderer2
-    ViewChild
 } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 
@@ -38,7 +37,6 @@ import { SideMenuPageState } from '../../models/side-menu-page-state';
 export class SideMenuComponent implements OnInit, OnDestroy {
     state: SideMenuPageState;
     animation: { [key: string]: 'active' | 'inactive' };
-    @ViewChild('deviceName') deviceName: ElementRef;
 
     private stateSubscription: Subscription;
 

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

@@ -28,7 +28,7 @@ export interface SliderProps {
     ]
 })
 export class SliderWrapperComponent implements AfterViewInit, ControlValueAccessor, OnDestroy {
-    @ViewChild(NouisliderComponent) slider: NouisliderComponent;
+    @ViewChild(NouisliderComponent, { static: false }) slider: NouisliderComponent;
     @Input() label: string;
     @Input() tooltip: string;
     @Input() min: number;

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

@@ -91,6 +91,7 @@ export class SvgKeyboardComponent {
         this.modules = [];
         this.viewBox = '-520 582 1100 470';
         this.moduleAnimationStates = [];
+        this.moduleVisibilityAnimationStates = [];
     }
 
     ngOnInit() {

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

@@ -1,8 +1,4 @@
 :host {
-    /deep/ text {
-        dominant-baseline: central;
-    }
-
     cursor: pointer;
     outline: none;
 

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

@@ -79,7 +79,7 @@ export class SvgKeyboardKeyComponent implements OnChanges {
     @Output() keyClick = new EventEmitter<SvgKeyClickEvent>();
     @Output() capture = new EventEmitter<SvgKeyCaptureEvent>();
 
-    @ViewChild('svgRec') svgRec: ElementRef<HTMLElement>;
+    @ViewChild('svgRec', { static: false }) svgRec: ElementRef<HTMLElement>;
 
     enumLabelTypes = LabelTypes;
 

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

@@ -25,17 +25,17 @@
     </svg>
     <svg viewBox="0 0 100 100" [attr.width]="control.width" [attr.height]="control.height" [attr.x]="control.x" [attr.y]="control.y"
         preserveAspectRatio="none" [class.disabled]="control.disabled">
-        <svg:text [attr.text-anchor]="'middle'" [attr.x]="50" [attr.y]="50">C</svg:text>
+        <svg:text text-anchor="middle" alignment-baseline="middle" x="50" y="55">C</svg:text>
     </svg>
     <svg viewBox="0 0 100 100" [attr.width]="option.width" [attr.height]="option.height" [attr.x]="option.x" [attr.y]="option.y"
         preserveAspectRatio="none" [class.disabled]="option.disabled">
         <svg:use *ngIf="modifierIconNames.option" [attr.xlink:href]="modifierIconNames.option" />
-        <svg:text *ngIf="!modifierIconNames.option" [attr.text-anchor]="'middle'" [attr.x]="50" [attr.y]="50">A</svg:text>
+        <svg:text *ngIf="!modifierIconNames.option" text-anchor="middle" alignment-baseline="middle" x="50" y="55">A</svg:text>
     </svg>
     <svg viewBox="0 0 100 100" [attr.width]="command.width" [attr.height]="command.height" [attr.x]="command.x" [attr.y]="command.y"
         preserveAspectRatio="none" [class.disabled]="command.disabled">
         <svg:use *ngIf="modifierIconNames.command" [attr.xlink:href]="modifierIconNames.command" />
-        <svg:text *ngIf="!modifierIconNames.command" [attr.text-anchor]="'middle'" [attr.x]="50" [attr.y]="50">S</svg:text>
+        <svg:text *ngIf="!modifierIconNames.command" text-anchor="middle" alignment-baseline="middle" x="50" y="55">S</svg:text>
     </svg>
 </svg>
 <svg:g svg-secondary-role

packages/uhk-web/src/app/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.html

@@ -5,12 +5,12 @@
     [attr.y]="0"
     [attr.text-anchor]="'middle'"
     [attr.font-size]="25">
-        <tspan dy="34"> Click </tspan>
+        <tspan dy="45"> Click </tspan>
 </svg:text>
 <svg:text
     [attr.x]="50"
     [attr.y]="0"
     [attr.text-anchor]="'middle'"
     [attr.font-size]="25">
-        <tspan dy="70"> {{ button }} </tspan>
+        <tspan dy="80"> {{ button }} </tspan>
 </svg:text>

packages/uhk-web/src/app/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.html

@@ -4,6 +4,6 @@
     [attr.y]="0"
     [attr.text-anchor]="'middle'"
     [attr.font-size]="24">
-        <tspan dy="34"> Move </tspan>
+        <tspan dy="45"> Move </tspan>
 </svg:text>
 <svg:use [attr.xlink:href]="directionIcon" width="30" height="30" x="35" y="55"></svg:use>

packages/uhk-web/src/app/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.html

@@ -4,6 +4,6 @@
     [attr.y]="0"
     [attr.text-anchor]="'middle'"
     [attr.font-size]="24">
-        <tspan dy="34"> Scroll </tspan>
+        <tspan dy="45"> Scroll </tspan>
 </svg:text>
 <svg:use [attr.xlink:href]="directionIcon" width="30" height="30" x="35" y="55"></svg:use>

packages/uhk-web/src/app/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.html

@@ -5,12 +5,12 @@
     [attr.y]="0"
     [attr.text-anchor]="'middle'"
     [attr.font-size]="25">
-        <tspan dy="34"> Speed </tspan>
+        <tspan dy="45"> Speed </tspan>
 </svg:text>
 <svg:text
     [attr.x]="50"
     [attr.y]="0"
     [attr.text-anchor]="'middle'"
     [attr.font-size]="30">
-        <tspan dy="70"> {{ sign }} </tspan>
+        <tspan dy="80"> {{ sign }} </tspan>
 </svg:text>

packages/uhk-web/src/app/components/svg/keys/svg-one-line-text-key/svg-one-line-text-key.component.html

@@ -1,8 +1,9 @@
 <svg:text
-    [attr.x]="0"
+    [attr.x]="textX"
     [attr.y]="textY"
-    [attr.text-anchor]="'middle'">
+    text-anchor="middle"
-    <tspan [attr.x]="spanX" dy="0">{{ text }}</tspan>
+    alignment-baseline="middle">
+    {{ text }}
 </svg:text>
 <svg:g svg-secondary-role
        *ngIf="secondaryText"

packages/uhk-web/src/app/components/svg/keys/svg-one-line-text-key/svg-one-line-text-key.component.ts

@@ -14,8 +14,8 @@ export class SvgOneLineTextKeyComponent implements OnChanges {
     @Input() text: string;
     @Input() secondaryText: string;
 
+    textX: number;
     textY: number;
-    spanX: number;
     secondaryTextY: number;
     secondaryHeight: number;
 
@@ -34,8 +34,8 @@ export class SvgOneLineTextKeyComponent implements OnChanges {
             secondaryYModifier = 5;
         }
 
+        this.textX = this.width / 2;
         this.textY = this.height / 2 - textYModifier;
-        this.spanX = this.width / 2;
 
         this.secondaryHeight = this.height / 4;
         this.secondaryTextY = this.height - this.secondaryHeight - SECONDARY_ROLE_BOTTOM_MARGIN - secondaryYModifier;

packages/uhk-web/src/app/components/svg/keys/svg-secondary-role/svg-secondary-role.component.html

@@ -1,14 +1,15 @@
 <svg [attr.viewBox]="viewBox" [attr.width]="width" [attr.height]="height" [attr.y]="y">
-    <g id="secondaryContent" [attr.transform]="transform">
+    <g [attr.transform]="transform">
         <svg viewBox="0 0 14 14" width="12" height="12" x="2" [attr.y]="textY / 3.5">
             <ellipse stroke="#fff" rx="6.5" ry="6.5" cy="7" cx="7" stroke-width="1" fill-opacity="0"/>
-            <text text-anchor="start" font-family="Helvetica" font-size="12" y="7.8" x="4" stroke-width="0">2
+            <text text-anchor="start" alignment-baseline="middle" font-family="Helvetica" font-size="12" y="7.8" x="4" stroke-width="0">2
             </text>
         </svg>
         <text [attr.y]="textY"
               [attr.x]="textIndent"
               font-size="12"
-              text-anchor="start">
+              text-anchor="start"
+              alignment-baseline="middle">
             {{ text }}
         </text>
     </g>

packages/uhk-web/src/app/components/svg/keys/svg-secondary-role/svg-secondary-role.component.scss

@@ -0,0 +1,3 @@
+text {
+    dominant-baseline: text-bottom;
+}

packages/uhk-web/src/app/components/svg/keys/svg-secondary-role/svg-secondary-role.component.ts

@@ -1,12 +1,10 @@
 import {
     ChangeDetectionStrategy,
     Component,
-    ElementRef,
     Input,
     OnChanges,
     OnInit,
-    SimpleChanges,
+    SimpleChanges
-    ViewChild
 } from '@angular/core';
 
 import { getContentWidth } from '../../../../util';
@@ -18,6 +16,7 @@ const SECONDARY_STYLE: CSSStyleDeclaration = {
 @Component({
     selector: 'g[svg-secondary-role]',
     templateUrl: './svg-secondary-role.component.html',
+    styleUrls: ['./svg-secondary-role.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SvgSecondaryRoleComponent implements OnInit, OnChanges {
@@ -26,8 +25,6 @@ export class SvgSecondaryRoleComponent implements OnInit, OnChanges {
     @Input() y: number;
     @Input() text: string;
 
-    @ViewChild('secondary') svgElement: ElementRef;
-
     viewBox: string;
     textY: number;
     transform: string;

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

@@ -5,8 +5,9 @@
         [attr.y]="useY">
 </svg:use>
 <svg:text
-    [attr.x]="0"
+    [attr.x]="textX"
     [attr.y]="textY"
-    [attr.text-anchor]="'middle'">
+    text-anchor="middle"
-        <tspan [attr.x]="spanX">{{ abbreviation }}</tspan>
+    alignment-baseline="middle">
+    {{ abbreviation }}
 </svg:text>

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

@@ -18,7 +18,7 @@ export class SvgSwitchKeymapKeyComponent implements OnInit {
     useX: number;
     useY: number;
     textY: number;
-    spanX: number;
+    textX: number;
 
     constructor(private mapperService: MapperService) { }
 
@@ -30,6 +30,6 @@ export class SvgSwitchKeymapKeyComponent implements OnInit {
         this.useX = this.width * 3 / 8;
         this.useY = this.height / 5;
         this.textY = this.height * 2 / 3;
-        this.spanX = this.width / 2;
+        this.textX = this.width / 2;
     }
 }

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

@@ -1,8 +1,9 @@
 <svg:text
-    [attr.x]="0"
+    [attr.x]="textX"
     [attr.y]="textY"
-    [attr.text-anchor]="textAnchor">
+    [attr.text-anchor]="textAnchor"
-        <tspan [attr.x]="spanX">{{ text }}</tspan>
+    alignment-baseline="middle">
+    {{ text }}
 </svg:text>
 <svg:use [attr.xlink:href]="icon"
         [attr.width]="useWidth"

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

@@ -21,7 +21,7 @@ export class SvgTextIconKeyComponent implements OnChanges {
     useY: number;
     textY: number;
     textAnchor: string;
-    spanX: number;
+    textX: number;
     secondaryTextY: number;
     secondaryHeight: number;
 
@@ -46,7 +46,7 @@ export class SvgTextIconKeyComponent implements OnChanges {
         this.useY = (this.width > 2 * this.height) ? this.height / 3 : this.height / 2;
         this.textY = ((this.width > 2 * this.height) ? this.height / 2 : this.height / 3) - textYModifier;
         this.textAnchor = (this.width > 2 * this.height) ? 'end' : 'middle';
-        this.spanX = (this.width > 2 * this.height) ? 0.6 * this.width : this.width / 2;
+        this.textX = (this.width > 2 * this.height) ? 0.6 * this.width : this.width / 2;
 
         this.secondaryHeight = this.height / 4;
         this.secondaryTextY = this.height - this.secondaryHeight - SECONDARY_ROLE_BOTTOM_MARGIN - secondaryYModifier;

packages/uhk-web/src/app/components/svg/keys/svg-two-line-text-key/svg-two-line-text-key.component.html

@@ -1,12 +1,12 @@
 <svg:text
     [attr.x]="0"
     [attr.y]="textY"
-    [attr.text-anchor]="'middle'">
+    text-anchor="middle"
+    alignment-baseline="middle">
          <tspan
                 *ngFor="let text of texts; let index = index"
                 [attr.x]="spanX"
                 [attr.y]="spanYs[index]"
-                dy="0"
                 >{{ text }}</tspan>
  </svg:text>
 <svg:g svg-secondary-role

packages/uhk-web/src/app/components/svg/keys/svg-two-line-text-key/svg-two-line-text-key.component.ts

@@ -27,13 +27,11 @@ export class SvgTwoLineTextKeyComponent implements OnChanges {
     }
 
     calculatePositions(): void {
-        let textYModifier = 0;
         let secondaryYModifier = 0;
         this.secondaryHeight = 0;
         let textContainerHeight = this.height;
 
         if (this.secondaryText) {
-            textYModifier =  this.height / 5;
             secondaryYModifier = 0;
             this.secondaryHeight = this.height / 4;
             textContainerHeight -= this.secondaryHeight;
@@ -43,7 +41,7 @@ export class SvgTwoLineTextKeyComponent implements OnChanges {
         this.spanX = this.width / 2;
         this.spanYs = [];
         for (let i = 0; i < this.texts.length; ++i) {
-            this.spanYs.push((0.75 - i * 0.5) * textContainerHeight);
+            this.spanYs.push((0.85 - i * 0.5) * textContainerHeight);
         }
 
         this.secondaryTextY = this.height - this.secondaryHeight - SECONDARY_ROLE_BOTTOM_MARGIN - secondaryYModifier;

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

@@ -73,7 +73,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
 
     @Output() descriptionChanged = new EventEmitter<ChangeKeymapDescription>();
 
-    @ViewChild(PopoverComponent, { read: ElementRef }) popover: ElementRef;
+    @ViewChild(PopoverComponent, { read: ElementRef, static: false }) popover: ElementRef;
 
     popoverShown: boolean;
     keyEditConfig: { moduleId: number, keyId: number };
@@ -218,7 +218,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
             return;
         }
 
-        const el: Element = event.target as Element || event.srcElement;
+        const el = event.target as Element;
         const position: ClientRect = el.getBoundingClientRect();
         let posLeft: number = this.tooltipData.posLeft;
         let posTop: number = this.tooltipData.posTop;

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

@@ -10,7 +10,7 @@ import { XtermLog } from '../../models/xterm-log';
 export class XtermComponent implements OnChanges {
     @Input() logs: Array<XtermLog> = [];
 
-    @ViewChild('scrollMe') divElement: ElementRef;
+    @ViewChild('scrollMe', { static: false }) divElement: ElementRef;
 
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.logs && this.divElement && this.divElement.nativeElement) {

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

@@ -446,16 +446,9 @@ export function reducer(
             const userConfiguration: UserConfiguration = Object.assign(new UserConfiguration(), state.userConfiguration);
             userConfiguration.macros = state.userConfiguration.macros.map((macro: Macro) => {
                 if (macro.id === payload.id) {
-                    let newIndex: number = payload.newIndex;
-
-                    // We need to reduce the new index for one when we are moving action down
-                    if (newIndex > payload.oldIndex) {
-                        --newIndex;
-                    }
-
                     macro = new Macro(macro);
                     macro.macroActions.splice(
-                        newIndex,
+                        payload.newIndex,
                         0,
                         macro.macroActions.splice(payload.oldIndex, 1)[0]
                     );

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

@@ -15,7 +15,7 @@ import { effects } from './store/effects';
         BrowserModule,
         SharedModule,
         StoreModule.forRoot(reducers),
-        StoreRouterConnectingModule,
+        StoreRouterConnectingModule.forRoot(),
         StoreDevtoolsModule.instrument({
             maxAge: 10
         }),

packages/uhk-web/src/main-web.ts

@@ -8,4 +8,6 @@ if (environment.production) {
     enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(WebModule);
+platformBrowserDynamic().bootstrapModule(WebModule, {
+    preserveWhitespaces: true
+});

packages/uhk-web/src/renderer/uhk-renderer.module.ts

@@ -22,7 +22,7 @@ import { effects } from '../app/store/effects';
         SharedModule,
         routing,
         StoreModule.forRoot(reducers),
-        StoreRouterConnectingModule,
+        StoreRouterConnectingModule.forRoot(),
         StoreDevtoolsModule.instrument({
             maxAge: 10
         }),

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

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
     "baseUrl": "./",
-    "target": "es6",
+    "target": "es5", // Until https://github.com/electron/electron/issues/12011 not working without custom protocol
     "types": ["node"],
     "lib": [
       "es2016",