Set the mouse cursor in the canvas based on the current tool and its state (#480)

* Add FrontendMouseCursor and DisplayMouseCursor

* Add update_cursor method to the Fsm trait and implement it for all tools

* Rename DisplayMouseCursor to UpdateMouseCursor

* Add 'To CSS Cursor Property' transform decorator and change the mouse cursor in the canvas based on the current tool and its state

* Implement update_cursor for Navigate tool properly

* Keep the cursor when dragging outside of the canvas

* Change the mouse cursor to 'zoom-in' when LMB dragging on canvas with Navigate tool

* Rename FrontendMouseCursor to MouseCursorIcon

* Rename 'event' to 'e' and replace v-on with @

* Change the definition of the MouseCursorIcon type in TS

* Replace switch with dictionary look-up

* Move the definition of MouseCursorIcon closer to where it's used

editor/src/frontend/frontend_message.rs

@@ -1,4 +1,4 @@
-use super::utility_types::FrontendDocumentDetails;
+use super::utility_types::{FrontendDocumentDetails, MouseCursorIcon};
 use crate::document::layer_panel::{LayerPanelEntry, RawBuffer};
 use crate::message_prelude::*;
 use crate::misc::HintData;
@@ -37,6 +37,7 @@ pub enum FrontendMessage {
 	UpdateDocumentRulers { origin: (f64, f64), spacing: f64, interval: f64 },
 	UpdateDocumentScrollbars { position: (f64, f64), size: (f64, f64), multiplier: (f64, f64) },
 	UpdateInputHints { hint_data: HintData },
+	UpdateMouseCursor { cursor: MouseCursorIcon },
 	UpdateOpenDocumentsList { open_documents: Vec<FrontendDocumentDetails> },
 	UpdateWorkingColors { primary: Color, secondary: Color },
 }

editor/src/frontend/utility_types.rs

@@ -6,3 +6,12 @@ pub struct FrontendDocumentDetails {
 	pub name: String,
 	pub id: u64,
 }
+
+#[derive(Clone, Copy, Debug, Eq, Deserialize, PartialEq, Serialize)]
+pub enum MouseCursorIcon {
+	Default,
+	ZoomIn,
+	ZoomOut,
+	Grabbing,
+	Crosshair,
+}

editor/src/viewport_tools/tool.rs

@@ -27,6 +27,7 @@ pub trait Fsm {
 	) -> Self;
 
 	fn update_hints(&self, responses: &mut VecDeque<Message>);
+	fn update_cursor(&self, responses: &mut VecDeque<Message>);
 }
 
 #[derive(Debug, Clone)]

editor/src/viewport_tools/tool_message.rs

@@ -49,5 +49,6 @@ pub enum ToolMessage {
 	#[child]
 	Shape(ShapeMessage),
 	SwapColors,
+	UpdateCursor,
 	UpdateHints,
 }

editor/src/viewport_tools/tool_message_handler.rs

@@ -31,12 +31,13 @@ impl MessageHandler<ToolMessage, (&DocumentMessageHandler, &InputPreprocessorMes
 				}
 
 				// Send the Abort state transition to the tool
-				let mut send_abort_to_tool = |tool_type, message: ToolMessage, update_hints: bool| {
+				let mut send_abort_to_tool = |tool_type, message: ToolMessage, update_hints_and_cursor: bool| {
 					if let Some(tool) = tool_data.tools.get_mut(&tool_type) {
 						tool.process_action(message, (document, document_data, input), responses);
 
-						if update_hints {
+						if update_hints_and_cursor {
 							tool.process_action(ToolMessage::UpdateHints, (document, document_data, input), responses);
+							tool.process_action(ToolMessage::UpdateCursor, (document, document_data, input), responses);
 						}
 					}
 				};

editor/src/viewport_tools/tools/ellipse.rs

@@ -1,5 +1,6 @@
 use super::shared::resize::Resize;
 use crate::document::DocumentMessageHandler;
+use crate::frontend::utility_types::MouseCursorIcon;
 use crate::input::keyboard::{Key, MouseMotion};
 use crate::input::InputPreprocessorMessageHandler;
 use crate::message_prelude::*;
@@ -35,11 +36,17 @@ impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for Ellipse {
 			return;
 		}
 
+		if action == ToolMessage::UpdateCursor {
+			self.fsm_state.update_cursor(responses);
+			return;
+		}
+
 		let new_state = self.fsm_state.transition(action, data.0, data.1, &mut self.data, data.2, responses);
 
 		if self.fsm_state != new_state {
 			self.fsm_state = new_state;
 			self.fsm_state.update_hints(responses);
+			self.fsm_state.update_cursor(responses);
 		}
 	}
 
@@ -177,4 +184,8 @@ impl Fsm for EllipseToolFsmState {
 
 		responses.push_back(FrontendMessage::UpdateInputHints { hint_data }.into());
 	}
+
+	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
+		responses.push_back(FrontendMessage::UpdateMouseCursor { cursor: MouseCursorIcon::Crosshair }.into());
+	}
 }

