Move layouts definitions to backend and fix Firefox overlay scrollbars (#647)

* Fix two-axis scrollbars in scrollable regions on Firefox * Move Document Mode dropdown to the backend; and related code cleanup * Port the Layer Tree options bar layout to the backend * Port the tool shelf to the backend * Clean up initialization and wasm wrapper * Fix crash * Fix missing document bar * Remove unused functions in api.rs * Code review * Tool initalisation * Remove some frontend functions * Initalise -> Init so en-US/GB doesn't have to matter :) * Remove blend_mode and opacity from LayerPanelEntry Co-authored-by: 0hypercube <0hypercube@gmail.com>
2026-09-29 22:58:12 +08:00 · 2022-05-17 13:12:52 -07:00
parent e7d63276ad
commit 29e00e488b
50 changed files with 1034 additions and 978 deletions
@@ -2,7 +2,7 @@ use super::tools::*;
 use crate::communication::message_handler::MessageHandler;
 use crate::document::DocumentMessageHandler;
 use crate::input::InputPreprocessorMessageHandler;
-use crate::layout::widgets::PropertyHolder;
+use crate::layout::widgets::{IconButton, LayoutRow, PropertyHolder, Separator, SeparatorDirection, SeparatorType, Widget, WidgetCallback, WidgetHolder, WidgetLayout};
 use crate::message_prelude::*;

 use graphene::color::Color;
@@ -65,6 +65,43 @@ impl ToolData {
 	}
 }

