fix: stop event propagation when capturing keypress action (#817)

* fix: stop event propagation when capturing keypress action

* fix: save to keyboard shortcut allowed when keypress not capturing

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

@@ -13,7 +13,8 @@ import {
     getShowAppUpdateAvailable,
     deviceConfigurationLoaded,
     runningInElectron,
-    saveToKeyboardState
+    saveToKeyboardState,
+    keypressCapturing
 } from './store';
 import { ProgressButtonState } from './store/reducers/progress-button-state';
 
@@ -42,7 +43,9 @@ export class MainAppComponent implements OnDestroy {
     runningInElectron$: Observable<boolean>;
     saveToKeyboardState: ProgressButtonState;
 
+    private keypressCapturing: boolean;
     private saveToKeyboardStateSubscription: Subscription;
+    private keypressCapturingSubscription: Subscription;
 
     constructor(private store: Store<AppState>) {
         this.showUpdateAvailable$ = store.select(getShowAppUpdateAvailable);
@@ -50,10 +53,13 @@ export class MainAppComponent implements OnDestroy {
         this.runningInElectron$ = store.select(runningInElectron);
         this.saveToKeyboardStateSubscription = store.select(saveToKeyboardState)
             .subscribe(data => this.saveToKeyboardState = data);
+        this.keypressCapturingSubscription = store.select(keypressCapturing)
+            .subscribe(data => this.keypressCapturing = data);
     }
 
     ngOnDestroy(): void {
         this.saveToKeyboardStateSubscription.unsubscribe();
+        this.keypressCapturingSubscription.unsubscribe();
     }
 
     @HostListener('document:keydown', ['$event'])
@@ -61,7 +67,8 @@ export class MainAppComponent implements OnDestroy {
         if (this.saveToKeyboardState.showButton &&
             event.ctrlKey &&
             event.key === 's' &&
-            !event.defaultPrevented) {
+            !event.defaultPrevented &&
+            !this.keypressCapturing) {
             this.clickedOnProgressButton(this.saveToKeyboardState.action);
             event.preventDefault();
         }

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

@@ -1,6 +1,10 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
+import { Store } from '@ngrx/store';
+
 import { CaptureService } from '../../../../services/capture.service';
 import { KeyModifierModel } from '../../../../models/key-modifier-model';
+import { AppState } from '../../../../store';
+import { StartKeypressCapturingAction, StopKeypressCapturingAction } from '../../../../store/actions/app';
 
 @Component({
     selector: 'capture-keystroke-button',
@@ -17,7 +21,8 @@ export class CaptureKeystrokeButtonComponent {
     private first: boolean; // enable usage of Enter to start capturing
     private scanCodePressed: boolean;
 
-    constructor(private captureService: CaptureService) {
+    constructor(private captureService: CaptureService,
+                private store: Store<AppState>) {
         this.record = false;
         this.captureService.initModifiers();
         this.captureService.populateMapping();
@@ -28,9 +33,11 @@ export class CaptureKeystrokeButtonComponent {
     onKeyUp(e: KeyboardEvent) {
         if (this.scanCodePressed) {
             e.preventDefault();
+            e.stopPropagation();
             this.scanCodePressed = false;
         } else if (this.record && !this.first) {
             e.preventDefault();
+            e.stopPropagation();
             this.saveScanCode();
         }
     }
@@ -54,6 +61,7 @@ export class CaptureKeystrokeButtonComponent {
         } else if (code === enter) {
             this.record = true;
             this.first = true;
+            this.store.dispatch(new StartKeypressCapturingAction());
         }
     }
 
@@ -65,6 +73,7 @@ export class CaptureKeystrokeButtonComponent {
 
     start(): void {
         this.record = true;
+        this.store.dispatch(new StartKeypressCapturingAction());
     }
 
     private saveScanCode(code?: number) {
@@ -84,5 +93,6 @@ export class CaptureKeystrokeButtonComponent {
     private reset() {
         this.first = false;
         this.captureService.initModifiers();
+        this.store.dispatch(new StopKeypressCapturingAction());
     }
 }

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

@@ -29,6 +29,7 @@ import { getMacros } from '../../../../store/reducers/user-configuration';
 import { SvgKeyCaptureEvent, SvgKeyClickEvent } from '../../../../models/svg-key-events';
 import { OperatingSystem } from '../../../../models/operating-system';
 import { KeyModifierModel } from '../../../../models/key-modifier-model';
+import { StartKeypressCapturingAction, StopKeypressCapturingAction } from '../../../../store/actions/app';
 
 enum LabelTypes {
     KeystrokeKey,
@@ -107,7 +108,7 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
 
     constructor(
         private mapper: MapperService,
-        store: Store<AppState>,
+        private store: Store<AppState>,
         private element: ElementRef,
         private captureService: CaptureService,
         private renderer: Renderer
@@ -145,6 +146,7 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
                 this.recordAnimation = 'active';
                 this.shiftPressed = e.shiftKey;
                 this.altPressed = e.altKey;
+                this.store.dispatch(new StartKeypressCapturingAction());
             }
         }
     }
@@ -242,6 +244,7 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
         this.captureService.initModifiers();
         this.shiftPressed = false;
         this.altPressed = false;
+        this.store.dispatch(new StopKeypressCapturingAction());
     }
 
     private saveScanCode(code = 0) {

packages/uhk-web/src/app/store/actions/app.ts

@@ -20,7 +20,9 @@ export const ActionTypes = {
     OPEN_URL_IN_NEW_WINDOW: type(PREFIX + 'Open URL in new Window'),
     PRIVILEGE_WHAT_WILL_THIS_DO: type(PREFIX + 'What will this do clicked'),
     SETUP_PERMISSION_ERROR: type(PREFIX + 'Setup permission error'),
-    LOAD_APP_START_INFO: type(PREFIX + 'Load app start info')
+    LOAD_APP_START_INFO: type(PREFIX + 'Load app start info'),
+    START_KEYPRESS_CAPTURING: type(PREFIX + 'Start keypress capturing'),
+    STOP_KEYPRESS_CAPTURING: type(PREFIX + 'Stop keypress capturing')
 };
 
 export class AppBootsrappedAction implements Action {
@@ -103,6 +105,14 @@ export class LoadAppStartInfoAction implements Action {
     type = ActionTypes.LOAD_APP_START_INFO;
 }
 
+export class StartKeypressCapturingAction implements Action {
+    type = ActionTypes.START_KEYPRESS_CAPTURING;
+}
+
+export class StopKeypressCapturingAction implements Action {
+    type = ActionTypes.STOP_KEYPRESS_CAPTURING;
+}
+
 export type Actions
     = AppStartedAction
     | AppBootsrappedAction
@@ -118,4 +128,6 @@ export type Actions
     | PrivilegeWhatWillThisDoAction
     | SetupPermissionErrorAction
     | LoadAppStartInfoAction
+    | StartKeypressCapturingAction
+    | StopKeypressCapturingAction
     ;

packages/uhk-web/src/app/store/index.ts

@@ -54,6 +54,7 @@ export const deviceConfigurationLoaded = createSelector(appState, fromApp.device
 export const getAgentVersionInfo = createSelector(appState, fromApp.getAgentVersionInfo);
 export const getPrivilegePageState = createSelector(appState, fromApp.getPrivilagePageState);
 export const getOperatingSystem = createSelector(appState, fromSelectors.getOperatingSystem);
+export const keypressCapturing = createSelector(appState, fromApp.keypressCapturing);
 export const runningOnNotSupportedWindows = createSelector(appState, fromApp.runningOnNotSupportedWindows);
 export const firmwareUpgradeAllowed = createSelector(runningOnNotSupportedWindows, notSupportedOs => !notSupportedOs);
 

packages/uhk-web/src/app/store/reducers/app.reducer.ts

@@ -32,6 +32,7 @@ export interface State {
     permissionError?: any;
     platform?: string;
     osVersion?: string;
+    keypressCapturing: boolean;
 }
 
 export const initialState: State = {
@@ -41,7 +42,8 @@ export const initialState: State = {
     runningInElectron: runInElectron(),
     configLoading: true,
     agentVersionInfo: getVersions(),
-    privilegeWhatWillThisDoClicked: false
+    privilegeWhatWillThisDoClicked: false,
+    keypressCapturing: false
 };
 
 export function reducer(state = initialState, action: Action & { payload: any }) {
@@ -151,6 +153,18 @@ export function reducer(state = initialState, action: Action & { payload: any })
                 permissionError: null
             };
 
+        case ActionTypes.START_KEYPRESS_CAPTURING:
+            return {
+                ...state,
+                keypressCapturing: true
+            };
+
+        case ActionTypes.STOP_KEYPRESS_CAPTURING:
+            return {
+                ...state,
+                keypressCapturing: false
+            };
+
         default:
             return state;
     }
@@ -191,3 +205,5 @@ export const runningOnNotSupportedWindows = (state: State): boolean => {
 
     return osMajor < 6 || (osMajor === 6 && osMinor < 2);
 };
+
+export const keypressCapturing = (state: State): boolean => state.keypressCapturing;