Refactor messages.ts by removing class-transformer and JS classes (#3858)

* Fix gamma correction with HTML-based editable Text tool text

* Migrate simple, undecorated classes to types

* Remove TupleToVec2 transformation

* Remove @Transform from tooltips

* Cleanup: replace value.toString() with String(value) everywhere

* Convert documentId from string to bigint

* Migrate the rest of the easy @Transform/@type decorations

* Migrate FillChoice

* Migrate WidgetDiffUpdate

* Migrate WidgetInstance

* Migrate away from classes that extend WidgetProps

* Remove class-transformer and all classes in messages.ts

* Migrate UI layout passing

* Remove dead code

* Remove unnecessary export and readonly prefixes

* Remove HSVA type

* Break out Color, Gradient, and FillChoice functions into a utility-functions file

* Move widget helper functions from messages.ts into a new utility-functions file; restructure type imports

* Reduce internal type defs

* Rename JsMessage to FrontendMessage

* Code review fixes

* Fix other usages

* Tidying up

Author: Keavon

.github/workflows/comment-profiling-changes.yaml

@@ -3,9 +3,9 @@ name: Profiling Changes
 on:
   pull_request:
     paths:
-      - 'node-graph/**'
-      - 'Cargo.toml'
-      - 'Cargo.lock'
+      - "node-graph/**"
+      - "Cargo.toml"
+      - "Cargo.lock"
 
 env:
   CARGO_TERM_COLOR: always
@@ -200,7 +200,7 @@ jobs:
             let commentBody = "";
 
             function formatNumber(num) {
-              return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+              return String(num).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
             }
 
             function formatPercentage(pct) {

desktop/wrapper/src/intercept_frontend_message.rs

@@ -1,6 +1,7 @@
-use std::path::PathBuf;
-
+#[cfg(target_os = "macos")]
+use graphite_editor::messages::layout::utility_types::layout_widget::LayoutTarget;
 use graphite_editor::messages::prelude::FrontendMessage;
+use std::path::PathBuf;
 
 use super::DesktopWrapperMessageDispatcher;
 use super::messages::{DesktopFrontendMessage, Document, FileFilter, OpenFileDialogContext, SaveFileDialogContext};
@@ -103,7 +104,10 @@ pub(super) fn intercept_frontend_message(dispatcher: &mut DesktopWrapperMessageD
 			dispatcher.respond(DesktopFrontendMessage::PersistenceLoadPreferences);
 		}
 		#[cfg(target_os = "macos")]
-		FrontendMessage::UpdateMenuBarLayout { diff } => {
+		FrontendMessage::UpdateLayout {
+			layout_target: LayoutTarget::MenuBar,
+			diff,
+		} => {
 			use graphite_editor::messages::tool::tool_messages::tool_prelude::{DiffUpdate, WidgetDiff};
 			match diff.as_slice() {
 				[

editor/src/dispatcher.rs

@@ -590,7 +590,11 @@ mod test {
 
 			for response in responses {
 				// Check for the existence of the file format incompatibility warning dialog after opening the test file
-				if let FrontendMessage::UpdateDialogColumn1 { diff } = response {
+				if let FrontendMessage::UpdateLayout {
+					layout_target: LayoutTarget::DialogColumn1,
+					diff,
+				} = response
+				{
 					if let DiffUpdate::Layout(sub_layout) = &diff[0].new_value {
 						if let LayoutGroup::Row { widgets } = &sub_layout.0[0] {
 							if let Widget::TextLabel(TextLabel { value, .. }) = &*widgets[0].widget {

editor/src/messages/frontend/frontend_message.rs

@@ -39,7 +39,7 @@ pub enum FrontendMessage {
 		line_height_ratio: f64,
 		#[serde(rename = "fontSize")]
 		font_size: f64,
-		color: Color,
+		color: String,
 		#[serde(rename = "fontData")]
 		font_data: Vec<u8>,
 		transform: [f64; 6],
@@ -199,7 +199,9 @@ pub enum FrontendMessage {
 	UpdateLayersPanelState {
 		open: bool,
 	},
-	UpdateDataPanelLayout {
+	UpdateLayout {
+		#[serde(rename = "layoutTarget")]
+		layout_target: LayoutTarget,
 		diff: Vec<WidgetDiff>,
 	},
 	UpdateImportReorderIndex {
@@ -218,24 +220,12 @@ pub enum FrontendMessage {
 		#[serde(rename = "hasLeftInputWire")]
 		has_left_input_wire: HashMap<NodeId, bool>,
 	},
-	UpdateDialogButtons {
-		diff: Vec<WidgetDiff>,
-	},
-	UpdateDialogColumn1 {
-		diff: Vec<WidgetDiff>,
-	},
-	UpdateDialogColumn2 {
-		diff: Vec<WidgetDiff>,
-	},
 	UpdateDocumentArtwork {
 		svg: String,
 	},
 	UpdateImageData {
 		image_data: Vec<(u64, Image<Color>)>,
 	},
-	UpdateDocumentBarLayout {
-		diff: Vec<WidgetDiff>,
-	},
 	UpdateDocumentLayerDetails {
 		data: LayerPanelEntry,
 	},
@@ -268,18 +258,6 @@ pub enum FrontendMessage {
 	UpdateGraphFadeArtwork {
 		percentage: f64,
 	},
-	UpdateLayersPanelControlBarLeftLayout {
-		diff: Vec<WidgetDiff>,
-	},
-	UpdateLayersPanelControlBarRightLayout {
-		diff: Vec<WidgetDiff>,
-	},
-	UpdateLayersPanelBottomBarLayout {
-		diff: Vec<WidgetDiff>,
-	},
-	UpdateMenuBarLayout {
-		diff: Vec<WidgetDiff>,
-	},
 	UpdateMouseCursor {
 		cursor: MouseCursorIcon,
 	},
@@ -296,9 +274,6 @@ pub enum FrontendMessage {
 		wires: Vec<WirePathUpdate>,
 	},
 	ClearAllNodeGraphWires,
-	UpdateNodeGraphControlBarLayout {
-		diff: Vec<WidgetDiff>,
-	},
 	UpdateNodeGraphSelection {
 		selected: Vec<NodeId>,
 	},
@@ -313,31 +288,10 @@ pub enum FrontendMessage {
 		#[serde(rename = "openDocuments")]
 		open_documents: Vec<OpenDocument>,
 	},
-	UpdatePropertiesPanelLayout {
-		diff: Vec<WidgetDiff>,
-	},
-	UpdateToolOptionsLayout {
-		diff: Vec<WidgetDiff>,
-	},
-	UpdateToolShelfLayout {
-		diff: Vec<WidgetDiff>,
-	},
 	UpdateWirePathInProgress {
 		#[serde(rename = "wirePath")]
 		wire_path: Option<WirePath>,
 	},
-	UpdateWelcomeScreenButtonsLayout {
-		diff: Vec<WidgetDiff>,
-	},
-	UpdateStatusBarHintsLayout {
-		diff: Vec<WidgetDiff>,
-	},
-	UpdateStatusBarInfoLayout {
-		diff: Vec<WidgetDiff>,
-	},
-	UpdateWorkingColorsLayout {
-		diff: Vec<WidgetDiff>,
-	},
 	UpdatePlatform {
 		platform: AppWindowPlatform,
 	},

editor/src/messages/layout/layout_message_handler.rs

@@ -463,30 +463,11 @@ impl LayoutMessageHandler {
 	fn send_diff(&self, mut diff: Vec<WidgetDiff>, layout_target: LayoutTarget, responses: &mut VecDeque<Message>, action_input_mapping: &impl Fn(&MessageDiscriminant) -> Option<KeysGroup>) {
 		diff.iter_mut().for_each(|diff| diff.new_value.apply_keyboard_shortcut(action_input_mapping));
 
-		let message = match layout_target {
-			LayoutTarget::DataPanel => FrontendMessage::UpdateDataPanelLayout { diff },
-			LayoutTarget::DialogButtons => FrontendMessage::UpdateDialogButtons { diff },
-			LayoutTarget::DialogColumn1 => FrontendMessage::UpdateDialogColumn1 { diff },
-			LayoutTarget::DialogColumn2 => FrontendMessage::UpdateDialogColumn2 { diff },
-			LayoutTarget::DocumentBar => FrontendMessage::UpdateDocumentBarLayout { diff },
-			LayoutTarget::LayersPanelBottomBar => FrontendMessage::UpdateLayersPanelBottomBarLayout { diff },
-			LayoutTarget::LayersPanelControlLeftBar => FrontendMessage::UpdateLayersPanelControlBarLeftLayout { diff },
-			LayoutTarget::LayersPanelControlRightBar => FrontendMessage::UpdateLayersPanelControlBarRightLayout { diff },
-			LayoutTarget::MenuBar => FrontendMessage::UpdateMenuBarLayout { diff },
-			LayoutTarget::NodeGraphControlBar => FrontendMessage::UpdateNodeGraphControlBarLayout { diff },
-			LayoutTarget::PropertiesPanel => FrontendMessage::UpdatePropertiesPanelLayout { diff },
-			LayoutTarget::StatusBarHints => FrontendMessage::UpdateStatusBarHintsLayout { diff },
-			LayoutTarget::StatusBarInfo => FrontendMessage::UpdateStatusBarInfoLayout { diff },
-			LayoutTarget::ToolOptions => FrontendMessage::UpdateToolOptionsLayout { diff },
-			LayoutTarget::ToolShelf => FrontendMessage::UpdateToolShelfLayout { diff },
-			LayoutTarget::WelcomeScreenButtons => FrontendMessage::UpdateWelcomeScreenButtonsLayout { diff },
-			LayoutTarget::WorkingColors => FrontendMessage::UpdateWorkingColorsLayout { diff },
-
-			// KEEP THIS ENUM LAST
-			LayoutTarget::_LayoutTargetLength => panic!("`_LayoutTargetLength` is not a valid `LayoutTarget` and is used for array indexing"),
-		};
+		if matches!(layout_target, LayoutTarget::_LayoutTargetLength) {
+			panic!("`_LayoutTargetLength` is not a valid `LayoutTarget` and is used for array indexing");
+		}
 
-		responses.add(message);
+		responses.add(FrontendMessage::UpdateLayout { layout_target, diff });
 	}
 }
 

editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs

@@ -847,7 +847,7 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 					};
 
 					self.context_menu = Some(ContextMenuInformation {
-						context_menu_coordinates: (node_graph_point + node_graph_shift).into(),
+						context_menu_coordinates: (node_graph_point + node_graph_shift).as_ivec2(),
 						context_menu_data,
 					});
 
@@ -1280,7 +1280,7 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 						let compatible_type = network_interface.output_type(&output_connector, selection_network_path).add_node_string();
 
 						self.context_menu = Some(ContextMenuInformation {
-							context_menu_coordinates: (point + node_graph_shift).into(),
+							context_menu_coordinates: (point + node_graph_shift).as_ivec2(),
 							context_menu_data: ContextMenuData::CreateNode { compatible_type },
 						});
 
@@ -2696,7 +2696,7 @@ impl NodeGraphMessageHandler {
 			position += IVec2::new(12, -12)
 		}
 
-		Some(NodeGraphErrorDiagnostic { position: position.into(), error })
+		Some(NodeGraphErrorDiagnostic { position, error })
 	}
 
 	fn update_layer_panel(network_interface: &NodeNetworkInterface, selection_network_path: &[NodeId], collapsed: &CollapsedLayers, layers_panel_open: bool, responses: &mut VecDeque<Message>) {
@@ -2769,7 +2769,7 @@ impl NodeGraphMessageHandler {
 					children_allowed,
 					children_present: layer.has_children(network_interface.document_metadata()),
 					expanded: layer.has_children(network_interface.document_metadata()) && !collapsed.0.contains(&layer),
-					depth: layer.ancestors(network_interface.document_metadata()).count() - 1,
+					depth: layer.ancestors(network_interface.document_metadata()).count() as u32 - 1,
 					visible: network_interface.is_visible(&node_id, &[]),
 					parents_visible,
 					unlocked: !network_interface.is_locked(&node_id, &[]),

editor/src/messages/portfolio/document/node_graph/utility_types.rs

@@ -1,4 +1,4 @@
-use glam::{DVec2, IVec2};
+use glam::IVec2;
 use graph_craft::document::NodeId;
 use graph_craft::document::value::TaggedValue;
 use graphene_std::Type;
@@ -162,14 +162,14 @@ pub enum ContextMenuData {
 pub struct ContextMenuInformation {
 	// Stores whether the context menu is open and its position in graph coordinates
 	#[serde(rename = "contextMenuCoordinates")]
-	pub context_menu_coordinates: FrontendXY,
+	pub context_menu_coordinates: IVec2,
 	#[serde(rename = "contextMenuData")]
 	pub context_menu_data: ContextMenuData,
 }
 
 #[derive(Clone, Debug, PartialEq, Default, serde::Serialize, serde::Deserialize, specta::Type)]
 pub struct NodeGraphErrorDiagnostic {
-	pub position: FrontendXY,
+	pub position: IVec2,
 	pub error: String,
 }
 
@@ -196,22 +196,3 @@ pub enum Direction {
 	Left,
 	Right,
 }
-
-/// Stores node graph coordinates which are then transformed in Svelte based on the node graph transform
-#[derive(Clone, Debug, PartialEq, Default, serde::Serialize, serde::Deserialize, specta::Type)]
-pub struct FrontendXY {
-	pub x: i32,
-	pub y: i32,
-}
-
-impl From<DVec2> for FrontendXY {
-	fn from(v: DVec2) -> Self {
-		FrontendXY { x: v.x as i32, y: v.y as i32 }
-	}
-}
-
-impl From<IVec2> for FrontendXY {
-	fn from(v: IVec2) -> Self {
-		FrontendXY { x: v.x, y: v.y }
-	}
-}

editor/src/messages/portfolio/document/utility_types/nodes.rs

@@ -28,7 +28,7 @@ pub struct LayerPanelEntry {
 	#[serde(rename = "childrenPresent")]
 	pub children_present: bool,
 	pub expanded: bool,
-	pub depth: usize,
+	pub depth: u32,
 	pub visible: bool,
 	#[serde(rename = "parentsVisible")]
 	pub parents_visible: bool,

editor/src/messages/tool/tool_messages/text_tool.rs

@@ -412,7 +412,7 @@ impl TextToolData {
 				text: editing_text.text.clone(),
 				line_height_ratio: editing_text.typesetting.line_height_ratio,
 				font_size: editing_text.typesetting.font_size,
-				color: editing_text.color.unwrap_or(Color::BLACK),
+				color: editing_text.color.map_or("#000000".to_string(), |color| format!("#{}", color.to_rgba_hex_srgb())),
 				font_data: font_cache.get(&editing_text.font).map(|(data, _)| data.clone()).unwrap_or_default(),
 				transform: editing_text.transform.to_cols_array(),
 				max_width: editing_text.typesetting.max_width,

frontend/eslint.config.js

@@ -87,6 +87,7 @@ export default defineConfig([
 			"svelte/require-each-key": "off", // TODO: Remove this rule and fix the places where it's violated
 
 			// Import plugin config (for intelligently validating module import statements)
+			"import/consistent-type-specifier-style": ["error", "prefer-top-level"],
 			"import/no-unresolved": "error",
 			// `no-duplicates` disabled due to <https://github.com/import-js/eslint-plugin-import/issues/1479#issuecomment-1789527447>. Reenable if that issue gets fixed.
 			"import/no-duplicates": "off",