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
This commit is contained in:
Róbert Kiss
2018-10-14 20:43:35 +02:00
committed by László Monda
parent e333022043
commit 2b963993d2
6 changed files with 55 additions and 6 deletions

View File

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

View File

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

View File

@@ -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) {

View File

@@ -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
;

View File

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

View File

@@ -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;