Implement anchor and handle point rendering with the Path Tool (#353)

* Implement Path Tool

* Draw a red rectangle where the first point on the shape is

* Correctly render anchors, handles, and connecting lines

* Fix drain() which can panic

* Refactor frontend messages to work as return values not callbacks

* Reduce the number of unnecessary frontend updates

* Fix stack overflow by using a loop

* Group Document Render calls and put them at the end

* Speed hacks for dirtification

* Add performance

* Bunch folder changed updates

* Add triggers to redraw overlays to movement_handler

* Polish the pixel-perfect rendering of vector manipulators

* Restore scrollbars that were disabled

* Cleanup

* WIP Add shape outline rendering

* Fix compiling

* Add outlines to selected shapes

* Fix outlines rendering over handles and anchors

* Fix dirtification

* Add a comment

* Address code review feedback

* Formatting

* Small tweaks

Co-authored-by: Oliver Davies <oliver@psyfer.io>
Co-authored-by: Dennis Kobert <dennis@kobert.dev>

editor/src/communication/dispatcher.rs

@@ -1,4 +1,4 @@
-use crate::{frontend::FrontendMessageHandler, message_prelude::*, Callback, EditorError};
+use crate::{message_prelude::*, EditorError};
 
 pub use crate::document::DocumentsMessageHandler;
 pub use crate::input::{InputMapper, InputPreprocessor};
@@ -8,49 +8,47 @@ use crate::global::GlobalMessageHandler;
 use std::collections::VecDeque;
 
 pub struct Dispatcher {
-	frontend_message_handler: FrontendMessageHandler,
 	input_preprocessor: InputPreprocessor,
 	input_mapper: InputMapper,
 	global_message_handler: GlobalMessageHandler,
 	tool_message_handler: ToolMessageHandler,
 	documents_message_handler: DocumentsMessageHandler,
 	messages: VecDeque<Message>,
+	pub responses: Vec<FrontendMessage>,
 }
 
+const GROUP_MESSAGES: &[MessageDiscriminant] = &[
+	MessageDiscriminant::Documents(DocumentsMessageDiscriminant::Document(DocumentMessageDiscriminant::RenderDocument)),
+	MessageDiscriminant::Documents(DocumentsMessageDiscriminant::Document(DocumentMessageDiscriminant::FolderChanged)),
+	MessageDiscriminant::Frontend(FrontendMessageDiscriminant::UpdateLayer),
+	MessageDiscriminant::Frontend(FrontendMessageDiscriminant::ExpandFolder),
+	MessageDiscriminant::Tool(ToolMessageDiscriminant::SelectedLayersChanged),
+];
+
 impl Dispatcher {
 	pub fn handle_message<T: Into<Message>>(&mut self, message: T) -> Result<(), EditorError> {
-		let message = message.into();
+		self.messages.push_back(message.into());
+
 		use Message::*;
-		if !(matches!(
-			message,
-			Message::InputPreprocessor(_)
-				| Message::InputMapper(_)
-				| Message::Documents(DocumentsMessage::Document(DocumentMessage::RenderDocument))
-				| Message::Frontend(FrontendMessage::UpdateCanvas { .. })
-				| Message::Frontend(FrontendMessage::UpdateScrollbars { .. })
-				| Message::Frontend(FrontendMessage::SetCanvasZoom { .. })
-				| Message::Frontend(FrontendMessage::SetCanvasRotation { .. })
-		) || MessageDiscriminant::from(&message).local_name().ends_with("MouseMove"))
-		{
-			log::trace!("Message: {:?}", message);
-			//log::trace!("Hints:{:?}", self.input_mapper.hints(self.collect_actions()));
-		}
-		match message {
-			NoOp => (),
-			Documents(message) => self.documents_message_handler.process_action(message, &self.input_preprocessor, &mut self.messages),
-			Global(message) => self.global_message_handler.process_action(message, (), &mut self.messages),
-			Tool(message) => self
-				.tool_message_handler
-				.process_action(message, (self.documents_message_handler.active_document(), &self.input_preprocessor), &mut self.messages),
-			Frontend(message) => self.frontend_message_handler.process_action(message, (), &mut self.messages),
-			InputPreprocessor(message) => self.input_preprocessor.process_action(message, (), &mut self.messages),
-			InputMapper(message) => {
-				let actions = self.collect_actions();
-				self.input_mapper.process_action(message, (&self.input_preprocessor, actions), &mut self.messages)
+		while let Some(message) = self.messages.pop_front() {
+			if GROUP_MESSAGES.contains(&message.to_discriminant()) && self.messages.contains(&message) {
+				continue;
+			}
+			log_message(&message);
+			match message {
+				NoOp => (),
+				Documents(message) => self.documents_message_handler.process_action(message, &self.input_preprocessor, &mut self.messages),
+				Global(message) => self.global_message_handler.process_action(message, (), &mut self.messages),
+				Tool(message) => self
+					.tool_message_handler
+					.process_action(message, (self.documents_message_handler.active_document(), &self.input_preprocessor), &mut self.messages),
+				Frontend(message) => self.responses.push(message),
+				InputPreprocessor(message) => self.input_preprocessor.process_action(message, (), &mut self.messages),
+				InputMapper(message) => {
+					let actions = self.collect_actions();
+					self.input_mapper.process_action(message, (&self.input_preprocessor, actions), &mut self.messages)
+				}
 			}
-		}
-		if let Some(message) = self.messages.pop_front() {
-			self.handle_message(message)?;
 		}
 		Ok(())
 	}
@@ -58,7 +56,6 @@ impl Dispatcher {
 	pub fn collect_actions(&self) -> ActionList {
 		//TODO: reduce the number of heap allocations
 		let mut list = Vec::new();
-		list.extend(self.frontend_message_handler.actions());
 		list.extend(self.input_preprocessor.actions());
 		list.extend(self.input_mapper.actions());
 		list.extend(self.global_message_handler.actions());
@@ -67,24 +64,36 @@ impl Dispatcher {
 		list
 	}
 
-	pub fn new(callback: Callback) -> Dispatcher {
+	pub fn new() -> Dispatcher {
 		Dispatcher {
-			frontend_message_handler: FrontendMessageHandler::new(callback),
 			input_preprocessor: InputPreprocessor::default(),
 			global_message_handler: GlobalMessageHandler::new(),
 			input_mapper: InputMapper::default(),
 			documents_message_handler: DocumentsMessageHandler::default(),
 			tool_message_handler: ToolMessageHandler::default(),
 			messages: VecDeque::new(),
+			responses: vec![],
 		}
 	}
 }
 
+fn log_message(message: &Message) {
+	use Message::*;
+	if log::max_level() == log::LevelFilter::Trace
+		&& !(matches!(
+			message,
+			InputPreprocessor(_) | Frontend(FrontendMessage::SetCanvasZoom { .. }) | Frontend(FrontendMessage::SetCanvasRotation { .. })
+		) || MessageDiscriminant::from(message).local_name().ends_with("MouseMove"))
+	{
+		log::trace!("Message: {:?}", message);
+		//log::trace!("Hints:{:?}", self.input_mapper.hints(self.collect_actions()));
+	}
+}
+
 #[cfg(test)]
 mod test {
 	use crate::{document::DocumentMessageHandler, message_prelude::*, misc::test_utils::EditorTestUtils, Editor};
 	use graphene::{color::Color, Operation};
-	use log::info;
 
 	fn init_logger() {
 		let _ = env_logger::builder().is_test(true).try_init();
@@ -95,9 +104,7 @@ mod test {
 	/// 2. A blue shape
 	/// 3. A green ellipse
 	fn create_editor_with_three_layers() -> Editor {
-		let mut editor = Editor::new(Box::new(|e| {
-			info!("Got frontend message: {:?}", e);
-		}));
+		let mut editor = Editor::new();
 
 		editor.select_primary_color(Color::RED);
 		editor.draw_rect(100., 200., 300., 400.);

editor/src/communication/message.rs

@@ -1,5 +1,6 @@
 use crate::message_prelude::*;
 use graphite_proc_macros::*;
+use serde::{Deserialize, Serialize};
 use std::{
 	collections::hash_map::DefaultHasher,
 	hash::{Hash, Hasher},
@@ -16,7 +17,7 @@ where
 }
 
 #[impl_message]
-#[derive(Clone, Debug, PartialEq)]
+#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
 pub enum Message {
 	NoOp,
 	#[child]

editor/src/consts.rs

@@ -1,3 +1,5 @@
+use graphene::color::Color;
+
 // VIEWPORT
 pub const VIEWPORT_ZOOM_WHEEL_RATE: f64 = 1. / 600.;
 pub const VIEWPORT_ZOOM_MOUSE_RATE: f64 = 1. / 400.;
@@ -13,12 +15,15 @@ pub const VIEWPORT_SCROLL_RATE: f64 = 0.6;
 
 pub const VIEWPORT_ROTATE_SNAP_INTERVAL: f64 = 15.;
 
+// SELECT TOOL
+pub const SELECTION_TOLERANCE: f64 = 1.;
+
+// PATH TOOL
+pub const VECTOR_MANIPULATOR_ANCHOR_MARKER_SIZE: f64 = 5.;
+
 // LINE TOOL
 pub const LINE_ROTATE_SNAP_ANGLE: f64 = 15.;
 
-// SELECT TOOL
-pub const SELECTION_TOLERANCE: f64 = 1.0;
-
 // SCROLLBARS
 pub const SCROLLBAR_SPACING: f64 = 0.1;
 pub const ASYMPTOTIC_EFFECT: f64 = 0.5;
@@ -27,3 +32,6 @@ pub const SCALE_EFFECT: f64 = 0.5;
 pub const DEFAULT_DOCUMENT_NAME: &str = "Untitled Document";
 pub const FILE_SAVE_SUFFIX: &str = ".graphite";
 pub const FILE_EXPORT_SUFFIX: &str = ".svg";
+
+// COLORS
+pub const COLOR_ACCENT: Color = Color::from_unsafe(0x00 as f32 / 255., 0xA8 as f32 / 255., 0xFF as f32 / 255.);

editor/src/document/document_file.rs

@@ -5,7 +5,8 @@ use crate::{
 	EditorError,
 };
 use glam::{DAffine2, DVec2};
-use graphene::{document::Document as InternalDocument, DocumentError, LayerId};
+use graphene::{document::Document as InternalDocument, layers::LayerDataType, DocumentError, LayerId};
+use kurbo::PathSeg;
 use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 
@@ -41,6 +42,20 @@ pub enum AlignAggregate {
 	Average,
 }
 
+#[derive(PartialEq, Clone, Debug)]
+pub enum VectorManipulatorSegment {
+	Line(DVec2, DVec2),
+	Quad(DVec2, DVec2, DVec2),
+	Cubic(DVec2, DVec2, DVec2, DVec2),
+}
+
+#[derive(PartialEq, Clone, Debug)]
+pub struct VectorManipulatorShape {
+	pub path: kurbo::BezPath,
+	pub segments: Vec<VectorManipulatorSegment>,
+	pub transform: DAffine2,
+}
+
 #[derive(Clone, Debug)]
 pub struct DocumentMessageHandler {
 	pub document: InternalDocument,
@@ -65,7 +80,7 @@ impl Default for DocumentMessageHandler {
 }
 
 #[impl_message(Message, DocumentsMessage, Document)]
-#[derive(PartialEq, Clone, Debug)]
+#[derive(PartialEq, Clone, Debug, Serialize, Deserialize)]
 pub enum DocumentMessage {
 	#[child]
 	Movement(MovementMessage),
@@ -112,6 +127,7 @@ impl From<DocumentOperation> for DocumentMessage {
 		Self::DispatchOperation(Box::new(operation))
 	}
 }
+
 impl From<DocumentOperation> for Message {
 	fn from(operation: DocumentOperation) -> Message {
 		DocumentMessage::DispatchOperation(Box::new(operation)).into()
@@ -119,11 +135,6 @@ impl From<DocumentOperation> for Message {
 }
 
 impl DocumentMessageHandler {
-	fn filter_document_responses(&self, document_responses: &mut Vec<DocumentResponse>) -> bool {
-		let len = document_responses.len();
-		document_responses.retain(|response| !matches!(response, DocumentResponse::DocumentChanged));
-		document_responses.len() != len
-	}
 	pub fn handle_folder_changed(&mut self, path: Vec<LayerId>) -> Option<Message> {
 		let _ = self.document.render_root();
 		self.layer_data(&path).expanded.then(|| {
@@ -131,9 +142,11 @@ impl DocumentMessageHandler {
 			FrontendMessage::ExpandFolder { path, children }.into()
 		})
 	}
+
 	fn clear_selection(&mut self) {
 		self.layer_data.values_mut().for_each(|layer_data| layer_data.selected = false);
 	}
+
 	fn select_layer(&mut self, path: &[LayerId]) -> Option<Message> {
 		if self.document.layer(path).ok()?.overlay {
 			return None;
@@ -143,13 +156,51 @@ impl DocumentMessageHandler {
 		// TODO: Add deduplication
 		(!path.is_empty()).then(|| FrontendMessage::UpdateLayer { path: path.to_vec(), data }.into())
 	}
+
 	pub fn selected_layers_bounding_box(&self) -> Option<[DVec2; 2]> {
 		let paths = self.selected_layers().map(|vec| &vec[..]);
 		self.document.combined_viewport_bounding_box(paths)
 	}
+
+	// TODO: Consider moving this to some kind of overlay manager in the future
+	pub fn selected_layers_vector_points(&self) -> Vec<VectorManipulatorShape> {
+		let shapes = self.selected_layers().filter_map(|path_to_shape| {
+			let viewport_transform = self.document.generate_transform_relative_to_viewport(path_to_shape.as_slice()).ok()?;
+
+			let shape = match &self.document.layer(path_to_shape.as_slice()).ok()?.data {
+				LayerDataType::Shape(shape) => Some(shape),
+				LayerDataType::Folder(_) => None,
+			}?;
+			let path = shape.path.clone();
+
+			let segments = path
+				.segments()
+				.map(|segment| -> VectorManipulatorSegment {
+					let place = |point: kurbo::Point| -> DVec2 { viewport_transform.transform_point2(DVec2::from((point.x, point.y))) };
+
+					match segment {
+						PathSeg::Line(line) => VectorManipulatorSegment::Line(place(line.p0), place(line.p1)),
+						PathSeg::Quad(quad) => VectorManipulatorSegment::Quad(place(quad.p0), place(quad.p1), place(quad.p2)),
+						PathSeg::Cubic(cubic) => VectorManipulatorSegment::Cubic(place(cubic.p0), place(cubic.p1), place(cubic.p2), place(cubic.p3)),
+					}
+				})
+				.collect::<Vec<VectorManipulatorSegment>>();
+
+			Some(VectorManipulatorShape {
+				path,
+				segments,
+				transform: viewport_transform,
+			})
+		});
+
+		// TODO: Consider refactoring this in a way that avoids needing to collect() so we can skip the heap allocations
+		shapes.collect::<Vec<VectorManipulatorShape>>()
+	}
+
 	pub fn layerdata(&self, path: &[LayerId]) -> &LayerData {
 		self.layer_data.get(path).expect("Layerdata does not exist")
 	}
+
 	pub fn layerdata_mut(&mut self, path: &[LayerId]) -> &mut LayerData {
 		self.layer_data.entry(path.to_vec()).or_insert_with(|| LayerData::new(true))
 	}
@@ -200,6 +251,7 @@ impl DocumentMessageHandler {
 	pub fn non_selected_layers_sorted(&self) -> Vec<Vec<LayerId>> {
 		self.layers_sorted(Some(false))
 	}
+
 	pub fn with_name(name: String) -> Self {
 		Self {
 			document: InternalDocument::default(),
@@ -210,6 +262,7 @@ impl DocumentMessageHandler {
 			movement_handler: MovementMessageHandler::default(),
 		}
 	}
+
 	pub fn with_name_and_content(name: String, serialized_content: String) -> Result<Self, EditorError> {
 		let mut document = Self::with_name(name);
 		let internal_document = InternalDocument::with_content(&serialized_content);
@@ -271,7 +324,6 @@ impl DocumentMessageHandler {
 	}
 
 	pub fn layer_panel_entry(&mut self, path: Vec<LayerId>) -> Result<LayerPanelEntry, EditorError> {
-		self.document.render_root();
 		let data: LayerData = *layer_data(&mut self.layer_data, &path);
 		let layer = self.document.layer(&path)?;
 		let entry = layer_panel_entry(&data, self.document.multiply_transforms(&path).unwrap(), layer, path);
@@ -372,22 +424,25 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 				}
 			}
 			ToggleLayerVisibility(path) => {
-				responses.push_back(DocumentOperation::ToggleVisibility { path }.into());
+				responses.push_back(DocumentOperation::ToggleLayerVisibility { path }.into());
 			}
 			ToggleLayerExpansion(path) => {
 				self.layer_data(&path).expanded ^= true;
-				responses.extend(self.handle_folder_changed(path));
+				responses.push_back(FolderChanged(path).into());
+			}
+			SelectionChanged => {
+				// TODO: Hoist this duplicated code into wider system
+				responses.push_back(ToolMessage::SelectedLayersChanged.into());
 			}
-			SelectionChanged => responses.push_back(SelectMessage::UpdateSelectionBoundingBox.into()),
 			DeleteSelectedLayers => {
 				self.backup();
-				responses.push_front(SelectMessage::UpdateSelectionBoundingBox.into());
+				responses.push_front(ToolMessage::SelectedLayersChanged.into());
 				for path in self.selected_layers().cloned() {
 					responses.push_front(DocumentOperation::DeleteLayer { path }.into());
 				}
 			}
 			ClearOverlays => {
-				responses.push_front(SelectMessage::UpdateSelectionBoundingBox.into());
+				responses.push_back(ToolMessage::SelectedLayersChanged.into());
 				for path in self.layer_data.keys().filter(|path| self.document.layer(path).unwrap().overlay).cloned() {
 					responses.push_front(DocumentOperation::DeleteLayer { path }.into());
 				}
@@ -407,8 +462,8 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 					responses.extend(self.select_layer(&path));
 				}
 				// TODO: Correctly update layer panel in clear_selection instead of here
-				responses.extend(self.handle_folder_changed(Vec::new()));
-				responses.push_front(SelectMessage::UpdateSelectionBoundingBox.into());
+				responses.push_back(FolderChanged(Vec::new()).into());
+				responses.push_back(ToolMessage::SelectedLayersChanged.into());
 			}
 			SelectAllLayers => {
 				let all_layer_paths = self
@@ -427,46 +482,41 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 			Undo => {
 				responses.push_back(SelectMessage::Abort.into());
 				responses.push_back(DocumentHistoryBackward.into());
-				responses.push_back(SelectMessage::UpdateSelectionBoundingBox.into());
+				responses.push_back(ToolMessage::SelectedLayersChanged.into());
 				responses.push_back(RenderDocument.into());
 				responses.push_back(FolderChanged(vec![]).into());
 			}
 			Redo => {
 				responses.push_back(SelectMessage::Abort.into());
 				responses.push_back(DocumentHistoryForward.into());
-				responses.push_back(SelectMessage::UpdateSelectionBoundingBox.into());
+				responses.push_back(ToolMessage::SelectedLayersChanged.into());
 				responses.push_back(RenderDocument.into());
 				responses.push_back(FolderChanged(vec![]).into());
 			}
 			FolderChanged(path) => responses.extend(self.handle_folder_changed(path)),
 			DispatchOperation(op) => match self.document.handle_operation(&op) {
-				Ok(Some(mut document_responses)) => {
-					let canvas_dirty = self.filter_document_responses(&mut document_responses);
+				Ok(Some(document_responses)) => {
 					responses.extend(
 						document_responses
 							.into_iter()
 							.map(|response| match response {
-								DocumentResponse::FolderChanged { path } => self.handle_folder_changed(path),
+								DocumentResponse::FolderChanged { path } => Some(FolderChanged(path).into()),
 								DocumentResponse::DeletedLayer { path } => {
 									self.layer_data.remove(&path);
-
-									Some(SelectMessage::UpdateSelectionBoundingBox.into())
+									Some(ToolMessage::SelectedLayersChanged.into())
 								}
-								DocumentResponse::LayerChanged { path } => Some(
+								DocumentResponse::LayerChanged { path } => (!self.document.layer(&path).unwrap().overlay).then(|| {
 									FrontendMessage::UpdateLayer {
 										path: path.clone(),
 										data: self.layer_panel_entry(path).unwrap(),
 									}
-									.into(),
-								),
+									.into()
+								}),
 								DocumentResponse::CreatedLayer { path } => (!self.document.layer(&path).unwrap().overlay).then(|| SetSelectedLayers(vec![path]).into()),
-								DocumentResponse::DocumentChanged => unreachable!(),
+								DocumentResponse::DocumentChanged => Some(RenderDocument.into()),
 							})
 							.flatten(),
 					);
-					if canvas_dirty {
-						responses.push_back(RenderDocument.into());
-					}
 				}
 				Err(e) => log::error!("DocumentError: {:?}", e),
 				Ok(_) => (),
@@ -478,6 +528,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 					}
 					.into(),
 				);
+
 				let scale = 0.5 + ASYMPTOTIC_EFFECT + self.layerdata(&[]).scale * SCALE_EFFECT;
 				let viewport_size = ipp.viewport_bounds.size();
 				let viewport_mid = ipp.viewport_bounds.center();
@@ -507,7 +558,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 					};
 					responses.push_back(operation.into());
 				}
-				responses.push_back(SelectMessage::UpdateSelectionBoundingBox.into());
+				responses.push_back(ToolMessage::SelectedLayersChanged.into());
 			}
 			MoveSelectedLayersTo { path, insert_index } => {
 				responses.push_back(DocumentsMessage::CopySelectedLayers.into());
@@ -564,7 +615,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 							.into(),
 						);
 					}
-					responses.push_back(SelectMessage::UpdateSelectionBoundingBox.into());
+					responses.push_back(ToolMessage::SelectedLayersChanged.into());
 				}
 			}
 			AlignSelectedLayers(axis, aggregate) => {
@@ -598,12 +649,13 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 							.into(),
 						);
 					}
-					responses.push_back(SelectMessage::UpdateSelectionBoundingBox.into());
+					responses.push_back(ToolMessage::SelectedLayersChanged.into());
 				}
 			}
 			RenameLayer(path, name) => responses.push_back(DocumentOperation::RenameLayer { path, name }.into()),
 		}
 	}
+
 	fn actions(&self) -> ActionList {
 		let mut common = actions!(DocumentMessageDiscriminant;
 			Undo,

editor/src/document/document_message_handler.rs

@@ -4,13 +4,14 @@ use graphene::layers::Layer;
 use graphene::{LayerId, Operation as DocumentOperation};
 use log::warn;
 
+use serde::{Deserialize, Serialize};
 use std::collections::VecDeque;
 
 use super::DocumentMessageHandler;
 use crate::consts::DEFAULT_DOCUMENT_NAME;
 
 #[impl_message(Message, Documents)]
-#[derive(PartialEq, Clone, Debug)]
+#[derive(PartialEq, Clone, Debug, Serialize, Deserialize)]
 pub enum DocumentsMessage {
 	CopySelectedLayers,
 	PasteLayers {

editor/src/document/mod.rs

@@ -7,7 +7,7 @@ mod movement_handler;
 pub use document_file::LayerData;
 
 #[doc(inline)]
-pub use document_file::{AlignAggregate, AlignAxis, DocumentMessage, DocumentMessageDiscriminant, DocumentMessageHandler, FlipAxis};
+pub use document_file::{AlignAggregate, AlignAxis, DocumentMessage, DocumentMessageDiscriminant, DocumentMessageHandler, FlipAxis, VectorManipulatorSegment, VectorManipulatorShape};
 #[doc(inline)]
 pub use document_message_handler::{DocumentsMessage, DocumentsMessageDiscriminant, DocumentsMessageHandler};
 #[doc(inline)]

editor/src/document/movement_handler.rs

@@ -11,10 +11,11 @@ use glam::DVec2;
 use graphene::document::Document;
 use graphene::Operation as DocumentOperation;
 
+use serde::{Deserialize, Serialize};
 use std::collections::VecDeque;
 
 #[impl_message(Message, DocumentMessage, Movement)]
-#[derive(PartialEq, Clone, Debug)]
+#[derive(PartialEq, Clone, Debug, Serialize, Deserialize)]
 pub enum MovementMessage {
 	MouseMove,
 	TranslateCanvasBegin,
@@ -91,6 +92,7 @@ impl MessageHandler<MovementMessage, (&mut LayerData, &Document, &InputPreproces
 					let transformed_delta = document.root.transform.inverse().transform_vector2(delta);
 
 					layerdata.translation += transformed_delta;
+					responses.push_back(ToolMessage::SelectedLayersChanged.into());
 					self.create_document_transform_from_layerdata(layerdata, &ipp.viewport_bounds, responses);
 				}
 				if self.rotating {
@@ -105,7 +107,7 @@ impl MessageHandler<MovementMessage, (&mut LayerData, &Document, &InputPreproces
 
 					layerdata.rotation += rotation;
 					layerdata.snap_rotate = snapping;
-					responses.push_back(SelectMessage::UpdateSelectionBoundingBox.into());
+					responses.push_back(ToolMessage::SelectedLayersChanged.into());
 					responses.push_back(
 						FrontendMessage::SetCanvasRotation {
 							new_radians: layerdata.snapped_angle(),
@@ -121,6 +123,7 @@ impl MessageHandler<MovementMessage, (&mut LayerData, &Document, &InputPreproces
 					let new = (layerdata.scale * amount).clamp(VIEWPORT_ZOOM_SCALE_MIN, VIEWPORT_ZOOM_SCALE_MAX);
 					layerdata.scale = new;
 					responses.push_back(FrontendMessage::SetCanvasZoom { new_zoom: layerdata.scale }.into());
+					responses.push_back(ToolMessage::SelectedLayersChanged.into());
 					self.create_document_transform_from_layerdata(layerdata, &ipp.viewport_bounds, responses);
 				}
 				self.mouse_pos = ipp.mouse.position;
@@ -128,16 +131,19 @@ impl MessageHandler<MovementMessage, (&mut LayerData, &Document, &InputPreproces
 			SetCanvasZoom(new) => {
 				layerdata.scale = new.clamp(VIEWPORT_ZOOM_SCALE_MIN, VIEWPORT_ZOOM_SCALE_MAX);
 				responses.push_back(FrontendMessage::SetCanvasZoom { new_zoom: layerdata.scale }.into());
+				responses.push_back(ToolMessage::SelectedLayersChanged.into());
 				self.create_document_transform_from_layerdata(layerdata, &ipp.viewport_bounds, responses);
 			}
 			IncreaseCanvasZoom => {
 				layerdata.scale = *VIEWPORT_ZOOM_LEVELS.iter().find(|scale| **scale > layerdata.scale).unwrap_or(&layerdata.scale);
 				responses.push_back(FrontendMessage::SetCanvasZoom { new_zoom: layerdata.scale }.into());
+				responses.push_back(ToolMessage::SelectedLayersChanged.into());
 				self.create_document_transform_from_layerdata(layerdata, &ipp.viewport_bounds, responses);
 			}
 			DecreaseCanvasZoom => {
 				layerdata.scale = *VIEWPORT_ZOOM_LEVELS.iter().rev().find(|scale| **scale < layerdata.scale).unwrap_or(&layerdata.scale);
 				responses.push_back(FrontendMessage::SetCanvasZoom { new_zoom: layerdata.scale }.into());
+				responses.push_back(ToolMessage::SelectedLayersChanged.into());
 				self.create_document_transform_from_layerdata(layerdata, &ipp.viewport_bounds, responses);
 			}
 			WheelCanvasZoom => {
@@ -158,6 +164,7 @@ impl MessageHandler<MovementMessage, (&mut LayerData, &Document, &InputPreproces
 				layerdata.scale = new;
 				layerdata.translation += transformed_delta;
 				responses.push_back(FrontendMessage::SetCanvasZoom { new_zoom: layerdata.scale }.into());
+				responses.push_back(ToolMessage::SelectedLayersChanged.into());
 				self.create_document_transform_from_layerdata(layerdata, &ipp.viewport_bounds, responses);
 			}
 			WheelCanvasTranslate { use_y_as_x } => {
@@ -167,13 +174,14 @@ impl MessageHandler<MovementMessage, (&mut LayerData, &Document, &InputPreproces
 				} * VIEWPORT_SCROLL_RATE;
 				let transformed_delta = document.root.transform.inverse().transform_vector2(delta);
 				layerdata.translation += transformed_delta;
+				responses.push_back(ToolMessage::SelectedLayersChanged.into());
 				self.create_document_transform_from_layerdata(layerdata, &ipp.viewport_bounds, responses);
 			}
 			SetCanvasRotation(new) => {
 				layerdata.rotation = new;
 				self.create_document_transform_from_layerdata(layerdata, &ipp.viewport_bounds, responses);
 				responses.push_back(FrontendMessage::SetCanvasRotation { new_radians: new }.into());
-				responses.push_back(SelectMessage::UpdateSelectionBoundingBox.into());
+				responses.push_back(ToolMessage::SelectedLayersChanged.into());
 			}
 			ZoomCanvasToFitAll => {
 				if let Some([pos1, pos2]) = document.visible_layers_bounding_box() {
@@ -190,6 +198,7 @@ impl MessageHandler<MovementMessage, (&mut LayerData, &Document, &InputPreproces
 					layerdata.translation += center;
 					layerdata.scale *= new_scale;
 					responses.push_back(FrontendMessage::SetCanvasZoom { new_zoom: layerdata.scale }.into());
+					responses.push_back(ToolMessage::SelectedLayersChanged.into());
 					self.create_document_transform_from_layerdata(layerdata, &ipp.viewport_bounds, responses);
 				}
 			}
@@ -197,12 +206,14 @@ impl MessageHandler<MovementMessage, (&mut LayerData, &Document, &InputPreproces
 				let transformed_delta = document.root.transform.inverse().transform_vector2(delta);
 
 				layerdata.translation += transformed_delta;
+				responses.push_back(ToolMessage::SelectedLayersChanged.into());
 				self.create_document_transform_from_layerdata(layerdata, &ipp.viewport_bounds, responses);
 			}
 			TranslateCanvasByViewportFraction(delta) => {
 				let transformed_delta = document.root.transform.inverse().transform_vector2(delta * ipp.viewport_bounds.size());
 
 				layerdata.translation += transformed_delta;
+				responses.push_back(ToolMessage::SelectedLayersChanged.into());
 				self.create_document_transform_from_layerdata(layerdata, &ipp.viewport_bounds, responses);
 			}
 		}

editor/src/frontend/frontend_message_handler.rs

@@ -4,8 +4,6 @@ use crate::tool::tool_options::ToolOptions;
 use crate::Color;
 use serde::{Deserialize, Serialize};
 
-pub type Callback = Box<dyn Fn(FrontendMessage)>;
-
 #[impl_message(Message, Frontend)]
 #[derive(PartialEq, Clone, Deserialize, Serialize, Debug)]
 pub enum FrontendMessage {
@@ -29,34 +27,3 @@ pub enum FrontendMessage {
 	SetCanvasZoom { new_zoom: f64 },
 	SetCanvasRotation { new_radians: f64 },
 }
-
-pub struct FrontendMessageHandler {
-	callback: crate::Callback,
-}
-
-impl FrontendMessageHandler {
-	pub fn new(callback: Callback) -> Self {
-		Self { callback }
-	}
-}
-
-impl MessageHandler<FrontendMessage, ()> for FrontendMessageHandler {
-	fn process_action(&mut self, message: FrontendMessage, _data: (), _responses: &mut VecDeque<Message>) {
-		(self.callback)(message)
-	}
-	advertise_actions!(
-		FrontendMessageDiscriminant;
-
-		DisplayError,
-		CollapseFolder,
-		ExpandFolder,
-		SetActiveTool,
-		UpdateCanvas,
-		UpdateScrollbars,
-		EnableTextInput,
-		DisableTextInput,
-		SetCanvasZoom,
-		SetCanvasRotation,
-		OpenDocumentBrowse,
-	);
-}

editor/src/frontend/mod.rs

@@ -1,4 +1,4 @@
 pub mod frontend_message_handler;
 pub mod layer_panel;
 
-pub use frontend_message_handler::{Callback, FrontendMessage, FrontendMessageDiscriminant, FrontendMessageHandler};
+pub use frontend_message_handler::{FrontendMessage, FrontendMessageDiscriminant};

editor/src/global/global_message_handler.rs

@@ -1,8 +1,9 @@
 use crate::message_prelude::*;
+use serde::{Deserialize, Serialize};
 use std::collections::VecDeque;
 
 #[impl_message(Message, Global)]
-#[derive(PartialEq, Clone, Debug, Hash)]
+#[derive(PartialEq, Clone, Debug, Hash, Serialize, Deserialize)]
 pub enum GlobalMessage {
 	LogInfo,
 	LogDebug,

editor/src/input/input_mapper.rs

@@ -7,13 +7,14 @@ use super::{
 use crate::message_prelude::*;
 use crate::tool::ToolType;
 
+use serde::{Deserialize, Serialize};
 use std::fmt::Write;
 
 const NUDGE_AMOUNT: f64 = 1.;
 const SHIFT_NUDGE_AMOUNT: f64 = 10.;
 
 #[impl_message(Message, InputMapper)]
-#[derive(PartialEq, Clone, Debug, Hash)]
+#[derive(PartialEq, Clone, Debug, Hash, Serialize, Deserialize)]
 pub enum InputMapperMessage {
 	PointerMove,
 	MouseScroll,
@@ -172,14 +173,16 @@ impl Default for Mapping {
 			// Fill
 			entry! {action=FillMessage::MouseDown, key_down=Lmb},
 			// Tool Actions
-			entry! {action=ToolMessage::SelectTool(ToolType::Fill), key_down=KeyF},
-			entry! {action=ToolMessage::SelectTool(ToolType::Rectangle), key_down=KeyM},
-			entry! {action=ToolMessage::SelectTool(ToolType::Ellipse), key_down=KeyE},
-			entry! {action=ToolMessage::SelectTool(ToolType::Select), key_down=KeyV},
-			entry! {action=ToolMessage::SelectTool(ToolType::Line), key_down=KeyL},
-			entry! {action=ToolMessage::SelectTool(ToolType::Pen), key_down=KeyP},
-			entry! {action=ToolMessage::SelectTool(ToolType::Shape), key_down=KeyY},
-			entry! {action=ToolMessage::SelectTool(ToolType::Eyedropper), key_down=KeyI},
+			entry! {action=ToolMessage::ActivateTool(ToolType::Select), key_down=KeyV},
+			entry! {action=ToolMessage::ActivateTool(ToolType::Eyedropper), key_down=KeyI},
+			entry! {action=ToolMessage::ActivateTool(ToolType::Fill), key_down=KeyF},
+			entry! {action=ToolMessage::ActivateTool(ToolType::Path), key_down=KeyA},
+			entry! {action=ToolMessage::ActivateTool(ToolType::Pen), key_down=KeyP},
+			entry! {action=ToolMessage::ActivateTool(ToolType::Line), key_down=KeyL},
+			entry! {action=ToolMessage::ActivateTool(ToolType::Rectangle), key_down=KeyM},
+			entry! {action=ToolMessage::ActivateTool(ToolType::Ellipse), key_down=KeyE},
+			entry! {action=ToolMessage::ActivateTool(ToolType::Shape), key_down=KeyY},
+			// Colors
 			entry! {action=ToolMessage::ResetColors, key_down=KeyX, modifiers=[KeyShift, KeyControl]},
 			entry! {action=ToolMessage::SwapColors, key_down=KeyX, modifiers=[KeyShift]},
 			// Editor Actions
@@ -300,7 +303,7 @@ impl InputMapper {
 		let mut actions = actions
 			.into_iter()
 			.flatten()
-			.filter(|a| !matches!(*a, MessageDiscriminant::Tool(ToolMessageDiscriminant::SelectTool) | MessageDiscriminant::Global(_)));
+			.filter(|a| !matches!(*a, MessageDiscriminant::Tool(ToolMessageDiscriminant::ActivateTool) | MessageDiscriminant::Global(_)));
 		self.mapping
 			.key_down
 			.iter()

editor/src/input/input_preprocessor.rs

@@ -7,9 +7,10 @@ use bitflags::bitflags;
 
 #[doc(inline)]
 pub use graphene::DocumentResponse;
+use serde::{Deserialize, Serialize};
 
 #[impl_message(Message, InputPreprocessor)]
-#[derive(PartialEq, Clone, Debug)]
+#[derive(PartialEq, Clone, Debug, Serialize, Deserialize)]
 pub enum InputPreprocessorMessage {
 	MouseDown(EditorMouseState, ModifierKeys),
 	MouseUp(EditorMouseState, ModifierKeys),
@@ -21,7 +22,7 @@ pub enum InputPreprocessorMessage {
 }
 
 bitflags! {
-	#[derive(Default)]
+	#[derive(Default, Serialize, Deserialize)]
 	#[repr(transparent)]
 	pub struct ModifierKeys: u8 {
 		const CONTROL = 0b0000_0001;

editor/src/input/mouse.rs

@@ -1,11 +1,12 @@
 use bitflags::bitflags;
 use glam::DVec2;
+use serde::{Deserialize, Serialize};
 
 // Origin is top left
 pub type ViewportPosition = DVec2;
 pub type EditorPosition = DVec2;
 
-#[derive(PartialEq, Clone, Debug, Default)]
+#[derive(PartialEq, Clone, Debug, Default, Serialize, Deserialize)]
 pub struct ViewportBounds {
 	pub top_left: DVec2,
 	pub bottom_right: DVec2,
@@ -28,7 +29,7 @@ impl ViewportBounds {
 	}
 }
 
-#[derive(Debug, Copy, Clone, Default, Eq, PartialEq, Hash)]
+#[derive(Debug, Copy, Clone, Default, Eq, PartialEq, Hash, Serialize, Deserialize)]
 pub struct ScrollDelta {
 	pub x: i32,
 	pub y: i32,
@@ -47,7 +48,7 @@ impl ScrollDelta {
 	}
 }
 
-#[derive(Debug, Copy, Clone, Default, PartialEq)]
+#[derive(Debug, Copy, Clone, Default, PartialEq, Serialize, Deserialize)]
 pub struct MouseState {
 	pub position: ViewportPosition,
 	pub mouse_keys: MouseKeys,
@@ -77,7 +78,7 @@ impl MouseState {
 	}
 }
 
-#[derive(Debug, Copy, Clone, Default, PartialEq)]
+#[derive(Debug, Copy, Clone, Default, PartialEq, Serialize, Deserialize)]
 pub struct EditorMouseState {
 	pub editor_position: EditorPosition,
 	pub mouse_keys: MouseKeys,
@@ -116,7 +117,7 @@ impl EditorMouseState {
 }
 
 bitflags! {
-	#[derive(Default)]
+	#[derive(Default, Serialize, Deserialize)]
 	#[repr(transparent)]
 	pub struct MouseKeys: u8 {
 		const LEFT   = 0b0000_0001;

editor/src/lib.rs

@@ -26,9 +26,6 @@ pub use graphene::LayerId;
 #[doc(inline)]
 pub use graphene::document::Document as SvgDocument;
 
-#[doc(inline)]
-pub use frontend::Callback;
-
 use communication::dispatcher::Dispatcher;
 // TODO: serialize with serde to save the current editor state
 pub struct Editor {
@@ -38,14 +35,16 @@ pub struct Editor {
 use message_prelude::*;
 
 impl Editor {
-	pub fn new(callback: Callback) -> Self {
-		Self {
-			dispatcher: Dispatcher::new(callback),
-		}
+	pub fn new() -> Self {
+		Self { dispatcher: Dispatcher::new() }
 	}
 
-	pub fn handle_message<T: Into<Message>>(&mut self, message: T) -> Result<(), EditorError> {
-		self.dispatcher.handle_message(message)
+	pub fn handle_message<T: Into<Message>>(&mut self, message: T) -> Result<Vec<FrontendMessage>, EditorError> {
+		self.dispatcher.handle_message(message).map(|_| {
+			let mut responses = Vec::new();
+			std::mem::swap(&mut responses, &mut self.dispatcher.responses);
+			responses
+		})
 	}
 }
 

editor/src/misc/test_utils.rs

@@ -62,7 +62,7 @@ impl EditorTestUtils for Editor {
 	}
 
 	fn mouseup(&mut self, state: EditorMouseState) {
-		self.handle_message(InputPreprocessorMessage::MouseUp(state, ModifierKeys::default())).unwrap()
+		self.handle_message(InputPreprocessorMessage::MouseUp(state, ModifierKeys::default())).unwrap();
 	}
 
 	fn lmb_mousedown(&mut self, x: f64, y: f64) {
@@ -70,7 +70,7 @@ impl EditorTestUtils for Editor {
 			editor_position: (x, y).into(),
 			mouse_keys: MouseKeys::LEFT,
 			scroll_delta: ScrollDelta::default(),
-		})
+		});
 	}
 
 	fn input(&mut self, message: InputPreprocessorMessage) {
@@ -78,7 +78,7 @@ impl EditorTestUtils for Editor {
 	}
 
 	fn select_tool(&mut self, typ: ToolType) {
-		self.handle_message(Message::Tool(ToolMessage::SelectTool(typ))).unwrap();
+		self.handle_message(Message::Tool(ToolMessage::ActivateTool(typ))).unwrap();
 	}
 
 	fn select_primary_color(&mut self, color: Color) {

editor/src/tool/mod.rs

@@ -9,6 +9,7 @@ use crate::{
 	communication::{message::Message, MessageHandler},
 	Color,
 };
+use serde::{Deserialize, Serialize};
 use std::collections::VecDeque;
 use std::{
 	collections::HashMap,
@@ -126,7 +127,7 @@ fn default_tool_options() -> HashMap<ToolType, ToolOptions> {
 }
 
 #[repr(usize)]
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Serialize, Deserialize)]
 pub enum ToolType {
 	Select,
 	Crop,

editor/src/tool/tool_message_handler.rs

@@ -6,14 +6,16 @@ use crate::{
 	document::DocumentMessageHandler,
 	tool::{tool_options::ToolOptions, DocumentToolData, ToolFsmState, ToolType},
 };
+use serde::{Deserialize, Serialize};
 use std::collections::VecDeque;
 
 #[impl_message(Message, Tool)]
-#[derive(PartialEq, Clone, Debug)]
+#[derive(PartialEq, Clone, Debug, Serialize, Deserialize)]
 pub enum ToolMessage {
-	SelectTool(ToolType),
+	ActivateTool(ToolType),
 	SelectPrimaryColor(Color),
 	SelectSecondaryColor(Color),
+	SelectedLayersChanged,
 	SwapColors,
 	ResetColors,
 	NoOp,
@@ -63,7 +65,7 @@ impl MessageHandler<ToolMessage, (&DocumentMessageHandler, &InputPreprocessor)>
 
 				update_working_colors(document_data, responses);
 			}
-			SelectTool(new_tool) => {
+			ActivateTool(new_tool) => {
 				let tool_data = &mut self.tool_state.tool_data;
 				let document_data = &self.tool_state.document_tool_data;
 				let old_tool = tool_data.active_tool_type;
@@ -75,12 +77,13 @@ impl MessageHandler<ToolMessage, (&DocumentMessageHandler, &InputPreprocessor)>
 
 				// Get the Abort state of a tool's FSM
 				let reset_message = |tool| match tool {
-					ToolType::Ellipse => Some(EllipseMessage::Abort.into()),
-					ToolType::Rectangle => Some(RectangleMessage::Abort.into()),
-					ToolType::Shape => Some(ShapeMessage::Abort.into()),
-					ToolType::Line => Some(LineMessage::Abort.into()),
-					ToolType::Pen => Some(PenMessage::Abort.into()),
 					ToolType::Select => Some(SelectMessage::Abort.into()),
+					ToolType::Path => Some(PathMessage::Abort.into()),
+					ToolType::Pen => Some(PenMessage::Abort.into()),
+					ToolType::Line => Some(LineMessage::Abort.into()),
+					ToolType::Rectangle => Some(RectangleMessage::Abort.into()),
+					ToolType::Ellipse => Some(EllipseMessage::Abort.into()),
+					ToolType::Shape => Some(ShapeMessage::Abort.into()),
 					_ => None,
 				};
 
@@ -100,8 +103,9 @@ impl MessageHandler<ToolMessage, (&DocumentMessageHandler, &InputPreprocessor)>
 				}
 
 				// Special cases for specific tools
-				if new_tool == ToolType::Select {
-					responses.push_back(SelectMessage::UpdateSelectionBoundingBox.into());
+				// TODO: Refactor to avoid doing this here
+				if new_tool == ToolType::Select || new_tool == ToolType::Path {
+					responses.push_back(ToolMessage::SelectedLayersChanged.into());
 				}
 
 				// Store the new active tool
@@ -112,6 +116,13 @@ impl MessageHandler<ToolMessage, (&DocumentMessageHandler, &InputPreprocessor)>
 				let tool_options = self.tool_state.document_tool_data.tool_options.get(&new_tool).map(|tool_options| *tool_options);
 				responses.push_back(FrontendMessage::SetActiveTool { tool_name, tool_options }.into());
 			}
+			SelectedLayersChanged => {
+				match self.tool_state.tool_data.active_tool_type {
+					ToolType::Select => responses.push_back(SelectMessage::UpdateSelectionBoundingBox.into()),
+					ToolType::Path => responses.push_back(PathMessage::RedrawOverlay.into()),
+					_ => (),
+				};
+			}
 			SwapColors => {
 				let document_data = &mut self.tool_state.document_tool_data;
 
@@ -146,7 +157,7 @@ impl MessageHandler<ToolMessage, (&DocumentMessageHandler, &InputPreprocessor)>
 		}
 	}
 	fn actions(&self) -> ActionList {
-		let mut list = actions!(ToolMessageDiscriminant; ResetColors, SwapColors, SelectTool, SetToolOptions);
+		let mut list = actions!(ToolMessageDiscriminant; ResetColors, SwapColors, ActivateTool, SetToolOptions);
 		list.extend(self.tool_state.tool_data.active_tool().actions());
 
 		list

editor/src/tool/tools/crop.rs

@@ -1,11 +1,12 @@
 use crate::message_prelude::*;
 use crate::tool::ToolActionHandlerData;
+use serde::{Deserialize, Serialize};
 
 #[derive(Default)]
 pub struct Crop;
 
 #[impl_message(Message, ToolMessage, Crop)]
-#[derive(PartialEq, Clone, Debug, Hash)]
+#[derive(PartialEq, Clone, Debug, Hash, Serialize, Deserialize)]
 pub enum CropMessage {
 	MouseMove,
 }

editor/src/tool/tools/ellipse.rs

@@ -4,6 +4,7 @@ use crate::tool::{DocumentToolData, Fsm, ToolActionHandlerData};
 use crate::{document::DocumentMessageHandler, message_prelude::*};
 use glam::DAffine2;
 use graphene::{layers::style, Operation};
+use serde::{Deserialize, Serialize};
 
 use super::resize::*;
 
@@ -14,7 +15,7 @@ pub struct Ellipse {
 }
 
 #[impl_message(Message, ToolMessage, Ellipse)]
-#[derive(PartialEq, Clone, Debug, Hash)]
+#[derive(PartialEq, Clone, Debug, Hash, Serialize, Deserialize)]
 pub enum EllipseMessage {
 	DragStart,
 	DragStop,

editor/src/tool/tools/eyedropper.rs

@@ -4,12 +4,13 @@ use crate::tool::{ToolActionHandlerData, ToolMessage};
 use glam::DVec2;
 use graphene::layers::LayerDataType;
 use graphene::Quad;
+use serde::{Deserialize, Serialize};
 
 #[derive(Default)]
 pub struct Eyedropper;
 
 #[impl_message(Message, ToolMessage, Eyedropper)]
-#[derive(PartialEq, Clone, Debug, Hash)]
+#[derive(PartialEq, Clone, Debug, Hash, Serialize, Deserialize)]
 pub enum EyedropperMessage {
 	LeftMouseDown,
 	RightMouseDown,

editor/src/tool/tools/fill.rs

@@ -3,12 +3,13 @@ use crate::message_prelude::*;
 use crate::tool::ToolActionHandlerData;
 use glam::DVec2;
 use graphene::{Operation, Quad};
+use serde::{Deserialize, Serialize};
 
 #[derive(Default)]
 pub struct Fill;
 
 #[impl_message(Message, ToolMessage, Fill)]
-#[derive(PartialEq, Clone, Debug, Hash)]
+#[derive(PartialEq, Clone, Debug, Hash, Serialize, Deserialize)]
 pub enum FillMessage {
 	MouseDown,
 }
@@ -21,7 +22,7 @@ impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for Fill {
 
 		if let Some(path) = data.0.document.intersects_quad_root(quad).last() {
 			responses.push_back(
-				Operation::FillLayer {
+				Operation::SetLayerFill {
 					path: path.to_vec(),
 					color: data.1.primary_color,
 				}

editor/src/tool/tools/line.rs

@@ -5,6 +5,7 @@ use crate::tool::{DocumentToolData, Fsm, ToolActionHandlerData, ToolOptions, Too
 use crate::{document::DocumentMessageHandler, message_prelude::*};
 use glam::{DAffine2, DVec2};
 use graphene::{layers::style, Operation};
+use serde::{Deserialize, Serialize};
 
 #[derive(Default)]
 pub struct Line {
@@ -13,7 +14,7 @@ pub struct Line {
 }
 
 #[impl_message(Message, ToolMessage, Line)]
-#[derive(PartialEq, Clone, Debug, Hash)]
+#[derive(PartialEq, Clone, Debug, Hash, Serialize, Deserialize)]
 pub enum LineMessage {
 	DragStart,
 	DragStop,

editor/src/tool/tools/navigate.rs

@@ -1,11 +1,12 @@
 use crate::message_prelude::*;
 use crate::tool::ToolActionHandlerData;
+use serde::{Deserialize, Serialize};
 
 #[derive(Default)]
 pub struct Navigate;
 
 #[impl_message(Message, ToolMessage, Navigate)]
-#[derive(PartialEq, Clone, Debug, Hash)]
+#[derive(PartialEq, Clone, Debug, Hash, Serialize, Deserialize)]
 pub enum NavigateMessage {
 	MouseMove,
 }

editor/src/tool/tools/path.rs

@@ -1,18 +1,306 @@
+use crate::consts::COLOR_ACCENT;
+use crate::consts::VECTOR_MANIPULATOR_ANCHOR_MARKER_SIZE;
+use crate::document::DocumentMessageHandler;
+use crate::document::VectorManipulatorSegment;
+use crate::document::VectorManipulatorShape;
+use crate::input::InputPreprocessor;
 use crate::message_prelude::*;
 use crate::tool::ToolActionHandlerData;
+use crate::tool::{DocumentToolData, Fsm};
+use glam::{DAffine2, DVec2};
+use graphene::color::Color;
+use graphene::layers::style;
+use graphene::layers::style::Fill;
+use graphene::layers::style::Stroke;
+use graphene::Operation;
+use kurbo::BezPath;
+use serde::{Deserialize, Serialize};
 
 #[derive(Default)]
-pub struct Path;
+pub struct Path {
+	fsm_state: PathToolFsmState,
+	data: PathToolData,
+}
 
 #[impl_message(Message, ToolMessage, Path)]
-#[derive(PartialEq, Clone, Debug, Hash)]
+#[derive(PartialEq, Clone, Debug, Hash, Serialize, Deserialize)]
 pub enum PathMessage {
-	MouseMove,
+	RedrawOverlay,
+	Abort,
 }
 
 impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for Path {
 	fn process_action(&mut self, action: ToolMessage, data: ToolActionHandlerData<'a>, responses: &mut VecDeque<Message>) {
-		todo!("{}::handle_input {:?} {:?} {:?} ", module_path!(), action, data, responses);
+		self.fsm_state = self.fsm_state.transition(action, data.0, data.1, &mut self.data, data.2, responses);
+	}
+	fn actions(&self) -> ActionList {
+		use PathToolFsmState::*;
+		match self.fsm_state {
+			Ready => actions!(PathMessageDiscriminant;),
+		}
 	}
-	advertise_actions!();
+}
+
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+enum PathToolFsmState {
+	Ready,
+}
+
+impl Default for PathToolFsmState {
+	fn default() -> Self {
+		PathToolFsmState::Ready
+	}
+}
+
+#[derive(Clone, Debug, Default)]
+struct PathToolData {
+	anchor_marker_pool: Vec<Vec<LayerId>>,
+	handle_marker_pool: Vec<Vec<LayerId>>,
+	anchor_handle_line_pool: Vec<Vec<LayerId>>,
+	shape_outline_pool: Vec<Vec<LayerId>>,
+}
+
+impl PathToolData {}
+
+impl Fsm for PathToolFsmState {
+	type ToolData = PathToolData;
+
+	fn transition(
+		self,
+		event: ToolMessage,
+		document: &DocumentMessageHandler,
+		_tool_data: &DocumentToolData,
+		data: &mut Self::ToolData,
+		_input: &InputPreprocessor,
+		responses: &mut VecDeque<Message>,
+	) -> Self {
+		if let ToolMessage::Path(event) = event {
+			use PathMessage::*;
+			use PathToolFsmState::*;
+			match (self, event) {
+				(_, RedrawOverlay) => {
+					let (mut anchor_i, mut handle_i, mut line_i, mut shape_i) = (0, 0, 0, 0);
+
+					let shapes_to_draw = document.selected_layers_vector_points();
+					// Grow the overlay pools by the shortfall, if any
+					let (total_anchors, total_handles, total_anchor_handle_lines) = calculate_total_overlays_per_type(&shapes_to_draw);
+					let total_shapes = shapes_to_draw.len();
+					grow_overlay_pool_entries(&mut data.shape_outline_pool, total_shapes, add_shape_outline, responses);
+					grow_overlay_pool_entries(&mut data.anchor_handle_line_pool, total_anchor_handle_lines, add_anchor_handle_line, responses);
+					grow_overlay_pool_entries(&mut data.anchor_marker_pool, total_anchors, add_anchor_marker, responses);
+					grow_overlay_pool_entries(&mut data.handle_marker_pool, total_handles, add_handle_marker, responses);
+
+					// Helps push values that end in approximately half, plus or minus some floating point imprecision, towards the same side of the round() function
+					const BIAS: f64 = 0.0001;
+
+					// Draw the overlays for each shape
+					for shape_to_draw in &shapes_to_draw {
+						let shape_layer_path = &data.shape_outline_pool[shape_i];
+
+						responses.push_back(
+							Operation::SetShapePathInViewport {
+								path: shape_layer_path.clone(),
+								bez_path: shape_to_draw.path.clone(),
+								transform: shape_to_draw.transform.to_cols_array(),
+							}
+							.into(),
+						);
+						responses.push_back(
+							Operation::SetLayerVisibility {
+								path: shape_layer_path.clone(),
+								visible: true,
+							}
+							.into(),
+						);
+						shape_i += 1;
+
+						for segment in &shape_to_draw.segments {
+							let (anchors, handles, anchor_handle_lines) = match segment {
+								VectorManipulatorSegment::Line(a1, a2) => (vec![*a1, *a2], vec![], vec![]),
+								VectorManipulatorSegment::Quad(a1, h1, a2) => (vec![*a1, *a2], vec![*h1], vec![(*h1, *a1)]),
+								VectorManipulatorSegment::Cubic(a1, h1, h2, a2) => (vec![*a1, *a2], vec![*h1, *h2], vec![(*h1, *a1), (*h2, *a2)]),
+							};
+
+							// Draw the line connecting the anchor with handle for cubic and quadratic bezier segments
+							for anchor_handle_line in anchor_handle_lines {
+								let marker = data.anchor_handle_line_pool[line_i].clone();
+
+								let line_vector = anchor_handle_line.0 - anchor_handle_line.1;
+
+								let scale = DVec2::splat(line_vector.length());
+								let angle = -line_vector.angle_between(DVec2::X);
+								let translation = (anchor_handle_line.1 + BIAS).round() + DVec2::splat(0.5);
+								let transform = DAffine2::from_scale_angle_translation(scale, angle, translation).to_cols_array();
+
+								responses.push_back(Operation::SetLayerTransformInViewport { path: marker.clone(), transform }.into());
+								responses.push_back(Operation::SetLayerVisibility { path: marker, visible: true }.into());
+
+								line_i += 1;
+							}
+
+							// Draw the draggable square points on the end of every line segment or bezier curve segment
+							for anchor in anchors {
+								let marker = data.anchor_marker_pool[anchor_i].clone();
+
+								let scale = DVec2::splat(VECTOR_MANIPULATOR_ANCHOR_MARKER_SIZE);
+								let angle = 0.;
+								let translation = (anchor - (scale / 2.) + BIAS).round();
+								let transform = DAffine2::from_scale_angle_translation(scale, angle, translation).to_cols_array();
+
+								responses.push_back(Operation::SetLayerTransformInViewport { path: marker.clone(), transform }.into());
+								responses.push_back(Operation::SetLayerVisibility { path: marker, visible: true }.into());
+
+								anchor_i += 1;
+							}
+
+							// Draw the draggable handle for cubic and quadratic bezier segments
+							for handle in handles {
+								let marker = data.handle_marker_pool[handle_i].clone();
+
+								let scale = DVec2::splat(VECTOR_MANIPULATOR_ANCHOR_MARKER_SIZE);
+								let angle = 0.;
+								let translation = (handle - (scale / 2.) + BIAS).round();
+								let transform = DAffine2::from_scale_angle_translation(scale, angle, translation).to_cols_array();
+
+								responses.push_back(Operation::SetLayerTransformInViewport { path: marker.clone(), transform }.into());
+								responses.push_back(Operation::SetLayerVisibility { path: marker, visible: true }.into());
+
+								handle_i += 1;
+							}
+						}
+					}
+
+					// Hide the remaining pooled overlays
+					for i in anchor_i..data.anchor_marker_pool.len() {
+						let marker = data.anchor_marker_pool[i].clone();
+						responses.push_back(Operation::SetLayerVisibility { path: marker, visible: false }.into());
+					}
+					for i in handle_i..data.handle_marker_pool.len() {
+						let marker = data.handle_marker_pool[i].clone();
+						responses.push_back(Operation::SetLayerVisibility { path: marker, visible: false }.into());
+					}
+					for i in line_i..data.anchor_handle_line_pool.len() {
+						let line = data.anchor_handle_line_pool[i].clone();
+						responses.push_back(Operation::SetLayerVisibility { path: line, visible: false }.into());
+					}
+					for i in shape_i..data.shape_outline_pool.len() {
+						let shape_i = data.shape_outline_pool[i].clone();
+						responses.push_back(Operation::SetLayerVisibility { path: shape_i, visible: false }.into());
+					}
+
+					self
+				}
+				(_, Abort) => {
+					// Destory the overlay layer pools
+					while let Some(layer) = data.anchor_marker_pool.pop() {
+						responses.push_back(Operation::DeleteLayer { path: layer }.into());
+					}
+					while let Some(layer) = data.handle_marker_pool.pop() {
+						responses.push_back(Operation::DeleteLayer { path: layer }.into());
+					}
+					while let Some(layer) = data.anchor_handle_line_pool.pop() {
+						responses.push_back(Operation::DeleteLayer { path: layer }.into());
+					}
+					while let Some(layer) = data.shape_outline_pool.pop() {
+						responses.push_back(Operation::DeleteLayer { path: layer }.into());
+					}
+
+					Ready
+				}
+			}
+		} else {
+			self
+		}
+	}
+}
+
+fn calculate_total_overlays_per_type(shapes_to_draw: &Vec<VectorManipulatorShape>) -> (usize, usize, usize) {
+	let (mut total_anchors, mut total_handles, mut total_anchor_handle_lines) = (0, 0, 0);
+
+	for shape_to_draw in shapes_to_draw {
+		for segment in &shape_to_draw.segments {
+			let (anchors, handles, anchor_handle_lines) = match segment {
+				VectorManipulatorSegment::Line(_, _) => (2, 0, 0),
+				VectorManipulatorSegment::Quad(_, _, _) => (2, 1, 1),
+				VectorManipulatorSegment::Cubic(_, _, _, _) => (2, 2, 2),
+			};
+			total_anchors += anchors;
+			total_handles += handles;
+			total_anchor_handle_lines += anchor_handle_lines;
+		}
+	}
+
+	(total_anchors, total_handles, total_anchor_handle_lines)
+}
+
+fn grow_overlay_pool_entries<F>(pool: &mut Vec<Vec<LayerId>>, total: usize, add_overlay_function: F, responses: &mut VecDeque<Message>)
+where
+	F: Fn(&mut VecDeque<Message>) -> Vec<LayerId>,
+{
+	if pool.len() < total {
+		let additional = total - pool.len();
+
+		pool.reserve(additional);
+
+		for _ in 0..additional {
+			let marker = add_overlay_function(responses);
+			pool.push(marker);
+		}
+	}
+}
+
+fn add_anchor_marker(responses: &mut VecDeque<Message>) -> Vec<LayerId> {
+	let layer_path = vec![generate_uuid()];
+	responses.push_back(
+		Operation::AddOverlayRect {
+			path: layer_path.clone(),
+			transform: DAffine2::IDENTITY.to_cols_array(),
+			style: style::PathStyle::new(Some(Stroke::new(COLOR_ACCENT, 2.0)), Some(Fill::new(Color::WHITE))),
+		}
+		.into(),
+	);
+
+	layer_path
+}
+
+fn add_handle_marker(responses: &mut VecDeque<Message>) -> Vec<LayerId> {
+	let layer_path = vec![generate_uuid()];
+	responses.push_back(
+		Operation::AddOverlayEllipse {
+			path: layer_path.clone(),
+			transform: DAffine2::IDENTITY.to_cols_array(),
+			style: style::PathStyle::new(Some(Stroke::new(COLOR_ACCENT, 2.0)), Some(Fill::new(Color::WHITE))),
+		}
+		.into(),
+	);
+
+	layer_path
+}
+
+fn add_anchor_handle_line(responses: &mut VecDeque<Message>) -> Vec<LayerId> {
+	let layer_path = vec![generate_uuid()];
+	responses.push_back(
+		Operation::AddOverlayLine {
+			path: layer_path.clone(),
+			transform: DAffine2::IDENTITY.to_cols_array(),
+			style: style::PathStyle::new(Some(Stroke::new(COLOR_ACCENT, 1.0)), Some(Fill::none())),
+		}
+		.into(),
+	);
+
+	layer_path
+}
+
+fn add_shape_outline(responses: &mut VecDeque<Message>) -> Vec<LayerId> {
+	let layer_path = vec![generate_uuid()];
+	responses.push_back(
+		Operation::AddOverlayShape {
+			path: layer_path.clone(),
+			bez_path: BezPath::default(),
+			style: style::PathStyle::new(Some(Stroke::new(COLOR_ACCENT, 1.0)), Some(Fill::none())),
+		}
+		.into(),
+	);
+
+	layer_path
 }

editor/src/tool/tools/pen.rs

@@ -3,6 +3,7 @@ use crate::tool::{DocumentToolData, Fsm, ToolActionHandlerData, ToolOptions, Too
 use crate::{document::DocumentMessageHandler, message_prelude::*};
 use glam::DAffine2;
 use graphene::{layers::style, Operation};
+use serde::{Deserialize, Serialize};
 
 #[derive(Default)]
 pub struct Pen {
@@ -11,7 +12,7 @@ pub struct Pen {
 }
 
 #[impl_message(Message, ToolMessage, Pen)]
-#[derive(PartialEq, Clone, Debug, Hash)]
+#[derive(PartialEq, Clone, Debug, Hash, Serialize, Deserialize)]
 pub enum PenMessage {
 	Undo,
 	DragStart,

editor/src/tool/tools/rectangle.rs

@@ -4,6 +4,7 @@ use crate::tool::{DocumentToolData, Fsm, ToolActionHandlerData};
 use crate::{document::DocumentMessageHandler, message_prelude::*};
 use glam::DAffine2;
 use graphene::{layers::style, Operation};
+use serde::{Deserialize, Serialize};
 
 use super::resize::*;
 
@@ -14,7 +15,7 @@ pub struct Rectangle {
 }
 
 #[impl_message(Message, ToolMessage, Rectangle)]
-#[derive(PartialEq, Clone, Debug, Hash)]
+#[derive(PartialEq, Clone, Debug, Hash, Serialize, Deserialize)]
 pub enum RectangleMessage {
 	DragStart,
 	DragStop,

editor/src/tool/tools/select.rs

@@ -1,4 +1,3 @@
-use graphene::color::Color;
 use graphene::layers::style;
 use graphene::layers::style::Fill;
 use graphene::layers::style::Stroke;
@@ -8,6 +7,7 @@ use graphene::Quad;
 use glam::{DAffine2, DVec2};
 use serde::{Deserialize, Serialize};
 
+use crate::consts::COLOR_ACCENT;
 use crate::input::keyboard::Key;
 use crate::input::{mouse::ViewportPosition, InputPreprocessor};
 use crate::tool::{DocumentToolData, Fsm, ToolActionHandlerData};
@@ -24,7 +24,7 @@ pub struct Select {
 }
 
 #[impl_message(Message, ToolMessage, Select)]
-#[derive(PartialEq, Clone, Debug, Serialize, Deserialize, Hash)]
+#[derive(PartialEq, Clone, Debug, Hash, Serialize, Deserialize)]
 pub enum SelectMessage {
 	DragStart { add_to_selection: Key },
 	DragStop,
@@ -70,7 +70,7 @@ struct SelectToolData {
 	drag_current: ViewportPosition,
 	layers_dragging: Vec<Vec<LayerId>>, // Paths and offsets
 	drag_box_id: Option<Vec<LayerId>>,
-	bounding_box_id: Option<Vec<LayerId>>,
+	bounding_box_path: Option<Vec<LayerId>>,
 }
 
 impl SelectToolData {
@@ -89,13 +89,13 @@ impl SelectToolData {
 	}
 }
 
-fn add_boundnig_box(responses: &mut Vec<Message>) -> Vec<LayerId> {
+fn add_bounding_box(responses: &mut Vec<Message>) -> Vec<LayerId> {
 	let path = vec![generate_uuid()];
 	responses.push(
-		Operation::AddBoundingBox {
+		Operation::AddOverlayRect {
 			path: path.clone(),
 			transform: DAffine2::ZERO.to_cols_array(),
-			style: style::PathStyle::new(Some(Stroke::new(Color::from_rgb8(0x00, 0xA8, 0xFF), 1.0)), Some(Fill::none())),
+			style: style::PathStyle::new(Some(Stroke::new(COLOR_ACCENT, 1.0)), Some(Fill::none())),
 		}
 		.into(),
 	);
@@ -125,11 +125,11 @@ impl Fsm for SelectToolFsmState {
 			match (self, event) {
 				(_, UpdateSelectionBoundingBox) => {
 					let mut buffer = Vec::new();
-					let response = match (document.selected_layers_bounding_box(), data.bounding_box_id.take()) {
+					let response = match (document.selected_layers_bounding_box(), data.bounding_box_path.take()) {
 						(None, Some(path)) => Operation::DeleteLayer { path }.into(),
 						(Some([pos1, pos2]), path) => {
-							let path = path.unwrap_or_else(|| add_boundnig_box(&mut buffer));
-							data.bounding_box_id = Some(path.clone());
+							let path = path.unwrap_or_else(|| add_bounding_box(&mut buffer));
+							data.bounding_box_path = Some(path.clone());
 							let transform = transform_from_box(pos1, pos2);
 							Operation::SetLayerTransformInViewport { path, transform }.into()
 						}
@@ -163,7 +163,7 @@ impl Fsm for SelectToolFsmState {
 						if !input.keyboard.get(add_to_selection as usize) {
 							buffer.push(DocumentMessage::DeselectAllLayers.into());
 						}
-						data.drag_box_id = Some(add_boundnig_box(&mut buffer));
+						data.drag_box_id = Some(add_bounding_box(&mut buffer));
 						DrawingBox
 					};
 					buffer.into_iter().rev().for_each(|message| responses.push_front(message));
@@ -220,7 +220,7 @@ impl Fsm for SelectToolFsmState {
 				(_, Abort) => {
 					let mut delete = |path: &mut Option<Vec<LayerId>>| path.take().map(|path| responses.push_front(Operation::DeleteLayer { path }.into()));
 					delete(&mut data.drag_box_id);
-					delete(&mut data.bounding_box_id);
+					delete(&mut data.bounding_box_path);
 					Ready
 				}
 				(_, Align(axis, aggregate)) => {

editor/src/tool/tools/shape.rs

@@ -4,6 +4,7 @@ use crate::tool::{DocumentToolData, Fsm, ShapeType, ToolActionHandlerData, ToolO
 use crate::{document::DocumentMessageHandler, message_prelude::*};
 use glam::DAffine2;
 use graphene::{layers::style, Operation};
+use serde::{Deserialize, Serialize};
 
 use super::resize::*;
 
@@ -14,7 +15,7 @@ pub struct Shape {
 }
 
 #[impl_message(Message, ToolMessage, Shape)]
-#[derive(PartialEq, Clone, Debug, Hash)]
+#[derive(PartialEq, Clone, Debug, Hash, Serialize, Deserialize)]
 pub enum ShapeMessage {
 	DragStart,
 	DragStop,
@@ -82,7 +83,7 @@ impl Fsm for ShapeToolFsmState {
 					};
 
 					responses.push_back(
-						Operation::AddShape {
+						Operation::AddNgon {
 							path: shape_data.path.clone().unwrap(),
 							insert_index: -1,
 							transform: DAffine2::ZERO.to_cols_array(),