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:
committed by
László Monda
parent
e333022043
commit
2b963993d2
@@ -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();
|
||||
}
|
||||
|
||||
@@ -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());
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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
|
||||
;
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user