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/module/svg-module.component.html

@@ -8,6 +8,7 @@
             [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'"
             [attr.fill]="key.fill"
             [keyAction]="keyActions[i]"
+            [active]="selected && i == selectedKey.keyId"
             [keybindAnimationEnabled]="keybindAnimationEnabled"
             [capturingEnabled]="capturingEnabled"
             (keyClick)="onKeyClick(i, $event)"

shared/src/components/svg/module/svg-module.component.ts

@@ -14,6 +14,8 @@ export class SvgModuleComponent {
     @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;
     @Output() keyClick = new EventEmitter();