Issue 201 - Mark selected key with blue (#290)

* issue-201: initial try

* revert: remove first solution related changes

* feature: change the colour of selected key to blue (empty key selection case not covered)

* typescript: prevent errors in editors due to missing tsconfig for shared

* cleanup: remove unused import

* fix: solve empty key case, pass down selected layerId, moduleId and keyId

* cleanup: remove console.log statement

* cleanup: remove extra line

* review: animation delay shorter, exactly as short as the animation delay of the popover

* review: prevent remaining signature blue when click twice on a key in rapid succession

* review: right signature colour after blending (http://colorblendy.com/#!/multiply/4099e5/cccccc)

* review comments fixes

* review: use simplified condition with help of ‘?’

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

@@ -4,6 +4,7 @@
                      [currentLayer]="currentLayer"
                      [keybindAnimationEnabled]="keybindAnimationEnabled"
                      [capturingEnabled]="popoverEnabled"
+                     [selectedKey]="selectedKey"
                      (keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"
                      (keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"
                      (capture)="onCapture($event.moduleId, $event.keyId, $event.captured)"

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

@@ -60,6 +60,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
 
     private popoverShown: boolean;
     private keyEditConfig: { moduleId: number, keyId: number };
+    private selectedKey: { layerId: number, moduleId: number, keyId: number };
     private popoverInitKeyAction: KeyAction;
     private keybindAnimationEnabled: boolean;
     private currentLayer: number = 0;
@@ -136,7 +137,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
                 moduleId,
                 keyId
             };
-
+            this.selectedKey = { layerId: this.currentLayer, moduleId, keyId };
             const keyActionToEdit: KeyAction = this.layers[this.currentLayer].modules[moduleId].keyActions[keyId];
             this.keyElement = keyTarget;
             this.showPopover(keyActionToEdit);
@@ -224,6 +225,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
 
     hidePopover(): void {
         this.popoverShown = false;
+        this.selectedKey = undefined;
     }
 
     selectLayer(index: number): void {