+impl PropertyHolder for ToolData {
+	fn properties(&self) -> WidgetLayout {
+		let tool_groups_layout = ToolType::list_tools_in_groups()
+			.iter()
+			.flat_map(|group| {
+				let separator = std::iter::once(WidgetHolder::new(Widget::Separator(Separator {
+					direction: SeparatorDirection::Vertical,
+					separator_type: SeparatorType::Section,
+				})));
+				let buttons = group.iter().map(|tool_type| {
+					WidgetHolder::new(Widget::IconButton(IconButton {
+						icon: tool_type.icon_name(),
+						size: 32,
+						tooltip: tool_type.tooltip(),
+						active: self.active_tool_type == *tool_type,
+						on_update: WidgetCallback::new(|_| {
+							if !tool_type.tooltip().contains("Coming Soon") {
+								ToolMessage::ActivateTool { tool_type: *tool_type }.into()
+							} else {
+								DialogMessage::RequestComingSoonDialog { issue: None }.into()
+							}
+						}),
+						..Default::default()
+					}))
+				});
+				separator.chain(buttons)
+			})
+			// Skip the initial separator
+			.skip(1)
+			.collect();
+
+		WidgetLayout {
+			layout: vec![LayoutRow::Column { widgets: tool_groups_layout }],
+		}
+	}
+}
+
 #[derive(Debug)]
 pub struct ToolFsmState {
 	pub document_tool_data: DocumentToolData,
@@ -126,19 +163,15 @@ impl ToolFsmState {
 #[repr(usize)]
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Serialize, Deserialize)]
 pub enum ToolType {
+	// General tool group
 	Select,
 	Artboard,
 	Navigate,
 	Eyedropper,
-	Text,
 	Fill,
 	Gradient,
-	Brush,
-	Heal,
-	Clone,
-	Patch,
-	Detail,
-	Relight,
+
+	// Vector tool group
 	Path,
 	Pen,
 	Freehand,
@@ -147,6 +180,115 @@ pub enum ToolType {
 	Rectangle,
 	Ellipse,
 	Shape,
+	Text,
+
+	// Raster tool group
+	Brush,
+	Heal,
+	Clone,
+	Patch,
+	Detail,
+	Relight,
+}
+
+impl ToolType {
+	/// List of all the tools in their conventional ordering and grouping.
+	pub fn list_tools_in_groups() -> [&'static [ToolType]; 3] {
+		[
+			&[
+				// General tool group
+				ToolType::Select,
+				ToolType::Artboard,
+				ToolType::Navigate,
+				ToolType::Eyedropper,
+				ToolType::Fill,
+				ToolType::Gradient,
+			],
+			&[
+				// Vector tool group
+				ToolType::Path,
+				ToolType::Pen,
+				ToolType::Freehand,
+				ToolType::Spline,
+				ToolType::Line,
+				ToolType::Rectangle,
+				ToolType::Ellipse,
+				ToolType::Shape,
+				ToolType::Text,
+			],
+			&[
+				// Raster tool group
+				ToolType::Brush,
+				ToolType::Heal,
+				ToolType::Clone,
+				ToolType::Patch,
+				ToolType::Detail,
+				ToolType::Relight,
+			],
+		]
+	}
+
+	pub fn icon_name(&self) -> String {
+		match self {
+			// General tool group
+			ToolType::Select => "GeneralSelectTool".into(),
+			ToolType::Artboard => "GeneralArtboardTool".into(),
+			ToolType::Navigate => "GeneralNavigateTool".into(),
+			ToolType::Eyedropper => "GeneralEyedropperTool".into(),
+			ToolType::Fill => "GeneralFillTool".into(),
+			ToolType::Gradient => "GeneralGradientTool".into(),
+
+			// Vector tool group
+			ToolType::Path => "VectorPathTool".into(),
+			ToolType::Pen => "VectorPenTool".into(),
+			ToolType::Freehand => "VectorFreehandTool".into(),
+			ToolType::Spline => "VectorSplineTool".into(),
+			ToolType::Line => "VectorLineTool".into(),
+			ToolType::Rectangle => "VectorRectangleTool".into(),
+			ToolType::Ellipse => "VectorEllipseTool".into(),
+			ToolType::Shape => "VectorShapeTool".into(),
+			ToolType::Text => "VectorTextTool".into(),
+
+			// Raster tool group
+			ToolType::Brush => "RasterBrushTool".into(),
+			ToolType::Heal => "RasterHealTool".into(),
+			ToolType::Clone => "RasterCloneTool".into(),
+			ToolType::Patch => "RasterPatchTool".into(),
+			ToolType::Detail => "RasterDetailTool".into(),
+			ToolType::Relight => "RasterRelightTool".into(),
+		}
+	}
+
+	pub fn tooltip(&self) -> String {
+		match self {
+			// General tool group
+			ToolType::Select => "Select Tool (V)".into(),
+			ToolType::Artboard => "Artboard Tool".into(),
+			ToolType::Navigate => "Navigate Tool (Z)".into(),
+			ToolType::Eyedropper => "Eyedropper Tool (I)".into(),
+			ToolType::Fill => "Fill Tool (F)".into(),
+			ToolType::Gradient => "Gradient Tool (H)".into(),
+
+			// Vector tool group
+			ToolType::Path => "Path Tool (A)".into(),
+			ToolType::Pen => "Pen Tool (P)".into(),
+			ToolType::Freehand => "Freehand Tool (N)".into(),
+			ToolType::Spline => "Spline Tool".into(),
+			ToolType::Line => "Line Tool (L)".into(),
+			ToolType::Rectangle => "Rectangle Tool (M)".into(),
+			ToolType::Ellipse => "Ellipse Tool (E)".into(),
+			ToolType::Shape => "Shape Tool (Y)".into(),
+			ToolType::Text => "Text Tool (T)".into(),
+
+			// Raster tool group
+			ToolType::Brush => "Coming Soon: Brush Tool (B)".into(),
+			ToolType::Heal => "Coming Soon: Heal Tool (J)".into(),
+			ToolType::Clone => "Coming Soon: Clone Tool (C)".into(),
+			ToolType::Patch => "Coming Soon: Patch Tool".into(),
+			ToolType::Detail => "Coming Soon: Detail Tool (D)".into(),
+			ToolType::Relight => "Coming Soon: Relight Tool (O)".into(),
+		}
+	}
 }

 impl fmt::Display for ToolType {
@@ -154,19 +296,15 @@ impl fmt::Display for ToolType {
 		use ToolType::*;

 		let name = match_variant_name!(match (self) {
+			// General tool group
 			Select,
 			Artboard,
 			Navigate,
 			Eyedropper,
-			Text,
 			Fill,
 			Gradient,
-			Brush,
-			Heal,
-			Clone,
-			Patch,
-			Detail,
-			Relight,
+
+			// Vector tool group
 			Path,
 			Pen,
 			Freehand,
@@ -174,7 +312,16 @@ impl fmt::Display for ToolType {
 			Line,
 			Rectangle,
 			Ellipse,
-			Shape
+			Shape,
+			Text,
+
+			// Raster tool group
+			Brush,
+			Heal,
+			Clone,
+			Patch,
+			Detail,
+			Relight,
 		});

 		formatter.write_str(name)
@@ -191,19 +338,15 @@ pub enum StandardToolMessageType {
 pub fn standard_tool_message(tool: ToolType, message_type: StandardToolMessageType) -> Option<ToolMessage> {
 	match message_type {
 		StandardToolMessageType::DocumentIsDirty => match tool {
+			// General tool group
 			ToolType::Select => Some(SelectToolMessage::DocumentIsDirty.into()),
 			ToolType::Artboard => Some(ArtboardToolMessage::DocumentIsDirty.into()),
 			ToolType::Navigate => None,   // Some(NavigateToolMessage::DocumentIsDirty.into()),
 			ToolType::Eyedropper => None, // Some(EyedropperToolMessage::DocumentIsDirty.into()),
-			ToolType::Text => Some(TextMessage::DocumentIsDirty.into()),
-			ToolType::Fill => None, // Some(FillToolMessage::DocumentIsDirty.into()),
+			ToolType::Fill => None,       // Some(FillToolMessage::DocumentIsDirty.into()),
 			ToolType::Gradient => Some(GradientToolMessage::DocumentIsDirty.into()),
-			ToolType::Brush => None,   // Some(BrushMessage::DocumentIsDirty.into()),
-			ToolType::Heal => None,    // Some(HealMessage::DocumentIsDirty.into()),
-			ToolType::Clone => None,   // Some(CloneMessage::DocumentIsDirty.into()),
-			ToolType::Patch => None,   // Some(PatchMessage::DocumentIsDirty.into()),
-			ToolType::Detail => None,  // Some(DetailToolMessage::DocumentIsDirty.into()),
-			ToolType::Relight => None, // Some(RelightMessage::DocumentIsDirty.into()),
+
+			// Vector tool group
 			ToolType::Path => Some(PathToolMessage::DocumentIsDirty.into()),
 			ToolType::Pen => Some(PenToolMessage::DocumentIsDirty.into()),
 			ToolType::Freehand => None,  // Some(FreehandToolMessage::DocumentIsDirty.into()),
@@ -212,21 +355,26 @@ pub fn standard_tool_message(tool: ToolType, message_type: StandardToolMessageTy
 			ToolType::Rectangle => None, // Some(RectangleToolMessage::DocumentIsDirty.into()),
 			ToolType::Ellipse => None,   // Some(EllipseToolMessage::DocumentIsDirty.into()),
 			ToolType::Shape => None,     // Some(ShapeToolMessage::DocumentIsDirty.into()),
+			ToolType::Text => Some(TextMessage::DocumentIsDirty.into()),
+
+			// Raster tool group
+			ToolType::Brush => None,   // Some(BrushMessage::DocumentIsDirty.into()),
+			ToolType::Heal => None,    // Some(HealMessage::DocumentIsDirty.into()),
+			ToolType::Clone => None,   // Some(CloneMessage::DocumentIsDirty.into()),
+			ToolType::Patch => None,   // Some(PatchMessage::DocumentIsDirty.into()),
+			ToolType::Detail => None,  // Some(DetailToolMessage::DocumentIsDirty.into()),
+			ToolType::Relight => None, // Some(RelightMessage::DocumentIsDirty.into()),
 		},
 		StandardToolMessageType::Abort => match tool {
+			// General tool group
 			ToolType::Select => Some(SelectToolMessage::Abort.into()),
 			ToolType::Artboard => Some(ArtboardToolMessage::Abort.into()),
 			ToolType::Navigate => Some(NavigateToolMessage::Abort.into()),
 			ToolType::Eyedropper => Some(EyedropperToolMessage::Abort.into()),
-			ToolType::Text => Some(TextMessage::Abort.into()),
 			ToolType::Fill => Some(FillToolMessage::Abort.into()),
 			ToolType::Gradient => Some(GradientToolMessage::Abort.into()),
-			// ToolType::Brush => Some(BrushMessage::Abort.into()),
-			// ToolType::Heal => Some(HealMessage::Abort.into()),
-			// ToolType::Clone => Some(CloneMessage::Abort.into()),
-			// ToolType::Patch => Some(PatchMessage::Abort.into()),
-			// ToolType::Detail => Some(DetailToolMessage::Abort.into()),
-			// ToolType::Relight => Some(RelightMessage::Abort.into()),
+
+			// Vector tool group
 			ToolType::Path => Some(PathToolMessage::Abort.into()),
 			ToolType::Pen => Some(PenToolMessage::Abort.into()),
 			ToolType::Freehand => Some(FreehandToolMessage::Abort.into()),
@@ -235,7 +383,15 @@ pub fn standard_tool_message(tool: ToolType, message_type: StandardToolMessageTy
 			ToolType::Rectangle => Some(RectangleToolMessage::Abort.into()),
 			ToolType::Ellipse => Some(EllipseToolMessage::Abort.into()),
 			ToolType::Shape => Some(ShapeToolMessage::Abort.into()),
-			_ => None,
+			ToolType::Text => Some(TextMessage::Abort.into()),
+
+			// Raster tool group
+			ToolType::Brush => None,   // Some(BrushMessage::Abort.into()),
+			ToolType::Heal => None,    // Some(HealMessage::Abort.into()),
+			ToolType::Clone => None,   // Some(CloneMessage::Abort.into()),
+			ToolType::Patch => None,   // Some(PatchMessage::Abort.into()),
+			ToolType::Detail => None,  // Some(DetailToolMessage::Abort.into()),
+			ToolType::Relight => None, // Some(RelightMessage::Abort.into()),
 		},
 		StandardToolMessageType::SelectionChanged => match tool {
 			ToolType::Path => Some(PathToolMessage::SelectionChanged.into()),
@@ -248,19 +404,15 @@ pub fn message_to_tool_type(message: &ToolMessage) -> ToolType {
 	use ToolMessage::*;

 	match message {
+		// General tool group
 		Select(_) => ToolType::Select,
 		Artboard(_) => ToolType::Artboard,
 		Navigate(_) => ToolType::Navigate,
 		Eyedropper(_) => ToolType::Eyedropper,
-		Text(_) => ToolType::Text,
 		Fill(_) => ToolType::Fill,
 		Gradient(_) => ToolType::Gradient,
-		// Brush(_) => ToolType::Brush,
-		// Heal(_) => ToolType::Heal,
-		// Clone(_) => ToolType::Clone,
-		// Patch(_) => ToolType::Patch,
-		// Detail(_) => ToolType::Detail,
-		// Relight(_) => ToolType::Relight,
+
+		// Vector tool group
 		Path(_) => ToolType::Path,
 		Pen(_) => ToolType::Pen,
 		Freehand(_) => ToolType::Freehand,
@@ -269,6 +421,15 @@ pub fn message_to_tool_type(message: &ToolMessage) -> ToolType {
 		Rectangle(_) => ToolType::Rectangle,
 		Ellipse(_) => ToolType::Ellipse,
 		Shape(_) => ToolType::Shape,
+		Text(_) => ToolType::Text,
+
+		// Raster tool group
+		// Brush(_) => ToolType::Brush,
+		// Heal(_) => ToolType::Heal,
+		// Clone(_) => ToolType::Clone,
+		// Patch(_) => ToolType::Patch,
+		// Detail(_) => ToolType::Detail,
+		// Relight(_) => ToolType::Relight,
 		_ => panic!("Conversion from message to tool type impossible because the given ToolMessage does not belong to a tool"),
 	}
 }
@@ -82,6 +82,7 @@ pub enum ToolMessage {
 		tool_type: ToolType,
 	},
 	DocumentIsDirty,
+	InitTools,
 	ResetColors,
 	SelectionChanged,
 	SelectPrimaryColor {
@@ -2,6 +2,7 @@ use super::tool::{message_to_tool_type, standard_tool_message, update_working_co
 use crate::document::DocumentMessageHandler;
 use crate::input::InputPreprocessorMessageHandler;
 use crate::layout::layout_message::LayoutTarget;
+use crate::layout::widgets::PropertyHolder;
 use crate::message_prelude::*;

 use graphene::color::Color;
@@ -69,12 +70,11 @@ impl MessageHandler<ToolMessage, (&DocumentMessageHandler, &InputPreprocessorMes
 				// Store the new active tool
 				tool_data.active_tool_type = tool_type;

-				// Notify the frontend about the new active tool to be displayed
-				let tool_name = tool_type.to_string();
-				responses.push_back(FrontendMessage::UpdateActiveTool { tool_name }.into());
-
 				// Send Properties to the frontend
 				tool_data.tools.get(&tool_type).unwrap().register_properties(responses, LayoutTarget::ToolOptions);
+
+				// Notify the frontend about the new active tool to be displayed
+				tool_data.register_properties(responses, LayoutTarget::ToolShelf);
 			}
 			DocumentIsDirty => {
 				// Send the DocumentIsDirty message to the active tool's sub-tool message handler
@@ -83,6 +83,21 @@ impl MessageHandler<ToolMessage, (&DocumentMessageHandler, &InputPreprocessorMes
 					responses.push_back(message.into());
 				}
 			}
+			InitTools => {
+				let tool_data = &mut self.tool_state.tool_data;
+				let document_data = &self.tool_state.document_tool_data;
+				let active_tool = &tool_data.active_tool_type;
+
+				// Register initial properties
+				tool_data.tools.get(active_tool).unwrap().register_properties(responses, LayoutTarget::ToolOptions);
+
+				// Notify the frontend about the initial active tool
+				tool_data.register_properties(responses, LayoutTarget::ToolShelf);
+
+				// Set initial hints and cursor
+				tool_data.active_tool_mut().process_action(ToolMessage::UpdateHints, (document, document_data, input), responses);
+				tool_data.active_tool_mut().process_action(ToolMessage::UpdateCursor, (document, document_data, input), responses);
+			}
 			ResetColors => {
 				let document_data = &mut self.tool_state.document_tool_data;

@@ -63,10 +63,10 @@ impl PropertyHolder for FreehandTool {
 			widgets: vec![WidgetHolder::new(Widget::NumberInput(NumberInput {
 				unit: " px".into(),
 				label: "Weight".into(),
-				value: self.options.line_weight as f64,
+				value: Some(self.options.line_weight as f64),
 				is_integer: false,
 				min: Some(1.),
-				on_update: WidgetCallback::new(|number_input: &NumberInput| FreehandToolMessage::UpdateOptions(FreehandToolMessageOptionsUpdate::LineWeight(number_input.value)).into()),
+				on_update: WidgetCallback::new(|number_input: &NumberInput| FreehandToolMessage::UpdateOptions(FreehandToolMessageOptionsUpdate::LineWeight(number_input.value.unwrap())).into()),
 				..NumberInput::default()
 			}))],
 		}])
@@ -64,10 +64,10 @@ impl PropertyHolder for LineTool {
 			widgets: vec![WidgetHolder::new(Widget::NumberInput(NumberInput {
 				unit: " px".into(),
 				label: "Weight".into(),
-				value: self.options.line_weight as f64,
+				value: Some(self.options.line_weight as f64),
 				is_integer: false,
 				min: Some(0.),
-				on_update: WidgetCallback::new(|number_input: &NumberInput| LineToolMessage::UpdateOptions(LineOptionsUpdate::LineWeight(number_input.value)).into()),
+				on_update: WidgetCallback::new(|number_input: &NumberInput| LineToolMessage::UpdateOptions(LineOptionsUpdate::LineWeight(number_input.value.unwrap())).into()),
 				..NumberInput::default()
 			}))],
 		}])
@@ -73,10 +73,10 @@ impl PropertyHolder for PenTool {
 			widgets: vec![WidgetHolder::new(Widget::NumberInput(NumberInput {
 				unit: " px".into(),
 				label: "Weight".into(),
-				value: self.options.line_weight,
+				value: Some(self.options.line_weight),
 				is_integer: false,
 				min: Some(0.),
-				on_update: WidgetCallback::new(|number_input: &NumberInput| PenToolMessage::UpdateOptions(PenOptionsUpdate::LineWeight(number_input.value)).into()),
+				on_update: WidgetCallback::new(|number_input: &NumberInput| PenToolMessage::UpdateOptions(PenOptionsUpdate::LineWeight(number_input.value.unwrap())).into()),
 				..NumberInput::default()
 			}))],
 		}])
@@ -61,11 +61,11 @@ impl PropertyHolder for ShapeTool {
 		WidgetLayout::new(vec![LayoutRow::Row {
 			widgets: vec![WidgetHolder::new(Widget::NumberInput(NumberInput {
 				label: "Sides".into(),
-				value: self.options.vertices as f64,
+				value: Some(self.options.vertices as f64),
 				is_integer: true,
 				min: Some(3.),
 				max: Some(256.),
-				on_update: WidgetCallback::new(|number_input: &NumberInput| ShapeToolMessage::UpdateOptions(ShapeOptionsUpdate::Vertices(number_input.value as u8)).into()),
+				on_update: WidgetCallback::new(|number_input: &NumberInput| ShapeToolMessage::UpdateOptions(ShapeOptionsUpdate::Vertices(number_input.value.unwrap() as u8)).into()),
 				..NumberInput::default()
 			}))],
 		}])
@@ -67,10 +67,10 @@ impl PropertyHolder for SplineTool {
 			widgets: vec![WidgetHolder::new(Widget::NumberInput(NumberInput {
 				unit: " px".into(),
 				label: "Weight".into(),
-				value: self.options.line_weight,
+				value: Some(self.options.line_weight),
 				is_integer: false,
 				min: Some(0.),
-				on_update: WidgetCallback::new(|number_input: &NumberInput| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::LineWeight(number_input.value)).into()),
+				on_update: WidgetCallback::new(|number_input: &NumberInput| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::LineWeight(number_input.value.unwrap())).into()),
 				..NumberInput::default()
 			}))],
 		}])
@@ -115,10 +115,10 @@ impl PropertyHolder for TextTool {
 				WidgetHolder::new(Widget::NumberInput(NumberInput {
 					unit: " px".into(),
 					label: "Size".into(),
-					value: self.options.font_size as f64,
+					value: Some(self.options.font_size as f64),
 					is_integer: true,
 					min: Some(1.),
-					on_update: WidgetCallback::new(|number_input: &NumberInput| TextMessage::UpdateOptions(TextOptionsUpdate::FontSize(number_input.value as u32)).into()),
+					on_update: WidgetCallback::new(|number_input: &NumberInput| TextMessage::UpdateOptions(TextOptionsUpdate::FontSize(number_input.value.unwrap() as u32)).into()),
 					..NumberInput::default()
 				})),
 			],