Layout system implementation and applied to tool options bar (#499)

* initial layout system with tool options * cargo fmt * cargo fmt again * document bar defined on the backend * cargo fmt * removed RC<RefCell> * cargo fmt * - fix increment behavior - removed hashmap from layout message handler - removed no op message from layoutMessage * cargo fmt * only send documentBar when zoom or rotation is updated * ctrl-0 changes zoom properly * Code review changes Co-authored-by: Keavon Chambers <keavon@keavon.com>
2026-09-27 14:38:12 +08:00 · 2022-01-30 17:53:37 -08:00
parent 121a68ad3c
commit 96d3ef2650
44 changed files with 1357 additions and 532 deletions
@@ -0,0 +1,25 @@
+use super::widgets::WidgetLayout;
+use crate::message_prelude::*;
+
+use serde::{Deserialize, Serialize};
+
+#[remain::sorted]
+#[impl_message(Message, Layout)]
+#[derive(PartialEq, Clone, Deserialize, Serialize, Debug)]
+pub enum LayoutMessage {
+	SendLayout { layout: WidgetLayout, layout_target: LayoutTarget },
+	UpdateLayout { layout_target: LayoutTarget, widget_id: u64, value: serde_json::Value },
+}
+
+#[remain::sorted]
+#[derive(PartialEq, Clone, Deserialize, Serialize, Debug, Hash, Eq, Copy)]
+#[repr(u8)]
+pub enum LayoutTarget {
+	DocumentBar,
+	ToolOptions,
+
+	// KEEP THIS ENUM LAST
+	// This is a marker that is used to define an array that is used to hold widgets
+	#[remain::unsorted]
+	LayoutTargetLength,
+}
@@ -0,0 +1,88 @@
+use super::layout_message::LayoutTarget;
+use super::widgets::WidgetLayout;
+use crate::layout::widgets::Widget;
+use crate::message_prelude::*;
+
+use serde_json::Value;
+use std::collections::VecDeque;
+
+#[derive(Debug, Clone, Default)]
+pub struct LayoutMessageHandler {
+	layouts: [WidgetLayout; LayoutTarget::LayoutTargetLength as usize],
+}
+
+impl LayoutMessageHandler {
+	fn send_layout(&self, layout_target: LayoutTarget, responses: &mut VecDeque<Message>) {
+		let widget_layout = &self.layouts[layout_target as usize];
+		let message = match layout_target {
+			LayoutTarget::ToolOptions => FrontendMessage::UpdateToolOptionsLayout {
+				layout_target,
+				layout: widget_layout.layout.clone(),
+			},
+			LayoutTarget::DocumentBar => FrontendMessage::UpdateDocumentBarLayout {
+				layout_target,
+				layout: widget_layout.layout.clone(),
+			},
+			LayoutTarget::LayoutTargetLength => panic!("`LayoutTargetLength` is not a valid Layout Target and is used for array indexing"),
+		};
+		responses.push_back(message.into());
+	}
+}
+
+impl MessageHandler<LayoutMessage, ()> for LayoutMessageHandler {
+	fn process_action(&mut self, action: LayoutMessage, _data: (), responses: &mut std::collections::VecDeque<crate::message_prelude::Message>) {
+		use LayoutMessage::*;
+		match action {
+			SendLayout { layout, layout_target } => {
+				self.layouts[layout_target as usize] = layout;
+
+				self.send_layout(layout_target, responses);
+			}
+			UpdateLayout { layout_target, widget_id, value } => {
+				let layout = &mut self.layouts[layout_target as usize];
+				let widget_holder = layout.iter_mut().find(|widget| widget.widget_id == widget_id).expect("Received invalid widget_id from the frontend");
+				match &mut widget_holder.widget {
+					Widget::NumberInput(number_input) => match value {
+						Value::Number(num) => {
+							let update_value = num.as_f64().unwrap();
+							number_input.value = update_value;
+							let callback_message = (number_input.on_update.callback)(number_input);
+							responses.push_back(callback_message);
+						}
+						Value::String(str) => match str.as_str() {
+							"Increment" => responses.push_back((number_input.increment_callback_increase.callback)(number_input)),
+							"Decrement" => responses.push_back((number_input.increment_callback_decrease.callback)(number_input)),
+							_ => {
+								panic!("Invalid string found when updating `NumberInput`")
+							}
+						},
+						_ => panic!("Invalid type found when updating `NumberInput`"),
+					},
+					Widget::Separator(_) => {}
+					Widget::IconButton(icon_button) => {
+						let callback_message = (icon_button.on_update.callback)(icon_button);
+						responses.push_back(callback_message);
+					}
+					Widget::PopoverButton(_) => {}
+					Widget::OptionalInput(optional_input) => {
+						let update_value = value.as_bool().expect("OptionalInput update was not of type: bool");
+						optional_input.checked = update_value;
+						let callback_message = (optional_input.on_update.callback)(optional_input);
+						responses.push_back(callback_message);
+					}
+					Widget::RadioInput(radio_input) => {
+						let update_value = value.as_u64().expect("OptionalInput update was not of type: u64");
+						radio_input.selected_index = update_value as u32;
+						let callback_message = (radio_input.entries[update_value as usize].on_update.callback)(&());
+						responses.push_back(callback_message);
+					}
+				};
+				self.send_layout(layout_target, responses);
+			}
+		}
+	}
+
+	fn actions(&self) -> crate::message_prelude::ActionList {
+		actions!()
+	}
+}
@@ -0,0 +1,5 @@
+pub mod layout_message;
+pub mod layout_message_handler;
+pub mod widgets;
+
+pub use layout_message::{LayoutMessage, LayoutMessageDiscriminant};
@@ -0,0 +1,283 @@
+use super::layout_message::LayoutTarget;
+use crate::message_prelude::*;
+
+use derivative::*;
+use serde::{Deserialize, Serialize};
+
+pub trait PropertyHolder {
+	fn properties(&self) -> WidgetLayout {
+		WidgetLayout::default()
+	}
+
+	fn register_properties(&self, responses: &mut VecDeque<Message>, layout_target: LayoutTarget) {
+		responses.push_back(
+			LayoutMessage::SendLayout {
+				layout: self.properties(),
+				layout_target,
+			}
+			.into(),
+		)
+	}
+}
+
+#[derive(Debug, Default, Clone, Serialize, Deserialize, PartialEq)]
+pub struct WidgetLayout {
+	pub layout: SubLayout,
+}
+
+impl WidgetLayout {
+	pub fn new(layout: SubLayout) -> Self {
+		Self { layout }
+	}
+
+	pub fn iter(&self) -> WidgetIter<'_> {
+		WidgetIter {
+			stack: self.layout.iter().collect(),
+			current_slice: None,
+		}
+	}
+
+	pub fn iter_mut(&mut self) -> WidgetIterMut<'_> {
+		WidgetIterMut {
+			stack: self.layout.iter_mut().collect(),
+			current_slice: None,
+		}
+	}
+}
+
+pub type SubLayout = Vec<LayoutRow>;
+
+#[remain::sorted]
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub enum LayoutRow {
+	Row { name: String, widgets: Vec<WidgetHolder> },
+	Section { name: String, layout: SubLayout },
+}
+
+impl LayoutRow {
+	pub fn widgets(&self) -> Vec<WidgetHolder> {
+		match &self {
+			Self::Row { name: _, widgets } => widgets.to_vec(),
+			Self::Section { name: _, layout } => layout.iter().flat_map(|row| row.widgets()).collect(),
+		}
+	}
+}
+
+#[derive(Debug, Default)]
+pub struct WidgetIter<'a> {
+	pub stack: Vec<&'a LayoutRow>,
+	pub current_slice: Option<&'a [WidgetHolder]>,
+}
+
+impl<'a> Iterator for WidgetIter<'a> {
+	type Item = &'a WidgetHolder;
+
+	fn next(&mut self) -> Option<Self::Item> {
+		if let Some(item) = self.current_slice.map(|slice| slice.first()).flatten() {
+			self.current_slice = Some(&self.current_slice.unwrap()[1..]);
+			return Some(item);
+		}
+
+		match self.stack.pop() {
+			Some(LayoutRow::Row { name: _, widgets }) => {
+				self.current_slice = Some(widgets);
+				self.next()
+			}
+			Some(LayoutRow::Section { name: _, layout }) => {
+				for layout_row in layout {
+					self.stack.push(layout_row);
+				}
+				self.next()
+			}
+			None => None,
+		}
+	}
+}
+
+#[derive(Debug, Default)]
+pub struct WidgetIterMut<'a> {
+	pub stack: Vec<&'a mut LayoutRow>,
+	pub current_slice: Option<&'a mut [WidgetHolder]>,
+}
+
+impl<'a> Iterator for WidgetIterMut<'a> {
+	type Item = &'a mut WidgetHolder;
+
+	fn next(&mut self) -> Option<Self::Item> {
+		if let Some((first, rest)) = self.current_slice.take().map(|slice| slice.split_first_mut()).flatten() {
+			self.current_slice = Some(rest);
+			return Some(first);
+		};
+
+		match self.stack.pop() {
+			Some(LayoutRow::Row { name: _, widgets }) => {
+				self.current_slice = Some(widgets);
+				self.next()
+			}
+			Some(LayoutRow::Section { name: _, layout }) => {
+				for layout_row in layout {
+					self.stack.push(layout_row);
+				}
+				self.next()
+			}
+			None => None,
+		}
+	}
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
+pub struct WidgetHolder {
+	pub widget_id: u64,
+	pub widget: Widget,
+}
+
+impl WidgetHolder {
+	pub fn new(widget: Widget) -> Self {
+		Self { widget_id: generate_uuid(), widget }
+	}
+}
+
+#[derive(Clone)]
+pub struct WidgetCallback<T> {
+	pub callback: fn(&T) -> Message,
+}
+
+impl<T> WidgetCallback<T> {
+	pub fn new(callback: fn(&T) -> Message) -> Self {
+		Self { callback }
+	}
+}
+
+impl<T> Default for WidgetCallback<T> {
+	fn default() -> Self {
+		Self { callback: |_| Message::NoOp }
+	}
+}
+
+#[remain::sorted]
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub enum Widget {
+	IconButton(IconButton),
+	NumberInput(NumberInput),
+	OptionalInput(OptionalInput),
+	PopoverButton(PopoverButton),
+	RadioInput(RadioInput),
+	Separator(Separator),
+}
+
+#[derive(Clone, Serialize, Deserialize, Derivative)]
+#[derivative(Debug, PartialEq, Default)]
+pub struct NumberInput {
+	pub value: f64,
+	#[serde(skip)]
+	#[derivative(Debug = "ignore", PartialEq = "ignore")]
+	pub on_update: WidgetCallback<NumberInput>,
+	pub min: Option<f64>,
+	pub max: Option<f64>,
+	#[serde(rename = "isInteger")]
+	pub is_integer: bool,
+	#[serde(rename = "incrementBehavior")]
+	pub increment_behavior: NumberInputIncrementBehavior,
+	#[serde(rename = "incrementFactor")]
+	#[derivative(Default(value = "1."))]
+	pub increment_factor: f64,
+	#[serde(skip)]
+	#[derivative(Debug = "ignore", PartialEq = "ignore")]
+	pub increment_callback_increase: WidgetCallback<NumberInput>,
+	#[serde(skip)]
+	#[derivative(Debug = "ignore", PartialEq = "ignore")]
+	pub increment_callback_decrease: WidgetCallback<NumberInput>,
+	pub label: String,
+	pub unit: String,
+}
+
+#[derive(Clone, Serialize, Deserialize, Debug, PartialEq)]
+pub enum NumberInputIncrementBehavior {
+	Add,
+	Multiply,
+	Callback,
+}
+
+impl Default for NumberInputIncrementBehavior {
+	fn default() -> Self {
+		Self::Add
+	}
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct Separator {
+	pub direction: SeparatorDirection,
+
+	#[serde(rename = "type")]
+	pub separator_type: SeparatorType,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub enum SeparatorDirection {
+	Horizontal,
+	Vertical,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub enum SeparatorType {
+	Related,
+	Unrelated,
+	Section,
+	List,
+}
+
+#[derive(Clone, Serialize, Deserialize, Derivative, Default)]
+#[derivative(Debug, PartialEq)]
+pub struct IconButton {
+	pub icon: String,
+	#[serde(rename = "title")]
+	pub tooltip: String,
+	pub size: u32,
+	#[serde(rename = "gapAfter")]
+	pub gap_after: bool,
+	#[serde(skip)]
+	#[derivative(Debug = "ignore", PartialEq = "ignore")]
+	pub on_update: WidgetCallback<IconButton>,
+}
+
+#[derive(Clone, Serialize, Deserialize, Derivative, Default)]
+#[derivative(Debug, PartialEq)]
+pub struct OptionalInput {
+	pub checked: bool,
+	pub icon: String,
+	#[serde(rename = "title")]
+	pub tooltip: String,
+	#[serde(skip)]
+	#[derivative(Debug = "ignore", PartialEq = "ignore")]
+	pub on_update: WidgetCallback<OptionalInput>,
+}
+
+#[derive(Clone, Serialize, Deserialize, Derivative, Default)]
+#[derivative(Debug, PartialEq)]
+pub struct PopoverButton {
+	pub title: String,
+	pub text: String,
+}
+
+#[derive(Clone, Serialize, Deserialize, Derivative, Default)]
+#[derivative(Debug, PartialEq)]
+pub struct RadioInput {
+	pub entries: Vec<RadioEntryData>,
+
+	// This uses `u32` instead of `usize` since it will be serialized as a normal JS number
+	// TODO(mfish33): Replace with usize when using native UI
+	#[serde(rename = "selectedIndex")]
+	pub selected_index: u32,
+}
+
+#[derive(Clone, Serialize, Deserialize, Derivative, Default)]
+#[derivative(Debug, PartialEq)]
+pub struct RadioEntryData {
+	pub value: String,
+	pub label: String,
+	pub icon: String,
+	pub tooltip: String,
+	#[serde(skip)]
+	#[derivative(Debug = "ignore", PartialEq = "ignore")]
+	pub on_update: WidgetCallback<()>,
+}