Revamp key/code input processing which fixes Option key on Mac and other locales

Closes #742
Closes #746

frontend/src/components/floating-menus/MenuList.vue

@@ -33,7 +33,7 @@
 
 					<span class="entry-label" :style="{ fontFamily: `${!entry.font ? 'inherit' : entry.value}` }">{{ entry.label }}</span>
 
-					<UserInputLabel v-if="entry.shortcut?.keys.length" :inputKeys="[entry.shortcut.keys]" :requiresLock="entry.shortcutRequiresLock" />
+					<UserInputLabel v-if="entry.shortcut?.keys.length" :keysWithLabelsGroups="[entry.shortcut.keys]" :requiresLock="entry.shortcutRequiresLock" />
 
 					<div class="submenu-arrow" v-if="entry.children?.length"></div>
 					<div class="no-submenu-arrow" v-else></div>

frontend/src/components/panels/LayerTree.vue

@@ -267,7 +267,7 @@
 <script lang="ts">
 import { defineComponent, nextTick } from "vue";
 
-import { operatingSystemIsMac } from "@/utility-functions/platform";
+import { platformIsMac } from "@/utility-functions/platform";
 import { defaultWidgetLayout, UpdateDocumentLayerTreeStructure, UpdateDocumentLayerDetails, UpdateLayerTreeOptionsLayout, LayerPanelEntry } from "@/wasm-communication/messages";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
