Diff simple layout changes to avoid excessive DOM replacements (#910)

* Add UI diffs to rust * Clean up some js * Fix lints * Fix test * Remove one unnecessary keyword * Rename to widget path * Rename new_val to new_value * Rename newVal to layoutGroup in createLayoutGroup * Extract get_widget_path to a function * Base skipping on the layout rather than the target * Rename to ResendActiveWidget * Switch info to trace * Add a link to the documentation about Object.assign * knitpick js changes * Add more comments to diff functions Co-authored-by: mfish33 <maxmfishernj@gmail.com>
2026-10-02 01:48:13 +08:00 · 2022-12-25 18:56:35 +00:00
parent 8d7e6c530e
commit d742b05d3a
12 changed files with 464 additions and 264 deletions
@@ -1,7 +1,8 @@
+use super::utility_types::layout_widget::{LayoutGroup, WidgetDiff, WidgetHolder};
 use super::utility_types::misc::LayoutTarget;
 use crate::messages::input_mapper::utility_types::input_keyboard::KeysGroup;
-use crate::messages::layout::utility_types::layout_widget::Layout;
-use crate::messages::layout::utility_types::layout_widget::Widget;
+use crate::messages::layout::utility_types::layout_widget::{DiffUpdate, Widget};
+use crate::messages::layout::utility_types::layout_widget::{Layout, WidgetLayout};
 use crate::messages::prelude::*;

 use document_legacy::color::Color;
@@ -16,6 +17,32 @@ pub struct LayoutMessageHandler {
 	layouts: [Layout; LayoutTarget::LayoutTargetLength as usize],
 }

+impl LayoutMessageHandler {
+	/// Get the widget path for the widget with the specified id
+	fn get_widget_path(widget_layout: &WidgetLayout, id: u64) -> Option<(&WidgetHolder, Vec<usize>)> {
+		let mut stack = widget_layout.layout.iter().enumerate().map(|(index, val)| (vec![index], val)).collect::<Vec<_>>();
+		while let Some((mut widget_path, group)) = stack.pop() {
+			match group {
+				// Check if any of the widgets in the current column or row have the correct id
+				LayoutGroup::Column { widgets } | LayoutGroup::Row { widgets } => {
+					for (index, widget) in widgets.iter().enumerate() {
+						// Return if this is the correct ID
+						if widget.widget_id == id {
+							widget_path.push(index);
+							return Some((widget, widget_path));
+						}
+					}
+				}
+				// A section contains more LayoutGroups which we add to the stack.
+				LayoutGroup::Section { layout, .. } => {
+					stack.extend(layout.iter().enumerate().map(|(index, val)| ([widget_path.as_slice(), &[index]].concat(), val)));
+				}
+			}
+		}
+		None
+	}
+}
+
 impl<F: Fn(&MessageDiscriminant) -> Vec<KeysGroup>> MessageHandler<LayoutMessage, F> for LayoutMessageHandler {
 	#[remain::check]
 	fn process_message(&mut self, message: LayoutMessage, data: F, responses: &mut std::collections::VecDeque<Message>) {
@@ -24,14 +51,22 @@ impl<F: Fn(&MessageDiscriminant) -> Vec<KeysGroup>> MessageHandler<LayoutMessage
 		use LayoutMessage::*;
 		#[remain::sorted]
 		match message {
-			RefreshLayout { layout_target } => {
-				self.send_layout(layout_target, responses, &action_input_mapping);
-			}
-			SendLayout { layout, layout_target } => {
-				self.layouts[layout_target as usize] = layout;
-
-				self.send_layout(layout_target, responses, &action_input_mapping);
+			ResendActiveWidget { layout_target, dirty_id } => {
+				// Find the updated diff based on the specified layout target
+				let Some(diff) = (match &self.layouts[layout_target as usize] {
+					Layout::MenuLayout(_) => return,
+					Layout::WidgetLayout(layout) => Self::get_widget_path(layout, dirty_id).map(|(widget, widget_path)| {
+						// Create a widget update diff for the relevant id
+						let new_value = DiffUpdate::Widget(widget.clone());
+						WidgetDiff { widget_path, new_value }
+					}),
+				}) else {
+					return;
+				};
+				// Resend that diff
+				self.send_diff(vec![diff], layout_target, responses, &action_input_mapping);
 			}
+			SendLayout { layout, layout_target } => self.send_layout(layout_target, layout, responses, &action_input_mapping),
 			UpdateLayout { layout_target, widget_id, value } => {
 				// Look up the layout
 				let layout = if let Some(layout) = self.layouts.get_mut(layout_target as usize) {
@@ -84,7 +119,7 @@ impl<F: Fn(&MessageDiscriminant) -> Vec<KeysGroup>> MessageHandler<LayoutMessage
 								Some(None)
 							}
 						})()
-						.unwrap_or_else(|| panic!("ColorInput update was not able to be parsed with color data: {:?}", color_input));
+						.unwrap_or_else(|| panic!("ColorInput update was not able to be parsed with color data: {color_input:?}"));
 						color_input.value = parsed_color;
 						let callback_message = (color_input.on_update.callback)(color_input);
 						responses.push_back(callback_message);
@@ -197,7 +232,7 @@ impl<F: Fn(&MessageDiscriminant) -> Vec<KeysGroup>> MessageHandler<LayoutMessage
 					}
 					Widget::TextLabel(_) => {}
 				};
-				responses.push_back(RefreshLayout { layout_target }.into());
+				responses.push_back(ResendActiveWidget { layout_target, dirty_id: widget_id }.into());
 			}
 		}
 	}
