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/keyboard/slider/keyboard-slider.component.html

@@ -3,6 +3,8 @@
     [moduleConfig]="layer.modules"
     [keybindAnimationEnabled]="keybindAnimationEnabled"
     [capturingEnabled]="capturingEnabled"
+    [selectedKey]="selectedKey"
+    [selected]="selectedKey?.layerId === index"
     (keyClick)="keyClick.emit($event)"
     (keyHover)="keyHover.emit($event)"
     (capture)="capture.emit($event)"

shared/src/components/keyboard/slider/keyboard-slider.component.ts

@@ -80,6 +80,7 @@ export class KeyboardSliderComponent implements OnChanges {
     @Input() currentLayer: number;
     @Input() keybindAnimationEnabled: boolean;
     @Input() capturingEnabled: boolean;
+    @Input() selectedKey: { layerId: number, moduleId: number, keyId: number };
     @Output() keyClick = new EventEmitter();
     @Output() keyHover = new EventEmitter();
     @Output() capture = new EventEmitter();

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

@@ -6,6 +6,8 @@
             [capturingEnabled]="capturingEnabled"
             [attr.transform]="module.attributes.transform"
             [keyActions]="moduleConfig[i].keyActions"
+            [selectedKey]="selectedKey"
+            [selected]="selectedKey?.moduleId === i"
             (keyClick)="onKeyClick(i, $event.index, $event.keyTarget)"
             (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)"
             (capture)="onCapture(i, $event.index, $event.captured)"

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

@@ -18,6 +18,8 @@ export class SvgKeyboardComponent implements OnInit {
     @Input() moduleConfig: Module[];
     @Input() keybindAnimationEnabled: boolean;
     @Input() capturingEnabled: boolean;
+    @Input() selectedKey: { layerId: number, moduleId: number, keyId: number };
+    @Input() selected: boolean;
     @Output() keyClick = new EventEmitter();
     @Output() keyHover = new EventEmitter();
     @Output() capture = new EventEmitter();

shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html

@@ -1,5 +1,6 @@
 <svg:rect [@change]="changeAnimation"
           (@change.done)="onChangeAnimationDone()"
+          [@active]="active"
           [id]="id" [attr.rx]="rx"          [attr.ry]="ry"
                     [attr.height]="height"  [attr.width]="width"
                     [attr.fill]="fill"

shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts

@@ -48,6 +48,12 @@ enum LabelTypes {
                 ])
             ])
         ]),
+        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)'
@@ -71,6 +77,8 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
     @Input() keyAction: KeyAction;
     @Input() keybindAnimationEnabled: boolean;
     @Input() capturingEnabled: boolean;
+    @Input() active: boolean;
+
     @Output() keyClick = new EventEmitter();
     @Output() capture = new EventEmitter();
 

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();

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 {

shared/src/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "../../node_modules/@types"
+    ],
+    "types": [
+      "node",
+      "jquery",
+      "core-js",
+      "select2",
+      "file-saver"
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    "config-serializer"
+  ]
+}