Add captured press keystroke for macros (closes #324) (#427)

* update npm lock file (#425)

* feat(capture): make capture keystroke button reusable as make itself render a link or button (closes #324)

* review: re-style bootstrap link button template of capture component like a button

* review: use same bootstrap btn-link styles for "Add macro action" as in case of "Add captured keystroke"

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

@@ -25,13 +25,15 @@
         </div>
         <div class="list-group add-new__action-container" [@toggler]="(!showNew) ? 'active' : 'inactive'">
             <div class="list-group-item action--item add-new__action-item no-reorder clearfix">
-                <a class="add-new__action-item--link" (click)="showNewAction()">
-                    <i class="fa fa-plus"></i> Add macro action
-                </a>
-                <a class="add-new__action-item--link">
-                    <i class="fa fa fa-circle"></i> Add captured keystroke
-                </a>
+                <span class="add-new__action-item--link" (click)="showNewAction()">
+                    <button type="button" class="btn btn-link">
+                        <i class="fa fa-plus"></i> Add macro action
+                    </button>
+                </span>
+                <span class="add-new__action-item--link">
+                    <capture-keystroke-button captureText="Add captured keystroke" isLink="true" (capture)="onKeysCapture($event)" ></capture-keystroke-button>
+                </span>
             </div>
         </div>
     </div>
-</div>
+</div>

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

@@ -1,4 +1,5 @@
 @import '../../../../styles/variables';
+@import '../../../../styles/common';
 
 :host {
     display: flex;
@@ -112,7 +113,6 @@ h1 {
     &--link {
         width: 50%;
         float: left;
-        padding: 10px 5px;
         text-align: center;
         color: $icon-hover;
 
@@ -124,6 +124,10 @@ h1 {
             text-decoration: none;
             background: #e6e6e6;
         }
+
+        button.btn-link {
+            @extend %btn-link;
+        }
     }
 
     .fa-circle {

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

@@ -1,8 +1,9 @@
 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 { Macro, MacroAction } from 'uhk-common';
+import { Macro, MacroAction, KeyMacroAction, KeystrokeAction, MacroSubAction } from 'uhk-common';
 
+import { MapperService } from '../../../services/mapper.service';
 import { MacroItemComponent } from '../item';
 
 @Component({
@@ -46,7 +47,10 @@ export class MacroListComponent {
     private activeEdit: number = undefined;
     private dragIndex: number;
 
-    constructor(dragulaService: DragulaService) {
+    constructor(
+        private mapper: MapperService,
+        private dragulaService: DragulaService
+    ) {
         /* tslint:disable:no-unused-variable: Used by Dragula. */
         dragulaService.setOptions('macroActions', {
             moves: function (el: any, container: any, handle: any) {
@@ -121,6 +125,27 @@ export class MacroListComponent {
         this.hideActiveEditor();
     }
 
+    onKeysCapture(event: { code: number, left: boolean[], right: boolean[] }) {
+        const keyMacroAction = Object.assign(new KeyMacroAction(), this.toKeyAction(event));
+        keyMacroAction.action = MacroSubAction.press;
+
+        this.add.emit({
+            macroId: this.macro.id,
+            action: keyMacroAction
+        });
+    }
+
+    private toKeyAction(event: { code: number, left: boolean[], right: boolean[] }): KeystrokeAction {
+        const keystrokeAction: KeystrokeAction = new KeystrokeAction();
+        keystrokeAction.scancode = event.code;
+        keystrokeAction.modifierMask = 0;
+        const modifiers = event.left.concat(event.right).map(x => x ? 1 : 0);
+        for (let i = 0; i < modifiers.length; ++i) {
+            keystrokeAction.modifierMask |= modifiers[i] << this.mapper.modifierMapper(i);
+        }
+        return keystrokeAction;
+    }
+
     private hideActiveEditor() {
         if (this.activeEdit !== undefined) {
             this.macroItems.toArray()[this.activeEdit].cancelEdit();

packages/uhk-web/src/app/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.html

@@ -1,12 +1,15 @@
-<button type="button" class="btn btn-sm btn--capture-keystroke"
-            [ngClass]="{'btn-default': !record, 'btn-info': record}"
-            (click)="start()"
->
-    <i class="fa fa-circle"></i>
-    <ng-template [ngIf]="!record">
-        Capture keystroke
-    </ng-template>
-    <ng-template [ngIf]="record">
-        Capturing ...
-    </ng-template>
- </button>
+<button type="button" [ngClass]="{
+    'btn btn-sm btn--capture-keystroke': !isLink,
+    'btn-link link--capture-keystroke': isLink,
+    'btn-default': !record && !isLink,
+    'btn-info': record && !isLink
+}" (click)="start()">
+<i class="fa fa-circle"></i>
+
+<ng-template [ngIf]="!record">
+{{ captureText }}
+</ng-template>
+
+<ng-template [ngIf]="record">
+Capturing ...
+</ng-template>

packages/uhk-web/src/app/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.scss

@@ -1,8 +1,14 @@
-button {
+@import '../../../../../styles/common';
+
+.btn--capture-keystroke {
     display: inline-block;
     margin: 0 0 0 0.25rem;
 }
 
+.link--capture-keystroke {
+    @extend %btn-link;
+}
+
 .fa-circle {
     color: #c00;
 }

packages/uhk-web/src/app/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, HostListener, Output } from '@angular/core';
+import { Component, EventEmitter, HostListener, Output, Input } from '@angular/core';
 import { CaptureService } from '../../../../services/capture.service';
 
 @Component({
@@ -7,6 +7,8 @@ import { CaptureService } from '../../../../services/capture.service';
     styleUrls: ['./capture-keystroke-button.component.scss']
 })
 export class CaptureKeystrokeButtonComponent {
+    @Input() isLink = false;
+    @Input() captureText = 'Capture keystroke';
     @Output() capture = new EventEmitter<any>();
 
     record: boolean;

packages/uhk-web/src/styles/common.scss

@@ -0,0 +1,10 @@
+%btn-link {
+    padding: 7px 0px;
+    text-decoration: none;
+    border: 0;
+    width: 100%;
+
+    &:focus {
+        outline: none;
+    }
+}