@@ -208,55 +243,57 @@ impl<F: Fn(&MessageDiscriminant) -> Vec<KeysGroup>> MessageHandler<LayoutMessage
 }

 impl LayoutMessageHandler {
+	/// Diff the update and send to the frontend where necessary
+	fn send_layout(&mut self, layout_target: LayoutTarget, new_layout: Layout, responses: &mut VecDeque<Message>, action_input_mapping: &impl Fn(&MessageDiscriminant) -> Vec<KeysGroup>) {
+		// We don't diff the menu bar layout yet.
+		if matches!(new_layout, Layout::MenuLayout(_)) {
+			// Skip update if the same
+			if self.layouts[layout_target as usize] == new_layout {
+				return;
+			}
+			// Update the backend storage
+			self.layouts[layout_target as usize] = new_layout;
+			// Update the UI
+			responses.push_back(
+				FrontendMessage::UpdateMenuBarLayout {
+					layout_target,
+					layout: self.layouts[layout_target as usize].clone().unwrap_menu_layout(action_input_mapping).layout,
+				}
+				.into(),
+			);
+			return;
+		}
+
+		let mut widget_diffs = Vec::new();
+		self.layouts[layout_target as usize].diff(new_layout, &mut Vec::new(), &mut widget_diffs);
+		// Skip sending if no diff.
+		if widget_diffs.is_empty() {
+			return;
+		}
+
+		self.send_diff(widget_diffs, layout_target, responses, action_input_mapping);
+	}
+
+	/// Send a diff to the frontend based on the layout target.
 	#[remain::check]
-	fn send_layout(&self, layout_target: LayoutTarget, responses: &mut VecDeque<Message>, action_input_mapping: &impl Fn(&MessageDiscriminant) -> Vec<KeysGroup>) {
-		let layout = &self.layouts[layout_target as usize];
+	fn send_diff(&self, mut diff: Vec<WidgetDiff>, layout_target: LayoutTarget, responses: &mut VecDeque<Message>, action_input_mapping: &impl Fn(&MessageDiscriminant) -> Vec<KeysGroup>) {
+		diff.iter_mut().for_each(|diff| diff.new_value.apply_shortcut(action_input_mapping));
+
+		trace!("{layout_target:?} diff {diff:#?}");
+
 		#[remain::sorted]
 		let message = match layout_target {
-			LayoutTarget::DialogDetails => FrontendMessage::UpdateDialogDetails {
-				layout_target,
-				layout: layout.clone().unwrap_widget_layout(action_input_mapping).layout,
-			},
-			LayoutTarget::DocumentBar => FrontendMessage::UpdateDocumentBarLayout {
-				layout_target,
-				layout: layout.clone().unwrap_widget_layout(action_input_mapping).layout,
-			},
-			LayoutTarget::DocumentMode => FrontendMessage::UpdateDocumentModeLayout {
-				layout_target,
-				layout: layout.clone().unwrap_widget_layout(action_input_mapping).layout,
-			},
-			LayoutTarget::LayerTreeOptions => FrontendMessage::UpdateLayerTreeOptionsLayout {
-				layout_target,
-				layout: layout.clone().unwrap_widget_layout(action_input_mapping).layout,
-			},
-			LayoutTarget::MenuBar => FrontendMessage::UpdateMenuBarLayout {
-				layout_target,
-				layout: layout.clone().unwrap_menu_layout(action_input_mapping).layout,
-			},
-			LayoutTarget::NodeGraphBar => FrontendMessage::UpdateNodeGraphBarLayout {
-				layout_target,
-				layout: layout.clone().unwrap_widget_layout(action_input_mapping).layout,
-			},
-			LayoutTarget::PropertiesOptions => FrontendMessage::UpdatePropertyPanelOptionsLayout {
-				layout_target,
-				layout: layout.clone().unwrap_widget_layout(action_input_mapping).layout,
-			},
-			LayoutTarget::PropertiesSections => FrontendMessage::UpdatePropertyPanelSectionsLayout {
-				layout_target,
-				layout: layout.clone().unwrap_widget_layout(action_input_mapping).layout,
-			},
-			LayoutTarget::ToolOptions => FrontendMessage::UpdateToolOptionsLayout {
-				layout_target,
-				layout: layout.clone().unwrap_widget_layout(action_input_mapping).layout,
-			},
-			LayoutTarget::ToolShelf => FrontendMessage::UpdateToolShelfLayout {
-				layout_target,
-				layout: layout.clone().unwrap_widget_layout(action_input_mapping).layout,
-			},
-			LayoutTarget::WorkingColors => FrontendMessage::UpdateWorkingColorsLayout {
-				layout_target,
-				layout: layout.clone().unwrap_widget_layout(action_input_mapping).layout,
-			},
+			LayoutTarget::DialogDetails => FrontendMessage::UpdateDialogDetails { layout_target, diff },
+			LayoutTarget::DocumentBar => FrontendMessage::UpdateDocumentBarLayout { layout_target, diff },
+			LayoutTarget::DocumentMode => FrontendMessage::UpdateDocumentModeLayout { layout_target, diff },
+			LayoutTarget::LayerTreeOptions => FrontendMessage::UpdateLayerTreeOptionsLayout { layout_target, diff },
+			LayoutTarget::MenuBar => unreachable!("Menu bar is not diffed"),
+			LayoutTarget::NodeGraphBar => FrontendMessage::UpdateNodeGraphBarLayout { layout_target, diff },
+			LayoutTarget::PropertiesOptions => FrontendMessage::UpdatePropertyPanelOptionsLayout { layout_target, diff },
+			LayoutTarget::PropertiesSections => FrontendMessage::UpdatePropertyPanelSectionsLayout { layout_target, diff },
+			LayoutTarget::ToolOptions => FrontendMessage::UpdateToolOptionsLayout { layout_target, diff },
+			LayoutTarget::ToolShelf => FrontendMessage::UpdateToolShelfLayout { layout_target, diff },
+			LayoutTarget::WorkingColors => FrontendMessage::UpdateWorkingColorsLayout { layout_target, diff },

 			#[remain::unsorted]
 			LayoutTarget::LayoutTargetLength => panic!("`LayoutTargetLength` is not a valid Layout Target and is used for array indexing"),