1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
|
import { isAppleDevice, isDOMElement, isTypableElement } from "@/lib/utils";
import { useEffect } from "react";
import { ActionWithOptionalArgs, invokeAction } from "./actions";
/**
* This variable keeps track whether keybindings are being accepted
* true -> Keybindings are checked
* false -> Key presses are ignored (Keybindings are not checked)
*/
let keybindingsEnabled = true;
/**
* Alt is also regarded as macOS OPTION (⌥) key
* Ctrl is also regarded as macOS COMMAND (⌘) key (NOTE: this differs from HTML Keyboard spec where COMMAND is Meta key!)
*/
type ModifierKeys =
| "ctrl"
| "alt"
| "shift"
| "ctrl-shift"
| "alt-shift"
| "ctrl-alt"
| "ctrl-alt-shift";
/* eslint-disable prettier/prettier */
// prettier-ignore
type Key =
| "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j"
| "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t"
| "u" | "v" | "w" | "x" | "y" | "z" | "0" | "1" | "2" | "3"
| "4" | "5" | "6" | "7" | "8" | "9" | "up" | "down" | "left"
| "right" | "/" | "?" | "." | "enter" | "tab" | "space" | "home"
| "end" | "delete" | "backspace";
/* eslint-enable */
type ModifierBasedShortcutKey = `${ModifierKeys}-${Key}`;
// Singular keybindings (these will be disabled when an input-ish area has been focused)
type SingleCharacterShortcutKey = `${Key}`;
type ShortcutKey = ModifierBasedShortcutKey | SingleCharacterShortcutKey;
// Base bindings available on all platforms
const baseBindings: {
[_ in ShortcutKey]?: ActionWithOptionalArgs;
} = {
space: "toggle-play",
j: "seek-backward",
k: "toggle-play",
l: "seek-forward",
left: "frame-step-backward",
right: "frame-step-forward",
"shift-left": "jump-backward",
"shift-right": "jump-forward",
home: "goto-start",
end: "goto-end",
s: "split-element",
n: "toggle-snapping",
"ctrl-a": "select-all",
"ctrl-d": "duplicate-selected",
"ctrl-z": "undo",
"ctrl-shift-z": "redo",
"ctrl-y": "redo",
delete: "delete-selected",
backspace: "delete-selected",
};
/**
* Get bindings based on the current kernel mode
*/
function getActiveBindings(): typeof baseBindings {
return baseBindings;
}
export const bindings = getActiveBindings();
/**
* A composable that hooks to the caller component's
* lifecycle and hooks to the keyboard events to fire
* the appropriate actions based on keybindings
*/
export function useKeybindingsListener() {
useEffect(() => {
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("keydown", handleKeyDown);
};
}, []);
}
function handleKeyDown(ev: KeyboardEvent) {
// Do not check keybinds if the mode is disabled
if (!keybindingsEnabled) return;
const binding = generateKeybindingString(ev);
if (!binding) return;
const activeBindings = getActiveBindings();
const boundAction = activeBindings[binding];
if (!boundAction) return;
ev.preventDefault();
invokeAction(boundAction, undefined, "keypress");
}
function generateKeybindingString(ev: KeyboardEvent): ShortcutKey | null {
const target = ev.target;
// We may or may not have a modifier key
const modifierKey = getActiveModifier(ev);
// We will always have a non-modifier key
const key = getPressedKey(ev);
if (!key) return null;
// All key combos backed by modifiers are valid shortcuts (whether currently typing or not)
if (modifierKey) {
// If the modifier is shift and the target is an input, we ignore
if (
modifierKey === "shift" &&
isDOMElement(target) &&
isTypableElement(target)
) {
return null;
}
return `${modifierKey}-${key}`;
}
// no modifier key here then we do not do anything while on input
if (isDOMElement(target) && isTypableElement(target)) return null;
// single key while not input
return `${key}`;
}
function getPressedKey(ev: KeyboardEvent): Key | null {
// Sometimes the property code is not available on the KeyboardEvent object
const key = (ev.key ?? "").toLowerCase();
// Check arrow keys
if (key.startsWith("arrow")) {
return key.slice(5) as Key;
}
// Check for Tab key
if (key === "tab") return "tab";
// Check for special keys
if (key === "home") return "home";
if (key === "end") return "end";
if (key === "delete") return "delete";
if (key === "backspace") return "backspace";
// Check letter keys
const isLetter = key.length === 1 && key >= "a" && key <= "z";
if (isLetter) return key as Key;
// Check if number keys
const isDigit = key.length === 1 && key >= "0" && key <= "9";
if (isDigit) return key as Key;
// Check if slash, period or enter
if (key === "/" || key === "." || key === "enter") return key;
// If no other cases match, this is not a valid key
return null;
}
function getActiveModifier(ev: KeyboardEvent): ModifierKeys | null {
const modifierKeys = {
ctrl: isAppleDevice() ? ev.metaKey : ev.ctrlKey,
alt: ev.altKey,
shift: ev.shiftKey,
};
// active modifier: ctrl | alt | ctrl-alt | ctrl-shift | ctrl-alt-shift | alt-shift
// modiferKeys object's keys are sorted to match the above order
const activeModifier = Object.keys(modifierKeys)
.filter((key) => modifierKeys[key as keyof typeof modifierKeys])
.join("-");
return activeModifier === "" ? null : (activeModifier as ModifierKeys);
}
/**
* This composable allows for the UI component to be disabled if the component in question is mounted
*/
export function useKeybindingDisabler() {
// TODO: Move to a lock based system that keeps the bindings disabled until all locks are lifted
const disableKeybindings = () => {
keybindingsEnabled = false;
};
const enableKeybindings = () => {
keybindingsEnabled = true;
};
return {
disableKeybindings,
enableKeybindings,
};
}
|
