Create Keyboard Shortcuts with RxJS

[giscus[bot]]

Create Keyboard Shortcuts with RxJS

The cleanest way to create and orchestrate Keyboard Shortcuts with RxJS.

https://notiz.dev/blog/simple-rxjs-keyboard-shortcuts

[cbind]

Hello Gary, thx for your awesome article. Is there an easy way to exclude keys from beeing pressed at the same time?

Example: If you have two key combinations like ctrl + arrowLeft and arrowLeft registered, there will be two events fired if you press ctrl + arrowLeft

[mwmw7]

When I add these two shortcuts, there was some error

shortcut([KeyCode.ControlLeft, KeyCode.KeyZ]).subscribe( console.log('a'));
shortcut([KeyCode.ControlLeft, KeyCode.ShiftLeft, KeyCode.KeyZ]).subscribe(console.log('b'));

If I type "ctrl + shift + z" then "ctrl + z" shortcut works together with "ctrl +shift +z" short

so I add some code to fix it

*/
export const shortcut = (shortcut: KeyCode[]): Observable<KeyboardEvent[]> => {
const pressedKeys = new Set();
// Observables for all keydown and keyup events
const keyDown$ = fromEvent(document, 'keydown')
.pipe(tap((event) => pressedKeys.add(event.code as KeyCode)));
const keyUp$ = fromEvent(document, 'keyup')
.pipe(tap((event) => pressedKeys.delete(event.code as KeyCode)));

// All KeyboardEvents - emitted only when KeyboardEvent changes (key or type)
const keyEvents$ = merge(keyDown$, keyUp$).pipe(
distinctUntilChanged((a, b) => a.code === b.code && a.type === b.type),
share()
);

// Create KeyboardEvent Observable for specified KeyCode
const createKeyPressStream = (charCode: KeyCode) => keyEvents$.pipe(
// tap((event) => console.log('createKeyPressStream event:', event)),
filter((event) => event.code === charCode.valueOf())
);

// Create Event Stream for every KeyCode in shortcut
const keyCodeEvents$ = shortcut.map((s) => createKeyPressStream(s));

// Emit when specified keys are pressed (keydown).
// Emit only when all specified keys are pressed at the same time.
// More on combineLatest below
return combineLatest(keyCodeEvents$)
.pipe(
tap((arr) => console.log('shortcut:', arr.length, 'pressedKeys:', pressedKeys.size)),
filter<KeyboardEvent[]>((arr) => arr.every((a) => a.type === 'keydown')),
filter<KeyboardEvent[]>((arr) => arr.length === pressedKeys.size)
);
};

[ova2]

Gary, great article! I want to adopt the solution for my project. But why do we need to observe both keydown and keyup events? Is it not enough to observe keydown only? Thanks in advance for your response.