Fix sending platform-specific shortcut keys to frontend before editor is initialized with the platform set

frontend/src/components/panels/Layers.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy, tick } from "svelte";
 
-	import { shortcutAltClick } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
 	import {
 		patchLayout,
@@ -10,6 +9,7 @@
 		UpdateLayersPanelControlBarLeftLayout,
 		UpdateLayersPanelControlBarRightLayout,
 		UpdateLayersPanelBottomBarLayout,
+		SendShortcutAltClick,
 	} from "@graphite/messages";
 	import type { ActionShortcut, DataBuffer, LayerPanelEntry, Layout } from "@graphite/messages";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
@@ -73,9 +73,13 @@
 	let layersPanelControlBarRightLayout: Layout = [];
 	let layersPanelBottomBarLayout: Layout = [];
 
-	const altClickKeys: ActionShortcut = shortcutAltClick();
+	let altClickShortcut: ActionShortcut | undefined;
 
 	onMount(() => {
+		editor.subscriptions.subscribeJsMessage(SendShortcutAltClick, async (data) => {
+			altClickShortcut = data.shortcut;
+		});
+
 		editor.subscriptions.subscribeJsMessage(UpdateLayersPanelControlBarLeftLayout, (updateLayersPanelControlBarLeftLayout) => {
 			patchLayout(layersPanelControlBarLeftLayout, updateLayersPanelControlBarLeftLayout);
 			layersPanelControlBarLeftLayout = layersPanelControlBarLeftLayout;
@@ -624,7 +628,7 @@
 								? "Hide the layers nested within. (To affect all open descendants, perform the shortcut shown.)"
 								: "Show the layers nested within. (To affect all closed descendants, perform the shortcut shown.)") +
 								(listing.entry.ancestorOfSelected && !listing.entry.expanded ? "\n\nNote: a selected layer is currently contained within.\n" : "")}
-							data-tooltip-shortcut={altClickKeys?.shortcut ? JSON.stringify(altClickKeys.shortcut) : undefined}
+							data-tooltip-shortcut={altClickShortcut?.shortcut ? JSON.stringify(altClickShortcut.shortcut) : undefined}
 							on:click={(e) => handleExpandArrowClickWithModifiers(e, listing.entry.id)}
 							tabindex="0"
 						></button>
@@ -636,7 +640,7 @@
 							icon="Clipped"
 							class="clipped-arrow"
 							tooltipDescription="Clipping mask is active. To release it, perform the shortcut on the layer border."
-							tooltipShortcut={altClickKeys}
+							tooltipShortcut={altClickShortcut}
 						/>
 					{/if}
 					<div class="thumbnail">

frontend/src/components/panels/Welcome.svelte

@@ -21,8 +21,6 @@
 			patchLayout(welcomePanelButtonsLayout, updateWelcomeScreenButtonsLayout);
 			welcomePanelButtonsLayout = welcomePanelButtonsLayout;
 		});