editor/src/viewport_tools/tools/eyedropper.rs

@@ -1,5 +1,6 @@
 use crate::consts::SELECTION_TOLERANCE;
 use crate::document::DocumentMessageHandler;
+use crate::frontend::utility_types::MouseCursorIcon;
 use crate::input::keyboard::MouseMotion;
 use crate::input::InputPreprocessorMessageHandler;
 use crate::message_prelude::*;
@@ -34,11 +35,17 @@ impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for Eyedropper {
 			return;
 		}
 
+		if action == ToolMessage::UpdateCursor {
+			self.fsm_state.update_cursor(responses);
+			return;
+		}
+
 		let new_state = self.fsm_state.transition(action, data.0, data.1, &mut self.data, data.2, responses);
 
 		if self.fsm_state != new_state {
 			self.fsm_state = new_state;
 			self.fsm_state.update_hints(responses);
+			self.fsm_state.update_cursor(responses);
 		}
 	}
 
@@ -127,4 +134,8 @@ impl Fsm for EyedropperToolFsmState {
 
 		responses.push_back(FrontendMessage::UpdateInputHints { hint_data }.into());
 	}
+
+	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
+		responses.push_back(FrontendMessage::UpdateMouseCursor { cursor: MouseCursorIcon::Default }.into());
+	}
 }

editor/src/viewport_tools/tools/fill.rs

@@ -1,5 +1,6 @@
 use crate::consts::SELECTION_TOLERANCE;
 use crate::document::DocumentMessageHandler;
+use crate::frontend::utility_types::MouseCursorIcon;
 use crate::input::keyboard::MouseMotion;
 use crate::input::InputPreprocessorMessageHandler;
 use crate::message_prelude::*;
@@ -34,11 +35,17 @@ impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for Fill {
 			return;
 		}
 
+		if action == ToolMessage::UpdateCursor {
+			self.fsm_state.update_cursor(responses);
+			return;
+		}
+
 		let new_state = self.fsm_state.transition(action, data.0, data.1, &mut self.data, data.2, responses);
 
 		if self.fsm_state != new_state {
 			self.fsm_state = new_state;
 			self.fsm_state.update_hints(responses);
+			self.fsm_state.update_cursor(responses);
 		}
 	}
 
@@ -121,4 +128,8 @@ impl Fsm for FillToolFsmState {
 
 		responses.push_back(FrontendMessage::UpdateInputHints { hint_data }.into());
 	}
+
+	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
+		responses.push_back(FrontendMessage::UpdateMouseCursor { cursor: MouseCursorIcon::Default }.into());
+	}
 }

editor/src/viewport_tools/tools/line.rs

@@ -1,5 +1,6 @@
 use crate::consts::LINE_ROTATE_SNAP_ANGLE;
 use crate::document::DocumentMessageHandler;
+use crate::frontend::utility_types::MouseCursorIcon;
 use crate::input::keyboard::{Key, MouseMotion};
 use crate::input::mouse::ViewportPosition;
 use crate::input::InputPreprocessorMessageHandler;
@@ -38,11 +39,17 @@ impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for Line {
 			return;
 		}
 
+		if action == ToolMessage::UpdateCursor {
+			self.fsm_state.update_cursor(responses);
+			return;
+		}
+
 		let new_state = self.fsm_state.transition(action, data.0, data.1, &mut self.data, data.2, responses);
 
 		if self.fsm_state != new_state {
 			self.fsm_state = new_state;
 			self.fsm_state.update_hints(responses);
+			self.fsm_state.update_cursor(responses);
 		}
 	}
 
@@ -207,6 +214,10 @@ impl Fsm for LineToolFsmState {
 
 		responses.push_back(FrontendMessage::UpdateInputHints { hint_data }.into());
 	}
