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

Keavon · Keavon · commit 2ee8e56cefb1 · 2025-12-04T15:35:30.000-08:00
diff --git a/editor/src/messages/frontend/frontend_message.rs b/editor/src/messages/frontend/frontend_message.rs
@@ -1,5 +1,6 @@
 use super::utility_types::{DocumentDetails, MouseCursorIcon, OpenDocument};
 use crate::messages::app_window::app_window_message_handler::AppWindowPlatform;
+use crate::messages::input_mapper::utility_types::misc::ActionShortcut;
 use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::portfolio::document::node_graph::utility_types::{
 	BoxSelection, ContextMenuInformation, FrontendClickTargets, FrontendGraphInput, FrontendGraphOutput, FrontendNode, FrontendNodeType, NodeGraphErrorDiagnostic, Transform,
@@ -58,6 +59,12 @@ pub enum FrontendMessage {
 		#[serde(rename = "nodeTypes")]
 		node_types: Vec<FrontendNodeType>,
 	},
+	SendShortcutF11 {
+		shortcut: Option<ActionShortcut>,
+	},
+	SendShortcutAltClick {
+		shortcut: Option<ActionShortcut>,
+	},
 
 	// Trigger prefix: cause a browser API to do something
 	TriggerAboutGraphiteLocalizedCommitDate {
diff --git a/editor/src/messages/input_mapper/utility_types/misc.rs b/editor/src/messages/input_mapper/utility_types/misc.rs
@@ -136,16 +136,11 @@ pub enum ActionShortcut {
 
 impl ActionShortcut {
 	pub fn realize_shortcut(&mut self, action_input_mapping: &impl Fn(&MessageDiscriminant) -> Option<KeysGroup>) {
-		match self {
-			Self::Action(action) => {
-				if let Some(keys) = action_input_mapping(action) {
-					*self = Self::Shortcut(keys.into());
-				} else {
-					*self = Self::Shortcut(KeysGroup::default().into());
-				}
-			}
-			Self::Shortcut(shortcut) => {
-				warn!("Calling `.to_keys()` on a `ActionShortcut::Shortcut` is a mistake/bug. Shortcut is: {shortcut:?}.");
+		if let Self::Action(action) = self {
+			if let Some(keys) = action_input_mapping(action) {
+				*self = Self::Shortcut(keys.into());
+			} else {
+				*self = Self::Shortcut(KeysGroup::default().into());
 			}
 		}
 	}
diff --git a/editor/src/messages/layout/layout_message_handler.rs b/editor/src/messages/layout/layout_message_handler.rs
@@ -13,7 +13,7 @@ pub struct LayoutMessageContext<'a> {
 
 #[derive(Debug, Clone, Default, ExtractField)]
 pub struct LayoutMessageHandler {
-	layouts: [Layout; LayoutTarget::LayoutTargetLength as usize],
+	layouts: [Layout; LayoutTarget::_LayoutTargetLength as usize],
 }
 
 #[message_handler_data]
@@ -518,7 +518,8 @@ impl LayoutMessageHandler {
 			LayoutTarget::WelcomeScreenButtons => FrontendMessage::UpdateWelcomeScreenButtonsLayout { diff },
 			LayoutTarget::WorkingColors => FrontendMessage::UpdateWorkingColorsLayout { diff },
 
-			LayoutTarget::LayoutTargetLength => panic!("`LayoutTargetLength` is not a valid Layout Target and is used for array indexing"),
+			// KEEP THIS ENUM LAST
+			LayoutTarget::_LayoutTargetLength => panic!("`_LayoutTargetLength` is not a valid `LayoutTarget` and is used for array indexing"),
 		};
 
 		responses.add(message);
diff --git a/editor/src/messages/layout/utility_types/layout_widget.rs b/editor/src/messages/layout/utility_types/layout_widget.rs
@@ -56,7 +56,7 @@ pub enum LayoutTarget {
 
 	// KEEP THIS ENUM LAST
 	// This is a marker that is used to define an array that is used to hold widgets
-	LayoutTargetLength,
+	_LayoutTargetLength,
 }
 
 /// For use by structs that define a UI widget layout by implementing the layout() function belonging to this trait.
diff --git a/editor/src/messages/portfolio/menu_bar/menu_bar_message_handler.rs b/editor/src/messages/portfolio/menu_bar/menu_bar_message_handler.rs
@@ -689,7 +689,7 @@ impl LayoutHolder for MenuBarMessageHandler {
 								.on_commit(|_| DebugMessage::ToggleTraceLogs.into()),
 							MenuListEntry::new("Print Messages: Off")
 								.label("Print Messages: Off")
-								.icon(message_logging_verbosity_off.then_some({
+								.icon(if message_logging_verbosity_off {
 									#[cfg(not(target_os = "macos"))]
 									{
 										"SmallDot".to_string()
@@ -698,12 +698,12 @@ impl LayoutHolder for MenuBarMessageHandler {
 									{
 										"CheckboxChecked".to_string()
 									}
-								}).unwrap_or_default())
+								} else { Default::default() })
 								.tooltip_shortcut(action_shortcut!(DebugMessageDiscriminant::MessageOff))
 								.on_commit(|_| DebugMessage::MessageOff.into()),
 							MenuListEntry::new("Print Messages: Only Names")
 								.label("Print Messages: Only Names")
-								.icon(message_logging_verbosity_names.then_some({
+								.icon(if message_logging_verbosity_names {
 									#[cfg(not(target_os = "macos"))]
 									{
 										"SmallDot".to_string()
@@ -712,12 +712,12 @@ impl LayoutHolder for MenuBarMessageHandler {
 									{
 										"CheckboxChecked".to_string()
 									}
-								}).unwrap_or_default())
+								} else { Default::default() })
 								.tooltip_shortcut(action_shortcut!(DebugMessageDiscriminant::MessageNames))
 								.on_commit(|_| DebugMessage::MessageNames.into()),
 							MenuListEntry::new("Print Messages: Full Contents")
 								.label("Print Messages: Full Contents")
-								.icon(message_logging_verbosity_contents.then_some({
+								.icon(if message_logging_verbosity_contents {
 									#[cfg(not(target_os = "macos"))]
 									{
 										"SmallDot".to_string()
@@ -726,7 +726,7 @@ impl LayoutHolder for MenuBarMessageHandler {
 									{
 										"CheckboxChecked".to_string()
 									}
-								}).unwrap_or_default())
+								} else { Default::default() })
 								.tooltip_shortcut(action_shortcut!(DebugMessageDiscriminant::MessageContents))
 								.on_commit(|_| DebugMessage::MessageContents.into()),
 						],
diff --git a/editor/src/messages/portfolio/portfolio_message_handler.rs b/editor/src/messages/portfolio/portfolio_message_handler.rs
@@ -7,7 +7,8 @@ use crate::messages::animation::TimingInformation;
 use crate::messages::debug::utility_types::MessageLoggingVerbosity;
 use crate::messages::dialog::simple_dialogs;
 use crate::messages::frontend::utility_types::{DocumentDetails, OpenDocument};
-use crate::messages::input_mapper::utility_types::macros::action_shortcut;
+use crate::messages::input_mapper::utility_types::input_keyboard::Key;
+use crate::messages::input_mapper::utility_types::macros::{action_shortcut, action_shortcut_manual};
 use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::portfolio::document::DocumentMessageContext;
 use crate::messages::portfolio::document::graph_operation::utility_types::TransformIn;
@@ -154,6 +155,17 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 					node_types: document_node_definitions::collect_node_types(),
 				});
 
+				// Send shortcuts for widgets created in the frontend which need shortcut tooltips
+				responses.add(FrontendMessage::SendShortcutF11 {
+					shortcut: action_shortcut_manual!(Key::F11),
+				});
+				responses.add(FrontendMessage::SendShortcutAltClick {
+					shortcut: action_shortcut_manual!(Key::Alt, Key::MouseLeft),
+				});
+
+				// Before loading any documents, initially prepare the welcome screen buttons layout
+				responses.add(PortfolioMessage::RequestWelcomeScreenButtonsLayout);
+
 				// Tell frontend to finish loading persistent documents
 				responses.add(FrontendMessage::TriggerLoadRestAutoSaveDocuments);
 
@@ -1117,7 +1129,14 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 						})
 					})
 					.collect::<Vec<_>>();
+
+				let no_open_documents = open_documents.is_empty();
+
 				responses.add(FrontendMessage::UpdateOpenDocumentsList { open_documents });
+
+				if no_open_documents {
+					responses.add(PortfolioMessage::RequestWelcomeScreenButtonsLayout);
+				}
 			}
 			PortfolioMessage::UpdateVelloPreference => {
 				let active = if cfg!(target_family = "wasm") { false } else { preferences.use_vello };
diff --git a/editor/src/messages/tool/utility_types.rs b/editor/src/messages/tool/utility_types.rs
@@ -533,8 +533,8 @@ impl HintData {
 				for shortcut in &hint.key_groups {
 					widgets.push(ShortcutLabel::new(Some(ActionShortcut::Shortcut(shortcut.clone()))).widget_instance());
 				}
-				if let Some(mouse_movement) = &hint.mouse {
-					let mouse_movement = LabeledShortcut(vec![LabeledKeyOrMouseMotion::MouseMotion(mouse_movement.clone())]);
+				if let Some(mouse_movement) = hint.mouse {
+					let mouse_movement = LabeledShortcut(vec![LabeledKeyOrMouseMotion::MouseMotion(mouse_movement)]);
 					let shortcut = ActionShortcut::Shortcut(mouse_movement);
 					widgets.push(ShortcutLabel::new(Some(shortcut)).widget_instance());
 				}
diff --git a/frontend/src/components/panels/Layers.svelte b/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">
diff --git a/frontend/src/components/panels/Welcome.svelte b/frontend/src/components/panels/Welcome.svelte
@@ -21,8 +21,6 @@
 			patchLayout(welcomePanelButtonsLayout, updateWelcomeScreenButtonsLayout);
 			welcomePanelButtonsLayout = welcomePanelButtonsLayout;
 		});
-
-		editor.handle.requestWelcomeScreenButtonsLayout();
 	});
 
 	onDestroy(() => {
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte b/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>
diff --git a/frontend/src/messages.ts b/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,
diff --git a/frontend/wasm/src/editor_api.rs b/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 {

Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,7 @@ pub enum LayoutTarget {`
`56`	`56`
`57`	`57`	`// KEEP THIS ENUM LAST`
`58`	`58`	`// This is a marker that is used to define an array that is used to hold widgets`
`59`		`- LayoutTargetLength,`
	`59`	`+ _LayoutTargetLength,`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`/// For use by structs that define a UI widget layout by implementing the layout() function belonging to this trait.`
Original file line number	Diff line number	Diff line change
`@@ -689,7 +689,7 @@ impl LayoutHolder for MenuBarMessageHandler {`
`689`	`689`	`.on_commit(\|_\| DebugMessage::ToggleTraceLogs.into()),`
`690`	`690`	`MenuListEntry::new("Print Messages: Off")`
`691`	`691`	`.label("Print Messages: Off")`
`692`		`- .icon(message_logging_verbosity_off.then_some({`
	`692`	`+ .icon(if message_logging_verbosity_off {`
`693`	`693`	`#[cfg(not(target_os = "macos"))]`
`694`	`694`	`{`
`695`	`695`	`"SmallDot".to_string()`
`@@ -698,12 +698,12 @@ impl LayoutHolder for MenuBarMessageHandler {`
`698`	`698`	`{`
`699`	`699`	`"CheckboxChecked".to_string()`
`700`	`700`	`}`
`701`		`- }).unwrap_or_default())`
	`701`	`+ } else { Default::default() })`
`702`	`702`	`.tooltip_shortcut(action_shortcut!(DebugMessageDiscriminant::MessageOff))`
`703`	`703`	`.on_commit(\|_\| DebugMessage::MessageOff.into()),`
`704`	`704`	`MenuListEntry::new("Print Messages: Only Names")`
`705`	`705`	`.label("Print Messages: Only Names")`
`706`		`- .icon(message_logging_verbosity_names.then_some({`
	`706`	`+ .icon(if message_logging_verbosity_names {`
`707`	`707`	`#[cfg(not(target_os = "macos"))]`
`708`	`708`	`{`
`709`	`709`	`"SmallDot".to_string()`
`@@ -712,12 +712,12 @@ impl LayoutHolder for MenuBarMessageHandler {`
`712`	`712`	`{`
`713`	`713`	`"CheckboxChecked".to_string()`
`714`	`714`	`}`
`715`		`- }).unwrap_or_default())`
	`715`	`+ } else { Default::default() })`
`716`	`716`	`.tooltip_shortcut(action_shortcut!(DebugMessageDiscriminant::MessageNames))`
`717`	`717`	`.on_commit(\|_\| DebugMessage::MessageNames.into()),`
`718`	`718`	`MenuListEntry::new("Print Messages: Full Contents")`
`719`	`719`	`.label("Print Messages: Full Contents")`
`720`		`- .icon(message_logging_verbosity_contents.then_some({`
	`720`	`+ .icon(if message_logging_verbosity_contents {`
`721`	`721`	`#[cfg(not(target_os = "macos"))]`
`722`	`722`	`{`
`723`	`723`	`"SmallDot".to_string()`
`@@ -726,7 +726,7 @@ impl LayoutHolder for MenuBarMessageHandler {`
`726`	`726`	`{`
`727`	`727`	`"CheckboxChecked".to_string()`
`728`	`728`	`}`
`729`		`- }).unwrap_or_default())`
	`729`	`+ } else { Default::default() })`
`730`	`730`	`.tooltip_shortcut(action_shortcut!(DebugMessageDiscriminant::MessageContents))`
`731`	`731`	`.on_commit(\|_\| DebugMessage::MessageContents.into()),`
`732`	`732`	`],`
Original file line number	Diff line number	Diff line change
`@@ -533,8 +533,8 @@ impl HintData {`
`533`	`533`	`for shortcut in &hint.key_groups {`
`534`	`534`	`widgets.push(ShortcutLabel::new(Some(ActionShortcut::Shortcut(shortcut.clone()))).widget_instance());`
`535`	`535`	`}`
`536`		`- if let Some(mouse_movement) = &hint.mouse {`
`537`		`- let mouse_movement = LabeledShortcut(vec![LabeledKeyOrMouseMotion::MouseMotion(mouse_movement.clone())]);`
	`536`	`+ if let Some(mouse_movement) = hint.mouse {`
	`537`	`+ let mouse_movement = LabeledShortcut(vec![LabeledKeyOrMouseMotion::MouseMotion(mouse_movement)]);`
`538`	`538`	`let shortcut = ActionShortcut::Shortcut(mouse_movement);`
`539`	`539`	`widgets.push(ShortcutLabel::new(Some(shortcut)).widget_instance());`
`540`	`540`	`}`