-
-		editor.handle.requestWelcomeScreenButtonsLayout();
 	});
 
 	onDestroy(() => {

frontend/src/components/window/title-bar/WindowButtonsWeb.svelte

@@ -1,16 +1,24 @@
 <script lang="ts">
-	import { getContext } from "svelte";
+	import { getContext, onMount } from "svelte";
 
-	import { shortcutF11 } from "@graphite/../wasm/pkg/graphite_wasm";
+	import type { Editor } from "@graphite/editor";
 	import type { ActionShortcut } from "@graphite/messages";
+	import { SendShortcutF11 } from "@graphite/messages";
 	import type { FullscreenState } from "@graphite/state-providers/fullscreen";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
 	const fullscreen = getContext<FullscreenState>("fullscreen");
+	const editor = getContext<Editor>("editor");
 
-	const f11Keys: ActionShortcut = shortcutF11();
+	let f11Shortcut: ActionShortcut | undefined = undefined;
+
+	onMount(() => {
+		editor.subscriptions.subscribeJsMessage(SendShortcutF11, async (data) => {
+			f11Shortcut = data.shortcut;
+		});
+	});
 
 	async function handleClick() {
 		if ($fullscreen.windowFullscreen) fullscreen.exitFullscreen();
@@ -23,7 +31,7 @@
 	on:click={handleClick}
 	tooltipLabel={$fullscreen.windowFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
 	tooltipDescription={$fullscreen.keyboardLockApiSupported ? "While fullscreen, keyboard shortcuts normally reserved by the browser become available." : ""}
-	tooltipShortcut={f11Keys}
+	tooltipShortcut={f11Shortcut}
 >
 	<IconLabel icon={$fullscreen.windowFullscreen ? "FullscreenExit" : "FullscreenEnter"} />
 </LayoutRow>

frontend/src/messages.ts

@@ -109,6 +109,16 @@ export class SendUIMetadata extends JsMessage {
 	readonly nodeTypes!: FrontendNodeType[];
 }
 
+export class SendShortcutF11 extends JsMessage {
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	readonly shortcut!: ActionShortcut | undefined;
+}
+
+export class SendShortcutAltClick extends JsMessage {
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	readonly shortcut!: ActionShortcut | undefined;
+}
+
 export class UpdateNodeThumbnail extends JsMessage {
 	readonly id!: bigint;
 
@@ -1675,6 +1685,8 @@ export const messageMakers: Record<string, MessageMaker> = {
 	DisplayEditableTextboxTransform,
 	DisplayRemoveEditableTextbox,
 	SendUIMetadata,
+	SendShortcutF11,
+	SendShortcutAltClick,
 	TriggerAboutGraphiteLocalizedCommitDate,
 	TriggerDisplayThirdPartyLicensesDialog,
 	TriggerExportImage,

frontend/wasm/src/editor_api.rs

@@ -7,9 +7,8 @@
 use crate::helpers::translate_key;
 use crate::{EDITOR_HANDLE, EDITOR_HAS_CRASHED, Error, MESSAGE_BUFFER};
 use editor::consts::FILE_EXTENSION;
-use editor::messages::input_mapper::utility_types::input_keyboard::{Key, KeysGroup, ModifierKeys};
+use editor::messages::input_mapper::utility_types::input_keyboard::ModifierKeys;
 use editor::messages::input_mapper::utility_types::input_mouse::{EditorMouseState, ScrollDelta};
-use editor::messages::input_mapper::utility_types::misc::ActionShortcut;
 use editor::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
 use editor::messages::portfolio::document::utility_types::network_interface::ImportOrExport;
 use editor::messages::portfolio::utility_types::Platform;
@@ -68,18 +67,6 @@ pub fn is_platform_native() -> bool {
 	}
 }
 
-#[wasm_bindgen(js_name = shortcutAltClick)]
-pub fn shortcut_alt_click() -> JsValue {
-	let shortcut = Some(ActionShortcut::Shortcut(KeysGroup(vec![Key::Alt, Key::MouseLeft]).into()));
-	serde_wasm_bindgen::to_value(&shortcut).unwrap()
-}
-
-#[wasm_bindgen(js_name = shortcutF11)]
-pub fn shortcut_f11() -> JsValue {
-	let shortcut = Some(ActionShortcut::Shortcut(KeysGroup(vec![Key::F11]).into()));
-	serde_wasm_bindgen::to_value(&shortcut).unwrap()
-}
-
 // ============================================================================
 
 /// This struct is, via wasm-bindgen, used by JS to interact with the editor backend. It does this by calling functions, which are `impl`ed
@@ -405,12 +392,6 @@ impl EditorHandle {
 		self.dispatch(message);
 	}
 
-	#[wasm_bindgen(js_name = requestWelcomeScreenButtonsLayout)]
-	pub fn request_welcome_screen_buttons_layout(&self) {
-		let message = PortfolioMessage::RequestWelcomeScreenButtonsLayout;
-		self.dispatch(message);
-	}
-
 	#[wasm_bindgen(js_name = openDocumentFile)]
 	pub fn open_document_file(&self, document_name: String, document_serialized_content: String) {
 		let message = PortfolioMessage::OpenDocumentFile {