Restyle and refactor shortcut labels to send hints bar and welcome screen layouts from Rust (#3447)

* Restyle UserInputLabel and refactor its usages to have all input its data sent from Rust

* Replace the welcome screen quick buttons with ones sent by backend

* Add the ShortcutLabel widget to the backend

* Replace hints bar with a backend-controlled layout; show mouse icons in place of mouse labels

Author: Keavon

desktop/wrapper/src/utils.rs

@@ -3,8 +3,8 @@ pub(crate) mod menu {
 	use base64::engine::Engine;
 	use base64::engine::general_purpose::STANDARD as BASE64;
 
-	use graphite_editor::messages::input_mapper::utility_types::input_keyboard::{Key, LayoutKey, LayoutKeysGroup};
-	use graphite_editor::messages::input_mapper::utility_types::misc::ActionKeys;
+	use graphite_editor::messages::input_mapper::utility_types::input_keyboard::{Key, LabeledKey, LabeledShortcut};
+	use graphite_editor::messages::input_mapper::utility_types::misc::ActionShortcut;
 	use graphite_editor::messages::layout::LayoutMessage;
 	use graphite_editor::messages::tool::tool_messages::tool_prelude::{LayoutGroup, LayoutTarget, MenuListEntry, SubLayout, Widget, WidgetId};
 
@@ -84,7 +84,7 @@ pub(crate) mod menu {
 		}
 
 		let shortcut = match shortcut_keys {
-			Some(ActionKeys::Keys(LayoutKeysGroup(keys))) => convert_layout_keys_to_shortcut(keys),
+			Some(ActionShortcut::Shortcut(LabeledShortcut(shortcut))) => convert_labeled_keys_to_shortcut(shortcut),
 			_ => None,
 		};
 
@@ -126,11 +126,11 @@ pub(crate) mod menu {
 		items
 	}
 
-	fn convert_layout_keys_to_shortcut(layout_keys: &Vec<LayoutKey>) -> Option<Shortcut> {
+	fn convert_labeled_keys_to_shortcut(labeled_keys: &Vec<LabeledKey>) -> Option<Shortcut> {
 		let mut key: Option<KeyCode> = None;
 		let mut modifiers = Modifiers::default();
-		for layout_key in layout_keys {
-			match layout_key.key() {
+		for labeled_key in labeled_keys {
+			match labeled_key.key() {
 				Key::Shift => modifiers |= Modifiers::SHIFT,
 				Key::Control => modifiers |= Modifiers::CONTROL,
 				Key::Alt => modifiers |= Modifiers::ALT,

editor/src/messages/frontend/frontend_message.rs

@@ -7,7 +7,6 @@ use crate::messages::portfolio::document::node_graph::utility_types::{
 use crate::messages::portfolio::document::utility_types::nodes::{JsRawBuffer, LayerPanelEntry, RawBuffer};
 use crate::messages::portfolio::document::utility_types::wires::{WirePath, WirePathUpdate};
 use crate::messages::prelude::*;
-use crate::messages::tool::utility_types::HintData;
 use glam::IVec2;
 use graph_craft::document::NodeId;
 use graphene_std::raster::Image;
@@ -257,10 +256,6 @@ pub enum FrontendMessage {
 	UpdateGraphFadeArtwork {
 		percentage: f64,
 	},
-	UpdateInputHints {
-		#[serde(rename = "hintData")]
-		hint_data: HintData,
-	},
 	UpdateLayersPanelControlBarLeftLayout {
 		#[serde(rename = "layoutTarget")]
 		layout_target: LayoutTarget,
@@ -335,6 +330,16 @@ pub enum FrontendMessage {
 		#[serde(rename = "wirePath")]
 		wire_path: Option<WirePath>,
 	},
+	UpdateWelcomeScreenButtonsLayout {
+		#[serde(rename = "layoutTarget")]
+		layout_target: LayoutTarget,
+		diff: Vec<WidgetDiff>,
+	},
+	UpdateStatusBarHintsLayout {
+		#[serde(rename = "layoutTarget")]
+		layout_target: LayoutTarget,
+		diff: Vec<WidgetDiff>,
+	},
 	UpdateWorkingColorsLayout {
 		#[serde(rename = "layoutTarget")]
 		layout_target: LayoutTarget,

editor/src/messages/input_mapper/utility_types/input_keyboard.rs

@@ -4,10 +4,18 @@ use bitflags::bitflags;
 use std::fmt::{self, Display, Formatter};
 use std::ops::{BitAnd, BitAndAssign, BitOr, BitOrAssign, BitXor, BitXorAssign};
 
+// ===========
+// StorageType
+// ===========
+
 // TODO: Increase size of type
 /// Edit this to specify the storage type used.
 pub type StorageType = u128;
 
+// =========
+// KeyStates
+// =========
+
 // Base-2 logarithm of the storage type used to represents how many bits you need to fully address every bit in that storage type
 const STORAGE_SIZE: u32 = (std::mem::size_of::<StorageType>() * 8).trailing_zeros();
 const STORAGE_SIZE_BITS: usize = 1 << STORAGE_SIZE;
@@ -23,11 +31,19 @@ pub fn all_required_modifiers_pressed(keyboard_state: &KeyStates, modifiers: &Ke
 	all_modifiers_without_pressed_modifiers.is_empty()
 }
 
+// ===========
+// KeyPosition
+// ===========
+
 pub enum KeyPosition {
 	Pressed,
 	Released,
 }
 
+// ============
+// ModifierKeys
+// ============
+
 bitflags! {
 	#[derive(Clone, Copy, Debug, PartialEq, Eq, Default, serde::Serialize, serde::Deserialize)]
 	#[repr(transparent)]
@@ -40,6 +56,10 @@ bitflags! {
 	}
 }
 
+// ===
+// Key
+// ===
+
 // Currently this is mostly based on the JS `KeyboardEvent.code` list: <https://www.w3.org/TR/uievents-code/>
 // But in the future, especially once users can customize keyboard mappings, we should deviate more from this so we have actual symbols
 // like `+` (which doesn't exist because it's the shifted version of `=` on the US keyboard, after which these scan codes are named).
@@ -198,14 +218,19 @@ pub enum Key {
 
 	// Other keys that aren't part of the W3C spec
 	//
-	/// "Cmd" on Mac (not present on other platforms)
+	/// "Cmd" on Mac (not present on other platforms).
 	Command,
-	/// "Ctrl" on Windows/Linux, "Cmd" on Mac
+	/// "Ctrl" on Windows/Linux, "Cmd" on Mac.
 	Accel,
+	/// Left mouse button click (LMB).
 	MouseLeft,
+	/// Right mouse button click (RMB).
 	MouseRight,
+	/// Middle mouse button click (MMB).
 	MouseMiddle,
+	/// Mouse backward navigation button (typically on the side of the mouse).
 	MouseBack,
+	/// Mouse forward navigation button (typically on the side of the mouse).
 	MouseForward,
 
 	// Fake keys for displaying special labels in the UI
@@ -225,11 +250,11 @@ impl fmt::Display for Key {
 
 		// Writing system keys
 		const DIGIT_PREFIX: &str = "Digit";
-		if key_name.len() == DIGIT_PREFIX.len() + 1 && &key_name[0..DIGIT_PREFIX.len()] == "Digit" {
+		if key_name.len() == DIGIT_PREFIX.len() + 1 && &key_name[0..DIGIT_PREFIX.len()] == DIGIT_PREFIX {
 			return write!(f, "{}", key_name.chars().skip(DIGIT_PREFIX.len()).collect::<String>());
 		}
 		const KEY_PREFIX: &str = "Key";
-		if key_name.len() == KEY_PREFIX.len() + 1 && &key_name[0..KEY_PREFIX.len()] == "Key" {
+		if key_name.len() == KEY_PREFIX.len() + 1 && &key_name[0..KEY_PREFIX.len()] == KEY_PREFIX {
 			return write!(f, "{}", key_name.chars().skip(KEY_PREFIX.len()).collect::<String>());
 		}
 
@@ -313,26 +338,12 @@ impl fmt::Display for Key {
 	}
 }
 
-impl From<Key> for LayoutKey {
-	fn from(key: Key) -> Self {
-		Self { key, label: key.to_string() }
-	}
-}
-
-#[derive(Debug, Clone, PartialEq, Eq, Hash, serde::Serialize, serde::Deserialize, specta::Type)]
-pub struct LayoutKey {
-	key: Key,
-	label: String,
-}
-
-impl LayoutKey {
-	pub fn key(&self) -> Key {
-		self.key
-	}
-}
-
 pub const NUMBER_OF_KEYS: usize = Key::_KeysVariantCount as usize - 1;
 
+// =========
+// KeysGroup
+// =========
+
 /// Only `Key`s that exist on a physical keyboard should be used.
 #[derive(Debug, Clone, Default, PartialEq, Eq, serde::Serialize, serde::Deserialize)]
 pub struct KeysGroup(pub Vec<Key>);
@@ -365,22 +376,26 @@ impl fmt::Display for KeysGroup {
 	}
 }
 
-impl From<KeysGroup> for String {
-	fn from(keys: KeysGroup) -> Self {
-		let layout_keys: LayoutKeysGroup = keys.into();
-		serde_json::to_string(&layout_keys).expect("Failed to serialize KeysGroup")
-	}
-}
+// ==========
+// LabeledKey
+// ==========
 
-#[derive(Debug, Clone, Default, PartialEq, Eq, serde::Serialize, serde::Deserialize, specta::Type)]
-pub struct LayoutKeysGroup(pub Vec<LayoutKey>);
+#[derive(Debug, Clone, PartialEq, Eq, Hash, serde::Serialize, serde::Deserialize, specta::Type)]
+pub struct LabeledKey {
+	key: Key,
+	label: String,
+}
 
-impl From<KeysGroup> for LayoutKeysGroup {
-	fn from(keys_group: KeysGroup) -> Self {
-		Self(keys_group.0.into_iter().map(|key| key.into()).collect())
+impl LabeledKey {
+	pub fn key(&self) -> Key {
+		self.key
 	}
 }
 
+// ===========
+// MouseMotion
+// ===========
+
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, serde::Serialize, serde::Deserialize, specta::Type)]
 pub enum MouseMotion {
 	None,
@@ -397,6 +412,45 @@ pub enum MouseMotion {
 	MmbDrag,
 }
 
+// =======================
+// LabeledKeyOrMouseMotion
+// =======================
+
+#[derive(Debug, Clone, PartialEq, Eq, Hash, serde::Serialize, serde::Deserialize, specta::Type)]
+#[serde(untagged)]
+pub enum LabeledKeyOrMouseMotion {
+	Key(LabeledKey),
+	MouseMotion(MouseMotion),
+}
+
+impl From<Key> for LabeledKeyOrMouseMotion {
+	fn from(key: Key) -> Self {
+		match key {
+			Key::MouseLeft => Self::MouseMotion(MouseMotion::Lmb),
+			Key::MouseRight => Self::MouseMotion(MouseMotion::Rmb),
+			Key::MouseMiddle => Self::MouseMotion(MouseMotion::Mmb),
+			_ => Self::Key(LabeledKey { key, label: key.to_string() }),
+		}
+	}
+}
+
+// ===============
+// LabeledShortcut
+// ===============
+
+#[derive(Debug, Clone, Default, PartialEq, Eq, serde::Serialize, serde::Deserialize, specta::Type)]
+pub struct LabeledShortcut(pub Vec<LabeledKeyOrMouseMotion>);
+
+impl From<KeysGroup> for LabeledShortcut {
+	fn from(keys_group: KeysGroup) -> Self {
+		Self(keys_group.0.into_iter().map(|key| key.into()).collect())
+	}
+}
+
+// =========
+// BitVector
+// =========
+
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
 pub struct BitVector<const LENGTH: usize>([StorageType; LENGTH]);
 

editor/src/messages/input_mapper/utility_types/macros.rs

@@ -117,14 +117,23 @@ macro_rules! mapping {
 	}};
 }
 
-/// Constructs an `ActionKeys` macro with a certain `Action` variant, conveniently wrapped in `Some()`.
-macro_rules! action_keys {
+/// Constructs an `ActionShortcut` macro with a certain `Action` variant, conveniently wrapped in `Some()`.
+macro_rules! action_shortcut {
 	($action:expr_2021) => {
-		Some(crate::messages::input_mapper::utility_types::misc::ActionKeys::Action($action.into()))
+		Some(crate::messages::input_mapper::utility_types::misc::ActionShortcut::Action($action.into()))
 	};
 }
 
-pub(crate) use action_keys;
+macro_rules! action_shortcut_manual {
+	($($keys:expr),*) => {
+		Some(crate::messages::input_mapper::utility_types::misc::ActionShortcut::Shortcut(
+			crate::messages::input_mapper::utility_types::input_keyboard::LabeledShortcut(vec![$($keys.into()),*]).into(),
+		))
+	};
+}
+
+pub(crate) use action_shortcut;
+pub(crate) use action_shortcut_manual;
 pub(crate) use entry;
 pub(crate) use mapping;
 pub(crate) use modifiers;

editor/src/messages/input_mapper/utility_types/misc.rs

@@ -1,4 +1,4 @@
-use super::input_keyboard::{KeysGroup, LayoutKeysGroup, all_required_modifiers_pressed};
+use super::input_keyboard::{KeysGroup, LabeledShortcut, all_required_modifiers_pressed};
 use crate::messages::input_mapper::key_mapping::MappingVariant;
 use crate::messages::input_mapper::utility_types::input_keyboard::{KeyStates, NUMBER_OF_KEYS};
 use crate::messages::input_mapper::utility_types::input_mouse::NUMBER_OF_MOUSE_BUTTONS;
@@ -128,28 +128,24 @@ pub struct MappingEntry {
 }
 
 #[derive(Debug, Clone, Eq, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]
-pub enum ActionKeys {
+pub enum ActionShortcut {
 	Action(MessageDiscriminant),
-	#[serde(rename = "keys")]
-	Keys(LayoutKeysGroup),
+	#[serde(rename = "shortcut")]
+	Shortcut(LabeledShortcut),
 }
 
-impl ActionKeys {
-	pub fn to_keys(&mut self, action_input_mapping: &impl Fn(&MessageDiscriminant) -> Option<KeysGroup>) -> String {
+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) {
-					let description = keys.to_string();
-					*self = Self::Keys(keys.into());
-					description
+					*self = Self::Shortcut(keys.into());
 				} else {
-					*self = Self::Keys(KeysGroup::default().into());
-					String::new()
+					*self = Self::Shortcut(KeysGroup::default().into());
 				}
 			}
-			Self::Keys(keys) => {
-				warn!("Calling `.to_keys()` on a `ActionKeys::Keys` is a mistake/bug. Keys are: {keys:?}.");
-				String::new()
+			Self::Shortcut(shortcut) => {
+				warn!("Calling `.to_keys()` on a `ActionShortcut::Shortcut` is a mistake/bug. Shortcut is: {shortcut:?}.");
 			}
 		}
 	}

editor/src/messages/layout/layout_message.rs

@@ -12,6 +12,9 @@ pub enum LayoutMessage {
 		layout: Layout,
 		layout_target: LayoutTarget,
 	},
+	DestroyLayout {
+		layout_target: LayoutTarget,
+	},
 	WidgetValueCommit {
 		layout_target: LayoutTarget,
 		widget_id: WidgetId,

editor/src/messages/layout/layout_message_handler.rs

@@ -39,6 +39,11 @@ impl MessageHandler<LayoutMessage, LayoutMessageContext<'_>> for LayoutMessageHa
 			LayoutMessage::SendLayout { layout, layout_target } => {
 				self.diff_and_send_layout_to_frontend(layout_target, layout, responses, action_input_mapping);
 			}
+			LayoutMessage::DestroyLayout { layout_target } => {
+				if let Some(layout) = self.layouts.get_mut(layout_target as usize) {
+					*layout = Default::default();
+				}
+			}
 			LayoutMessage::WidgetValueCommit { layout_target, widget_id, value } => {
 				self.handle_widget_callback(layout_target, widget_id, value, WidgetValueAction::Commit, responses);
 			}
@@ -78,7 +83,7 @@ impl LayoutMessageHandler {
 				LayoutGroup::Section { layout, .. } => {
 					stack.extend(layout.iter().enumerate().map(|(index, val)| ([widget_path.as_slice(), &[index]].concat(), val)));
 				}
-				LayoutGroup::Table { rows } => {
+				LayoutGroup::Table { rows, .. } => {
 					for (row_index, row) in rows.iter().enumerate() {
 						for (cell_index, cell) in row.iter().enumerate() {
 							// Return if this is the correct ID
@@ -310,6 +315,7 @@ impl LayoutMessageHandler {
 				responses.add(callback_message);
 			}
 			Widget::ImageLabel(_) => {}
+			Widget::ShortcutLabel(_) => {}
 			Widget::IconLabel(_) => {}
 			Widget::NodeCatalog(node_type_input) => match action {
 				WidgetValueAction::Commit => {
@@ -509,8 +515,10 @@ impl LayoutMessageHandler {
 			LayoutTarget::MenuBar => FrontendMessage::UpdateMenuBarLayout { layout_target, diff },
 			LayoutTarget::NodeGraphControlBar => FrontendMessage::UpdateNodeGraphControlBarLayout { layout_target, diff },
 			LayoutTarget::PropertiesPanel => FrontendMessage::UpdatePropertiesPanelLayout { layout_target, diff },
+			LayoutTarget::StatusBarHints => FrontendMessage::UpdateStatusBarHintsLayout { layout_target, diff },
 			LayoutTarget::ToolOptions => FrontendMessage::UpdateToolOptionsLayout { layout_target, diff },
 			LayoutTarget::ToolShelf => FrontendMessage::UpdateToolShelfLayout { layout_target, diff },
+			LayoutTarget::WelcomeScreenButtons => FrontendMessage::UpdateWelcomeScreenButtonsLayout { layout_target, diff },
 			LayoutTarget::WorkingColors => FrontendMessage::UpdateWorkingColorsLayout { layout_target, diff },
 
 			LayoutTarget::LayoutTargetLength => panic!("`LayoutTargetLength` is not a valid Layout Target and is used for array indexing"),