@@ -350,9 +350,9 @@ export default defineComponent({
 		async selectLayer(ctrl: boolean, cmd: boolean, shift: boolean, listing: LayerListingInfo, event: Event) {
 			if (listing.editingName) return;
 
-			const ctrlOrCmd = operatingSystemIsMac() ? cmd : ctrl;
+			const ctrlOrCmd = platformIsMac() ? cmd : ctrl;
 			// Pressing the Ctrl key on a Mac, or the Cmd key on another platform, is a violation of the `.exact` qualifier so we filter it out here
-			const opposite = operatingSystemIsMac() ? ctrl : cmd;
+			const opposite = platformIsMac() ? ctrl : cmd;
 
 			if (!opposite) this.editor.instance.select_layer(listing.entry.path, ctrlOrCmd, shift);
 

frontend/src/components/widgets/inputs/FieldInput.vue

@@ -117,7 +117,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { operatingSystemIsMac } from "@/utility-functions/platform";
+import { platformIsMac } from "@/utility-functions/platform";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 
@@ -133,7 +133,7 @@ export default defineComponent({
 	data() {
 		return {
 			id: `${Math.random()}`.substring(2),
-			macKeyboardLayout: operatingSystemIsMac(),
+			macKeyboardLayout: platformIsMac(),
 		};
 	},
 	computed: {

frontend/src/components/widgets/inputs/MenuBarInput.vue

@@ -72,18 +72,20 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { operatingSystemIsMac } from "@/utility-functions/platform";
-import { MenuEntry, UpdateMenuBarLayout, MenuListEntry } from "@/wasm-communication/messages";
+import { platformIsMac } from "@/utility-functions/platform";
+import { MenuEntry, UpdateMenuBarLayout, MenuListEntry, KeyRaw, KeysGroup } from "@/wasm-communication/messages";
 
 import MenuList from "@/components/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 // TODO: Apparently, Safari does not support the Keyboard.lock() API but does relax its authority over certain keyboard shortcuts in fullscreen mode, which we should handle correctly
-const controlOrCommand = operatingSystemIsMac() ? "KeyCommand" : "KeyControl";
-const LOCK_REQUIRING_SHORTCUTS = [
-	[controlOrCommand, "KeyN"],
-	[controlOrCommand, "KeyShift", "KeyT"],
+const controlOrCommand = platformIsMac() ? "Command" : "Control";
+const LOCK_REQUIRING_SHORTCUTS: KeyRaw[][] = [
 	[controlOrCommand, "KeyW"],
+	[controlOrCommand, "KeyN"],
+	[controlOrCommand, "Shift", "KeyN"],
+	[controlOrCommand, "KeyT"],
+	[controlOrCommand, "Shift", "KeyT"],
 ];
 
 type FrontendMenuColumn = {
@@ -96,7 +98,13 @@ export default defineComponent({
 	inject: ["editor"],
 	mounted() {
 		this.editor.subscriptions.subscribeJsMessage(UpdateMenuBarLayout, (updateMenuBarLayout) => {
-			const shortcutRequiresLock = (shortcut: string[]): boolean => LOCK_REQUIRING_SHORTCUTS.some((lockKeyCombo) => shortcut.every((shortcutKey, index) => shortcutKey === lockKeyCombo[index]));
+			const arraysEqual = (a: KeyRaw[], b: KeyRaw[]): boolean => a.length === b.length && a.every((aValue, i) => aValue === b[i]);
+			const shortcutRequiresLock = (shortcut: KeysGroup): boolean => {
+				const shortcutKeys = shortcut.map((keyWithLabel) => keyWithLabel.key);
+
+				// If this shortcut matches any of the browser-reserved shortcuts
+				return LOCK_REQUIRING_SHORTCUTS.some((lockKeyCombo) => arraysEqual(shortcutKeys, lockKeyCombo));
+			};
 
 			const menuEntryToFrontendMenuEntry = (subLayout: MenuEntry[][]): FrontendMenuEntry[][] =>
 				subLayout.map((group) =>
@@ -104,7 +112,7 @@ export default defineComponent({
 						...entry,
 						children: entry.children ? menuEntryToFrontendMenuEntry(entry.children) : undefined,
 						action: (): void => this.editor.instance.update_layout(updateMenuBarLayout.layout_target, entry.action.widgetId, undefined),
-						shortcutRequiresLock: entry.shortcut?.keys ? shortcutRequiresLock(entry.shortcut.keys) : undefined,
+						shortcutRequiresLock: entry.shortcut ? shortcutRequiresLock(entry.shortcut.keys) : undefined,
 					}))
 				);
 

frontend/src/components/widgets/labels/UserInputLabel.vue

@@ -1,17 +1,17 @@
 <template>
 	<IconLabel class="user-input-label keyboard-lock-notice" v-if="displayKeyboardLockNotice" :icon="'Info'" :title="keyboardLockInfoMessage" />
 	<LayoutRow class="user-input-label" v-else>
-		<template v-for="(keyGroup, keyGroupIndex) in inputKeys" :key="keyGroupIndex">
-			<span class="group-gap" v-if="keyGroupIndex > 0"></span>
-			<template v-for="(keyInfo, index) in keyTextOrIconList(keyGroup)" :key="index">
+		<template v-for="(keysWithLabels, i) in keysWithLabelsGroups" :key="i">
+			<span class="group-gap" v-if="i > 0"></span>
+			<template v-for="(keyInfo, j) in keyTextOrIconList(keysWithLabels)" :key="j">
 				<span class="input-key" :class="keyInfo.width">
 					<IconLabel v-if="keyInfo.icon" :icon="keyInfo.icon" />
-					<template v-else>{{ keyInfo.text }}</template>
+					<template v-else-if="keyInfo.label !== undefined">{{ keyInfo.label }}</template>
 				</span>
 			</template>
 		</template>
-		<span class="input-mouse" v-if="inputMouse">
-			<IconLabel :icon="mouseHintIcon(inputMouse)" />
+		<span class="input-mouse" v-if="mouseMotion">
+			<IconLabel :icon="mouseHintIcon(mouseMotion)" />
 		</span>
 		<span class="hint-text" v-if="hasSlotContent">
 			<slot></slot>
@@ -54,23 +54,23 @@
 		border-color: var(--color-7-middlegray);
 		color: var(--color-e-nearwhite);
 
-		&.width-16 {
+		&.width-1 {
 			width: 16px;
 		}
 
-		&.width-24 {
+		&.width-2 {
 			width: 24px;
 		}
 
-		&.width-32 {
+		&.width-3 {
 			width: 32px;
 		}
 
-		&.width-40 {
+		&.width-4 {
 			width: 40px;
 		}
 
-		&.width-48 {
+		&.width-5 {
 			width: 48px;
 		}
 
@@ -133,32 +133,22 @@
 import { defineComponent, PropType } from "vue";
 
 import { IconName } from "@/utility-functions/icons";
-import { operatingSystemIsMac } from "@/utility-functions/platform";
-import { HintInfo, KeysGroup } from "@/wasm-communication/messages";
+import { platformIsMac } from "@/utility-functions/platform";
+import { KeyRaw, KeysGroup, Key, MouseMotion } from "@/wasm-communication/messages";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
-// Definitions
-const textMap = {
-	Shift: "Shift",
-	Control: "Ctrl",
-	Alt: "Alt",
-	Delete: "Del",
-	PageUp: "PgUp",
-	PageDown: "PgDn",
-	Equals: "=",
-	Minus: "-",
-	Plus: "+",
-	Escape: "Esc",
-	Comma: ",",
-	Period: ".",
-	LeftBracket: "[",
-	RightBracket: "]",
-	LeftCurlyBracket: "{",
-	RightCurlyBracket: "}",
+type LabelData = { label?: string; icon?: IconName; width: string };
+
+// Keys that become icons if they are listed here with their units of width
+const ICON_WIDTHS_MAC = {
+	Shift: 2,
+	Control: 2,
+	Option: 2,
+	Command: 2,
 };
-const iconsAndWidthsStandard = {
+const ICON_WIDTHS = {
 	ArrowUp: 1,
 	ArrowRight: 1,
 	ArrowDown: 1,
@@ -167,19 +157,14 @@ const iconsAndWidthsStandard = {
 	Enter: 2,
 	Tab: 2,
 	Space: 3,
-};
-const iconsAndWidthsMac = {
-	Shift: 2,
-	Control: 2,
-	Option: 2,
-	Command: 2,
+	...(platformIsMac() ? ICON_WIDTHS_MAC : {}),
 };
 
 export default defineComponent({
 	inject: ["fullscreen"],
 	props: {
-		inputKeys: { type: Array as PropType<HintInfo["keyGroups"]>, default: () => [] },
-		inputMouse: { type: String as PropType<HintInfo["mouse"]>, default: null },
+		keysWithLabelsGroups: { type: Array as PropType<KeysGroup[]>, default: () => [] },
+		mouseMotion: { type: String as PropType<MouseMotion | null>, default: null },
 		requiresLock: { type: Boolean as PropType<boolean>, default: false },
 	},
 	computed: {
@@ -202,54 +187,58 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		keyTextOrIconList(keyGroup: KeysGroup): { text: string | null; icon: IconName | null; width: string }[] {
-			return keyGroup.map((inputKey) => this.keyTextOrIcon(inputKey));
+		keyTextOrIconList(keyGroup: KeysGroup): LabelData[] {
+			return keyGroup.map((key) => this.keyTextOrIcon(key));
 		},
-		keyTextOrIcon(input: string): { text: string | null; icon: IconName | null; width: string } {
-			let keyText = input;
-			if (operatingSystemIsMac()) {
-				keyText = keyText.replace("Alt", "Option");
-			}
+		keyTextOrIcon(keyWithLabel: Key): LabelData {
+			// `key` is the name of the `Key` enum in Rust, while `label` is the localized string to display (if it doesn't become an icon)
+			let key = keyWithLabel.key;
+			const label = keyWithLabel.label;
 
-			const iconsAndWidths = operatingSystemIsMac() ? { ...iconsAndWidthsStandard, ...iconsAndWidthsMac } : iconsAndWidthsStandard;
+			// Replace Alt with Option on Mac
+			if (key === "Alt" && platformIsMac()) key = "Option";
 
-			// Strip off the "Key" prefix
-			const text = keyText.replace(/^(?:Key)?(.*)$/, "$1");
+			// Either display an icon...
+			// @ts-expect-error We want undefined if it isn't in the object
+			const iconWidth: number | undefined = ICON_WIDTHS[key];
+			const icon = iconWidth !== undefined && iconWidth > 0 && (this.keyboardHintIcon(key) || false);
+			if (icon) return { icon, width: `width-${iconWidth}` };
 
-			// If it's an icon, return the icon identifier
-			if (Object.keys(iconsAndWidths).includes(text)) {
-				// @ts-expect-error This is safe because of the if block we are in
-				const width = iconsAndWidths[text] * 8 + 8;
-				return {
-					text: null,
-					icon: this.keyboardHintIcon(text),
-					width: `width-${width}`,
-				};
-			}
-
-			// Otherwise, return the text string
-			let result;
-			// Letters and numbers
-			if (/^[A-Z0-9]$/.test(text)) {
-				result = text;
-			}
-			// Abbreviated names
-			else if (Object.keys(textMap).includes(text)) {
-				// @ts-expect-error This is safe because of the if block we are in
-				result = textMap[text];
-			}
-			// Other
-			else {
-				result = text;
-			}
-
-			return { text: result, icon: null, width: `width-${(result || " ").length * 8 + 8}` };
+			// ...or display text
+			return { label, width: `width-${label.length}` };
 		},
-		mouseHintIcon(input: HintInfo["mouse"]): IconName {
+		mouseHintIcon(input: MouseMotion | null): IconName {
 			return `MouseHint${input}` as IconName;
 		},
-		keyboardHintIcon(input: HintInfo["keyGroups"][0][0]): IconName {
-			return `Keyboard${input}` as IconName;
+		keyboardHintIcon(input: KeyRaw): IconName | undefined {
+			switch (input) {
+				case "ArrowDown":
+					return "KeyboardArrowDown";
+				case "ArrowLeft":
+					return "KeyboardArrowLeft";
+				case "ArrowRight":
+					return "KeyboardArrowRight";
+				case "ArrowUp":
+					return "KeyboardArrowUp";
+				case "Backspace":
+					return "KeyboardBackspace";
+				case "Command":
+					return "KeyboardCommand";
+				case "Control":
+					return "KeyboardControl";
+				case "Enter":
+					return "KeyboardEnter";
+				case "Option":
+					return "KeyboardOption";
+				case "Shift":
+					return "KeyboardShift";
+				case "Space":
+					return "KeyboardSpace";
+				case "Tab":
+					return "KeyboardTab";
+				default:
+					return undefined;
+			}
 		},
 	},
 	components: {

frontend/src/components/window/status-bar/StatusBar.vue

@@ -5,7 +5,7 @@
 				<Separator :type="'Section'" v-if="index !== 0" />
 				<template v-for="hint in hintGroup" :key="hint">
 					<LayoutRow v-if="hint.plus" class="plus">+</LayoutRow>
-					<UserInputLabel :inputMouse="hint.mouse" :inputKeys="inputKeysForPlatform(hint)">{{ hint.label }}</UserInputLabel>
+					<UserInputLabel :mouseMotion="hint.mouse" :keysWithLabelsGroups="inputKeysForPlatform(hint)">{{ hint.label }}</UserInputLabel>
 				</template>
 			</template>
 		</LayoutRow>
@@ -48,7 +48,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { operatingSystemIsMac } from "@/utility-functions/platform";
+import { platformIsMac } from "@/utility-functions/platform";
 import { HintData, HintInfo, KeysGroup, UpdateInputHints } from "@/wasm-communication/messages";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -64,7 +64,7 @@ export default defineComponent({
 	},
 	methods: {
 		inputKeysForPlatform(hint: HintInfo): KeysGroup[] {
-			if (operatingSystemIsMac() && hint.keyGroupsMac) return hint.keyGroupsMac;
+			if (platformIsMac() && hint.keyGroupsMac) return hint.keyGroupsMac;
 			return hint.keyGroups;
 		},
 	},

frontend/src/components/window/workspace/Panel.vue

@@ -34,7 +34,7 @@
 									<TextButton :label="'New Document:'" :icon="'File'" :action="() => newDocument()" />
 								</td>
 								<td>
-									<UserInputLabel :inputKeys="[[...platformModifiers(true), 'KeyN']]" />
+									<UserInputLabel :keysWithLabelsGroups="[[...platformModifiers(true), { key: 'KeyN', label: 'N' }]]" />
 								</td>
 							</tr>
 							<tr>
@@ -42,7 +42,7 @@
 									<TextButton :label="'Open Document:'" :icon="'Folder'" :action="() => openDocument()" />
 								</td>
 								<td>
-									<UserInputLabel :inputKeys="[[...platformModifiers(false), 'KeyO']]" />
+									<UserInputLabel :keysWithLabelsGroups="[[...platformModifiers(false), { key: 'KeyO', label: 'O' }]]" />
 								</td>
 							</tr>
 						</table>
@@ -211,7 +211,9 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { operatingSystemIsMac } from "@/utility-functions/platform";
+import { platformIsMac } from "@/utility-functions/platform";
+
+import { KeysGroup, Key } from "@/wasm-communication/messages";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -255,14 +257,15 @@ export default defineComponent({
 		openDocument() {
 			this.editor.instance.document_open();
 		},
-		platformModifiers(reservedKey: boolean) {
+		platformModifiers(reservedKey: boolean): KeysGroup {
 			// TODO: Remove this by properly feeding these keys from a layout provided by the backend
 
-			if (operatingSystemIsMac()) {
-				return reservedKey ? ["KeyControl", "KeyCommand"] : ["KeyCommand"]; // TODO: Change Mac from Control+Command to Alt+Command when we can read Alt+letter modifiers
-			}
+			const ALT: Key = { key: "Alt", label: "Alt" };
+			const COMMAND: Key = { key: "Command", label: "Command" };
+			const CONTROL: Key = { key: "Control", label: "Control" };
 
-			return reservedKey ? ["KeyControl", "KeyAlt"] : ["KeyControl"];
+			if (platformIsMac()) return reservedKey ? [ALT, COMMAND] : [COMMAND];
+			return reservedKey ? [CONTROL, ALT] : [CONTROL];
 		},
 	},
 	components: {