From 2b963993d2e3d9122d04142af60817ade154316f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B3bert=20Kiss?= Date: Sun, 14 Oct 2018 20:43:35 +0200 Subject: [PATCH] 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 | 11 +++++++++-- .../capture-keystroke-button.component.ts | 12 +++++++++++- .../svg-keyboard-key.component.ts | 5 ++++- packages/uhk-web/src/app/store/actions/app.ts | 14 +++++++++++++- packages/uhk-web/src/app/store/index.ts | 1 + .../src/app/store/reducers/app.reducer.ts | 18 +++++++++++++++++- 6 files changed, 55 insertions(+), 6 deletions(-) diff --git a/packages/uhk-web/src/app/app.component.ts b/packages/uhk-web/src/app/app.component.ts index 0f10177d..a764aa36 100644 --- a/packages/uhk-web/src/app/app.component.ts +++ b/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; saveToKeyboardState: ProgressButtonState; + private keypressCapturing: boolean; private saveToKeyboardStateSubscription: Subscription; + private keypressCapturingSubscription: Subscription; constructor(private store: Store) { 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(); } diff --git a/packages/uhk-web/src/app/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts b/packages/uhk-web/src/app/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts index b4d52462..0e4161b2 100644 --- a/packages/uhk-web/src/app/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts +++ b/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) { 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()); } } diff --git a/packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts b/packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts index 8f051aef..f33b29b8 100644 --- a/packages/uhk-web/src/app/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts +++ b/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, + private store: Store, 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) { diff --git a/packages/uhk-web/src/app/store/actions/app.ts b/packages/uhk-web/src/app/store/actions/app.ts index 0a55bbc4..874b0e49 100644 --- a/packages/uhk-web/src/app/store/actions/app.ts +++ b/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 ; diff --git a/packages/uhk-web/src/app/store/index.ts b/packages/uhk-web/src/app/store/index.ts index 31c25d17..1543685d 100644 --- a/packages/uhk-web/src/app/store/index.ts +++ b/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); diff --git a/packages/uhk-web/src/app/store/reducers/app.reducer.ts b/packages/uhk-web/src/app/store/reducers/app.reducer.ts index 61aaa6eb..9ce906f9 100644 --- a/packages/uhk-web/src/app/store/reducers/app.reducer.ts +++ b/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;