+
+	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
+		responses.push_back(FrontendMessage::UpdateMouseCursor { cursor: MouseCursorIcon::Crosshair }.into());
+	}
 }
 
 fn generate_transform(data: &mut LineToolData, lock: bool, snap: bool, center: bool) -> Message {

editor/src/viewport_tools/tools/navigate.rs

@@ -1,4 +1,5 @@
 use crate::document::DocumentMessageHandler;
+use crate::frontend::utility_types::MouseCursorIcon;
 use crate::input::keyboard::{Key, MouseMotion};
 use crate::input::InputPreprocessorMessageHandler;
 use crate::message_prelude::*;
@@ -34,11 +35,17 @@ impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for Navigate {
 			return;
 		}
 
+		if action == ToolMessage::UpdateCursor {
+			self.fsm_state.update_cursor(responses);
+			return;
+		}
+
 		let new_state = self.fsm_state.transition(action, data.0, data.1, &mut self.data, data.2, responses);
 
 		if self.fsm_state != new_state {
 			self.fsm_state = new_state;
 			self.fsm_state.update_hints(responses);
+			self.fsm_state.update_cursor(responses);
 		}
 	}
 
@@ -211,4 +218,15 @@ impl Fsm for NavigateToolFsmState {
 
 		responses.push_back(FrontendMessage::UpdateInputHints { hint_data }.into());
 	}
+
+	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
+		let cursor = match *self {
+			NavigateToolFsmState::Ready => MouseCursorIcon::ZoomIn,
+			NavigateToolFsmState::Panning => MouseCursorIcon::Grabbing,
+			NavigateToolFsmState::Tilting => MouseCursorIcon::Default,
+			NavigateToolFsmState::Zooming => MouseCursorIcon::ZoomIn,
+		};
+
+		responses.push_back(FrontendMessage::UpdateMouseCursor { cursor }.into());
+	}
 }

editor/src/viewport_tools/tools/path.rs

@@ -1,6 +1,7 @@
 use crate::consts::{COLOR_ACCENT, VECTOR_MANIPULATOR_ANCHOR_MARKER_SIZE};
 use crate::document::utility_types::{VectorManipulatorSegment, VectorManipulatorShape};
 use crate::document::DocumentMessageHandler;
+use crate::frontend::utility_types::MouseCursorIcon;
 use crate::input::keyboard::{Key, MouseMotion};
 use crate::input::InputPreprocessorMessageHandler;
 use crate::message_prelude::*;
@@ -41,11 +42,17 @@ impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for Path {
 			return;
 		}
 
+		if action == ToolMessage::UpdateCursor {
+			self.fsm_state.update_cursor(responses);
+			return;
+		}
+
 		let new_state = self.fsm_state.transition(action, data.0, data.1, &mut self.data, data.2, responses);
 
 		if self.fsm_state != new_state {
 			self.fsm_state = new_state;
 			self.fsm_state.update_hints(responses);
+			self.fsm_state.update_cursor(responses);
 		}
 	}
 
@@ -476,6 +483,10 @@ impl Fsm for PathToolFsmState {
 
 		responses.push_back(FrontendMessage::UpdateInputHints { hint_data }.into());
 	}
+
+	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
+		responses.push_back(FrontendMessage::UpdateMouseCursor { cursor: MouseCursorIcon::Default }.into());
+	}
 }
 
 struct VectorManipulatorTypes {

editor/src/viewport_tools/tools/pen.rs

@@ -1,4 +1,5 @@
 use crate::document::DocumentMessageHandler;
+use crate::frontend::utility_types::MouseCursorIcon;
 use crate::input::keyboard::{Key, MouseMotion};
 use crate::input::InputPreprocessorMessageHandler;
 use crate::message_prelude::*;
@@ -44,11 +45,17 @@ impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for Pen {
 			return;
 		}
 
+		if action == ToolMessage::UpdateCursor {
+			self.fsm_state.update_cursor(responses);
+			return;
+		}
+
 		let new_state = self.fsm_state.transition(action, data.0, data.1, &mut self.data, data.2, responses);
 
 		if self.fsm_state != new_state {
 			self.fsm_state = new_state;
 			self.fsm_state.update_hints(responses);
+			self.fsm_state.update_cursor(responses);
 		}
 	}
 
