Add full support for Mac-specific keyboard layouts (#736)

* IPP for Mac, flawed initial experiments

* Cleanup and progress, but not compiling yet

* Fix error and rename nonmac -> standard

* Extentd ipp macros to accomodate mac input

* Add Mac versions of shortcuts; refactor and document the input mapper macros

* Change frontend styling for user input labels in floating menus

* Additional macro documentation

* A little more documentation

* Improve entry macro syntax

* Move input mapper macros to a separate file

* Adapt the keyboard shortcuts to the user's OS

* Display keyboard shortcuts in the menu bar based on OS

* Change Input Mapper macro syntax from {} to ()

* Fix esc key bug in Vue

* Tweaks

* Interim solution for Mac-specific hints

* Feed tooltip input hotkeys from their actions

* Fix hotkeys for tools because of missing actions

* Make Vue respect Ctrl/Cmd differences per platform

* Remove commented lines

* Code review pass by me

* Code review suggestions with TrueDoctor

* Turn FutureKeyMapping struct into ActionKeys enum which is a bit cleaner

* Add serde derive attributes for message discriminants

* Re-add serde deserialize

* Fix not mutating ActionKeys conversion; remove custom serializer

* Add serde to dev dependencies

Co-authored-by: Dennis <dennis@kobert.dev>

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

@@ -29,7 +29,8 @@
 			@focus="() => $emit('textFocused')"
 			@blur="() => $emit('textChanged')"
 			@change="() => $emit('textChanged')"
-			@keydown.ctrl.enter="() => $emit('textChanged')"
+			@keydown.ctrl.enter="() => !macKeyboardLayout && $emit('textChanged')"
+			@keydown.meta.enter="() => macKeyboardLayout && $emit('textChanged')"
 			@keydown.esc="() => $emit('cancelTextChange')"
 		></textarea>
 		<label v-if="label" :for="`field-input-${id}`">{{ label }}</label>
@@ -116,6 +117,8 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import { operatingSystemIsMac } from "@/utility-functions/platform";
+
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 
 export default defineComponent({
@@ -130,6 +133,7 @@ export default defineComponent({
 	data() {
 		return {
 			id: `${Math.random()}`.substring(2),
+			macKeyboardLayout: operatingSystemIsMac(),
 		};
 	},
 	computed: {

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

@@ -101,7 +101,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 ? shortcutRequiresLock(entry.shortcut) : undefined,
+						shortcutRequiresLock: entry.shortcut?.keys ? shortcutRequiresLock(entry.shortcut.keys) : undefined,
 					}))
 				);
 

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

@@ -1,5 +1,6 @@
 <template>
-	<LayoutRow class="user-input-label">
+	<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">
@@ -45,15 +46,14 @@
 		font-family: "Inconsolata", monospace;
 		font-weight: 400;
 		text-align: center;
-		color: var(--color-e-nearwhite);
-		border: 1px;
-		box-sizing: border-box;
-		border-style: solid;
-		border-color: var(--color-7-middlegray);
-		border-radius: 4px;
 		height: 16px;
 		// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height, so moving it up 1 pixel by using 15px makes them agree
 		line-height: 15px;
+		box-sizing: border-box;
+		border: 1px solid;
+		border-radius: 4px;
+		border-color: var(--color-7-middlegray);
+		color: var(--color-e-nearwhite);
 
 		&.width-16 {
 			width: 16px;
@@ -93,6 +93,40 @@
 	.hint-text {
 		margin-left: 4px;
 	}
+
+	.floating-menu-content & {
+		.input-key {
+			border-color: var(--color-4-dimgray);
+			color: var(--color-8-uppergray);
+		}
+
+		.input-key .icon-label svg,
+		&.keyboard-lock-notice.keyboard-lock-notice svg,
+		.input-mouse .bright {
+			fill: var(--color-8-uppergray);
+		}
+
+		.input-mouse .dim {
+			fill: var(--color-4-dimgray);
+		}
+	}
+
+	.floating-menu-content .row:hover > & {
+		.input-key {
+			border-color: var(--color-7-middlegray);
+			color: var(--color-9-palegray);
+		}
+
+		.input-key .icon-label svg,
+		&.keyboard-lock-notice.keyboard-lock-notice svg,
+		.input-mouse .bright {
+			fill: var(--color-9-palegray);
+		}
+
+		.input-mouse .dim {
+			fill: var(--color-7-middlegray);
+		}
+	}
 }
 </style>
 
@@ -100,92 +134,123 @@
 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 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: "}",
+};
+const iconsAndWidthsStandard = {
+	ArrowUp: 1,
+	ArrowRight: 1,
+	ArrowDown: 1,
+	ArrowLeft: 1,
+	Backspace: 2,
+	Enter: 2,
+	Tab: 2,
+	Space: 3,
+};
+const iconsAndWidthsMac = {
+	Shift: 2,
+	Control: 2,
+	Option: 2,
+	Command: 2,
+};
+
 export default defineComponent({
-	components: {
-		IconLabel,
-		LayoutRow,
-	},
+	inject: ["fullscreen"],
 	props: {
-		inputKeys: { type: Array as PropType<HintInfo["key_groups"]>, default: () => [] },
+		inputKeys: { type: Array as PropType<HintInfo["keyGroups"]>, default: () => [] },
 		inputMouse: { type: String as PropType<HintInfo["mouse"]>, default: null },
+		requiresLock: { type: Boolean as PropType<boolean>, default: false },
 	},
 	computed: {
 		hasSlotContent(): boolean {
 			return Boolean(this.$slots.default);
 		},
+		keyboardLockInfoMessage(): string {
+			const USE_FULLSCREEN = "This hotkey is reserved by the browser, but becomes available in fullscreen mode";
+			const SWITCH_BROWSER = "This hotkey is reserved by the browser, but becomes available in Chrome, Edge, and Opera which support the Keyboard.lock() API";
+
+			return this.fullscreen.keyboardLockApiSupported ? USE_FULLSCREEN : SWITCH_BROWSER;
+		},
+		displayKeyboardLockNotice(): boolean {
+			return this.requiresLock && !this.fullscreen.state.keyboardLocked;
+		},
 	},
 	methods: {
 		keyTextOrIconList(keyGroup: KeysGroup): { text: string | null; icon: IconName | null; width: string }[] {
 			return keyGroup.map((inputKey) => this.keyTextOrIcon(inputKey));
 		},
-		keyTextOrIcon(keyText: string): { text: string | null; icon: IconName | null; width: string } {
-			// Definitions
-			const textMap: Record<string, string> = {
-				Control: "Ctrl",
-				Alt: "Alt",
-				Delete: "Del",
-				PageUp: "PgUp",
-				PageDown: "PgDn",
-				Equals: "=",
-				Minus: "-",
-				Plus: "+",
-				Escape: "Esc",
-				Comma: ",",
-				Period: ".",
-				LeftBracket: "[",
-				RightBracket: "]",
-				LeftCurlyBracket: "{",
-				RightCurlyBracket: "}",
-			};
-			const iconsAndWidths: Record<string, number> = {
-				ArrowUp: 1,
-				ArrowRight: 1,
-				ArrowDown: 1,
-				ArrowLeft: 1,
-				Backspace: 2,
-				Command: 2,
-				Enter: 2,
-				Option: 2,
-				Shift: 2,
-				Tab: 2,
-				Space: 3,
-			};
+		keyTextOrIcon(input: string): { text: string | null; icon: IconName | null; width: string } {
+			let keyText = input;
+			if (operatingSystemIsMac()) {
+				keyText = keyText.replace("Alt", "Option");
+			}
+
+			const iconsAndWidths = operatingSystemIsMac() ? { ...iconsAndWidthsStandard, ...iconsAndWidthsMac } : iconsAndWidthsStandard;
 
 			// Strip off the "Key" prefix
 			const text = keyText.replace(/^(?:Key)?(.*)$/, "$1");
 
 			// If it's an icon, return the icon identifier
-			if (text in iconsAndWidths) {
+			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-${iconsAndWidths[text] * 8 + 8}`,
+					width: `width-${width}`,
 				};
 			}
 
 			// Otherwise, return the text string
 			let result;
-
 			// Letters and numbers
-			if (/^[A-Z0-9]$/.test(text)) result = text;
+			if (/^[A-Z0-9]$/.test(text)) {
+				result = text;
+			}
 			// Abbreviated names
-			else if (text in textMap) result = textMap[text];
+			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;
+			else {
+				result = text;
+			}
 
 			return { text: result, icon: null, width: `width-${(result || " ").length * 8 + 8}` };
 		},
 		mouseHintIcon(input: HintInfo["mouse"]): IconName {
 			return `MouseHint${input}` as IconName;
 		},
-		keyboardHintIcon(input: HintInfo["key_groups"][0][0]): IconName {
+		keyboardHintIcon(input: HintInfo["keyGroups"][0][0]): IconName {
 			return `Keyboard${input}` as IconName;
 		},
 	},
+	components: {
+		IconLabel,
+		LayoutRow,
+	},
 });
 </script>