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