@@ -193,6 +200,10 @@ impl Fsm for PenToolFsmState {
 
 		responses.push_back(FrontendMessage::UpdateInputHints { hint_data }.into());
 	}
+
+	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
+		responses.push_back(FrontendMessage::UpdateMouseCursor { cursor: MouseCursorIcon::Default }.into());
+	}
 }
 
 fn remove_preview(data: &PenToolData) -> Message {

editor/src/viewport_tools/tools/rectangle.rs

@@ -1,5 +1,6 @@
 use super::shared::resize::Resize;
 use crate::document::DocumentMessageHandler;
+use crate::frontend::utility_types::MouseCursorIcon;
 use crate::input::keyboard::{Key, MouseMotion};
 use crate::input::InputPreprocessorMessageHandler;
 use crate::message_prelude::*;
@@ -35,11 +36,17 @@ impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for Rectangle {
 			return;
 		}
 
+		if action == ToolMessage::UpdateCursor {
+			self.fsm_state.update_cursor(responses);
+			return;
+		}
+
 		let new_state = self.fsm_state.transition(action, data.0, data.1, &mut self.data, data.2, responses);
 
 		if self.fsm_state != new_state {
 			self.fsm_state = new_state;
 			self.fsm_state.update_hints(responses);
+			self.fsm_state.update_cursor(responses);
 		}
 	}
 
@@ -177,4 +184,8 @@ impl Fsm for RectangleToolFsmState {
 
 		responses.push_back(FrontendMessage::UpdateInputHints { hint_data }.into());
 	}
+
+	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
+		responses.push_back(FrontendMessage::UpdateMouseCursor { cursor: MouseCursorIcon::Crosshair }.into());
+	}
 }

editor/src/viewport_tools/tools/select.rs

@@ -1,6 +1,7 @@
 use crate::consts::{COLOR_ACCENT, SELECTION_DRAG_ANGLE, SELECTION_TOLERANCE};
 use crate::document::utility_types::{AlignAggregate, AlignAxis, FlipAxis};
 use crate::document::DocumentMessageHandler;
+use crate::frontend::utility_types::MouseCursorIcon;
 use crate::input::keyboard::{Key, MouseMotion};
 use crate::input::mouse::ViewportPosition;
 use crate::input::InputPreprocessorMessageHandler;
@@ -46,11 +47,17 @@ impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for Select {
 			return;
 		}
 
+		if action == ToolMessage::UpdateCursor {
+			self.fsm_state.update_cursor(responses);
+			return;
+		}
+
 		let new_state = self.fsm_state.transition(action, data.0, data.1, &mut self.data, data.2, responses);
 
 		if self.fsm_state != new_state {
 			self.fsm_state = new_state;
 			self.fsm_state.update_hints(responses);
+			self.fsm_state.update_cursor(responses);
 		}
 	}
 
@@ -420,4 +427,8 @@ impl Fsm for SelectToolFsmState {
 
 		responses.push_back(FrontendMessage::UpdateInputHints { hint_data }.into());
 	}
+
+	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
+		responses.push_back(FrontendMessage::UpdateMouseCursor { cursor: MouseCursorIcon::Default }.into());
+	}
 }

editor/src/viewport_tools/tools/shape.rs

@@ -1,5 +1,6 @@
 use super::shared::resize::Resize;
 use crate::document::DocumentMessageHandler;
+use crate::frontend::utility_types::MouseCursorIcon;
 use crate::input::keyboard::{Key, MouseMotion};
 use crate::input::InputPreprocessorMessageHandler;
 use crate::message_prelude::*;
@@ -36,11 +37,17 @@ impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for Shape {
 			return;
 		}
 
+		if action == ToolMessage::UpdateCursor {
+			self.fsm_state.update_cursor(responses);
+			return;
+		}
+
 		let new_state = self.fsm_state.transition(action, data.0, data.1, &mut self.data, data.2, responses);
 
 		if self.fsm_state != new_state {
 			self.fsm_state = new_state;
 			self.fsm_state.update_hints(responses);
+			self.fsm_state.update_cursor(responses);
 		}
 	}
 
@@ -185,4 +192,8 @@ impl Fsm for ShapeToolFsmState {
 
 		responses.push_back(FrontendMessage::UpdateInputHints { hint_data }.into());
 	}
+
+	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
+		responses.push_back(FrontendMessage::UpdateMouseCursor { cursor: MouseCursorIcon::Crosshair }.into());
+	}
 }