Merge branch 'master' into fix_group_creation_parenting

.vscode/extensions.json

@@ -3,6 +3,7 @@
 		"matklad.rust-analyzer",
 		"dbaeumer.vscode-eslint",
 		"octref.vetur",
-		"formulahendry.auto-close-tag"
+		"formulahendry.auto-close-tag",
+		"aaron-bond.better-comments"
 	]
-}
+}

charcoal/src/lib.rs

@@ -1,7 +1,7 @@
 #[cfg(test)]
 mod tests {
-	#[test]
-	fn it_works() {
-		assert_eq!(2 + 2, 4);
-	}
+	// #[test]
+	// fn it_works() {
+	// 	assert_eq!(2 + 2, 4);
+	// }
 }

editor/src/communication/dispatcher.rs

@@ -7,6 +7,7 @@ pub use crate::tool::ToolMessageHandler;
 use crate::global::GlobalMessageHandler;
 use std::collections::VecDeque;
 
+#[derive(Debug, Default)]
 pub struct Dispatcher {
 	input_preprocessor: InputPreprocessor,
 	input_mapper: InputMapper,
@@ -30,6 +31,10 @@ const SIDE_EFFECT_FREE_MESSAGES: &[MessageDiscriminant] = &[
 ];
 
 impl Dispatcher {
+	pub fn new() -> Self {
+		Self::default()
+	}
+
 	pub fn handle_message<T: Into<Message>>(&mut self, message: T) {
 		self.messages.push_back(message.into());
 
@@ -68,18 +73,6 @@ impl Dispatcher {
 		list
 	}
 
-	pub fn new() -> Dispatcher {
-		Dispatcher {
-			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(&self, message: &Message) {
 		use Message::*;
 		if log::max_level() == log::LevelFilter::Trace

editor/src/document/document_file.rs

@@ -5,7 +5,7 @@ pub use super::layer_panel::*;
 use super::movement_handler::{MovementMessage, MovementMessageHandler};
 use super::overlay_message_handler::OverlayMessageHandler;
 use super::transform_layer_handler::{TransformLayerMessage, TransformLayerMessageHandler};
-use super::vectorize_layerdata;
+use super::vectorize_layer_metadata;
 
 use crate::consts::DEFAULT_DOCUMENT_NAME;
 use crate::consts::{ASYMPTOTIC_EFFECT, FILE_EXPORT_SUFFIX, FILE_SAVE_SUFFIX, SCALE_EFFECT, SCROLLBAR_SPACING};
@@ -24,7 +24,7 @@ use kurbo::PathSeg;
 use log::warn;
 use serde::{Deserialize, Serialize};
 
-type DocumentSave = (GrapheneDocument, HashMap<Vec<LayerId>, LayerData>);
+type DocumentSave = (GrapheneDocument, HashMap<Vec<LayerId>, LayerMetadata>);
 
 #[derive(PartialEq, Clone, Debug, Serialize, Deserialize, Hash)]
 pub enum FlipAxis {
@@ -69,8 +69,8 @@ pub struct DocumentMessageHandler {
 	pub document_redo_history: Vec<DocumentSave>,
 	pub saved_document_identifier: u64,
 	pub name: String,
-	#[serde(with = "vectorize_layerdata")]
-	pub layer_data: HashMap<Vec<LayerId>, LayerData>,
+	#[serde(with = "vectorize_layer_metadata")]
+	pub layer_metadata: HashMap<Vec<LayerId>, LayerMetadata>,
 	layer_range_selection_reference: Vec<LayerId>,
 	#[serde(skip)]
 	movement_handler: MovementMessageHandler,
@@ -90,7 +90,7 @@ impl Default for DocumentMessageHandler {
 			document_redo_history: Vec::new(),
 			name: String::from("Untitled Document"),
 			saved_document_identifier: 0,
-			layer_data: vec![(vec![], LayerData::new(true))].into_iter().collect(),
+			layer_metadata: vec![(vec![], LayerMetadata::new(true))].into_iter().collect(),
 			layer_range_selection_reference: Vec::new(),
 			movement_handler: MovementMessageHandler::default(),
 			overlay_message_handler: OverlayMessageHandler::default(),
@@ -111,9 +111,9 @@ pub enum DocumentMessage {
 	DispatchOperation(Box<DocumentOperation>),
 	#[child]
 	Overlay(OverlayMessage),
-	UpdateLayerData {
-		path: Vec<LayerId>,
-		layer_data_entry: LayerData,
+	UpdateLayerMetadata {
+		layer_path: Vec<LayerId>,
+		layer_metadata: LayerMetadata,
 	},
 	SetSelectedLayers(Vec<Vec<LayerId>>),
 	AddSelectedLayers(Vec<Vec<LayerId>>),
@@ -186,7 +186,7 @@ impl DocumentMessageHandler {
 	}
 
 	pub fn deserialize_document(serialized_content: &str) -> Result<Self, DocumentError> {
-		log::info!("Deserialising: {:?}", serialized_content);
+		log::info!("Deserializing: {:?}", serialized_content);
 		serde_json::from_str(serialized_content).map_err(|e| DocumentError::InvalidFile(e.to_string()))
 	}
 
@@ -209,15 +209,15 @@ impl DocumentMessageHandler {
 
 	pub fn is_unmodified_default(&self) -> bool {
 		self.serialize_root().len() == Self::default().serialize_root().len()
-			&& self.document_undo_history.len() == 0
-			&& self.document_redo_history.len() == 0
+			&& self.document_undo_history.is_empty()
+			&& self.document_redo_history.is_empty()
 			&& self.name.starts_with(DEFAULT_DOCUMENT_NAME)
 	}
 
 	fn select_layer(&mut self, path: &[LayerId]) -> Option<Message> {
 		println!("Select_layer fail: {:?}", self.all_layers_sorted());
 
-		self.layer_data_mut(path).selected = true;
+		self.layer_metadata_mut(path).selected = true;
 		let data = self.layer_panel_entry(path.to_vec()).ok()?;
 		(!path.is_empty()).then(|| FrontendMessage::UpdateLayer { data }.into())
 	}
@@ -269,12 +269,8 @@ impl DocumentMessageHandler {
 		shapes.collect::<Vec<VectorManipulatorShape>>()
 	}
 
-	pub fn create_layer_data(&mut self, path: &[LayerId]) {
-		self.layer_data.insert(path.to_vec(), LayerData::new(true));
-	}
-
 	pub fn selected_layers(&self) -> impl Iterator<Item = &[LayerId]> {
-		self.layer_data.iter().filter_map(|(path, data)| data.selected.then(|| path.as_slice()))
+		self.layer_metadata.iter().filter_map(|(path, data)| data.selected.then(|| path.as_slice()))
 	}
 
 	pub fn selected_layers_without_children(&self) -> Vec<Vec<LayerId>> {
@@ -305,7 +301,7 @@ impl DocumentMessageHandler {
 	}
 
 	pub fn selected_layers_contains(&self, path: &[LayerId]) -> bool {
-		self.layer_data.get(path).map(|layer| layer.selected).unwrap_or(false)
+		self.layer_metadata.get(path).map(|layer| layer.selected).unwrap_or(false)
 	}
 
 	pub fn selected_visible_layers(&self) -> impl Iterator<Item = &[LayerId]> {
@@ -324,7 +320,7 @@ impl DocumentMessageHandler {
 				LayerDataType::Shape(_) => (),
 				LayerDataType::Folder(ref folder) => {
 					path.push(*id);
-					if self.layer_data(path).expanded {
+					if self.layer_metadata(path).expanded {
 						structure.push(space);
 						self.serialize_structure(folder, structure, data, path);
 						space = 0;
@@ -370,7 +366,7 @@ impl DocumentMessageHandler {
 
 	/// Returns an unsorted list of all layer paths including folders at all levels, except the document's top-level root folder itself
 	pub fn all_layers(&self) -> Vec<Vec<LayerId>> {
-		self.layer_data.keys().filter(|path| !path.is_empty()).cloned().collect()
+		self.layer_metadata.keys().filter(|path| !path.is_empty()).cloned().collect()
 	}
 
 	/// Returns the paths to all layers in order, optionally including only selected or non-selected layers.
@@ -378,14 +374,13 @@ impl DocumentMessageHandler {
 		// Compute the indices for each layer to be able to sort them
 		let mut layers_with_indices: Vec<(Vec<LayerId>, Vec<usize>)> = self
 
-			.layer_data
+			.layer_metadata
 			.iter()
 			// 'path.len() > 0' filters out root layer since it has no indices
 			.filter_map(|(path, data)| (!path.is_empty() && (data.selected == selected.unwrap_or(data.selected))).then(|| path.clone()))
 			.filter_map(|path| {
-				// Currently it is possible that layer_data contains layers that are don't actually exist (has been partially fixed in #281)
-				// and thus indices_for_path can return an error. We currently skip these layers and log a warning.
-				// Once this problem is solved this code can be simplified
+				// TODO: Currently it is possible that `layer_metadata` contains layers that are don't actually exist (has been partially fixed in #281) and thus
+				// TODO: `indices_for_path` can return an error. We currently skip these layers and log a warning. Once this problem is solved this code can be simplified.
 				match self.graphene_document.indices_for_path(&path) {
 					Err(err) => {
 						warn!("layers_sorted: Could not get indices for the layer {:?}: {:?}", path, err);
@@ -416,23 +411,23 @@ impl DocumentMessageHandler {
 		self.layers_sorted(Some(false))
 	}
 
-	pub fn layer_data(&self, path: &[LayerId]) -> &LayerData {
-		self.layer_data.get(path).expect("Layerdata does not exist")
+	pub fn layer_metadata(&self, path: &[LayerId]) -> &LayerMetadata {
+		self.layer_metadata.get(path).unwrap_or_else(|| panic!("Editor's layer metadata for {:?} does not exist", path))
 	}
 
-	pub fn layer_data_mut(&mut self, path: &[LayerId]) -> &mut LayerData {
-		Self::layer_data_mut_no_borrow_self(&mut self.layer_data, path)
+	pub fn layer_metadata_mut(&mut self, path: &[LayerId]) -> &mut LayerMetadata {
+		Self::layer_metadata_mut_no_borrow_self(&mut self.layer_metadata, path)
 	}
 
-	pub fn layer_data_mut_no_borrow_self<'a>(layer_data: &'a mut HashMap<Vec<LayerId>, LayerData>, path: &[LayerId]) -> &'a mut LayerData {
-		layer_data
+	pub fn layer_metadata_mut_no_borrow_self<'a>(layer_metadata: &'a mut HashMap<Vec<LayerId>, LayerMetadata>, path: &[LayerId]) -> &'a mut LayerMetadata {
+		layer_metadata
 			.get_mut(path)
 			.unwrap_or_else(|| panic!("Layer data cannot be found because the path {:?} does not exist", path))
 	}
 
 	pub fn backup(&mut self, responses: &mut VecDeque<Message>) {
 		self.document_redo_history.clear();
-		self.document_undo_history.push((self.graphene_document.clone(), self.layer_data.clone()));
+		self.document_undo_history.push((self.graphene_document.clone(), self.layer_metadata.clone()));
 
 		// Push the UpdateOpenDocumentsList message to the bus in order to update the save status of the open documents
 		responses.push_back(DocumentsMessage::UpdateOpenDocumentsList.into());
@@ -449,10 +444,10 @@ impl DocumentMessageHandler {
 		responses.push_back(DocumentsMessage::UpdateOpenDocumentsList.into());
 
 		match self.document_undo_history.pop() {
-			Some((document, layer_data)) => {
+			Some((document, layer_metadata)) => {
 				let document = std::mem::replace(&mut self.graphene_document, document);
-				let layer_data = std::mem::replace(&mut self.layer_data, layer_data);
-				self.document_redo_history.push((document, layer_data));
+				let layer_metadata = std::mem::replace(&mut self.layer_metadata, layer_metadata);
+				self.document_redo_history.push((document, layer_metadata));
 				Ok(())
 			}
 			None => Err(EditorError::NoTransactionInProgress),
@@ -464,10 +459,10 @@ impl DocumentMessageHandler {
 		responses.push_back(DocumentsMessage::UpdateOpenDocumentsList.into());
 
 		match self.document_redo_history.pop() {
-			Some((document, layer_data)) => {
+			Some((document, layer_metadata)) => {
 				let document = std::mem::replace(&mut self.graphene_document, document);
-				let layer_data = std::mem::replace(&mut self.layer_data, layer_data);
-				self.document_undo_history.push((document.clone(), layer_data.clone()));
+				let layer_metadata = std::mem::replace(&mut self.layer_metadata, layer_metadata);
+				self.document_undo_history.push((document, layer_metadata));
 				Ok(())
 			}
 			None => Err(EditorError::NoTransactionInProgress),
@@ -496,7 +491,7 @@ impl DocumentMessageHandler {
 	}
 
 	pub fn layer_panel_entry(&mut self, path: Vec<LayerId>) -> Result<LayerPanelEntry, EditorError> {
-		let data: LayerData = *self.layer_data_mut(&path);
+		let data: LayerMetadata = *self.layer_metadata_mut(&path);
 		let layer = self.graphene_document.layer(&path)?;
 		let entry = layer_panel_entry(&data, self.graphene_document.multiply_transforms(&path)?, layer, path);
 		Ok(entry)
@@ -512,14 +507,14 @@ impl DocumentMessageHandler {
 	}
 
 	pub fn layer_panel_entry_from_path(&self, path: &[LayerId]) -> Option<LayerPanelEntry> {
-		let layer_data = self.layer_data(path);
+		let layer_metadata = self.layer_metadata(path);
 		let transform = self
 			.graphene_document
 			.generate_transform_across_scope(path, Some(self.graphene_document.root.transform.inverse()))
 			.ok()?;
 		let layer = self.graphene_document.layer(path).ok()?;
 
-		Some(layer_panel_entry(layer_data, transform, layer, path.to_vec()))
+		Some(layer_panel_entry(layer_metadata, transform, layer, path.to_vec()))
 	}
 }
 
@@ -530,7 +525,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 			Movement(message) => self.movement_handler.process_action(message, (&self.graphene_document, ipp), responses),
 			TransformLayers(message) => self
 				.transform_layer_handler
-				.process_action(message, (&mut self.layer_data, &mut self.graphene_document, ipp), responses),
+				.process_action(message, (&mut self.layer_metadata, &mut self.graphene_document, ipp), responses),
 			DeleteLayer(path) => responses.push_back(DocumentOperation::DeleteLayer { path }.into()),
 			StartTransaction => self.backup(responses),
 			RollbackTransaction => {
@@ -543,8 +538,11 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 			}
 			CommitTransaction => (),
 			Overlay(message) => {
-				self.overlay_message_handler
-					.process_action(message, (Self::layer_data_mut_no_borrow_self(&mut self.layer_data, &[]), &self.graphene_document, ipp), responses);
+				self.overlay_message_handler.process_action(
+					message,
+					(Self::layer_metadata_mut_no_borrow_self(&mut self.layer_metadata, &[]), &self.graphene_document, ipp),
+					responses,
+				);
 				// responses.push_back(OverlayMessage::RenderOverlays.into());
 			}
 			ExportDocument => {
@@ -621,7 +619,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 			}
 			SetBlendModeForSelectedLayers(blend_mode) => {
 				self.backup(responses);
-				for path in self.layer_data.iter().filter_map(|(path, data)| data.selected.then(|| path.clone())) {
+				for path in self.layer_metadata.iter().filter_map(|(path, data)| data.selected.then(|| path.clone())) {
 					responses.push_back(DocumentOperation::SetLayerBlendMode { path, blend_mode }.into());
 				}
 			}
@@ -638,12 +636,12 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 				responses.push_back(ToolMessage::DocumentIsDirty.into());
 			}
 			ToggleLayerExpansion(path) => {
-				self.layer_data_mut(&path).expanded ^= true;
+				self.layer_metadata_mut(&path).expanded ^= true;
 				responses.push_back(DocumentStructureChanged.into());
 				responses.push_back(LayerChanged(path).into())
 			}
 			SetLayerExpansion(path, is_expanded) => {
-				self.layer_data_mut(&path).expanded = is_expanded;
+				self.layer_metadata_mut(&path).expanded = is_expanded;
 				responses.push_back(DocumentStructureChanged.into());
 				responses.push_back(LayerChanged(path).into())
 			}
@@ -677,7 +675,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 				// If we have shift pressed and a layer already selected then fill the range
 				if shift && last_selection_exists {
 					// Fill the selection range
-					self.layer_data
+					self.layer_metadata
 						.iter()
 						.filter(|(target, _)| self.graphene_document.layer_is_between(target, &selected, &self.layer_range_selection_reference))
 						.for_each(|(layer_path, _)| {
@@ -686,7 +684,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 				} else {
 					if ctrl {
 						// Toggle selection when holding ctrl
-						let layer = self.layer_data_mut(&selected);
+						let layer = self.layer_metadata_mut(&selected);
 						layer.selected = !layer.selected;
 						responses.push_back(LayerChanged(selected.clone()).into());
 						responses.push_back(ToolMessage::DocumentIsDirty.into());
@@ -708,12 +706,13 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 					}
 				}
 			}
-			UpdateLayerData { path, layer_data_entry } => {
-				self.layer_data.insert(path, layer_data_entry);
+			UpdateLayerMetadata { layer_path: path, layer_metadata } => {
+				self.layer_metadata.insert(path, layer_metadata);
 			}
 			SetSelectedLayers(paths) => {
-				self.layer_data.iter_mut().filter(|(_, layer_data)| layer_data.selected).for_each(|(path, layer_data)| {
-					layer_data.selected = false;
+				let selected = self.layer_metadata.iter_mut().filter(|(_, layer_metadata)| layer_metadata.selected);
+				selected.for_each(|(path, layer_metadata)| {
+					layer_metadata.selected = false;
 					responses.push_back(LayerChanged(path.clone()).into())
 				});
 
@@ -728,7 +727,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 				responses.push_back(ToolMessage::DocumentIsDirty.into());
 			}
 			DebugPrintDocument => {
-				log::debug!("{:#?}\n{:#?}", self.graphene_document, self.layer_data);
+				log::debug!("{:#?}\n{:#?}", self.graphene_document, self.layer_metadata);
 			}
 			SelectAllLayers => {
 				let all_layer_paths = self.all_layers();
@@ -773,11 +772,11 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 						match &response {
 							DocumentResponse::FolderChanged { path } => responses.push_back(FolderChanged(path.clone()).into()),
 							DocumentResponse::DeletedLayer { path } => {
-								self.layer_data.remove(path);
+								self.layer_metadata.remove(path);
 							}
 							DocumentResponse::LayerChanged { path } => responses.push_back(LayerChanged(path.clone()).into()),
 							DocumentResponse::CreatedLayer { path } => {
-								self.layer_data.insert(path.clone(), LayerData::new(false));
+								self.layer_metadata.insert(path.clone(), LayerMetadata::new(false));
 								responses.push_back(LayerChanged(path.clone()).into());
 								self.layer_range_selection_reference = path.clone();
 								responses.push_back(SetSelectedLayers(vec![path.clone()]).into());
@@ -989,9 +988,9 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 						.into(),
 					);
 					responses.push_back(
-						DocumentMessage::UpdateLayerData {
-							path: destination_path,
-							layer_data_entry: *self.layer_data(&target_layer),
+						DocumentMessage::UpdateLayerMetadata {
+							layer_path: destination_path,
+							layer_metadata: *self.layer_metadata(&target_layer),
 						}
 						.into(),
 					);
@@ -1019,7 +1018,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 			MoveLayerInTree,
 		);
 
-		if self.layer_data.values().any(|data| data.selected) {
+		if self.layer_metadata.values().any(|data| data.selected) {
 			let select = actions!(DocumentMessageDiscriminant;
 				DeleteSelectedLayers,
 				DuplicateSelectedLayers,

editor/src/document/document_message_handler.rs

@@ -1,4 +1,4 @@
-use super::{DocumentMessageHandler, LayerData};
+use super::{DocumentMessageHandler, LayerMetadata};
 use crate::consts::DEFAULT_DOCUMENT_NAME;
 use crate::frontend::frontend_message_handler::FrontendDocumentDetails;
 use crate::input::InputPreprocessor;
@@ -68,7 +68,7 @@ pub struct DocumentsMessageHandler {
 #[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
 pub struct CopyBufferEntry {
 	layer: Layer,
-	layer_data: LayerData,
+	layer_metadata: LayerMetadata,
 }
 
 impl DocumentsMessageHandler {
@@ -121,7 +121,7 @@ impl DocumentsMessageHandler {
 
 		responses.extend(
 			new_document
-				.layer_data
+				.layer_metadata
 				.keys()
 				.filter_map(|path| new_document.layer_panel_entry_from_path(path))
 				.map(|entry| FrontendMessage::UpdateLayer { data: entry }.into())
@@ -193,7 +193,7 @@ impl MessageHandler<DocumentsMessage, &InputPreprocessor> for DocumentsMessageHa
 				responses.push_back(FrontendMessage::SetActiveDocument { document_id: id }.into());
 				responses.push_back(RenderDocument.into());
 				responses.push_back(DocumentMessage::DocumentStructureChanged.into());
-				for layer in self.active_document().layer_data.keys() {
+				for layer in self.active_document().layer_metadata.keys() {
 					responses.push_back(DocumentMessage::LayerChanged(layer.clone()).into());
 				}
 			}
@@ -249,7 +249,7 @@ impl MessageHandler<DocumentsMessage, &InputPreprocessor> for DocumentsMessageHa
 					.document_ids
 					.iter()
 					.filter_map(|id| {
-						self.documents.get(&id).map(|doc| FrontendDocumentDetails {
+						self.documents.get(id).map(|doc| FrontendDocumentDetails {
 							is_saved: doc.is_saved(),
 							id: *id,
 							name: doc.name.clone(),
@@ -262,7 +262,7 @@ impl MessageHandler<DocumentsMessage, &InputPreprocessor> for DocumentsMessageHa
 				responses.push_back(FrontendMessage::RemoveAutoSaveDocument { document_id: id }.into());
 				responses.push_back(RenderDocument.into());
 				responses.push_back(DocumentMessage::DocumentStructureChanged.into());
-				for layer in self.active_document().layer_data.keys() {
+				for layer in self.active_document().layer_metadata.keys() {
 					responses.push_back(DocumentMessage::LayerChanged(layer.clone()).into());
 				}
 			}
@@ -314,7 +314,7 @@ impl MessageHandler<DocumentsMessage, &InputPreprocessor> for DocumentsMessageHa
 					.document_ids
 					.iter()
 					.filter_map(|id| {
-						self.documents.get(&id).map(|doc| FrontendDocumentDetails {
+						self.documents.get(id).map(|doc| FrontendDocumentDetails {
 							is_saved: doc.is_saved(),
 							id: *id,
 							name: doc.name.clone(),
@@ -359,9 +359,9 @@ impl MessageHandler<DocumentsMessage, &InputPreprocessor> for DocumentsMessageHa
 				copy_buffer[clipboard as usize].clear();
 
 				for layer_path in active_document.selected_layers_without_children() {
-					match (active_document.graphene_document.layer(&layer_path).map(|t| t.clone()), *active_document.layer_data(&layer_path)) {
-						(Ok(layer), layer_data) => {
-							copy_buffer[clipboard as usize].push(CopyBufferEntry { layer, layer_data });
+					match (active_document.graphene_document.layer(&layer_path).map(|t| t.clone()), *active_document.layer_metadata(&layer_path)) {
+						(Ok(layer), layer_metadata) => {
+							copy_buffer[clipboard as usize].push(CopyBufferEntry { layer, layer_metadata });
 						}
 						(Err(e), _) => warn!("Could not access selected layer {:?}: {:?}", layer_path, e),
 					}
@@ -407,9 +407,9 @@ impl MessageHandler<DocumentsMessage, &InputPreprocessor> for DocumentsMessageHa
 						.into(),
 					);
 					responses.push_back(
-						DocumentMessage::UpdateLayerData {
-							path: destination_path,
-							layer_data_entry: entry.layer_data,
+						DocumentMessage::UpdateLayerMetadata {
+							layer_path: destination_path,
+							layer_metadata: entry.layer_metadata,
 						}
 						.into(),
 					);
@@ -439,7 +439,7 @@ impl MessageHandler<DocumentsMessage, &InputPreprocessor> for DocumentsMessageHa
 			Paste,
 		);
 
-		if self.active_document().layer_data.values().any(|data| data.selected) {
+		if self.active_document().layer_metadata.values().any(|data| data.selected) {
 			let select = actions!(DocumentsMessageDiscriminant;
 				Copy,
 				Cut,

editor/src/document/layer_panel.rs

@@ -1,22 +1,24 @@
-use glam::{DAffine2, DVec2};
-use graphene::layers::{style::ViewMode, BlendMode, Layer, LayerData as DocumentLayerData, LayerDataType};
+use graphene::layers::{style::ViewMode, BlendMode, Layer, LayerData, LayerDataType};
 use graphene::LayerId;
-use serde::{ser::SerializeStruct, Deserialize, Serialize};
+
 use std::fmt;
 
+use glam::{DAffine2, DVec2};
+use serde::{ser::SerializeStruct, Deserialize, Serialize};
+
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Copy)]
-pub struct LayerData {
+pub struct LayerMetadata {
 	pub selected: bool,
 	pub expanded: bool,
 }
 
-impl LayerData {
-	pub fn new(expanded: bool) -> LayerData {
-		LayerData { selected: false, expanded }
+impl LayerMetadata {
+	pub fn new(expanded: bool) -> LayerMetadata {
+		LayerMetadata { selected: false, expanded }
 	}
 }
 
-pub fn layer_panel_entry(layer_data: &LayerData, transform: DAffine2, layer: &Layer, path: Vec<LayerId>) -> LayerPanelEntry {
+pub fn layer_panel_entry(layer_metadata: &LayerMetadata, transform: DAffine2, layer: &Layer, path: Vec<LayerId>) -> LayerPanelEntry {
 	let layer_type: LayerDataTypeDiscriminant = (&layer.data).into();
 	let name = layer.name.clone().unwrap_or_else(|| format!("Unnamed {}", layer_type));
 	let arr = layer.data.bounding_box(transform).unwrap_or([DVec2::ZERO, DVec2::ZERO]);
@@ -45,7 +47,7 @@ pub fn layer_panel_entry(layer_data: &LayerData, transform: DAffine2, layer: &La
 		blend_mode: layer.blend_mode,
 		opacity: layer.opacity,
 		layer_type: (&layer.data).into(),
-		layer_data: *layer_data,
+		layer_metadata: *layer_metadata,
 		path,
 		thumbnail,
 	}
@@ -85,7 +87,7 @@ pub struct LayerPanelEntry {
 	pub blend_mode: BlendMode,
 	pub opacity: f64,
 	pub layer_type: LayerDataTypeDiscriminant,
-	pub layer_data: LayerData,
+	pub layer_metadata: LayerMetadata,
 	pub path: Vec<LayerId>,
 	pub thumbnail: String,
 }

editor/src/document/mod.rs

@@ -4,10 +4,10 @@ pub mod layer_panel;
 mod movement_handler;
 mod overlay_message_handler;
 mod transform_layer_handler;
-mod vectorize_layerdata;
+mod vectorize_layer_metadata;
 
 #[doc(inline)]
-pub use document_file::LayerData;
+pub use document_file::LayerMetadata;
 
 #[doc(inline)]
 pub use document_file::{AlignAggregate, AlignAxis, DocumentMessage, DocumentMessageDiscriminant, DocumentMessageHandler, FlipAxis, VectorManipulatorSegment, VectorManipulatorShape};

editor/src/document/overlay_message_handler.rs

@@ -1,5 +1,5 @@
 pub use crate::document::layer_panel::*;
-use crate::document::{DocumentMessage, LayerData};
+use crate::document::{DocumentMessage, LayerMetadata};
 use crate::input::InputPreprocessor;
 use crate::message_prelude::*;
 use graphene::document::Document;
@@ -29,9 +29,9 @@ pub struct OverlayMessageHandler {
 	overlay_path_mapping: HashMap<Vec<LayerId>, Vec<LayerId>>,
 }
 
-impl MessageHandler<OverlayMessage, (&mut LayerData, &Document, &InputPreprocessor)> for OverlayMessageHandler {
-	fn process_action(&mut self, message: OverlayMessage, data: (&mut LayerData, &Document, &InputPreprocessor), responses: &mut VecDeque<Message>) {
-		let (layer_data, document, ipp) = data;
+impl MessageHandler<OverlayMessage, (&mut LayerMetadata, &Document, &InputPreprocessor)> for OverlayMessageHandler {
+	fn process_action(&mut self, message: OverlayMessage, _data: (&mut LayerMetadata, &Document, &InputPreprocessor), responses: &mut VecDeque<Message>) {
+		// let (layer_metadata, document, ipp) = data;
 		use OverlayMessage::*;
 		match message {
 			DispatchOperation(operation) => match self.overlays_graphene_document.handle_operation(&operation) {

editor/src/document/transform_layer_handler.rs

@@ -1,6 +1,6 @@
 pub use super::layer_panel::*;
 
-use super::LayerData;
+use super::LayerMetadata;
 
 use crate::consts::{ROTATE_SNAP_ANGLE, SCALE_SNAP_INTERVAL, SLOWING_DIVISOR};
 use crate::input::keyboard::Key;
@@ -25,11 +25,11 @@ impl<'a> Selected<'a> {
 	pub fn new(
 		original_transforms: &'a mut OriginalTransforms,
 		pivot: &'a mut DVec2,
-		layer_data: &'a mut HashMap<Vec<LayerId>, LayerData>,
+		layer_metadata: &'a mut HashMap<Vec<LayerId>, LayerMetadata>,
 		responses: &'a mut VecDeque<Message>,
 		document: &'a mut Document,
 	) -> Self {
-		let selected = layer_data.iter().filter_map(|(layer_path, data)| data.selected.then(|| layer_path.to_owned())).collect();
+		let selected = layer_metadata.iter().filter_map(|(layer_path, data)| data.selected.then(|| layer_path.to_owned())).collect();
 		for path in &selected {
 			if !original_transforms.contains_key::<Vec<LayerId>>(path) {
 				original_transforms.insert(path.clone(), document.layer(path).unwrap().transform);
@@ -394,12 +394,12 @@ pub struct TransformLayerMessageHandler {
 	pivot: DVec2,
 }
 
-impl MessageHandler<TransformLayerMessage, (&mut HashMap<Vec<LayerId>, LayerData>, &mut Document, &InputPreprocessor)> for TransformLayerMessageHandler {
-	fn process_action(&mut self, message: TransformLayerMessage, data: (&mut HashMap<Vec<LayerId>, LayerData>, &mut Document, &InputPreprocessor), responses: &mut VecDeque<Message>) {
+impl MessageHandler<TransformLayerMessage, (&mut HashMap<Vec<LayerId>, LayerMetadata>, &mut Document, &InputPreprocessor)> for TransformLayerMessageHandler {
+	fn process_action(&mut self, message: TransformLayerMessage, data: (&mut HashMap<Vec<LayerId>, LayerMetadata>, &mut Document, &InputPreprocessor), responses: &mut VecDeque<Message>) {
 		use TransformLayerMessage::*;
 
-		let (layer_data, document, ipp) = data;
-		let mut selected = Selected::new(&mut self.original_transforms, &mut self.pivot, layer_data, responses, document);
+		let (layer_metadata, document, ipp) = data;
+		let mut selected = Selected::new(&mut self.original_transforms, &mut self.pivot, layer_metadata, responses, document);
 
 		let mut begin_operation = |operation: Operation, typing: &mut Typing, mouse_position: &mut DVec2, start_mouse: &mut DVec2| {
 			if !(operation == Operation::None) {

editor/src/global/global_message_handler.rs

@@ -13,12 +13,6 @@ pub enum GlobalMessage {
 #[derive(Debug, Default)]
 pub struct GlobalMessageHandler {}
 
-impl GlobalMessageHandler {
-	pub fn new() -> Self {
-		Self::default()
-	}
-}
-
 impl MessageHandler<GlobalMessage, ()> for GlobalMessageHandler {
 	fn process_action(&mut self, message: GlobalMessage, _data: (), _responses: &mut VecDeque<Message>) {
 		use GlobalMessage::*;

editor/src/input/keyboard.rs

@@ -197,7 +197,7 @@ macro_rules! bit_ops {
 macro_rules! bit_ops_assign {
 	($(($op:ident, $func:ident)),* $(,)?) => {
 		$(impl<const LENGTH: usize> $op for BitVector<LENGTH> {
-			fn $func(&mut self, right: Self)  {
+			fn $func(&mut self, right: Self) {
 				for (left, right) in self.0.iter_mut().zip(right.0.iter()) {
 					$op::$func(left, right);
 				}

editor/src/input/mouse.rs

@@ -31,6 +31,7 @@ impl ViewportBounds {
 
 #[derive(Debug, Copy, Clone, Default, Eq, PartialEq, Hash, Serialize, Deserialize)]
 pub struct ScrollDelta {
+	// TODO: Switch these to `f64` values (not trivial because floats don't provide PartialEq, Eq, and Hash)
 	pub x: i32,
 	pub y: i32,
 	pub z: i32,

editor/src/tool/snapping.rs

@@ -58,13 +58,11 @@ impl SnapHandler {
 						.unwrap_or(0.),
 				);
 
-				// Do not move if over snap tolerance
-				let clamped_closest_move = DVec2::new(
+				// Clamp, do not move if over snap tolerance
+				DVec2::new(
 					if closest_move.x.abs() > SNAP_TOLERANCE { 0. } else { closest_move.x },
 					if closest_move.y.abs() > SNAP_TOLERANCE { 0. } else { closest_move.y },
-				);
-
-				clamped_closest_move
+				)
 			} else {
 				DVec2::ZERO
 			}

editor/src/tool/tools/line.rs

@@ -42,7 +42,7 @@ impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for Line {
 	fn actions(&self) -> ActionList {
 		use LineToolFsmState::*;
 		match self.fsm_state {
-			Ready => actions!(LineMessageDiscriminant;  DragStart),
+			Ready => actions!(LineMessageDiscriminant; DragStart),
 			Drawing => actions!(LineMessageDiscriminant; DragStop, Redraw, Abort),
 		}
 	}

editor/src/tool/tools/path.rs

@@ -303,7 +303,7 @@ impl Fsm for PathToolFsmState {
 	}
 }
 
-fn calculate_total_overlays_per_type(shapes_to_draw: &Vec<VectorManipulatorShape>) -> (usize, usize, usize) {
+fn calculate_total_overlays_per_type(shapes_to_draw: &[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 {

frontend/.eslintrc.js

@@ -73,9 +73,54 @@ module.exports = {
 		"@typescript-eslint/no-use-before-define": "off",
 		"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
 		"@typescript-eslint/no-loss-of-precision": "off", // TODO: Remove this line after upgrading to eslint 7.1 or greater
+		"@typescript-eslint/explicit-function-return-type": ["error"],
 
 		// Import plugin config (used to intelligently validate module import statements)
 		"import/prefer-default-export": "off",
+		"import/no-relative-packages": "error",
+		"import/order": [
+			"error",
+			{
+				alphabetize: {
+					order: "asc",
+					caseInsensitive: true,
+				},
+				warnOnUnassignedImports: true,
+				"newlines-between": "always-and-inside-groups",
+				pathGroups: [
+					{
+						pattern: "**/*.vue",
+						group: "unknown",
+						position: "after",
+					},
+					{
+						pattern: "**/assets/12px-solid/*.svg",
+						group: "unknown",
+						position: "after",
+					},
+					{
+						pattern: "**/assets/16px-solid/*.svg",
+						group: "unknown",
+						position: "after",
+					},
+					{
+						pattern: "**/assets/16px-two-tone/*.svg",
+						group: "unknown",
+						position: "after",
+					},
+					{
+						pattern: "**/assets/24px-full-color/*.svg",
+						group: "unknown",
+						position: "after",
+					},
+					{
+						pattern: "**/assets/24px-two-tone/*.svg",
+						group: "unknown",
+						position: "after",
+					},
+				],
+			},
+		],
 
 		// Prettier plugin config (used to enforce HTML, CSS, and JS formatting styles as an ESLint plugin, where fixes are reported to ESLint to be applied when linting)
 		"prettier-vue/prettier": [
@@ -90,4 +135,12 @@ module.exports = {
 		// Vue plugin config (used to validate Vue single-file components)
 		"vue/multi-word-component-names": "off",
 	},
+	overrides: [
+		{
+			files: ["*.js"],
+			rules: {
+				"@typescript-eslint/explicit-function-return-type": ["off"],
+			},
+		},
+	],
 };

frontend/src/App.vue

@@ -221,16 +221,16 @@ img {
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { DialogState, createDialogState } from "@/state/dialog";
+import { createAutoSaveManager } from "@/lifetime/auto-save";
+import { initErrorHandling } from "@/lifetime/errors";
+import { createInputManager, InputManager } from "@/lifetime/input";
+import { createDialogState, DialogState } from "@/state/dialog";
 import { createDocumentsState, DocumentsState } from "@/state/documents";
 import { createFullscreenState, FullscreenState } from "@/state/fullscreen";
-
-import MainWindow from "@/components/window/MainWindow.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
 import { createEditorState, EditorState } from "@/state/wasm-loader";
-import { createInputManager, InputManager } from "@/lifetime/input";
-import { initErrorHandling } from "@/lifetime/errors";
-import { createAutoSaveManager } from "@/lifetime/auto-save";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import MainWindow from "@/components/window/MainWindow.vue";
 
 // Vue injects don't play well with TypeScript, and all injects will show up as `any`. As a workaround, we can define these types.
 declare module "@vue/runtime-core" {

frontend/src/components/panels/Document.vue

@@ -4,35 +4,35 @@
 			<div class="left side">
 				<DropdownInput :menuEntries="documentModeEntries" v-model:selectedIndex="documentModeSelectionIndex" :drawIcon="true" />
 
-				<Separator :type="SeparatorType.Section" />
+				<Separator :type="'Section'" />
 
 				<ToolOptions :activeTool="activeTool" :activeToolOptions="activeToolOptions" />
 			</div>
 			<div class="spacer"></div>
 			<div class="right side">
-				<OptionalInput v-model:checked="snappingEnabled" @update:checked="setSnap" :icon="'Snapping'" title="Snapping" />
+				<OptionalInput v-model:checked="snappingEnabled" @update:checked="(newStatus) => setSnap(newStatus)" :icon="'Snapping'" title="Snapping" />
 				<PopoverButton>
 					<h3>Snapping</h3>
 					<p>The contents of this popover menu are coming soon</p>
 				</PopoverButton>
 
-				<Separator :type="SeparatorType.Unrelated" />
+				<Separator :type="'Unrelated'" />
 
-				<OptionalInput v-model:checked="gridEnabled" @update:checked="dialog.comingSoon(318)" :icon="'Grid'" title="Grid" />
+				<OptionalInput v-model:checked="gridEnabled" @update:checked="() => dialog.comingSoon(318)" :icon="'Grid'" title="Grid" />
 				<PopoverButton>
 					<h3>Grid</h3>
 					<p>The contents of this popover menu are coming soon</p>
 				</PopoverButton>
 
-				<Separator :type="SeparatorType.Unrelated" />
+				<Separator :type="'Unrelated'" />
 
-				<OptionalInput v-model:checked="overlaysEnabled" @update:checked="dialog.comingSoon(99)" :icon="'Overlays'" title="Overlays" />
+				<OptionalInput v-model:checked="overlaysEnabled" @update:checked="() => dialog.comingSoon(99)" :icon="'Overlays'" title="Overlays" />
 				<PopoverButton>
 					<h3>Overlays</h3>
 					<p>The contents of this popover menu are coming soon</p>
 				</PopoverButton>
 
-				<Separator :type="SeparatorType.Unrelated" />
+				<Separator :type="'Unrelated'" />
 
 				<RadioInput :entries="viewModeEntries" v-model:selectedIndex="viewModeIndex" class="combined-after" />
 				<PopoverButton>
@@ -40,27 +40,27 @@
 					<p>The contents of this popover menu are coming soon</p>
 				</PopoverButton>
 
-				<Separator :type="SeparatorType.Section" />
+				<Separator :type="'Section'" />
 
-				<NumberInput @update:value="setRotation" v-model:value="documentRotation" :incrementFactor="15" :unit="`°`" />
+				<NumberInput @update:value="(newRotation) => setRotation(newRotation)" v-model:value="documentRotation" :incrementFactor="15" :unit="'°'" />
 
-				<Separator :type="SeparatorType.Section" />
+				<Separator :type="'Section'" />
 
-				<IconButton :action="() => this.$refs.zoom.onIncrement(IncrementDirection.Increase)" :icon="'ZoomIn'" :size="24" title="Zoom In" />
-				<IconButton :action="() => this.$refs.zoom.onIncrement(IncrementDirection.Decrease)" :icon="'ZoomOut'" :size="24" title="Zoom Out" />
+				<IconButton :action="() => this.$refs.zoom.onIncrement('Increase')" :icon="'ZoomIn'" :size="24" title="Zoom In" />
+				<IconButton :action="() => this.$refs.zoom.onIncrement('Decrease')" :icon="'ZoomOut'" :size="24" title="Zoom Out" />
 				<IconButton :action="() => this.$refs.zoom.updateValue(100)" :icon="'ZoomReset'" :size="24" title="Zoom to 100%" />
 
-				<Separator :type="SeparatorType.Related" />
+				<Separator :type="'Related'" />
 
 				<NumberInput
 					v-model:value="documentZoom"
-					@update:value="setCanvasZoom"
+					@update:value="(newZoom) => setCanvasZoom(newZoom)"
 					:min="0.000001"
 					:max="1000000"
-					:incrementBehavior="IncrementBehavior.Callback"
+					:incrementBehavior="'Callback'"
 					:incrementCallbackIncrease="increaseCanvasZoom"
 					:incrementCallbackDecrease="decreaseCanvasZoom"
-					:unit="`%`"
+					:unit="'%'"
 					:displayDecimalPlaces="4"
 					ref="zoom"
 				/>
@@ -74,13 +74,13 @@
 					<ShelfItemInput icon="LayoutNavigateTool" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" :action="() => selectTool('Navigate')" />
 					<ShelfItemInput icon="LayoutEyedropperTool" title="Eyedropper Tool (I)" :active="activeTool === 'Eyedropper'" :action="() => selectTool('Eyedropper')" />
 
-					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
+					<Separator :type="'Section'" :direction="'Vertical'" />
 
 					<ShelfItemInput icon="ParametricTextTool" title="Text Tool (T)" :active="activeTool === 'Text'" :action="() => dialog.comingSoon(153) && selectTool('Text')" />
 					<ShelfItemInput icon="ParametricFillTool" title="Fill Tool (F)" :active="activeTool === 'Fill'" :action="() => selectTool('Fill')" />
 					<ShelfItemInput icon="ParametricGradientTool" title="Gradient Tool (H)" :active="activeTool === 'Gradient'" :action="() => dialog.comingSoon() && selectTool('Gradient')" />
 
-					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
+					<Separator :type="'Section'" :direction="'Vertical'" />
 
 					<ShelfItemInput icon="RasterBrushTool" title="Brush Tool (B)" :active="activeTool === 'Brush'" :action="() => dialog.comingSoon() && selectTool('Brush')" />
 					<ShelfItemInput icon="RasterHealTool" title="Heal Tool (J)" :active="activeTool === 'Heal'" :action="() => dialog.comingSoon() && selectTool('Heal')" />
@@ -89,7 +89,7 @@
 					<ShelfItemInput icon="RasterBlurSharpenTool" title="Detail Tool (D)" :active="activeTool === 'BlurSharpen'" :action="() => dialog.comingSoon() && selectTool('BlurSharpen')" />
 					<ShelfItemInput icon="RasterRelightTool" title="Relight Tool (O)" :active="activeTool === 'Relight'" :action="() => dialog.comingSoon() && selectTool('Relight')" />
 
-					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
+					<Separator :type="'Section'" :direction="'Vertical'" />
 
 					<ShelfItemInput icon="VectorPathTool" title="Path Tool (A)" :active="activeTool === 'Path'" :action="() => selectTool('Path')" />
 					<ShelfItemInput icon="VectorPenTool" title="Pen Tool (P)" :active="activeTool === 'Pen'" :action="() => selectTool('Pen')" />
@@ -111,11 +111,11 @@
 			</LayoutCol>
 			<LayoutCol :class="'viewport'">
 				<LayoutRow :class="'bar-area'">
-					<CanvasRuler :origin="rulerOrigin.x" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="RulerDirection.Horizontal" :class="'top-ruler'" />
+					<CanvasRuler :origin="rulerOrigin.x" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Horizontal'" :class="'top-ruler'" />
 				</LayoutRow>
 				<LayoutRow :class="'canvas-area'">
 					<LayoutCol :class="'bar-area'">
-						<CanvasRuler :origin="rulerOrigin.y" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="RulerDirection.Vertical" />
+						<CanvasRuler :origin="rulerOrigin.y" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Vertical'" />
 					</LayoutCol>
 					<LayoutCol :class="'canvas-area'">
 						<div class="canvas" ref="canvas">
@@ -125,22 +125,22 @@
 					</LayoutCol>
 					<LayoutCol :class="'bar-area'">
 						<PersistentScrollbar
-							:direction="ScrollbarDirection.Vertical"
+							:direction="'Vertical'"
 							:handlePosition="scrollbarPos.y"
-							@update:handlePosition="translateCanvasY"
+							@update:handlePosition="(newValue) => translateCanvasY(newValue)"
 							v-model:handleLength="scrollbarSize.y"
-							@pressTrack="pageY"
+							@pressTrack="(delta) => pageY(delta)"
 							:class="'right-scrollbar'"
 						/>
 					</LayoutCol>
 				</LayoutRow>
 				<LayoutRow :class="'bar-area'">
 					<PersistentScrollbar
-						:direction="ScrollbarDirection.Horizontal"
+						:direction="'Horizontal'"
 						:handlePosition="scrollbarPos.x"
-						@update:handlePosition="translateCanvasX"
+						@update:handlePosition="(newValue) => translateCanvasX(newValue)"
 						v-model:handleLength="scrollbarSize.x"
-						@pressTrack="pageX"
+						@pressTrack="(delta) => pageX(delta)"
 						:class="'bottom-scrollbar'"
 					/>
 				</LayoutRow>
@@ -247,24 +247,22 @@
 import { defineComponent } from "vue";
 
 import { UpdateArtwork, UpdateOverlays, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation } from "@/dispatcher/js-messages";
-import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
-import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.vue";
-import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
-import ShelfItemInput from "@/components/widgets/inputs/ShelfItemInput.vue";
-import Separator from "@/components/widgets/separators/Separator.vue";
-import PersistentScrollbar, { ScrollbarDirection } from "@/components/widgets/scrollbars/PersistentScrollbar.vue";
-import CanvasRuler, { RulerDirection } from "@/components/widgets/rulers/CanvasRuler.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
-import RadioInput, { RadioEntries } from "@/components/widgets/inputs/RadioInput.vue";
-import NumberInput, { IncrementDirection, IncrementBehavior } from "@/components/widgets/inputs/NumberInput.vue";
-import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
-import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
-import ToolOptions from "@/components/widgets/options/ToolOptions.vue";
 import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
+import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
+import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
+import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
+import RadioInput, { RadioEntries } from "@/components/widgets/inputs/RadioInput.vue";
+import ShelfItemInput from "@/components/widgets/inputs/ShelfItemInput.vue";
+import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.vue";
+import ToolOptions from "@/components/widgets/options/ToolOptions.vue";
+import CanvasRuler from "@/components/widgets/rulers/CanvasRuler.vue";
+import PersistentScrollbar from "@/components/widgets/scrollbars/PersistentScrollbar.vue";
+import Separator from "@/components/widgets/separators/Separator.vue";
 
 export default defineComponent({
 	inject: ["editor", "dialog"],
@@ -368,14 +366,14 @@ export default defineComponent({
 		const documentModeEntries: SectionsOfMenuListEntries = [
 			[
 				{ label: "Design Mode", icon: "ViewportDesignMode" },
-				{ label: "Select Mode", icon: "ViewportSelectMode", action: () => this.dialog.comingSoon(330) },
-				{ label: "Guide Mode", icon: "ViewportGuideMode", action: () => this.dialog.comingSoon(331) },
+				{ label: "Select Mode", icon: "ViewportSelectMode", action: (): void => this.dialog.comingSoon(330) },
+				{ label: "Guide Mode", icon: "ViewportGuideMode", action: (): void => this.dialog.comingSoon(331) },
 			],
 		];
 		const viewModeEntries: RadioEntries = [
-			{ value: "normal", icon: "ViewModeNormal", tooltip: "View Mode: Normal", action: () => this.setViewMode("Normal") },
-			{ value: "outline", icon: "ViewModeOutline", tooltip: "View Mode: Outline", action: () => this.setViewMode("Outline") },
-			{ value: "pixels", icon: "ViewModePixels", tooltip: "View Mode: Pixels", action: () => this.dialog.comingSoon(320) },
+			{ value: "normal", icon: "ViewModeNormal", tooltip: "View Mode: Normal", action: (): void => this.setViewMode("Normal") },
+			{ value: "outline", icon: "ViewModeOutline", tooltip: "View Mode: Outline", action: (): void => this.setViewMode("Outline") },
+			{ value: "pixels", icon: "ViewModePixels", tooltip: "View Mode: Pixels", action: (): void => this.dialog.comingSoon(320) },
 		];
 
 		return {
@@ -400,13 +398,6 @@ export default defineComponent({
 			rulerOrigin: { x: 0, y: 0 },
 			rulerSpacing: 100,
 			rulerInterval: 100,
-			IncrementBehavior,
-			IncrementDirection,
-			MenuDirection,
-			SeparatorDirection,
-			ScrollbarDirection,
-			RulerDirection,
-			SeparatorType,
 		};
 	},
 	components: {

frontend/src/components/panels/LayerTree.vue

@@ -1,13 +1,27 @@
 <template>
 	<LayoutCol :class="'layer-tree-panel'">
 		<LayoutRow :class="'options-bar'">
-			<DropdownInput v-model:selectedIndex="blendModeSelectedIndex" @update:selectedIndex="setLayerBlendMode" :menuEntries="blendModeEntries" :disabled="blendModeDropdownDisabled" />
+			<DropdownInput
+				v-model:selectedIndex="blendModeSelectedIndex"
+				@update:selectedIndex="(newSelectedIndex) => setLayerBlendMode(newSelectedIndex)"
+				:menuEntries="blendModeEntries"
+				:disabled="blendModeDropdownDisabled"
+			/>
 
-			<Separator :type="SeparatorType.Related" />
+			<Separator :type="'Related'" />
 
-			<NumberInput v-model:value="opacity" @update:value="setLayerOpacity" :min="0" :max="100" :unit="`%`" :displayDecimalPlaces="2" :label="'Opacity'" :disabled="opacityNumberInputDisabled" />
+			<NumberInput
+				v-model:value="opacity"
+				@update:value="(newOpacity) => setLayerOpacity(newOpacity)"
+				:min="0"
+				:max="100"
+				:unit="'%'"
+				:displayDecimalPlaces="2"
+				:label="'Opacity'"
+				:disabled="opacityNumberInputDisabled"
+			/>
 
-			<Separator :type="SeparatorType.Related" />
+			<Separator :type="'Related'" />
 
 			<PopoverButton>
 				<h3>Compositing Options</h3>
@@ -15,7 +29,7 @@
 			</PopoverButton>
 		</LayoutRow>
 		<LayoutRow :class="'layer-tree scrollable-y'">
-			<LayoutCol :class="'list'" ref="layerTreeList" @click="deselectAllLayers" @dragover="updateLine($event)" @dragend="drop()">
+			<LayoutCol :class="'list'" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="updateLine($event)" @dragend="drop()">
 				<div class="layer-row" v-for="(layer, index) in layers" :key="layer.path">
 					<div class="layer-visibility">
 						<IconButton
@@ -26,15 +40,15 @@
 						/>
 					</div>
 					<button
-						v-if="layer.layer_type === LayerTypeOptions.Folder"
+						v-if="layer.layer_type === 'Folder'"
 						class="node-connector"
-						:class="{ expanded: layer.layer_data.expanded }"
+						:class="{ expanded: layer.layer_metadata.expanded }"
 						@click.stop="handleNodeConnectorClick(layer.path)"
 					></button>
 					<div v-else class="node-connector-missing"></div>
 					<div
 						class="layer"
-						:class="{ selected: layer.layer_data.selected }"
+						:class="{ selected: layer.layer_metadata.selected }"
 						:style="{ marginLeft: layerIndent(layer) }"
 						@click.shift.exact.stop="selectLayer(layer, false, true)"
 						@click.shift.ctrl.exact.stop="selectLayer(layer, true, true)"
@@ -46,7 +60,7 @@
 					>
 						<div class="layer-thumbnail" v-html="layer.thumbnail"></div>
 						<div class="layer-type-icon">
-							<IconLabel v-if="layer.layer_type === LayerTypeOptions.Folder" :icon="'NodeTypeFolder'" title="Folder" />
+							<IconLabel v-if="layer.layer_type === 'Folder'" :icon="'NodeTypeFolder'" title="Folder" />
 							<IconLabel v-else :icon="'NodeTypePath'" title="Path" />
 						</div>
 						<div class="layer-name">
@@ -228,19 +242,17 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { BlendMode, DisplayFolderTreeStructure, UpdateLayer, LayerPanelEntry, LayerTypeOptions } from "@/dispatcher/js-messages";
-import { SeparatorType } from "@/components/widgets/widgets";
+import { BlendMode, DisplayFolderTreeStructure, UpdateLayer, LayerPanelEntry } from "@/dispatcher/js-messages";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
-import Separator from "@/components/widgets/separators/Separator.vue";
-import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
-import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
-import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
+import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
+import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
+import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import Separator from "@/components/widgets/separators/Separator.vue";
 
 const blendModeEntries: SectionsOfMenuListEntries<BlendMode> = [
 	[{ label: "Normal", value: "Normal" }],
@@ -301,13 +313,10 @@ export default defineComponent({
 			selectionRangeEndLayer: undefined as undefined | LayerPanelEntry,
 			opacity: 100,
 			draggingData: undefined as undefined | { path: BigUint64Array; above: boolean; nearestPath: BigUint64Array; insertLine: HTMLDivElement },
-			MenuDirection,
-			SeparatorType,
-			LayerTypeOptions,
 		};
 	},
 	methods: {
-		layerIndent(layer: LayerPanelEntry): string {
+		layerIndent(layer: LayerPanelEntry) {
 			return `${(layer.path.length - 1) * 16}px`;
 		},
 		async toggleLayerVisibility(path: BigUint64Array) {
@@ -316,14 +325,12 @@ export default defineComponent({
 		async handleNodeConnectorClick(path: BigUint64Array) {
 			this.editor.instance.toggle_layer_expansion(path);
 		},
-		async setLayerBlendMode() {
-			const blendMode = this.blendModeEntries.flat()[this.blendModeSelectedIndex].value;
-			if (blendMode) {
-				this.editor.instance.set_blend_mode_for_selected_layers(blendMode);
-			}
+		async setLayerBlendMode(newSelectedIndex: number) {
+			const blendMode = this.blendModeEntries.flat()[newSelectedIndex].value;
+			if (blendMode) this.editor.instance.set_blend_mode_for_selected_layers(blendMode);
 		},
-		async setLayerOpacity() {
-			this.editor.instance.set_opacity_for_selected_layers(this.opacity);
+		async setLayerOpacity(newOpacity: number) {
+			this.editor.instance.set_opacity_for_selected_layers(newOpacity);
 		},
 		async selectLayer(clickedLayer: LayerPanelEntry, ctrl: boolean, shift: boolean) {
 			this.editor.instance.select_layer(clickedLayer.path, ctrl, shift);
@@ -336,7 +343,7 @@ export default defineComponent({
 		},
 		async clearSelection() {
 			this.layers.forEach((layer) => {
-				layer.layer_data.selected = false;
+				layer.layer_metadata.selected = false;
 			});
 		},
 		closest(tree: HTMLElement, clientY: number): [BigUint64Array, boolean, Node] {
@@ -377,7 +384,7 @@ export default defineComponent({
 					}
 				}
 				// Inserting below current row
-				else if (distance > -closest && distance > -RANGE_TO_INSERT_WITHIN_BOTTOM_FOLDER_NOT_ROOT && distance < 0 && layer.layer_type !== LayerTypeOptions.Folder) {
+				else if (distance > -closest && distance > -RANGE_TO_INSERT_WITHIN_BOTTOM_FOLDER_NOT_ROOT && distance < 0 && layer.layer_type !== "Folder") {
 					closest = -distance;
 					nearestPath = layer.path;
 					if (child.parentNode && child.parentNode.nextSibling) {
@@ -446,7 +453,7 @@ export default defineComponent({
 			}
 		},
 		setBlendModeForSelectedLayers() {
-			const selected = this.layers.filter((layer) => layer.layer_data.selected);
+			const selected = this.layers.filter((layer) => layer.layer_metadata.selected);
 
 			if (selected.length < 1) {
 				this.blendModeSelectedIndex = 0;
@@ -467,7 +474,7 @@ export default defineComponent({
 		},
 		setOpacityForSelectedLayers() {
 			// todo figure out why this is here
-			const selected = this.layers.filter((layer) => layer.layer_data.selected);
+			const selected = this.layers.filter((layer) => layer.layer_metadata.selected);
 
 			if (selected.length < 1) {
 				this.opacity = 100;
@@ -491,7 +498,8 @@ export default defineComponent({
 		this.editor.dispatcher.subscribeJsMessage(DisplayFolderTreeStructure, (displayFolderTreeStructure) => {
 			const path = [] as bigint[];
 			this.layers = [] as LayerPanelEntry[];
-			function recurse(folder: DisplayFolderTreeStructure, layers: LayerPanelEntry[], cache: Map<string, LayerPanelEntry>) {
+
+			const recurse = (folder: DisplayFolderTreeStructure, layers: LayerPanelEntry[], cache: Map<string, LayerPanelEntry>): void => {
 				folder.children.forEach((item) => {
 					// TODO: fix toString
 					path.push(BigInt(item.layerId.toString()));
@@ -500,7 +508,8 @@ export default defineComponent({
 					if (item.children.length >= 1) recurse(item, layers, cache);
 					path.pop();
 				});
-			}
+			};
+
 			recurse(displayFolderTreeStructure, this.layers, this.layerCache);
 		});
 

frontend/src/components/panels/Minimap.vue

@@ -7,8 +7,5 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-export default defineComponent({
-	components: {},
-	props: {},
-});
+export default defineComponent({});
 </script>

frontend/src/components/panels/Properties.vue

@@ -7,8 +7,5 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-export default defineComponent({
-	components: {},
-	props: {},
-});
+export default defineComponent({});
 </script>

frontend/src/components/widgets/buttons/IconButton.vue

@@ -1,5 +1,5 @@
 <template>
-	<button class="icon-button" :class="`size-${String(size)}`" @click="(e) => action(e)">
+	<button class="icon-button" :class="`size-${size}`" @click="(e) => action(e)">
 		<IconLabel :icon="icon" />
 	</button>
 </template>
@@ -57,16 +57,16 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import IconLabel, { IconName, IconSize } from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	props: {
-		action: { type: Function, required: true },
-		icon: { type: String, required: true },
-		size: { type: Number, required: true },
-		gapAfter: { type: Boolean, default: false },
+		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
+		icon: { type: String as PropType<IconName>, required: true },
+		size: { type: Number as PropType<IconSize>, required: true },
+		gapAfter: { type: Boolean as PropType<boolean>, default: false },
 	},
 	components: { IconLabel },
 });

frontend/src/components/widgets/buttons/PopoverButton.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="popover-button">
 		<IconButton :action="handleClick" :icon="icon" :size="16" data-hover-menu-spawner />
-		<FloatingMenu :type="MenuType.Popover" :direction="MenuDirection.Bottom" ref="floatingMenu">
+		<FloatingMenu :type="'Popover'" :direction="'Bottom'" ref="floatingMenu">
 			<slot></slot>
 		</FloatingMenu>
 	</div>
@@ -47,15 +47,12 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
+import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 
-export enum PopoverButtonIcon {
-	"DropdownArrow" = "DropdownArrow",
-	"VerticalEllipsis" = "VerticalEllipsis",
-}
+export type PopoverButtonIcon = "DropdownArrow" | "VerticalEllipsis";
 
 export default defineComponent({
 	components: {
@@ -63,8 +60,8 @@ export default defineComponent({
 		IconButton,
 	},
 	props: {
-		action: { type: Function, required: false },
-		icon: { type: String, default: PopoverButtonIcon.DropdownArrow },
+		action: { type: Function as PropType<() => void>, required: false },
+		icon: { type: String as PropType<PopoverButtonIcon>, default: "DropdownArrow" },
 	},
 	methods: {
 		handleClick() {
@@ -73,11 +70,5 @@ export default defineComponent({
 			if (this.action) this.action();
 		},
 	},
-	data() {
-		return {
-			MenuDirection,
-			MenuType,
-		};
-	},
 });
 </script>

frontend/src/components/widgets/buttons/TextButton.vue

@@ -1,5 +1,5 @@
 <template>
-	<button class="text-button" :class="{ emphasized, disabled }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" @click="action">
+	<button class="text-button" :class="{ emphasized, disabled }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" @click="(e) => action(e)">
 		<TextLabel>{{ label }}</TextLabel>
 	</button>
 </template>
@@ -49,18 +49,18 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
 export default defineComponent({
 	props: {
-		action: { type: Function, required: true },
-		label: { type: String, required: true },
-		emphasized: { type: Boolean, default: false },
-		disabled: { type: Boolean, default: false },
-		minWidth: { type: Number, default: 0 },
-		gapAfter: { type: Boolean, default: false },
+		action: { type: Function as PropType<(e: MouseEvent) => void>, required: true },
+		label: { type: String as PropType<string>, required: true },
+		emphasized: { type: Boolean as PropType<boolean>, default: false },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
+		minWidth: { type: Number as PropType<number>, default: 0 },
+		gapAfter: { type: Boolean as PropType<boolean>, default: false },
 	},
 	components: { TextLabel },
 });

frontend/src/components/widgets/floating-menus/ColorPicker.vue

@@ -1,12 +1,12 @@
 <template>
 	<div class="color-picker">
-		<div class="saturation-picker" ref="saturationPicker" data-picker-action="MoveSaturation" @pointerdown="onPointerDown">
+		<div class="saturation-picker" ref="saturationPicker" @pointerdown="(e) => onPointerDown(e)">
 			<div ref="saturationCursor" class="selection-circle"></div>
 		</div>
-		<div class="hue-picker" ref="huePicker" data-picker-action="MoveHue" @pointerdown="onPointerDown">
+		<div class="hue-picker" ref="huePicker" @pointerdown="(e) => onPointerDown(e)">
 			<div ref="hueCursor" class="selection-pincers"></div>
 		</div>
-		<div class="opacity-picker" ref="opacityPicker" data-picker-action="MoveOpacity" @pointerdown="onPointerDown">
+		<div class="opacity-picker" ref="opacityPicker" @pointerdown="(e) => onPointerDown(e)">
 			<div ref="opacityCursor" class="selection-pincers"></div>
 		</div>
 	</div>
@@ -117,43 +117,28 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
-import { hsvToRgb, rgbToHsv, isRGB } from "@/utilities/color";
+import { RGBA } from "@/dispatcher/js-messages";
+import { hsvaToRgba, rgbaToHsva } from "@/utilities/color";
 import { clamp } from "@/utilities/math";
 
-const enum ColorPickerState {
-	Idle = "Idle",
-	MoveHue = "MoveHue",
-	MoveOpacity = "MoveOpacity",
-	MoveSaturation = "MoveSaturation",
-}
+type ColorPickerState = "Idle" | "MoveHue" | "MoveOpacity" | "MoveSaturation";
+
+// TODO: Clean up the fundamental code design in this file to simplify it and use better practices.
+// TODO: Such as removing the `picker*` data variables and reducing the number of functions which call each other in weird, non-obvious ways.
 
 export default defineComponent({
-	components: {},
 	props: {
-		color: { type: Object, required: true },
+		color: { type: Object as PropType<RGBA>, required: true },
 	},
 	data() {
 		return {
-			state: ColorPickerState.Idle,
-			// Disable proxy on this object
-			// https://v3.vuejs.org/api/options-data.html#data-2
-			// eslint-disable-next-line vue/no-reserved-keys
-			_: {
-				colorPicker: {
-					color: { h: 0, s: 0, v: 0, a: 1 },
-					hue: {
-						rect: { width: 0, height: 0, top: 0, left: 0 },
-					},
-					opacity: {
-						rect: { width: 0, height: 0, top: 0, left: 0 },
-					},
-					saturation: {
-						rect: { width: 0, height: 0, top: 0, left: 0 },
-					},
-				},
-			},
+			state: "Idle" as ColorPickerState,
+			pickerHSVA: { h: 0, s: 0, v: 0, a: 1 },
+			pickerHueRect: { width: 0, height: 0, top: 0, left: 0 },
+			pickerOpacityRect: { width: 0, height: 0, top: 0, left: 0 },
+			pickerSaturationRect: { width: 0, height: 0, top: 0, left: 0 },
 		};
 	},
 	mounted() {
@@ -171,116 +156,122 @@ export default defineComponent({
 			document.removeEventListener("pointermove", this.onPointerMove);
 			document.removeEventListener("pointerup", this.onPointerUp);
 		},
-		getRef<T>(name: string) {
-			return this.$refs[name] as T;
-		},
 		onPointerDown(e: PointerEvent) {
-			if (!(e.currentTarget instanceof Element)) return;
-			const picker = e.currentTarget.getAttribute("data-picker-action");
-			this.state = (() => {
-				switch (picker) {
-					case "MoveHue":
-						return ColorPickerState.MoveHue;
-					case "MoveOpacity":
-						return ColorPickerState.MoveOpacity;
-					case "MoveSaturation":
-						return ColorPickerState.MoveSaturation;
-					default:
-						return ColorPickerState.Idle;
-				}
-			})();
+			if (!(e.currentTarget instanceof HTMLElement)) return;
 
-			if (this.state !== ColorPickerState.Idle) {
-				this.addEvents();
-				this.updateRects();
-				this.onPointerMove(e);
+			if ((this.$refs.saturationPicker as HTMLElement).contains(e.currentTarget)) {
+				this.state = "MoveSaturation";
+			} else if ((this.$refs.huePicker as HTMLElement).contains(e.currentTarget)) {
+				this.state = "MoveHue";
+			} else if ((this.$refs.opacityPicker as HTMLElement).contains(e.currentTarget)) {
+				this.state = "MoveOpacity";
+			} else {
+				this.state = "Idle";
 			}
+
+			if (this.state === "Idle") return;
+
+			this.addEvents();
+			this.updateRects();
+			this.onPointerMove(e);
 		},
 		onPointerMove(e: PointerEvent) {
-			const { colorPicker } = this.$data._;
-
-			if (this.state === ColorPickerState.MoveHue) {
-				this.setHuePosition(e.clientY - colorPicker.hue.rect.top);
-			} else if (this.state === ColorPickerState.MoveOpacity) {
-				this.setOpacityPosition(e.clientY - colorPicker.opacity.rect.top);
-			} else if (this.state === ColorPickerState.MoveSaturation) {
-				this.setSaturationPosition(e.clientX - colorPicker.saturation.rect.left, e.clientY - colorPicker.saturation.rect.top);
+			switch (this.state) {
+				case "MoveHue":
+					this.setHueCursorPosition(e.clientY - this.pickerHueRect.top);
+					break;
+				case "MoveOpacity":
+					this.setOpacityCursorPosition(e.clientY - this.pickerOpacityRect.top);
+					break;
+				case "MoveSaturation":
+					this.setSaturationCursorPosition(e.clientX - this.pickerSaturationRect.left, e.clientY - this.pickerSaturationRect.top);
+					break;
+				default:
+					return;
 			}
 
-			if (this.state !== ColorPickerState.Idle) {
-				this.updateHue();
-				this.$emit("update:color", hsvToRgb(colorPicker.color));
-			}
+			this.updateHue();
+			// The `color` prop's watcher calls `this.updateColor()`
+			this.$emit("update:color", hsvaToRgba(this.pickerHSVA));
 		},
 		onPointerUp() {
-			if (this.state !== ColorPickerState.Idle) {
-				this.state = ColorPickerState.Idle;
-				this.removeEvents();
-			}
+			if (this.state === "Idle") return;
+
+			this.state = "Idle";
+			this.removeEvents();
 		},
 		updateRects() {
-			const { colorPicker } = this.$data._;
-
-			const saturationPicker = this.getRef<HTMLElement>("saturationPicker");
+			// Saturation
+			const saturationPicker = this.$refs.saturationPicker as HTMLElement;
 			const saturation = saturationPicker.getBoundingClientRect();
-			colorPicker.saturation.rect.width = saturation.width;
-			colorPicker.saturation.rect.height = saturation.height;
-			colorPicker.saturation.rect.left = saturation.left;
-			colorPicker.saturation.rect.top = saturation.top;
 
-			const huePicker = this.getRef<HTMLElement>("huePicker");
+			this.pickerSaturationRect.width = saturation.width;
+			this.pickerSaturationRect.height = saturation.height;
+			this.pickerSaturationRect.left = saturation.left;
+			this.pickerSaturationRect.top = saturation.top;
+
+			// Hue
+			const huePicker = this.$refs.huePicker as HTMLElement;
 			const hue = huePicker.getBoundingClientRect();
-			colorPicker.hue.rect.width = hue.width;
-			colorPicker.hue.rect.height = hue.height;
-			colorPicker.hue.rect.left = hue.left;
-			colorPicker.hue.rect.top = hue.top;
 
-			const opacityPicker = this.getRef<HTMLElement>("opacityPicker");
+			this.pickerHueRect.width = hue.width;
+			this.pickerHueRect.height = hue.height;
+			this.pickerHueRect.left = hue.left;
+			this.pickerHueRect.top = hue.top;
+
+			// Opacity
+			const opacityPicker = this.$refs.opacityPicker as HTMLElement;
 			const opacity = opacityPicker.getBoundingClientRect();
-			colorPicker.opacity.rect.width = opacity.width;
-			colorPicker.opacity.rect.height = opacity.height;
-			colorPicker.opacity.rect.left = opacity.left;
-			colorPicker.opacity.rect.top = opacity.top;
+
+			this.pickerOpacityRect.width = opacity.width;
+			this.pickerOpacityRect.height = opacity.height;
+			this.pickerOpacityRect.left = opacity.left;
+			this.pickerOpacityRect.top = opacity.top;
 		},
-		setSaturationPosition(x: number, y: number) {
-			const { colorPicker } = this.$data._;
-			const saturationCursor = this.getRef<HTMLElement>("saturationCursor");
-			const saturationPosition = [clamp(x, 0, colorPicker.saturation.rect.width), clamp(y, 0, colorPicker.saturation.rect.height)];
-			saturationCursor.style.transform = `translate(${saturationPosition[0]}px, ${saturationPosition[1]}px)`;
-			colorPicker.color.s = saturationPosition[0] / colorPicker.saturation.rect.width;
-			colorPicker.color.v = (1 - saturationPosition[1] / colorPicker.saturation.rect.height) * 255;
+		setSaturationCursorPosition(x: number, y: number) {
+			const saturationPositionX = clamp(x, 0, this.pickerSaturationRect.width);
+			const saturationPositionY = clamp(y, 0, this.pickerSaturationRect.height);
+
+			const saturationCursor = this.$refs.saturationCursor as HTMLElement;
+			saturationCursor.style.transform = `translate(${saturationPositionX}px, ${saturationPositionY}px)`;
+
+			this.pickerHSVA.s = saturationPositionX / this.pickerSaturationRect.width;
+			this.pickerHSVA.v = (1 - saturationPositionY / this.pickerSaturationRect.height) * 255;
 		},
-		setHuePosition(y: number) {
-			const { colorPicker } = this.$data._;
-			const hueCursor = this.getRef<HTMLElement>("hueCursor");
-			const huePosition = clamp(y, 0, colorPicker.hue.rect.height);
+		setHueCursorPosition(y: number) {
+			const huePosition = clamp(y, 0, this.pickerHueRect.height);
+
+			const hueCursor = this.$refs.hueCursor as HTMLElement;
 			hueCursor.style.transform = `translateY(${huePosition}px)`;
-			colorPicker.color.h = clamp(1 - huePosition / colorPicker.hue.rect.height);
+
+			this.pickerHSVA.h = clamp(1 - huePosition / this.pickerHueRect.height);
 		},
-		setOpacityPosition(y: number) {
-			const { colorPicker } = this.$data._;
-			const opacityCursor = this.getRef<HTMLElement>("opacityCursor");
-			const opacityPosition = clamp(y, 0, colorPicker.opacity.rect.height);
+		setOpacityCursorPosition(y: number) {
+			const opacityPosition = clamp(y, 0, this.pickerOpacityRect.height);
+
+			const opacityCursor = this.$refs.opacityCursor as HTMLElement;
 			opacityCursor.style.transform = `translateY(${opacityPosition}px)`;
-			colorPicker.color.a = clamp(1 - opacityPosition / colorPicker.opacity.rect.height);
+
+			this.pickerHSVA.a = clamp(1 - opacityPosition / this.pickerOpacityRect.height);
 		},
 		updateHue() {
-			const { colorPicker } = this.$data._;
-			let color = hsvToRgb({ h: colorPicker.color.h, s: 1, v: 255, a: 1 });
-			this.$el.style.setProperty("--saturation-picker-hue", `rgb(${color.r}, ${color.g}, ${color.b})`);
-			color = hsvToRgb(colorPicker.color);
-			this.$el.style.setProperty("--opacity-picker-color", `rgb(${color.r}, ${color.g}, ${color.b})`);
+			const hsva = hsvaToRgba({ h: this.pickerHSVA.h, s: 1, v: 255, a: 1 });
+			const rgba = hsvaToRgba(this.pickerHSVA);
+
+			this.$el.style.setProperty("--saturation-picker-hue", `rgb(${hsva.r}, ${hsva.g}, ${hsva.b})`);
+			this.$el.style.setProperty("--opacity-picker-color", `rgb(${rgba.r}, ${rgba.g}, ${rgba.b})`);
 		},
 		updateColor() {
-			if (this.state !== ColorPickerState.Idle) return;
-			const { color } = this;
-			if (!isRGB(color)) return;
-			const { colorPicker } = this.$data._;
-			colorPicker.color = rgbToHsv(color);
+			if (this.state !== "Idle") return;
+
+			this.pickerHSVA = rgbaToHsva(this.color);
+
 			this.updateRects();
-			this.setSaturationPosition(colorPicker.color.s * colorPicker.saturation.rect.width, (1 - colorPicker.color.v / 255) * colorPicker.saturation.rect.height);
-			this.setOpacityPosition((1 - colorPicker.color.a) * colorPicker.opacity.rect.height);
-			this.setHuePosition((1 - colorPicker.color.h) * colorPicker.hue.rect.height);
+
+			this.setSaturationCursorPosition(this.pickerHSVA.s * this.pickerSaturationRect.width, (1 - this.pickerHSVA.v / 255) * this.pickerSaturationRect.height);
+			this.setOpacityCursorPosition((1 - this.pickerHSVA.a) * this.pickerOpacityRect.height);
+			this.setHueCursorPosition((1 - this.pickerHSVA.h) * this.pickerHueRect.height);
+
 			this.updateHue();
 		},
 	},

frontend/src/components/widgets/floating-menus/DialogModal.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="dialog-modal">
-		<FloatingMenu :type="MenuType.Dialog" :direction="MenuDirection.Center">
+		<FloatingMenu :type="'Dialog'" :direction="'Center'">
 			<LayoutRow>
 				<LayoutCol :class="'icon-column'">
 					<!-- `dialog.state.icon` class exists to provide special sizing in CSS to specific icons -->
@@ -79,12 +79,12 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
-import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import TextButton from "@/components/widgets/buttons/TextButton.vue";
+import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
-import TextButton from "@/components/widgets/buttons/TextButton.vue";
 
 export default defineComponent({
 	inject: ["dialog"],
@@ -101,11 +101,5 @@ export default defineComponent({
 			this.dialog.dismissDialog();
 		},
 	},
-	data() {
-		return {
-			MenuDirection,
-			MenuType,
-		};
-	},
 });
 </script>

frontend/src/components/widgets/floating-menus/FloatingMenu.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="floating-menu" :class="[direction.toLowerCase(), type.toLowerCase()]" v-if="open || type === MenuType.Dialog" ref="floatingMenu">
-		<div class="tail" v-if="type === MenuType.Popover"></div>
+	<div class="floating-menu" :class="[direction.toLowerCase(), type.toLowerCase()]" v-if="open || type === 'Dialog'" ref="floatingMenu">
+		<div class="tail" v-if="type === 'Popover'"></div>
 		<div class="floating-menu-container" ref="floatingMenuContainer">
 			<div class="floating-menu-content" :class="{ 'scrollable-y': scrollable }" ref="floatingMenuContent" :style="floatingMenuContentStyle">
 				<slot></slot>
@@ -177,36 +177,20 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
-export enum MenuDirection {
-	Top = "Top",
-	Bottom = "Bottom",
-	Left = "Left",
-	Right = "Right",
-	TopLeft = "TopLeft",
-	TopRight = "TopRight",
-	BottomLeft = "BottomLeft",
-	BottomRight = "BottomRight",
-	Center = "Center",
-}
-
-export enum MenuType {
-	Popover = "Popover",
-	Dropdown = "Dropdown",
-	Dialog = "Dialog",
-}
+export type MenuDirection = "Top" | "Bottom" | "Left" | "Right" | "TopLeft" | "TopRight" | "BottomLeft" | "BottomRight" | "Center";
+export type MenuType = "Popover" | "Dropdown" | "Dialog";
 
 const POINTER_STRAY_DISTANCE = 100;
 
 export default defineComponent({
-	components: {},
 	props: {
-		direction: { type: String, default: MenuDirection.Bottom },
-		type: { type: String, required: true },
-		windowEdgeMargin: { type: Number, default: 6 },
-		minWidth: { type: Number, default: 0 },
-		scrollable: { type: Boolean, default: false },
+		direction: { type: String as PropType<MenuDirection>, default: "Bottom" },
+		type: { type: String as PropType<MenuType>, required: true },
+		windowEdgeMargin: { type: Number as PropType<number>, default: 6 },
+		minWidth: { type: Number as PropType<number>, default: 0 },
+		scrollable: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {
 		const containerResizeObserver = new ResizeObserver((entries) => {
@@ -218,8 +202,6 @@ export default defineComponent({
 			open: false,
 			pointerStillDown: false,
 			containerResizeObserver,
-			MenuDirection,
-			MenuType,
 		};
 	},
 	updated() {
@@ -235,8 +217,8 @@ export default defineComponent({
 		let zeroedBorderDirection1: Edge | undefined;
 		let zeroedBorderDirection2: Edge | undefined;
 
-		if (this.direction === MenuDirection.Top || this.direction === MenuDirection.Bottom) {
-			zeroedBorderDirection1 = this.direction === MenuDirection.Top ? "Bottom" : "Top";
+		if (this.direction === "Top" || this.direction === "Bottom") {
+			zeroedBorderDirection1 = this.direction === "Top" ? "Bottom" : "Top";
 
 			if (floatingMenuBounds.left - this.windowEdgeMargin <= workspaceBounds.left) {
 				floatingMenuContent.style.left = `${this.windowEdgeMargin}px`;
@@ -249,8 +231,8 @@ export default defineComponent({
 			}
 		}
 
-		if (this.direction === MenuDirection.Left || this.direction === MenuDirection.Right) {
-			zeroedBorderDirection2 = this.direction === MenuDirection.Left ? "Right" : "Left";
+		if (this.direction === "Left" || this.direction === "Right") {
+			zeroedBorderDirection2 = this.direction === "Left" ? "Right" : "Left";
 
 			if (floatingMenuBounds.top - this.windowEdgeMargin <= workspaceBounds.top) {
 				floatingMenuContent.style.top = `${this.windowEdgeMargin}px`;
@@ -264,7 +246,7 @@ export default defineComponent({
 		}
 
 		// Remove the rounded corner from where the tail perfectly meets the corner
-		if (this.type === MenuType.Popover && this.windowEdgeMargin === 6 && zeroedBorderDirection1 && zeroedBorderDirection2) {
+		if (this.type === "Popover" && this.windowEdgeMargin === 6 && zeroedBorderDirection1 && zeroedBorderDirection2) {
 			switch (`${zeroedBorderDirection1}${zeroedBorderDirection2}`) {
 				case "TopLeft":
 					floatingMenuContent.style.borderTopLeftRadius = "0";

frontend/src/components/widgets/floating-menus/MenuList.vue

@@ -1,7 +1,7 @@
 <template>
-	<FloatingMenu :class="'menu-list'" :direction="direction" :type="MenuType.Dropdown" ref="floatingMenu" :windowEdgeMargin="0" :scrollable="scrollable" data-hover-menu-keep-open>
+	<FloatingMenu :class="'menu-list'" :direction="direction" :type="'Dropdown'" ref="floatingMenu" :windowEdgeMargin="0" :scrollable="scrollable" data-hover-menu-keep-open>
 		<template v-for="(section, sectionIndex) in menuEntries" :key="sectionIndex">
-			<Separator :type="SeparatorType.List" :direction="SeparatorDirection.Vertical" v-if="sectionIndex > 0" />
+			<Separator :type="'List'" :direction="'Vertical'" v-if="sectionIndex > 0" />
 			<div
 				v-for="(entry, entryIndex) in section"
 				:key="entryIndex"
@@ -26,7 +26,7 @@
 
 				<MenuList
 					v-if="entry.children"
-					:direction="MenuDirection.TopRight"
+					:direction="'TopRight'"
 					:menuEntries="entry.children"
 					v-bind="{ defaultAction, minWidth, drawIcon, scrollable }"
 					:ref="(ref) => setEntryRefs(entry, ref)"
@@ -132,13 +132,11 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
-
-import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
-import Separator from "@/components/widgets/separators/Separator.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import FloatingMenu, { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
+import Separator from "@/components/widgets/separators/Separator.vue";
 
 export type MenuListEntries<Value = string> = MenuListEntry<Value>[];
 export type SectionsOfMenuListEntries<Value = string> = MenuListEntries<Value>[];
@@ -162,13 +160,13 @@ const KEYBOARD_LOCK_SWITCH_BROWSER = "This hotkey is reserved by the browser, bu
 const MenuList = defineComponent({
 	inject: ["fullscreen"],
 	props: {
-		direction: { type: String as PropType<MenuDirection>, default: MenuDirection.Bottom },
+		direction: { type: String as PropType<MenuDirection>, default: "Bottom" },
 		menuEntries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },
 		activeEntry: { type: Object as PropType<MenuListEntry>, required: false },
-		defaultAction: { type: Function as PropType<() => void | undefined>, required: false },
-		minWidth: { type: Number, default: 0 },
-		drawIcon: { type: Boolean, default: false },
-		scrollable: { type: Boolean, default: false },
+		defaultAction: { type: Function as PropType<() => void>, required: false },
+		minWidth: { type: Number as PropType<number>, default: 0 },
+		drawIcon: { type: Boolean as PropType<boolean>, default: false },
+		scrollable: { type: Boolean as PropType<boolean>, default: false },
 	},
 	methods: {
 		setEntryRefs(menuEntry: MenuListEntry, ref: typeof FloatingMenu) {
@@ -231,7 +229,7 @@ const MenuList = defineComponent({
 					// Restore open/closed state if it was forced open for measurement
 					if (!initiallyOpen) floatingMenu.setClosed();
 
-					this.$emit("width-changed", width);
+					this.$emit("widthChanged", width);
 				});
 			});
 		},
@@ -265,10 +263,6 @@ const MenuList = defineComponent({
 	data() {
 		return {
 			keyboardLockInfoMessage: this.fullscreen.keyboardLockApiSupported ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER,
-			SeparatorDirection,
-			SeparatorType,
-			MenuDirection,
-			MenuType,
 		};
 	},
 	components: {

frontend/src/components/widgets/inputs/CheckboxInput.vue

@@ -80,9 +80,9 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import IconLabel, { IconName } from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	data() {
@@ -96,9 +96,9 @@ export default defineComponent({
 		},
 	},
 	props: {
-		checked: { type: Boolean, required: true },
-		icon: { type: String, default: "Checkmark" },
-		outlineStyle: { type: Boolean, default: false },
+		checked: { type: Boolean as PropType<boolean>, required: true },
+		icon: { type: String as PropType<IconName>, default: "Checkmark" },
+		outlineStyle: { type: Boolean as PropType<boolean>, default: false },
 	},
 	components: { IconLabel },
 });

frontend/src/components/widgets/inputs/DropdownInput.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="dropdown-input">
-		<div class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px`, disabled: 'disabled' }" @click="clickDropdownBox" data-hover-menu-spawner>
+		<div class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px`, disabled: 'disabled' }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
 			<IconLabel :class="'dropdown-icon'" :icon="activeEntry.icon" v-if="activeEntry.icon" />
 			<span>{{ activeEntry.label }}</span>
 			<IconLabel :class="'dropdown-arrow'" :icon="'DropdownArrow'" />
 		</div>
 		<MenuList
-			v-model:active-entry="activeEntry"
-			@update:activeEntry="activeEntryChanged"
-			@width-changed="onWidthChanged"
+			v-model:activeEntry="activeEntry"
+			@update:activeEntry="(newActiveEntry) => activeEntryChanged(newActiveEntry)"
+			@widthChanged="(newWidth) => onWidthChanged(newWidth)"
 			:menuEntries="menuEntries"
-			:direction="MenuDirection.Bottom"
+			:direction="'Bottom'"
 			:drawIcon="drawIcon"
 			:scrollable="true"
 			ref="menuList"
@@ -90,21 +90,19 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
-import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	props: {
 		menuEntries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },
-		selectedIndex: { type: Number, required: true },
-		drawIcon: { type: Boolean, default: false },
-		disabled: { type: Boolean, default: false },
+		selectedIndex: { type: Number as PropType<number>, required: true },
+		drawIcon: { type: Boolean as PropType<boolean>, default: false },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {
 		return {
 			activeEntry: this.menuEntries.flat()[this.selectedIndex],
-			MenuDirection,
 			minWidth: 0,
 		};
 	},

frontend/src/components/widgets/inputs/MenuBarInput.vue

@@ -10,7 +10,7 @@
 				<IconLabel :icon="entry.icon" v-if="entry.icon" />
 				<span v-if="entry.label">{{ entry.label }}</span>
 			</div>
-			<MenuList :menuEntries="entry.children" :direction="MenuDirection.Bottom" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref) => setEntryRefs(entry, ref)" />
+			<MenuList :menuEntries="entry.children" :direction="'Bottom'" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref) => setEntryRefs(entry, ref)" />
 		</div>
 	</div>
 </template>
@@ -53,12 +53,11 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import { ApplicationPlatform } from "@/components/window/MainWindow.vue";
-import MenuList, { MenuListEntry, MenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
-import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
 import { EditorState } from "@/state/wasm-loader";
 
+import MenuList, { MenuListEntry, MenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+
 function makeMenuEntries(editor: EditorState): MenuListEntries {
 	return [
 		{
@@ -66,8 +65,8 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 			ref: undefined,
 			children: [
 				[
-					{ label: "New", icon: "File", shortcut: ["KeyControl", "KeyN"], shortcutRequiresLock: true, action: async () => editor.instance.new_document() },
-					{ label: "Open…", shortcut: ["KeyControl", "KeyO"], action: async () => editor.instance.open_document() },
+					{ label: "New", icon: "File", shortcut: ["KeyControl", "KeyN"], shortcutRequiresLock: true, action: async (): Promise<void> => editor.instance.new_document() },
+					{ label: "Open…", shortcut: ["KeyControl", "KeyO"], action: async (): Promise<void> => editor.instance.open_document() },
 					{
 						label: "Open Recent",
 						shortcut: ["KeyControl", "KeyShift", "KeyO"],
@@ -84,18 +83,18 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 					},
 				],
 				[
-					{ label: "Close", shortcut: ["KeyControl", "KeyW"], shortcutRequiresLock: true, action: async () => editor.instance.close_active_document_with_confirmation() },
-					{ label: "Close All", shortcut: ["KeyControl", "KeyAlt", "KeyW"], action: async () => editor.instance.close_all_documents_with_confirmation() },
+					{ label: "Close", shortcut: ["KeyControl", "KeyW"], shortcutRequiresLock: true, action: async (): Promise<void> => editor.instance.close_active_document_with_confirmation() },
+					{ label: "Close All", shortcut: ["KeyControl", "KeyAlt", "KeyW"], action: async (): Promise<void> => editor.instance.close_all_documents_with_confirmation() },
 				],
 				[
-					{ label: "Save", shortcut: ["KeyControl", "KeyS"], action: async () => editor.instance.save_document() },
-					{ label: "Save As…", shortcut: ["KeyControl", "KeyShift", "KeyS"], action: async () => editor.instance.save_document() },
+					{ label: "Save", shortcut: ["KeyControl", "KeyS"], action: async (): Promise<void> => editor.instance.save_document() },
+					{ label: "Save As…", shortcut: ["KeyControl", "KeyShift", "KeyS"], action: async (): Promise<void> => editor.instance.save_document() },
 					{ label: "Save All", shortcut: ["KeyControl", "KeyAlt", "KeyS"] },
 					{ label: "Auto-Save", checkbox: true, checked: true },
 				],
 				[
 					{ label: "Import…", shortcut: ["KeyControl", "KeyI"] },
-					{ label: "Export…", shortcut: ["KeyControl", "KeyE"], action: async () => editor.instance.export_document() },
+					{ label: "Export…", shortcut: ["KeyControl", "KeyE"], action: async (): Promise<void> => editor.instance.export_document() },
 				],
 				[{ label: "Quit", shortcut: ["KeyControl", "KeyQ"] }],
 			],
@@ -105,13 +104,13 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 			ref: undefined,
 			children: [
 				[
-					{ label: "Undo", shortcut: ["KeyControl", "KeyZ"], action: async () => editor.instance.undo() },
-					{ label: "Redo", shortcut: ["KeyControl", "KeyShift", "KeyZ"], action: async () => editor.instance.redo() },
+					{ label: "Undo", shortcut: ["KeyControl", "KeyZ"], action: async (): Promise<void> => editor.instance.undo() },
+					{ label: "Redo", shortcut: ["KeyControl", "KeyShift", "KeyZ"], action: async (): Promise<void> => editor.instance.redo() },
 				],
 				[
-					{ label: "Cut", shortcut: ["KeyControl", "KeyX"], action: async () => editor.instance.cut() },
-					{ label: "Copy", icon: "Copy", shortcut: ["KeyControl", "KeyC"], action: async () => editor.instance.copy() },
-					{ label: "Paste", icon: "Paste", shortcut: ["KeyControl", "KeyV"], action: async () => editor.instance.paste() },
+					{ label: "Cut", shortcut: ["KeyControl", "KeyX"], action: async (): Promise<void> => editor.instance.cut() },
+					{ label: "Copy", icon: "Copy", shortcut: ["KeyControl", "KeyC"], action: async (): Promise<void> => editor.instance.copy() },
+					{ label: "Paste", icon: "Paste", shortcut: ["KeyControl", "KeyV"], action: async (): Promise<void> => editor.instance.paste() },
 				],
 			],
 		},
@@ -120,8 +119,8 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 			ref: undefined,
 			children: [
 				[
-					{ label: "Select All", shortcut: ["KeyControl", "KeyA"], action: async () => editor.instance.select_all_layers() },
-					{ label: "Deselect All", shortcut: ["KeyControl", "KeyAlt", "KeyA"], action: async () => editor.instance.deselect_all_layers() },
+					{ label: "Select All", shortcut: ["KeyControl", "KeyA"], action: async (): Promise<void> => editor.instance.select_all_layers() },
+					{ label: "Deselect All", shortcut: ["KeyControl", "KeyAlt", "KeyA"], action: async (): Promise<void> => editor.instance.deselect_all_layers() },
 					{
 						label: "Order",
 						children: [
@@ -129,14 +128,14 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 								{
 									label: "Raise To Front",
 									shortcut: ["KeyControl", "KeyShift", "KeyLeftBracket"],
-									action: async () => editor.instance.reorder_selected_layers(editor.rawWasm.i32_max()),
+									action: async (): Promise<void> => editor.instance.reorder_selected_layers(editor.rawWasm.i32_max()),
 								},
-								{ label: "Raise", shortcut: ["KeyControl", "KeyRightBracket"], action: async () => editor.instance.reorder_selected_layers(1) },
-								{ label: "Lower", shortcut: ["KeyControl", "KeyLeftBracket"], action: async () => editor.instance.reorder_selected_layers(-1) },
+								{ label: "Raise", shortcut: ["KeyControl", "KeyRightBracket"], action: async (): Promise<void> => editor.instance.reorder_selected_layers(1) },
+								{ label: "Lower", shortcut: ["KeyControl", "KeyLeftBracket"], action: async (): Promise<void> => editor.instance.reorder_selected_layers(-1) },
 								{
 									label: "Lower to Back",
 									shortcut: ["KeyControl", "KeyShift", "KeyRightBracket"],
-									action: async () => editor.instance.reorder_selected_layers(editor.rawWasm.i32_min()),
+									action: async (): Promise<void> => editor.instance.reorder_selected_layers(editor.rawWasm.i32_min()),
 								},
 							],
 						],
@@ -158,12 +157,12 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 			label: "Help",
 			ref: undefined,
 			children: [
-				[{ label: "About Graphite", action: async () => editor.instance.request_about_graphite_dialog() }],
+				[{ label: "About Graphite", action: async (): Promise<void> => editor.instance.request_about_graphite_dialog() }],
 				[
-					{ label: "Report a Bug", action: () => window.open("https://github.com/GraphiteEditor/Graphite/issues/new", "_blank") },
-					{ label: "Visit on GitHub", action: () => window.open("https://github.com/GraphiteEditor/Graphite", "_blank") },
+					{ label: "Report a Bug", action: (): unknown => window.open("https://github.com/GraphiteEditor/Graphite/issues/new", "_blank") },
+					{ label: "Visit on GitHub", action: (): unknown => window.open("https://github.com/GraphiteEditor/Graphite", "_blank") },
 				],
-				[{ label: "Debug: Panic (DANGER)", action: async () => editor.rawWasm.intentional_panic() }],
+				[{ label: "Debug: Panic (DANGER)", action: async (): Promise<void> => editor.rawWasm.intentional_panic() }],
 			],
 		},
 	];
@@ -186,10 +185,8 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			ApplicationPlatform,
 			menuEntries: makeMenuEntries(this.editor),
-			MenuDirection,
-			comingSoon: () => this.dialog.comingSoon(),
+			comingSoon: (): void => this.dialog.comingSoon(),
 		};
 	},
 	components: {

frontend/src/components/widgets/inputs/NumberInput.vue

@@ -12,8 +12,8 @@
 			:disabled="disabled"
 		/>
 		<label v-if="label" :for="`number-input-${id}`">{{ label }}</label>
-		<button v-if="!Number.isNaN(value)" class="arrow left" @click="onIncrement(IncrementDirection.Decrease)"></button>
-		<button v-if="!Number.isNaN(value)" class="arrow right" @click="onIncrement(IncrementDirection.Increase)"></button>
+		<button v-if="!Number.isNaN(value)" class="arrow left" @click="onIncrement('Decrease')"></button>
+		<button v-if="!Number.isNaN(value)" class="arrow right" @click="onIncrement('Increase')"></button>
 	</div>
 </template>
 
@@ -152,40 +152,29 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-export enum IncrementBehavior {
-	Add = "Add",
-	Multiply = "Multiply",
-	Callback = "Callback",
-	None = "None",
-}
-
-export enum IncrementDirection {
-	Decrease = "Decrease",
-	Increase = "Increase",
-}
+export type IncrementBehavior = "Add" | "Multiply" | "Callback" | "None";
+export type IncrementDirection = "Decrease" | "Increase";
 
 export default defineComponent({
-	components: {},
 	props: {
-		value: { type: Number, required: true },
-		min: { type: Number, required: false },
-		max: { type: Number, required: false },
-		incrementBehavior: { type: String as PropType<IncrementBehavior>, default: IncrementBehavior.Add },
-		incrementFactor: { type: Number, default: 1 },
-		incrementCallbackIncrease: { type: Function, required: false },
-		incrementCallbackDecrease: { type: Function, required: false },
-		isInteger: { type: Boolean, default: false },
-		unit: { type: String, default: "" },
-		unitIsHiddenWhenEditing: { type: Boolean, default: true },
-		displayDecimalPlaces: { type: Number, default: 3 },
-		label: { type: String, required: false },
-		disabled: { type: Boolean, default: false },
+		value: { type: Number as PropType<number>, required: true },
+		min: { type: Number as PropType<number>, required: false },
+		max: { type: Number as PropType<number>, required: false },
+		incrementBehavior: { type: String as PropType<IncrementBehavior>, default: "Add" },
+		incrementFactor: { type: Number as PropType<number>, default: 1 },
+		incrementCallbackIncrease: { type: Function as PropType<() => void>, required: false },
+		incrementCallbackDecrease: { type: Function as PropType<() => void>, required: false },
+		isInteger: { type: Boolean as PropType<boolean>, default: false },
+		unit: { type: String as PropType<string>, default: "" },
+		unitIsHiddenWhenEditing: { type: Boolean as PropType<boolean>, default: true },
+		displayDecimalPlaces: { type: Number as PropType<number>, default: 3 },
+		label: { type: String as PropType<string>, required: false },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {
 		return {
 			text: `${this.value}${this.unit}`,
 			editing: false,
-			IncrementDirection,
 			id: `${Math.random()}`.substring(2),
 		};
 	},
@@ -225,19 +214,19 @@ export default defineComponent({
 			if (Number.isNaN(this.value)) return;
 
 			switch (this.incrementBehavior) {
-				case IncrementBehavior.Add: {
-					const directionAddend = direction === IncrementDirection.Increase ? this.incrementFactor : -this.incrementFactor;
+				case "Add": {
+					const directionAddend = direction === "Increase" ? this.incrementFactor : -this.incrementFactor;
 					this.updateValue(this.value + directionAddend);
 					break;
 				}
-				case IncrementBehavior.Multiply: {
-					const directionMultiplier = direction === IncrementDirection.Increase ? this.incrementFactor : 1 / this.incrementFactor;
+				case "Multiply": {
+					const directionMultiplier = direction === "Increase" ? this.incrementFactor : 1 / this.incrementFactor;
 					this.updateValue(this.value * directionMultiplier);
 					break;
 				}
-				case IncrementBehavior.Callback: {
-					if (direction === IncrementDirection.Increase && this.incrementCallbackIncrease) this.incrementCallbackIncrease();
-					if (direction === IncrementDirection.Decrease && this.incrementCallbackDecrease) this.incrementCallbackDecrease();
+				case "Callback": {
+					if (direction === "Increase" && this.incrementCallbackIncrease) this.incrementCallbackIncrease();
+					if (direction === "Decrease" && this.incrementCallbackDecrease) this.incrementCallbackDecrease();
 					break;
 				}
 				default:

frontend/src/components/widgets/inputs/OptionalInput.vue

@@ -34,14 +34,15 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
+import { IconName } from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	props: {
-		checked: { type: Boolean, required: true },
-		icon: { type: String, default: "Checkmark" },
+		checked: { type: Boolean as PropType<boolean>, required: true },
+		icon: { type: String as PropType<IconName>, default: "Checkmark" },
 	},
 	components: {
 		CheckboxInput,

frontend/src/components/widgets/inputs/RadioInput.vue

@@ -85,7 +85,7 @@ export type RadioEntries = RadioEntryData[];
 export default defineComponent({
 	props: {
 		entries: { type: Array as PropType<RadioEntries>, required: true },
-		selectedIndex: { type: Number, required: true },
+		selectedIndex: { type: Number as PropType<number>, required: true },
 	},
 	methods: {
 		handleEntryClick(menuEntry: RadioEntryData) {

frontend/src/components/widgets/inputs/ShelfItemInput.vue

@@ -29,16 +29,17 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
+import { IconName } from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	components: { IconButton },
 	props: {
-		icon: { type: String, required: true },
-		action: { type: Function, required: true },
-		active: { type: Boolean, default: false },
+		icon: { type: String as PropType<IconName>, required: true },
+		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
+		active: { type: Boolean as PropType<boolean>, default: false },
 	},
 });
 </script>

frontend/src/components/widgets/inputs/SwatchPairInput.vue

@@ -1,15 +1,15 @@
 <template>
 	<div class="swatch-pair">
 		<div class="secondary swatch">
-			<button @click="clickSecondarySwatch" ref="secondaryButton" data-hover-menu-spawner></button>
-			<FloatingMenu :type="MenuType.Popover" :direction="MenuDirection.Right" horizontal ref="secondarySwatchFloatingMenu">
-				<ColorPicker @update:color="secondaryColorChanged" :color="secondaryColor" />
+			<button @click="() => clickSecondarySwatch()" ref="secondaryButton" data-hover-menu-spawner></button>
+			<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="secondarySwatchFloatingMenu">
+				<ColorPicker @update:color="(color) => secondaryColorChanged(color)" :color="secondaryColor" />
 			</FloatingMenu>
 		</div>
 		<div class="primary swatch">
-			<button @click="clickPrimarySwatch" ref="primaryButton" data-hover-menu-spawner></button>
-			<FloatingMenu :type="MenuType.Popover" :direction="MenuDirection.Right" horizontal ref="primarySwatchFloatingMenu">
-				<ColorPicker @update:color="primaryColorChanged" :color="primaryColor" />
+			<button @click="() => clickPrimarySwatch()" ref="primaryButton" data-hover-menu-spawner></button>
+			<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="primarySwatchFloatingMenu">
+				<ColorPicker @update:color="(color) => primaryColorChanged(color)" :color="primaryColor" />
 			</FloatingMenu>
 		</div>
 	</div>
@@ -68,11 +68,11 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { rgbToDecimalRgb, RGB } from "@/utilities/color";
+import { RGBA, UpdateWorkingColors } from "@/dispatcher/js-messages";
+import { rgbaToDecimalRgba } from "@/utilities/color";
 
 import ColorPicker from "@/components/widgets/floating-menus/ColorPicker.vue";
-import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
-import { UpdateWorkingColors } from "@/dispatcher/js-messages";
+import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 
 export default defineComponent({
 	inject: ["editor"],
@@ -80,70 +80,56 @@ export default defineComponent({
 		FloatingMenu,
 		ColorPicker,
 	},
-	props: {},
 	methods: {
 		clickPrimarySwatch() {
-			this.getRef<typeof FloatingMenu>("primarySwatchFloatingMenu").setOpen();
-			this.getRef<typeof FloatingMenu>("secondarySwatchFloatingMenu").setClosed();
+			(this.$refs.primarySwatchFloatingMenu as typeof FloatingMenu).setOpen();
+			(this.$refs.secondarySwatchFloatingMenu as typeof FloatingMenu).setClosed();
 		},
-
 		clickSecondarySwatch() {
-			this.getRef<typeof FloatingMenu>("secondarySwatchFloatingMenu").setOpen();
-			this.getRef<typeof FloatingMenu>("primarySwatchFloatingMenu").setClosed();
+			(this.$refs.secondarySwatchFloatingMenu as typeof FloatingMenu).setOpen();
+			(this.$refs.primarySwatchFloatingMenu as typeof FloatingMenu).setClosed();
 		},
-
-		getRef<T>(name: string) {
-			return this.$refs[name] as T;
-		},
-
-		primaryColorChanged(color: RGB) {
+		primaryColorChanged(color: RGBA) {
 			this.primaryColor = color;
 			this.updatePrimaryColor();
 		},
-
-		secondaryColorChanged(color: RGB) {
+		secondaryColorChanged(color: RGBA) {
 			this.secondaryColor = color;
 			this.updateSecondaryColor();
 		},
-
 		async updatePrimaryColor() {
 			let color = this.primaryColor;
-			const button = this.getRef<HTMLButtonElement>("primaryButton");
+			const button = this.$refs.primaryButton as HTMLButtonElement;
 			button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`);
 
-			color = rgbToDecimalRgb(this.primaryColor);
+			color = rgbaToDecimalRgba(this.primaryColor);
 			this.editor.instance.update_primary_color(color.r, color.g, color.b, color.a);
 		},
-
 		async updateSecondaryColor() {
 			let color = this.secondaryColor;
-			const button = this.getRef<HTMLButtonElement>("secondaryButton");
+			const button = this.$refs.secondaryButton as HTMLButtonElement;
 			button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`);
 
-			color = rgbToDecimalRgb(this.secondaryColor);
+			color = rgbaToDecimalRgba(this.secondaryColor);
 			this.editor.instance.update_secondary_color(color.r, color.g, color.b, color.a);
 		},
 	},
 	data() {
 		return {
-			MenuDirection,
-			MenuType,
-			primaryColor: { r: 0, g: 0, b: 0, a: 1 },
-			secondaryColor: { r: 255, g: 255, b: 255, a: 1 },
+			primaryColor: { r: 0, g: 0, b: 0, a: 1 } as RGBA,
+			secondaryColor: { r: 255, g: 255, b: 255, a: 1 } as RGBA,
 		};
 	},
 	mounted() {
 		this.editor.dispatcher.subscribeJsMessage(UpdateWorkingColors, (updateWorkingColors) => {
-			const { primary, secondary } = updateWorkingColors;
+			this.primaryColor = updateWorkingColors.primary.toRgba();
+			this.secondaryColor = updateWorkingColors.secondary.toRgba();
 
-			this.primaryColor = primary.toRgba();
-			this.secondaryColor = secondary.toRgba();
+			const primaryButton = this.$refs.primaryButton as HTMLButtonElement;
+			primaryButton.style.setProperty("--swatch-color", updateWorkingColors.primary.toRgbaCSS());
 
-			const primaryButton = this.getRef<HTMLButtonElement>("primaryButton");
-			primaryButton.style.setProperty("--swatch-color", primary.toRgbaCSS());
-
-			const secondaryButton = this.getRef<HTMLButtonElement>("secondaryButton");
-			secondaryButton.style.setProperty("--swatch-color", secondary.toRgbaCSS());
+			const secondaryButton = this.$refs.secondaryButton as HTMLButtonElement;
+			secondaryButton.style.setProperty("--swatch-color", updateWorkingColors.secondary.toRgbaCSS());
 		});
 
 		this.updatePrimaryColor();

frontend/src/components/widgets/labels/IconLabel.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="icon-label" :class="`size-${String(icons[icon].size)}`">
+	<div class="icon-label" :class="`size-${icons[icon].size}`">
 		<component :is="icon" />
 	</div>
 </template>
@@ -28,81 +28,19 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-
-import LayoutSelectTool from "@/../assets/24px-two-tone/layout-select-tool.svg";
-import LayoutCropTool from "@/../assets/24px-two-tone/layout-crop-tool.svg";
-import LayoutNavigateTool from "@/../assets/24px-two-tone/layout-navigate-tool.svg";
-import LayoutEyedropperTool from "@/../assets/24px-two-tone/layout-eyedropper-tool.svg";
-import ParametricTextTool from "@/../assets/24px-two-tone/parametric-text-tool.svg";
-import ParametricFillTool from "@/../assets/24px-two-tone/parametric-fill-tool.svg";
-import ParametricGradientTool from "@/../assets/24px-two-tone/parametric-gradient-tool.svg";
-import RasterBrushTool from "@/../assets/24px-two-tone/raster-brush-tool.svg";
-import RasterHealTool from "@/../assets/24px-two-tone/raster-heal-tool.svg";
-import RasterCloneTool from "@/../assets/24px-two-tone/raster-clone-tool.svg";
-import RasterPatchTool from "@/../assets/24px-two-tone/raster-patch-tool.svg";
-import RasterBlurSharpenTool from "@/../assets/24px-two-tone/raster-detail-tool.svg";
-import RasterRelightTool from "@/../assets/24px-two-tone/raster-relight-tool.svg";
-import VectorPathTool from "@/../assets/24px-two-tone/vector-path-tool.svg";
-import VectorPenTool from "@/../assets/24px-two-tone/vector-pen-tool.svg";
-import VectorFreehandTool from "@/../assets/24px-two-tone/vector-freehand-tool.svg";
-import VectorSplineTool from "@/../assets/24px-two-tone/vector-spline-tool.svg";
-import VectorLineTool from "@/../assets/24px-two-tone/vector-line-tool.svg";
-import VectorRectangleTool from "@/../assets/24px-two-tone/vector-rectangle-tool.svg";
-import VectorEllipseTool from "@/../assets/24px-two-tone/vector-ellipse-tool.svg";
-import VectorShapeTool from "@/../assets/24px-two-tone/vector-shape-tool.svg";
-
-import AlignLeft from "@/../assets/16px-solid/align-left.svg";
-import AlignHorizontalCenter from "@/../assets/16px-solid/align-horizontal-center.svg";
-import AlignRight from "@/../assets/16px-solid/align-right.svg";
-import AlignTop from "@/../assets/16px-solid/align-top.svg";
-import AlignVerticalCenter from "@/../assets/16px-solid/align-vertical-center.svg";
-import AlignBottom from "@/../assets/16px-solid/align-bottom.svg";
-import FlipHorizontal from "@/../assets/16px-solid/flip-horizontal.svg";
-import FlipVertical from "@/../assets/16px-solid/flip-vertical.svg";
-import BooleanUnion from "@/../assets/16px-solid/boolean-union.svg";
-import BooleanSubtractFront from "@/../assets/16px-solid/boolean-subtract-front.svg";
-import BooleanSubtractBack from "@/../assets/16px-solid/boolean-subtract-back.svg";
-import BooleanIntersect from "@/../assets/16px-solid/boolean-intersect.svg";
-import BooleanDifference from "@/../assets/16px-solid/boolean-difference.svg";
-import ZoomReset from "@/../assets/16px-solid/zoom-reset.svg";
-import ZoomIn from "@/../assets/16px-solid/zoom-in.svg";
-import ZoomOut from "@/../assets/16px-solid/zoom-out.svg";
-import ViewModeNormal from "@/../assets/16px-solid/view-mode-normal.svg";
-import ViewModeOutline from "@/../assets/16px-solid/view-mode-outline.svg";
-import ViewModePixels from "@/../assets/16px-solid/view-mode-pixels.svg";
-import EyeVisible from "@/../assets/16px-solid/eye-visible.svg";
-import EyeHidden from "@/../assets/16px-solid/eye-hidden.svg";
-import GraphiteLogo from "@/../assets/16px-solid/graphite-logo.svg";
-import File from "@/../assets/16px-solid/file.svg";
-import Copy from "@/../assets/16px-solid/copy.svg";
-import Paste from "@/../assets/16px-solid/paste.svg";
-import ViewportDesignMode from "@/../assets/16px-solid/viewport-design-mode.svg";
-import ViewportSelectMode from "@/../assets/16px-solid/viewport-select-mode.svg";
-import ViewportGuideMode from "@/../assets/16px-solid/viewport-guide-mode.svg";
+import { DefineComponent, defineComponent, PropType } from "vue";
 
 import Checkmark from "@/../assets/12px-solid/checkmark.svg";
-import Link from "@/../assets/12px-solid/link.svg";
-import Grid from "@/../assets/12px-solid/grid.svg";
-import Overlays from "@/../assets/12px-solid/overlays.svg";
-import Snapping from "@/../assets/12px-solid/snapping.svg";
-import Info from "@/../assets/12px-solid/info.svg";
-import Warning from "@/../assets/12px-solid/warning.svg";
-import Swap from "@/../assets/12px-solid/swap.svg";
-import ResetColors from "@/../assets/12px-solid/reset-colors.svg";
-import DropdownArrow from "@/../assets/12px-solid/dropdown-arrow.svg";
-import VerticalEllipsis from "@/../assets/12px-solid/vertical-ellipsis.svg";
 import CloseX from "@/../assets/12px-solid/close-x.svg";
+import DropdownArrow from "@/../assets/12px-solid/dropdown-arrow.svg";
 import FullscreenEnter from "@/../assets/12px-solid/fullscreen-enter.svg";
 import FullscreenExit from "@/../assets/12px-solid/fullscreen-exit.svg";
-import WindowButtonWinMinimize from "@/../assets/12px-solid/window-button-win-minimize.svg";
-import WindowButtonWinMaximize from "@/../assets/12px-solid/window-button-win-maximize.svg";
-import WindowButtonWinRestoreDown from "@/../assets/12px-solid/window-button-win-restore-down.svg";
-import WindowButtonWinClose from "@/../assets/12px-solid/window-button-win-close.svg";
-import KeyboardArrowUp from "@/../assets/12px-solid/keyboard-arrow-up.svg";
-import KeyboardArrowRight from "@/../assets/12px-solid/keyboard-arrow-right.svg";
+import Grid from "@/../assets/12px-solid/grid.svg";
+import Info from "@/../assets/12px-solid/info.svg";
 import KeyboardArrowDown from "@/../assets/12px-solid/keyboard-arrow-down.svg";
 import KeyboardArrowLeft from "@/../assets/12px-solid/keyboard-arrow-left.svg";
+import KeyboardArrowRight from "@/../assets/12px-solid/keyboard-arrow-right.svg";
+import KeyboardArrowUp from "@/../assets/12px-solid/keyboard-arrow-up.svg";
 import KeyboardBackspace from "@/../assets/12px-solid/keyboard-backspace.svg";
 import KeyboardCommand from "@/../assets/12px-solid/keyboard-command.svg";
 import KeyboardEnter from "@/../assets/12px-solid/keyboard-enter.svg";
@@ -110,124 +48,199 @@ import KeyboardOption from "@/../assets/12px-solid/keyboard-option.svg";
 import KeyboardShift from "@/../assets/12px-solid/keyboard-shift.svg";
 import KeyboardSpace from "@/../assets/12px-solid/keyboard-space.svg";
 import KeyboardTab from "@/../assets/12px-solid/keyboard-tab.svg";
+import Link from "@/../assets/12px-solid/link.svg";
+import Overlays from "@/../assets/12px-solid/overlays.svg";
+import ResetColors from "@/../assets/12px-solid/reset-colors.svg";
+import Snapping from "@/../assets/12px-solid/snapping.svg";
+import Swap from "@/../assets/12px-solid/swap.svg";
+import VerticalEllipsis from "@/../assets/12px-solid/vertical-ellipsis.svg";
+import Warning from "@/../assets/12px-solid/warning.svg";
+import WindowButtonWinClose from "@/../assets/12px-solid/window-button-win-close.svg";
+import WindowButtonWinMaximize from "@/../assets/12px-solid/window-button-win-maximize.svg";
+import WindowButtonWinMinimize from "@/../assets/12px-solid/window-button-win-minimize.svg";
+import WindowButtonWinRestoreDown from "@/../assets/12px-solid/window-button-win-restore-down.svg";
+
+import AlignBottom from "@/../assets/16px-solid/align-bottom.svg";
+import AlignHorizontalCenter from "@/../assets/16px-solid/align-horizontal-center.svg";
+import AlignLeft from "@/../assets/16px-solid/align-left.svg";
+import AlignRight from "@/../assets/16px-solid/align-right.svg";
+import AlignTop from "@/../assets/16px-solid/align-top.svg";
+import AlignVerticalCenter from "@/../assets/16px-solid/align-vertical-center.svg";
+import BooleanDifference from "@/../assets/16px-solid/boolean-difference.svg";
+import BooleanIntersect from "@/../assets/16px-solid/boolean-intersect.svg";
+import BooleanSubtractBack from "@/../assets/16px-solid/boolean-subtract-back.svg";
+import BooleanSubtractFront from "@/../assets/16px-solid/boolean-subtract-front.svg";
+import BooleanUnion from "@/../assets/16px-solid/boolean-union.svg";
+import Copy from "@/../assets/16px-solid/copy.svg";
+import EyeHidden from "@/../assets/16px-solid/eye-hidden.svg";
+import EyeVisible from "@/../assets/16px-solid/eye-visible.svg";
+import File from "@/../assets/16px-solid/file.svg";
+import FlipHorizontal from "@/../assets/16px-solid/flip-horizontal.svg";
+import FlipVertical from "@/../assets/16px-solid/flip-vertical.svg";
+import GraphiteLogo from "@/../assets/16px-solid/graphite-logo.svg";
+import Paste from "@/../assets/16px-solid/paste.svg";
+import ViewModeNormal from "@/../assets/16px-solid/view-mode-normal.svg";
+import ViewModeOutline from "@/../assets/16px-solid/view-mode-outline.svg";
+import ViewModePixels from "@/../assets/16px-solid/view-mode-pixels.svg";
+import ViewportDesignMode from "@/../assets/16px-solid/viewport-design-mode.svg";
+import ViewportGuideMode from "@/../assets/16px-solid/viewport-guide-mode.svg";
+import ViewportSelectMode from "@/../assets/16px-solid/viewport-select-mode.svg";
+import ZoomIn from "@/../assets/16px-solid/zoom-in.svg";
+import ZoomOut from "@/../assets/16px-solid/zoom-out.svg";
+import ZoomReset from "@/../assets/16px-solid/zoom-reset.svg";
 
-import MouseHintNone from "@/../assets/16px-two-tone/mouse-hint-none.svg";
-import MouseHintLmb from "@/../assets/16px-two-tone/mouse-hint-lmb.svg";
-import MouseHintRmb from "@/../assets/16px-two-tone/mouse-hint-rmb.svg";
-import MouseHintMmb from "@/../assets/16px-two-tone/mouse-hint-mmb.svg";
-import MouseHintScrollUp from "@/../assets/16px-two-tone/mouse-hint-scroll-up.svg";
-import MouseHintScrollDown from "@/../assets/16px-two-tone/mouse-hint-scroll-down.svg";
 import MouseHintDrag from "@/../assets/16px-two-tone/mouse-hint-drag.svg";
 import MouseHintLmbDrag from "@/../assets/16px-two-tone/mouse-hint-lmb-drag.svg";
-import MouseHintRmbDrag from "@/../assets/16px-two-tone/mouse-hint-rmb-drag.svg";
+import MouseHintLmb from "@/../assets/16px-two-tone/mouse-hint-lmb.svg";
 import MouseHintMmbDrag from "@/../assets/16px-two-tone/mouse-hint-mmb-drag.svg";
+import MouseHintMmb from "@/../assets/16px-two-tone/mouse-hint-mmb.svg";
+import MouseHintNone from "@/../assets/16px-two-tone/mouse-hint-none.svg";
+import MouseHintRmbDrag from "@/../assets/16px-two-tone/mouse-hint-rmb-drag.svg";
+import MouseHintRmb from "@/../assets/16px-two-tone/mouse-hint-rmb.svg";
+import MouseHintScrollDown from "@/../assets/16px-two-tone/mouse-hint-scroll-down.svg";
+import MouseHintScrollUp from "@/../assets/16px-two-tone/mouse-hint-scroll-up.svg";
 
-import NodeTypePath from "@/../assets/24px-full-color/node-type-path.svg";
 import NodeTypeFolder from "@/../assets/24px-full-color/node-type-folder.svg";
+import NodeTypePath from "@/../assets/24px-full-color/node-type-path.svg";
 
-const icons = {
-	LayoutSelectTool: { component: LayoutSelectTool, size: 24 },
-	LayoutCropTool: { component: LayoutCropTool, size: 24 },
-	LayoutNavigateTool: { component: LayoutNavigateTool, size: 24 },
-	LayoutEyedropperTool: { component: LayoutEyedropperTool, size: 24 },
-	ParametricTextTool: { component: ParametricTextTool, size: 24 },
-	ParametricFillTool: { component: ParametricFillTool, size: 24 },
-	ParametricGradientTool: { component: ParametricGradientTool, size: 24 },
-	RasterBrushTool: { component: RasterBrushTool, size: 24 },
-	RasterHealTool: { component: RasterHealTool, size: 24 },
-	RasterCloneTool: { component: RasterCloneTool, size: 24 },
-	RasterPatchTool: { component: RasterPatchTool, size: 24 },
-	RasterBlurSharpenTool: { component: RasterBlurSharpenTool, size: 24 },
-	RasterRelightTool: { component: RasterRelightTool, size: 24 },
-	VectorPathTool: { component: VectorPathTool, size: 24 },
-	VectorPenTool: { component: VectorPenTool, size: 24 },
-	VectorFreehandTool: { component: VectorFreehandTool, size: 24 },
-	VectorSplineTool: { component: VectorSplineTool, size: 24 },
-	VectorLineTool: { component: VectorLineTool, size: 24 },
-	VectorRectangleTool: { component: VectorRectangleTool, size: 24 },
-	VectorEllipseTool: { component: VectorEllipseTool, size: 24 },
-	VectorShapeTool: { component: VectorShapeTool, size: 24 },
-	AlignLeft: { component: AlignLeft, size: 16 },
-	AlignHorizontalCenter: { component: AlignHorizontalCenter, size: 16 },
-	AlignRight: { component: AlignRight, size: 16 },
-	AlignTop: { component: AlignTop, size: 16 },
-	AlignVerticalCenter: { component: AlignVerticalCenter, size: 16 },
-	AlignBottom: { component: AlignBottom, size: 16 },
-	FlipHorizontal: { component: FlipHorizontal, size: 16 },
-	FlipVertical: { component: FlipVertical, size: 16 },
-	BooleanUnion: { component: BooleanUnion, size: 16 },
-	BooleanSubtractFront: { component: BooleanSubtractFront, size: 16 },
-	BooleanSubtractBack: { component: BooleanSubtractBack, size: 16 },
-	BooleanIntersect: { component: BooleanIntersect, size: 16 },
-	BooleanDifference: { component: BooleanDifference, size: 16 },
-	ZoomReset: { component: ZoomReset, size: 16 },
-	ZoomIn: { component: ZoomIn, size: 16 },
-	ZoomOut: { component: ZoomOut, size: 16 },
-	ViewModeNormal: { component: ViewModeNormal, size: 16 },
-	ViewModeOutline: { component: ViewModeOutline, size: 16 },
-	ViewModePixels: { component: ViewModePixels, size: 16 },
-	EyeVisible: { component: EyeVisible, size: 16 },
-	EyeHidden: { component: EyeHidden, size: 16 },
-	GraphiteLogo: { component: GraphiteLogo, size: 16 },
-	File: { component: File, size: 16 },
-	Copy: { component: Copy, size: 16 },
-	Paste: { component: Paste, size: 16 },
-	ViewportDesignMode: { component: ViewportDesignMode, size: 16 },
-	ViewportSelectMode: { component: ViewportSelectMode, size: 16 },
-	ViewportGuideMode: { component: ViewportGuideMode, size: 16 },
-	Checkmark: { component: Checkmark, size: 12 },
-	Link: { component: Link, size: 12 },
-	Grid: { component: Grid, size: 12 },
-	Overlays: { component: Overlays, size: 12 },
-	Snapping: { component: Snapping, size: 12 },
-	Info: { component: Info, size: 12 },
-	Warning: { component: Warning, size: 12 },
-	Swap: { component: Swap, size: 12 },
-	ResetColors: { component: ResetColors, size: 12 },
-	DropdownArrow: { component: DropdownArrow, size: 12 },
-	VerticalEllipsis: { component: VerticalEllipsis, size: 12 },
-	CloseX: { component: CloseX, size: 12 },
-	FullscreenEnter: { component: FullscreenEnter, size: 12 },
-	FullscreenExit: { component: FullscreenExit, size: 12 },
-	WindowButtonWinMinimize: { component: WindowButtonWinMinimize, size: 12 },
-	WindowButtonWinMaximize: { component: WindowButtonWinMaximize, size: 12 },
-	WindowButtonWinRestoreDown: { component: WindowButtonWinRestoreDown, size: 12 },
-	WindowButtonWinClose: { component: WindowButtonWinClose, size: 12 },
-	KeyboardArrowUp: { component: KeyboardArrowUp, size: 12 },
-	KeyboardArrowRight: { component: KeyboardArrowRight, size: 12 },
-	KeyboardArrowDown: { component: KeyboardArrowDown, size: 12 },
-	KeyboardArrowLeft: { component: KeyboardArrowLeft, size: 12 },
-	KeyboardBackspace: { component: KeyboardBackspace, size: 12 },
-	KeyboardCommand: { component: KeyboardCommand, size: 12 },
-	KeyboardEnter: { component: KeyboardEnter, size: 12 },
-	KeyboardOption: { component: KeyboardOption, size: 12 },
-	KeyboardShift: { component: KeyboardShift, size: 12 },
-	KeyboardSpace: { component: KeyboardSpace, size: 12 },
-	KeyboardTab: { component: KeyboardTab, size: 12 },
-	MouseHintNone: { component: MouseHintNone, size: 16 },
-	MouseHintLmb: { component: MouseHintLmb, size: 16 },
-	MouseHintRmb: { component: MouseHintRmb, size: 16 },
-	MouseHintMmb: { component: MouseHintMmb, size: 16 },
-	MouseHintScrollUp: { component: MouseHintScrollUp, size: 16 },
-	MouseHintScrollDown: { component: MouseHintScrollDown, size: 16 },
-	MouseHintDrag: { component: MouseHintDrag, size: 16 },
-	MouseHintLmbDrag: { component: MouseHintLmbDrag, size: 16 },
-	MouseHintRmbDrag: { component: MouseHintRmbDrag, size: 16 },
-	MouseHintMmbDrag: { component: MouseHintMmbDrag, size: 16 },
-	NodeTypePath: { component: NodeTypePath, size: 24 },
-	NodeTypeFolder: { component: NodeTypeFolder, size: 24 },
+import LayoutCropTool from "@/../assets/24px-two-tone/layout-crop-tool.svg";
+import LayoutEyedropperTool from "@/../assets/24px-two-tone/layout-eyedropper-tool.svg";
+import LayoutNavigateTool from "@/../assets/24px-two-tone/layout-navigate-tool.svg";
+import LayoutSelectTool from "@/../assets/24px-two-tone/layout-select-tool.svg";
+import ParametricFillTool from "@/../assets/24px-two-tone/parametric-fill-tool.svg";
+import ParametricGradientTool from "@/../assets/24px-two-tone/parametric-gradient-tool.svg";
+import ParametricTextTool from "@/../assets/24px-two-tone/parametric-text-tool.svg";
+import RasterBrushTool from "@/../assets/24px-two-tone/raster-brush-tool.svg";
+import RasterCloneTool from "@/../assets/24px-two-tone/raster-clone-tool.svg";
+import RasterBlurSharpenTool from "@/../assets/24px-two-tone/raster-detail-tool.svg";
+import RasterHealTool from "@/../assets/24px-two-tone/raster-heal-tool.svg";
+import RasterPatchTool from "@/../assets/24px-two-tone/raster-patch-tool.svg";
+import RasterRelightTool from "@/../assets/24px-two-tone/raster-relight-tool.svg";
+import VectorEllipseTool from "@/../assets/24px-two-tone/vector-ellipse-tool.svg";
+import VectorFreehandTool from "@/../assets/24px-two-tone/vector-freehand-tool.svg";
+import VectorLineTool from "@/../assets/24px-two-tone/vector-line-tool.svg";
+import VectorPathTool from "@/../assets/24px-two-tone/vector-path-tool.svg";
+import VectorPenTool from "@/../assets/24px-two-tone/vector-pen-tool.svg";
+import VectorRectangleTool from "@/../assets/24px-two-tone/vector-rectangle-tool.svg";
+import VectorShapeTool from "@/../assets/24px-two-tone/vector-shape-tool.svg";
+import VectorSplineTool from "@/../assets/24px-two-tone/vector-spline-tool.svg";
+
+export type IconName = keyof typeof ICON_LIST;
+export type IconSize = 12 | 16 | 24 | 32;
+
+const size12: IconSize = 12;
+const size16: IconSize = 16;
+const size24: IconSize = 24;
+// const size32: IconSize = 32;
+
+const ICON_LIST = {
+	Checkmark: { component: Checkmark, size: size12 },
+	CloseX: { component: CloseX, size: size12 },
+	DropdownArrow: { component: DropdownArrow, size: size12 },
+	FullscreenEnter: { component: FullscreenEnter, size: size12 },
+	FullscreenExit: { component: FullscreenExit, size: size12 },
+	Grid: { component: Grid, size: size12 },
+	Info: { component: Info, size: size12 },
+	KeyboardArrowDown: { component: KeyboardArrowDown, size: size12 },
+	KeyboardArrowLeft: { component: KeyboardArrowLeft, size: size12 },
+	KeyboardArrowRight: { component: KeyboardArrowRight, size: size12 },
+	KeyboardArrowUp: { component: KeyboardArrowUp, size: size12 },
+	KeyboardBackspace: { component: KeyboardBackspace, size: size12 },
+	KeyboardCommand: { component: KeyboardCommand, size: size12 },
+	KeyboardEnter: { component: KeyboardEnter, size: size12 },
+	KeyboardOption: { component: KeyboardOption, size: size12 },
+	KeyboardShift: { component: KeyboardShift, size: size12 },
+	KeyboardSpace: { component: KeyboardSpace, size: size12 },
+	KeyboardTab: { component: KeyboardTab, size: size12 },
+	Link: { component: Link, size: size12 },
+	Overlays: { component: Overlays, size: size12 },
+	ResetColors: { component: ResetColors, size: size12 },
+	Snapping: { component: Snapping, size: size12 },
+	Swap: { component: Swap, size: size12 },
+	VerticalEllipsis: { component: VerticalEllipsis, size: size12 },
+	Warning: { component: Warning, size: size12 },
+	WindowButtonWinClose: { component: WindowButtonWinClose, size: size12 },
+	WindowButtonWinMaximize: { component: WindowButtonWinMaximize, size: size12 },
+	WindowButtonWinMinimize: { component: WindowButtonWinMinimize, size: size12 },
+	WindowButtonWinRestoreDown: { component: WindowButtonWinRestoreDown, size: size12 },
+
+	AlignBottom: { component: AlignBottom, size: size16 },
+	AlignHorizontalCenter: { component: AlignHorizontalCenter, size: size16 },
+	AlignLeft: { component: AlignLeft, size: size16 },
+	AlignRight: { component: AlignRight, size: size16 },
+	AlignTop: { component: AlignTop, size: size16 },
+	AlignVerticalCenter: { component: AlignVerticalCenter, size: size16 },
+	BooleanDifference: { component: BooleanDifference, size: size16 },
+	BooleanIntersect: { component: BooleanIntersect, size: size16 },
+	BooleanSubtractBack: { component: BooleanSubtractBack, size: size16 },
+	BooleanSubtractFront: { component: BooleanSubtractFront, size: size16 },
+	BooleanUnion: { component: BooleanUnion, size: size16 },
+	Copy: { component: Copy, size: size16 },
+	EyeHidden: { component: EyeHidden, size: size16 },
+	EyeVisible: { component: EyeVisible, size: size16 },
+	File: { component: File, size: size16 },
+	FlipHorizontal: { component: FlipHorizontal, size: size16 },
+	FlipVertical: { component: FlipVertical, size: size16 },
+	GraphiteLogo: { component: GraphiteLogo, size: size16 },
+	Paste: { component: Paste, size: size16 },
+	ViewModeNormal: { component: ViewModeNormal, size: size16 },
+	ViewModeOutline: { component: ViewModeOutline, size: size16 },
+	ViewModePixels: { component: ViewModePixels, size: size16 },
+	ViewportDesignMode: { component: ViewportDesignMode, size: size16 },
+	ViewportGuideMode: { component: ViewportGuideMode, size: size16 },
+	ViewportSelectMode: { component: ViewportSelectMode, size: size16 },
+	ZoomIn: { component: ZoomIn, size: size16 },
+	ZoomOut: { component: ZoomOut, size: size16 },
+	ZoomReset: { component: ZoomReset, size: size16 },
+
+	MouseHintDrag: { component: MouseHintDrag, size: size16 },
+	MouseHintLmbDrag: { component: MouseHintLmbDrag, size: size16 },
+	MouseHintLmb: { component: MouseHintLmb, size: size16 },
+	MouseHintMmbDrag: { component: MouseHintMmbDrag, size: size16 },
+	MouseHintMmb: { component: MouseHintMmb, size: size16 },
+	MouseHintNone: { component: MouseHintNone, size: size16 },
+	MouseHintRmbDrag: { component: MouseHintRmbDrag, size: size16 },
+	MouseHintRmb: { component: MouseHintRmb, size: size16 },
+	MouseHintScrollDown: { component: MouseHintScrollDown, size: size16 },
+	MouseHintScrollUp: { component: MouseHintScrollUp, size: size16 },
+
+	NodeTypeFolder: { component: NodeTypeFolder, size: size24 },
+	NodeTypePath: { component: NodeTypePath, size: size24 },
+
+	LayoutCropTool: { component: LayoutCropTool, size: size24 },
+	LayoutEyedropperTool: { component: LayoutEyedropperTool, size: size24 },
+	LayoutNavigateTool: { component: LayoutNavigateTool, size: size24 },
+	LayoutSelectTool: { component: LayoutSelectTool, size: size24 },
+	ParametricFillTool: { component: ParametricFillTool, size: size24 },
+	ParametricGradientTool: { component: ParametricGradientTool, size: size24 },
+	ParametricTextTool: { component: ParametricTextTool, size: size24 },
+	RasterBrushTool: { component: RasterBrushTool, size: size24 },
+	RasterCloneTool: { component: RasterCloneTool, size: size24 },
+	RasterBlurSharpenTool: { component: RasterBlurSharpenTool, size: size24 },
+	RasterHealTool: { component: RasterHealTool, size: size24 },
+	RasterPatchTool: { component: RasterPatchTool, size: size24 },
+	RasterRelightTool: { component: RasterRelightTool, size: size24 },
+	VectorEllipseTool: { component: VectorEllipseTool, size: size24 },
+	VectorFreehandTool: { component: VectorFreehandTool, size: size24 },
+	VectorLineTool: { component: VectorLineTool, size: size24 },
+	VectorPathTool: { component: VectorPathTool, size: size24 },
+	VectorPenTool: { component: VectorPenTool, size: size24 },
+	VectorRectangleTool: { component: VectorRectangleTool, size: size24 },
+	VectorShapeTool: { component: VectorShapeTool, size: size24 },
+	VectorSplineTool: { component: VectorSplineTool, size: size24 },
 };
-
-const components = Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component]));
+const icons: Record<IconName, { component: DefineComponent; size: IconSize }> = ICON_LIST;
 
 export default defineComponent({
+	components: Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component])),
 	props: {
-		icon: { type: String, required: true },
-		gapAfter: { type: Boolean, default: false },
+		icon: { type: String as PropType<IconName>, required: true },
+		gapAfter: { type: Boolean as PropType<boolean>, default: false },
 	},
-	components,
 	data() {
-		return { icons };
+		return {
+			icons,
+		};
 	},
 });
 </script>

frontend/src/components/widgets/labels/TextLabel.vue

@@ -20,13 +20,12 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 export default defineComponent({
-	components: {},
 	props: {
-		bold: { type: Boolean, default: false },
-		italic: { type: Boolean, default: false },
+		bold: { type: Boolean as PropType<boolean>, default: false },
+		italic: { type: Boolean as PropType<boolean>, default: false },
 	},
 });
 </script>

frontend/src/components/widgets/labels/UserInputLabel.vue

@@ -10,7 +10,7 @@
 			</template>
 		</template>
 		<span class="input-mouse" v-if="inputMouse">
-			<IconLabel :icon="mouseMovementIcon(inputMouse)" />
+			<IconLabel :icon="`MouseHint${inputMouse}`" />
 		</span>
 		<span class="hint-text" v-if="hasSlotContent">
 			<slot></slot>
@@ -95,28 +95,17 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
+
+import { HintInfo } from "@/dispatcher/js-messages";
 
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
-export enum MouseInputInteraction {
-	"None" = "None",
-	"Lmb" = "Lmb",
-	"Rmb" = "Rmb",
-	"Mmb" = "Mmb",
-	"ScrollUp" = "ScrollUp",
-	"ScrollDown" = "ScrollDown",
-	"Drag" = "Drag",
-	"LmbDrag" = "LmbDrag",
-	"RmbDrag" = "RmbDrag",
-	"MmbDrag" = "MmbDrag",
-}
-
 export default defineComponent({
 	components: { IconLabel },
 	props: {
-		inputKeys: { type: Array, default: () => [] },
-		inputMouse: { type: String },
+		inputKeys: { type: Array as PropType<HintInfo["key_groups"]>, default: () => [] },
+		inputMouse: { type: String as PropType<HintInfo["mouse"]>, default: null },
 	},
 	computed: {
 		hasSlotContent(): boolean {
@@ -173,50 +162,14 @@ export default defineComponent({
 			let result;
 
 			// Letters and numbers
-			if (/^[A-Z0-9]$/.test(text)) {
-				result = text;
-			}
+			if (/^[A-Z0-9]$/.test(text)) result = text;
 			// Abbreviated names
-			else if (text in textMap) {
-				result = textMap[text];
-			}
+			else if (text in textMap) result = textMap[text];
 			// Other
-			else {
-				result = text;
-			}
+			else result = text;
 
 			return { text: result, icon: null, width: `width-${(result || " ").length * 8 + 8}` };
 		},
-		mouseMovementIcon(mouseInputInteraction: MouseInputInteraction) {
-			switch (mouseInputInteraction) {
-				case MouseInputInteraction.Lmb:
-					return "MouseHintLmb";
-				case MouseInputInteraction.Rmb:
-					return "MouseHintRmb";
-				case MouseInputInteraction.Mmb:
-					return "MouseHintMmb";
-				case MouseInputInteraction.ScrollUp:
-					return "MouseHintScrollUp";
-				case MouseInputInteraction.ScrollDown:
-					return "MouseHintScrollDown";
-				case MouseInputInteraction.Drag:
-					return "MouseHintDrag";
-				case MouseInputInteraction.LmbDrag:
-					return "MouseHintLmbDrag";
-				case MouseInputInteraction.RmbDrag:
-					return "MouseHintRmbDrag";
-				case MouseInputInteraction.MmbDrag:
-					return "MouseHintMmbDrag";
-				default:
-				case MouseInputInteraction.None:
-					return "MouseHintNone";
-			}
-		},
-	},
-	data() {
-		return {
-			MouseInputInteraction,
-		};
 	},
 });
 </script>

frontend/src/components/widgets/options/ToolOptions.vue

@@ -31,17 +31,19 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { WidgetRow, SeparatorType, IconButtonWidget } from "@/components/widgets/widgets";
+import { WidgetRow, IconButtonWidget } from "@/utilities/widgets";
 
-import Separator from "@/components/widgets/separators/Separator.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
+import Separator from "@/components/widgets/separators/Separator.vue";
+
+export type ToolName = "Select" | "Shape" | "Line" | "Pen";
 
 export default defineComponent({
 	inject: ["editor", "dialog"],
 	props: {
-		activeTool: { type: String },
+		activeTool: { type: String as PropType<ToolName> },
 		activeToolOptions: { type: Object as PropType<Record<string, object>> },
 	},
 	methods: {
@@ -54,11 +56,15 @@ export default defineComponent({
 		},
 		// Traverses the given path and returns the direct parent of the option
 		getRecordContainingOption(optionPath: string[]): Record<string, number> {
-			const allButLast = optionPath.slice(0, -1);
+			// TODO: Formalize types and avoid casting with `as`
 			let currentRecord = this.activeToolOptions as Record<string, object | number>;
-			[this.activeTool || "", ...allButLast].forEach((attr) => {
+
+			const allButLastOptions = optionPath.slice(0, -1);
+			[this.activeTool || "", ...allButLastOptions].forEach((attr) => {
+				// Dig into the tree in each loop iteration
 				currentRecord = currentRecord[attr] as Record<string, object | number>;
 			});
+
 			return currentRecord as Record<string, number>;
 		},
 		// Traverses the given path into the active tool's option struct, and sets the value at the path tail
@@ -88,19 +94,19 @@ export default defineComponent({
 		},
 	},
 	data() {
-		const toolOptionsWidgets: Record<string, WidgetRow> = {
+		const toolOptionsWidgets: Record<ToolName, WidgetRow> = {
 			Select: [
 				{ kind: "IconButton", message: { Align: ["X", "Min"] }, tooltip: "Align Left", props: { icon: "AlignLeft", size: 24 } },
 				{ kind: "IconButton", message: { Align: ["X", "Center"] }, tooltip: "Align Horizontal Center", props: { icon: "AlignHorizontalCenter", size: 24 } },
 				{ kind: "IconButton", message: { Align: ["X", "Max"] }, tooltip: "Align Right", props: { icon: "AlignRight", size: 24 } },
 
-				{ kind: "Separator", props: { type: SeparatorType.Unrelated } },
+				{ kind: "Separator", props: { type: "Unrelated" } },
 
 				{ kind: "IconButton", message: { Align: ["Y", "Min"] }, tooltip: "Align Top", props: { icon: "AlignTop", size: 24 } },
 				{ kind: "IconButton", message: { Align: ["Y", "Center"] }, tooltip: "Align Vertical Center", props: { icon: "AlignVerticalCenter", size: 24 } },
 				{ kind: "IconButton", message: { Align: ["Y", "Max"] }, tooltip: "Align Bottom", props: { icon: "AlignBottom", size: 24 } },
 
-				{ kind: "Separator", props: { type: SeparatorType.Related } },
+				{ kind: "Separator", props: { type: "Related" } },
 
 				{
 					kind: "PopoverButton",
@@ -111,12 +117,12 @@ export default defineComponent({
 					props: {},
 				},
 
-				{ kind: "Separator", props: { type: SeparatorType.Section } },
+				{ kind: "Separator", props: { type: "Section" } },
 
 				{ kind: "IconButton", message: "FlipHorizontal", tooltip: "Flip Horizontal", props: { icon: "FlipHorizontal", size: 24 } },
 				{ kind: "IconButton", message: "FlipVertical", tooltip: "Flip Vertical", props: { icon: "FlipVertical", size: 24 } },
 
-				{ kind: "Separator", props: { type: SeparatorType.Related } },
+				{ kind: "Separator", props: { type: "Related" } },
 
 				{
 					kind: "PopoverButton",
@@ -127,15 +133,15 @@ export default defineComponent({
 					props: {},
 				},
 
-				{ kind: "Separator", props: { type: SeparatorType.Section } },
+				{ kind: "Separator", props: { type: "Section" } },
 
-				{ kind: "IconButton", tooltip: "Boolean Union", callback: () => this.dialog.comingSoon(197), props: { icon: "BooleanUnion", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Subtract Front", callback: () => this.dialog.comingSoon(197), props: { icon: "BooleanSubtractFront", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Subtract Back", callback: () => this.dialog.comingSoon(197), props: { icon: "BooleanSubtractBack", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Intersect", callback: () => this.dialog.comingSoon(197), props: { icon: "BooleanIntersect", size: 24 } },
-				{ kind: "IconButton", tooltip: "Boolean Difference", callback: () => this.dialog.comingSoon(197), props: { icon: "BooleanDifference", size: 24 } },
+				{ kind: "IconButton", tooltip: "Boolean Union", callback: (): void => this.dialog.comingSoon(197), props: { icon: "BooleanUnion", size: 24 } },
+				{ kind: "IconButton", tooltip: "Boolean Subtract Front", callback: (): void => this.dialog.comingSoon(197), props: { icon: "BooleanSubtractFront", size: 24 } },
+				{ kind: "IconButton", tooltip: "Boolean Subtract Back", callback: (): void => this.dialog.comingSoon(197), props: { icon: "BooleanSubtractBack", size: 24 } },
+				{ kind: "IconButton", tooltip: "Boolean Intersect", callback: (): void => this.dialog.comingSoon(197), props: { icon: "BooleanIntersect", size: 24 } },
+				{ kind: "IconButton", tooltip: "Boolean Difference", callback: (): void => this.dialog.comingSoon(197), props: { icon: "BooleanDifference", size: 24 } },
 
-				{ kind: "Separator", props: { type: SeparatorType.Related } },
+				{ kind: "Separator", props: { type: "Related" } },
 
 				{
 					kind: "PopoverButton",
@@ -153,7 +159,6 @@ export default defineComponent({
 
 		return {
 			toolOptionsWidgets,
-			SeparatorType,
 		};
 	},
 	components: {

frontend/src/components/widgets/rulers/CanvasRuler.vue

@@ -50,29 +50,26 @@ const MAJOR_MARK_THICKNESS = 16;
 const MEDIUM_MARK_THICKNESS = 6;
 const MINOR_MARK_THICKNESS = 3;
 
-export enum RulerDirection {
-	"Horizontal" = "Horizontal",
-	"Vertical" = "Vertical",
-}
+export type RulerDirection = "Horizontal" | "Vertical";
 
 // Apparently the modulo operator in js does not work properly.
-const mod = (n: number, m: number) => {
-	const remain = n % m;
-	return Math.floor(remain >= 0 ? remain : remain + m);
+const mod = (n: number, m: number): number => {
+	const remainder = n % m;
+	return Math.floor(remainder >= 0 ? remainder : remainder + m);
 };
 
 export default defineComponent({
 	props: {
-		direction: { type: String as PropType<RulerDirection>, default: RulerDirection.Vertical },
-		origin: { type: Number, required: true },
-		numberInterval: { type: Number, required: true },
-		majorMarkSpacing: { type: Number, required: true },
-		mediumDivisions: { type: Number, default: 5 },
-		minorDivisions: { type: Number, default: 2 },
+		direction: { type: String as PropType<RulerDirection>, default: "Vertical" },
+		origin: { type: Number as PropType<number>, required: true },
+		numberInterval: { type: Number as PropType<number>, required: true },
+		majorMarkSpacing: { type: Number as PropType<number>, required: true },
+		mediumDivisions: { type: Number as PropType<number>, default: 5 },
+		minorDivisions: { type: Number as PropType<number>, default: 2 },
 	},
 	computed: {
 		svgPath(): string {
-			const isVertical = this.direction === RulerDirection.Vertical;
+			const isVertical = this.direction === "Vertical";
 			const lineDirection = isVertical ? "H" : "V";
 
 			const offsetStart = mod(this.origin, this.majorMarkSpacing);
@@ -98,7 +95,7 @@ export default defineComponent({
 			return dPathAttribute;
 		},
 		svgTexts(): { transform: string; text: number }[] {
-			const isVertical = this.direction === RulerDirection.Vertical;
+			const isVertical = this.direction === "Vertical";
 
 			const offsetStart = mod(this.origin, this.majorMarkSpacing);
 			const shiftedOffsetStart = offsetStart - this.majorMarkSpacing;
@@ -128,7 +125,7 @@ export default defineComponent({
 			if (!this.$refs.rulerRef) return;
 
 			const rulerElement = this.$refs.rulerRef as HTMLElement;
-			const isVertical = this.direction === RulerDirection.Vertical;
+			const isVertical = this.direction === "Vertical";
 
 			const newLength = isVertical ? rulerElement.clientHeight : rulerElement.clientWidth;
 			const roundedUp = (Math.floor(newLength / this.majorMarkSpacing) + 1) * this.majorMarkSpacing;
@@ -152,7 +149,6 @@ export default defineComponent({
 		return {
 			rulerLength: 0,
 			svgBounds: { width: "0px", height: "0px" },
-			RulerDirection,
 		};
 	},
 });

frontend/src/components/widgets/scrollbars/PersistentScrollbar.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="persistent-scrollbar" :class="direction.toLowerCase()">
 		<button class="arrow decrease" @pointerdown="changePosition(-50)"></button>
-		<div class="scroll-track" ref="scrollTrack" @pointerdown="grabArea">
-			<div class="scroll-thumb" @pointerdown="grabHandle" :class="{ dragging }" ref="handle" :style="[thumbStart, thumbEnd, sides]"></div>
+		<div class="scroll-track" ref="scrollTrack" @pointerdown="(e) => grabArea(e)">
+			<div class="scroll-thumb" @pointerdown="(e) => grabHandle(e)" :class="{ dragging }" ref="handle" :style="[thumbStart, thumbEnd, sides]"></div>
 		</div>
 		<button class="arrow increase" @click="changePosition(50)"></button>
 	</div>
@@ -110,44 +110,40 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+export type ScrollbarDirection = "Horizontal" | "Vertical";
+
 // Linear Interpolation
-const lerp = (x: number, y: number, a: number) => x * (1 - a) + y * a;
+const lerp = (x: number, y: number, a: number): number => x * (1 - a) + y * a;
 
 // Convert the position of the handle (0-1) to the position on the track (0-1).
-// This includes the 1/2 handle length gap  of the possible handle positionson each side so the end of the handle doesn't go off the track.
-const handleToTrack = (handleLen: number, handlePos: number) => lerp(handleLen / 2, 1 - handleLen / 2, handlePos);
+// This includes the 1/2 handle length gap of the possible handle positionson each side so the end of the handle doesn't go off the track.
+const handleToTrack = (handleLen: number, handlePos: number): number => lerp(handleLen / 2, 1 - handleLen / 2, handlePos);
 
-const pointerPosition = (direction: ScrollbarDirection, e: PointerEvent) => (direction === ScrollbarDirection.Vertical ? e.clientY : e.clientX);
-
-export enum ScrollbarDirection {
-	"Horizontal" = "Horizontal",
-	"Vertical" = "Vertical",
-}
+const pointerPosition = (direction: ScrollbarDirection, e: PointerEvent): number => (direction === "Vertical" ? e.clientY : e.clientX);
 
 export default defineComponent({
 	props: {
-		direction: { type: String as PropType<ScrollbarDirection>, default: ScrollbarDirection.Vertical },
-		handlePosition: { type: Number, default: 0.5 },
-		handleLength: { type: Number, default: 0.5 },
+		direction: { type: String as PropType<ScrollbarDirection>, default: "Vertical" },
+		handlePosition: { type: Number as PropType<number>, default: 0.5 },
+		handleLength: { type: Number as PropType<number>, default: 0.5 },
 	},
 	computed: {
 		thumbStart(): { left: string } | { top: string } {
 			const start = handleToTrack(this.handleLength, this.handlePosition) - this.handleLength / 2;
 
-			return this.direction === ScrollbarDirection.Vertical ? { top: `${start * 100}%` } : { left: `${start * 100}%` };
+			return this.direction === "Vertical" ? { top: `${start * 100}%` } : { left: `${start * 100}%` };
 		},
 		thumbEnd(): { right: string } | { bottom: string } {
 			const end = 1 - handleToTrack(this.handleLength, this.handlePosition) - this.handleLength / 2;
 
-			return this.direction === ScrollbarDirection.Vertical ? { bottom: `${end * 100}%` } : { right: `${end * 100}%` };
+			return this.direction === "Vertical" ? { bottom: `${end * 100}%` } : { right: `${end * 100}%` };
 		},
 		sides(): { left: string; right: string } | { top: string; bottom: string } {
-			return this.direction === ScrollbarDirection.Vertical ? { left: "0%", right: "0%" } : { top: "0%", bottom: "0%" };
+			return this.direction === "Vertical" ? { left: "0%", right: "0%" } : { top: "0%", bottom: "0%" };
 		},
 	},
 	data() {
 		return {
-			ScrollbarDirection,
 			dragging: false,
 			pointerPos: 0,
 		};
@@ -159,11 +155,11 @@ export default defineComponent({
 	methods: {
 		trackLength(): number {
 			const track = this.$refs.scrollTrack as HTMLElement;
-			return this.direction === ScrollbarDirection.Vertical ? track.clientHeight - this.handleLength : track.clientWidth;
+			return this.direction === "Vertical" ? track.clientHeight - this.handleLength : track.clientWidth;
 		},
 		trackOffset(): number {
 			const track = this.$refs.scrollTrack as HTMLElement;
-			return this.direction === ScrollbarDirection.Vertical ? track.getBoundingClientRect().top : track.getBoundingClientRect().left;
+			return this.direction === "Vertical" ? track.getBoundingClientRect().top : track.getBoundingClientRect().left;
 		},
 		clampHandlePosition(newPos: number) {
 			const clampedPosition = Math.min(Math.max(newPos, 0), 1);

frontend/src/components/widgets/separators/Separator.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="separator" :class="[direction.toLowerCase(), type.toLowerCase()]">
-		<div v-if="[SeparatorType.Section, SeparatorType.List].includes(type)"></div>
+		<div v-if="['Section', 'List'].includes(type)"></div>
 	</div>
 </template>
 
@@ -69,21 +69,14 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
-import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
+import { SeparatorDirection, SeparatorType } from "@/utilities/widgets";
 
 export default defineComponent({
-	components: {},
 	props: {
-		direction: { type: String, default: SeparatorDirection.Horizontal },
-		type: { type: String, default: SeparatorType.Unrelated },
-	},
-	data() {
-		return {
-			SeparatorDirection,
-			SeparatorType,
-		};
+		direction: { type: String as PropType<SeparatorDirection>, default: "Horizontal" },
+		type: { type: String as PropType<SeparatorType>, default: "Unrelated" },
 	},
 });
 </script>

frontend/src/components/window/MainWindow.vue

@@ -39,18 +39,13 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import TitleBar from "@/components/window/title-bar/TitleBar.vue";
-import StatusBar from "@/components/window/status-bar/StatusBar.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import StatusBar from "@/components/window/status-bar/StatusBar.vue";
+import TitleBar from "@/components/window/title-bar/TitleBar.vue";
 import Workspace from "@/components/workspace/Workspace.vue";
 
-export enum ApplicationPlatform {
-	"Windows" = "Windows",
-	"Mac" = "Mac",
-	"Linux" = "Linux",
-	"Web" = "Web",
-}
+export type ApplicationPlatform = "Windows" | "Mac" | "Linux" | "Web";
 
 export default defineComponent({
 	components: {
@@ -62,7 +57,7 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			platform: ApplicationPlatform.Web,
+			platform: "Web" as ApplicationPlatform,
 			maximized: true,
 		};
 	},

frontend/src/components/window/status-bar/StatusBar.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="status-bar">
 		<template v-for="(hintGroup, index) in hintData" :key="hintGroup">
-			<Separator :type="SeparatorType.Section" v-if="index !== 0" />
+			<Separator :type="'Section'" v-if="index !== 0" />
 			<template v-for="hint in hintGroup" :key="hint">
 				<span v-if="hint.plus" class="plus">+</span>
 				<UserInputLabel :inputMouse="hint.mouse" :inputKeys="hint.key_groups">{{ hint.label }}</UserInputLabel>
@@ -35,11 +35,10 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { SeparatorType } from "@/components/widgets/widgets";
+import { HintData, UpdateInputHints } from "@/dispatcher/js-messages";
 
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
 import Separator from "@/components/widgets/separators/Separator.vue";
-import { HintData, UpdateInputHints } from "@/dispatcher/js-messages";
 
 export default defineComponent({
 	inject: ["editor"],
@@ -49,7 +48,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			SeparatorType,
 			hintData: [] as HintData,
 		};
 	},

frontend/src/components/window/title-bar/TitleBar.vue

@@ -1,14 +1,14 @@
 <template>
 	<div class="header-third">
-		<WindowButtonsMac :maximized="maximized" v-if="platform === ApplicationPlatform.Mac" />
-		<MenuBarInput v-if="platform !== ApplicationPlatform.Mac" />
+		<WindowButtonsMac :maximized="maximized" v-if="platform === 'Mac'" />
+		<MenuBarInput v-if="platform !== 'Mac'" />
 	</div>
 	<div class="header-third">
 		<WindowTitle :title="`${activeDocumentDisplayName} - Graphite`" />
 	</div>
 	<div class="header-third">
-		<WindowButtonsWindows :maximized="maximized" v-if="platform === ApplicationPlatform.Windows || platform === ApplicationPlatform.Linux" />
-		<WindowButtonsWeb :maximized="maximized" v-if="platform === ApplicationPlatform.Web" />
+		<WindowButtonsWindows :maximized="maximized" v-if="platform === 'Windows' || platform === 'Linux'" />
+		<WindowButtonsWeb :maximized="maximized" v-if="platform === 'Web'" />
 	</div>
 </template>
 
@@ -32,25 +32,21 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
-import WindowTitle from "@/components/window/title-bar/WindowTitle.vue";
-import WindowButtonsWindows from "@/components/window/title-bar/WindowButtonsWindows.vue";
+import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue";
 import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.vue";
 import WindowButtonsWeb from "@/components/window/title-bar/WindowButtonsWeb.vue";
-import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue";
-import { ApplicationPlatform } from "@/components/window/MainWindow.vue";
+import WindowButtonsWindows from "@/components/window/title-bar/WindowButtonsWindows.vue";
+import WindowTitle from "@/components/window/title-bar/WindowTitle.vue";
+
+export type Platform = "Windows" | "Mac" | "Linux" | "Web";
 
 export default defineComponent({
 	inject: ["documents"],
 	props: {
-		platform: { type: String, required: true },
-		maximized: { type: Boolean, required: true },
-	},
-	data() {
-		return {
-			ApplicationPlatform,
-		};
+		platform: { type: String as PropType<Platform>, required: true },
+		maximized: { type: Boolean as PropType<boolean>, required: true },
 	},
 	computed: {
 		activeDocumentDisplayName() {

frontend/src/components/window/title-bar/WindowButtonsMac.vue

@@ -35,11 +35,11 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 export default defineComponent({
 	props: {
-		maximized: { type: Boolean, default: false },
+		maximized: { type: Boolean as PropType<boolean>, default: false },
 	},
 });
 </script>

frontend/src/components/window/title-bar/WindowButtonsWeb.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="window-buttons-web" @click="handleClick" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
+	<div class="window-buttons-web" @click="(e) => handleClick(e)" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
 		<TextLabel v-if="requestFullscreenHotkeys" :italic="true">Go fullscreen to access all hotkeys</TextLabel>
 		<IconLabel :icon="fullscreen.state.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
 	</div>

frontend/src/components/window/title-bar/WindowButtonsWindows.vue

@@ -38,14 +38,14 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	components: { IconLabel },
 	props: {
-		maximized: { type: Boolean, default: false },
+		maximized: { type: Boolean as PropType<boolean>, default: false },
 	},
 });
 </script>

frontend/src/components/window/title-bar/WindowTitle.vue

@@ -14,11 +14,11 @@
 </style>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 
 export default defineComponent({
 	props: {
-		title: { type: String, required: true },
+		title: { type: String as PropType<string>, required: true },
 	},
 });
 </script>

frontend/src/components/workspace/Panel.vue

@@ -14,7 +14,7 @@
 					<IconButton :action="(e) => e.stopPropagation() || (closeAction && closeAction(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
 				</div>
 			</div>
-			<PopoverButton :icon="PopoverButtonIcon.VerticalEllipsis">
+			<PopoverButton :icon="'VerticalEllipsis'">
 				<h3>Panel Options</h3>
 				<p>The contents of this popover menu are coming soon</p>
 			</PopoverButton>
@@ -155,37 +155,32 @@
 import { defineComponent, PropType } from "vue";
 
 import Document from "@/components/panels/Document.vue";
-import Properties from "@/components/panels/Properties.vue";
 import LayerTree from "@/components/panels/LayerTree.vue";
 import Minimap from "@/components/panels/Minimap.vue";
+import Properties from "@/components/panels/Properties.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import PopoverButton, { PopoverButtonIcon } from "@/components/widgets/buttons/PopoverButton.vue";
-import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
+import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
+
+const components = {
+	Document,
+	Properties,
+	LayerTree,
+	Minimap,
+	IconButton,
+	PopoverButton,
+};
 
 export default defineComponent({
 	inject: ["documents"],
-	components: {
-		Document,
-		Properties,
-		LayerTree,
-		Minimap,
-		IconButton,
-		PopoverButton,
-	},
+	components,
 	props: {
-		tabMinWidths: { type: Boolean, default: false },
-		tabCloseButtons: { type: Boolean, default: false },
+		tabMinWidths: { type: Boolean as PropType<boolean>, default: false },
+		tabCloseButtons: { type: Boolean as PropType<boolean>, default: false },
 		tabLabels: { type: Array as PropType<string[]>, required: true },
-		tabActiveIndex: { type: Number, required: true },
-		panelType: { type: String, required: true },
+		tabActiveIndex: { type: Number as PropType<number>, required: true },
+		panelType: { type: String as PropType<keyof typeof components>, required: true },
 		clickAction: { type: Function as PropType<(index: number) => void>, required: false },
 		closeAction: { type: Function as PropType<(index: number) => void>, required: false },
 	},
-	data() {
-		return {
-			PopoverButtonIcon,
-			MenuDirection,
-		};
-	},
 });
 </script>

frontend/src/components/workspace/Workspace.vue

@@ -67,10 +67,10 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import Panel from "@/components/workspace/Panel.vue";
-import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
 import DialogModal from "@/components/widgets/floating-menus/DialogModal.vue";
+import Panel from "@/components/workspace/Panel.vue";
 
 export default defineComponent({
 	inject: ["documents", "dialog", "editor"],

frontend/src/dispatcher/js-dispatcher.ts

@@ -1,4 +1,5 @@
 import { plainToInstance } from "class-transformer";
+
 import { JsMessageType, messageConstructors, JsMessage } from "@/dispatcher/js-messages";
 import type { RustEditorInstance, WasmInstance } from "@/state/wasm-loader";
 
@@ -10,14 +11,15 @@ type JsMessageCallbackMap = {
 	[message: string]: JsMessageCallback<any> | undefined;
 };
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createJsDispatcher() {
 	const subscriptions: JsMessageCallbackMap = {};
 
-	const subscribeJsMessage = <T extends JsMessage, Args extends unknown[]>(messageType: new (...args: Args) => T, callback: JsMessageCallback<T>) => {
+	const subscribeJsMessage = <T extends JsMessage, Args extends unknown[]>(messageType: new (...args: Args) => T, callback: JsMessageCallback<T>): void => {
 		subscriptions[messageType.name] = callback;
 	};
 
-	const handleJsMessage = (messageType: JsMessageType, messageData: Record<string, unknown>, wasm: WasmInstance, instance: RustEditorInstance) => {
+	const handleJsMessage = (messageType: JsMessageType, messageData: Record<string, unknown>, wasm: WasmInstance, instance: RustEditorInstance): void => {
 		const messageConstructor = messageConstructors[messageType];
 		if (!messageConstructor) {
 			// eslint-disable-next-line no-console

frontend/src/dispatcher/js-messages.ts

@@ -30,7 +30,7 @@ export abstract class DocumentDetails {
 
 	readonly id!: BigInt | string;
 
-	get displayName() {
+	get displayName(): string {
 		return `${this.name}${this.is_saved ? "" : "*"}`;
 	}
 }
@@ -44,25 +44,43 @@ export class UpdateOpenDocumentsList extends JsMessage {
 	readonly open_documents!: FrontendDocumentDetails[];
 }
 
-export type HintData = HintInfo[][];
-
 export class UpdateInputHints extends JsMessage {
 	@Type(() => HintInfo)
 	readonly hint_data!: HintData;
 }
 
-export type KeysGroup = string[];
+export type HintData = HintGroup[];
+
+export type HintGroup = HintInfo[];
 
 export class HintInfo {
-	readonly keys!: string[];
+	readonly key_groups!: KeysGroup[];
 
-	readonly mouse!: KeysGroup | null;
+	readonly mouse!: MouseMotion | null;
 
 	readonly label!: string;
 
 	readonly plus!: boolean;
 }
 
+export type KeysGroup = string[]; // Array of Rust enum `Key`
+
+export type MouseMotion = string;
+
+export type RGBA = {
+	r: number;
+	g: number;
+	b: number;
+	a: number;
+};
+
+export type HSVA = {
+	h: number;
+	s: number;
+	v: number;
+	a: number;
+};
+
 const To255Scale = Transform(({ value }) => value * 255);
 export class Color {
 	@To255Scale
@@ -76,11 +94,11 @@ export class Color {
 
 	readonly alpha!: number;
 
-	toRgba() {
+	toRgba(): RGBA {
 		return { r: this.red, g: this.green, b: this.blue, a: this.alpha };
 	}
 
-	toRgbaCSS() {
+	toRgbaCSS(): string {
 		const { r, g, b, a } = this.toRgba();
 		return `rgba(${r}, ${g}, ${b}, ${a})`;
 	}
@@ -284,29 +302,19 @@ export class LayerPanelEntry {
 	@Transform(({ value }) => new BigUint64Array(value))
 	path!: BigUint64Array;
 
-	@Type(() => LayerData)
-	layer_data!: LayerData;
+	@Type(() => LayerMetadata)
+	layer_metadata!: LayerMetadata;
 
 	thumbnail!: string;
 }
 
-export class LayerData {
+export class LayerMetadata {
 	expanded!: boolean;
 
 	selected!: boolean;
 }
 
-export const LayerTypeOptions = {
-	Folder: "Folder",
-	Shape: "Shape",
-	Circle: "Circle",
-	Rect: "Rect",
-	Line: "Line",
-	PolyLine: "PolyLine",
-	Ellipse: "Ellipse",
-} as const;
-
-export type LayerType = typeof LayerTypeOptions[keyof typeof LayerTypeOptions];
+export type LayerType = "Folder" | "Shape" | "Circle" | "Rect" | "Line" | "PolyLine" | "Ellipse";
 
 export class IndexedDbDocumentDetails extends DocumentDetails {
 	@Transform(({ value }: { value: BigInt }) => value.toString())

frontend/src/lifetime/auto-save.ts

@@ -10,23 +10,24 @@ const GRAPHITE_AUTO_SAVE_ORDER_KEY = "auto-save-documents-order";
 const databaseConnection: Promise<IDBDatabase> = new Promise((resolve) => {
 	const dbOpenRequest = indexedDB.open(GRAPHITE_INDEXED_DB_NAME, GRAPHITE_INDEXED_DB_VERSION);
 
-	dbOpenRequest.onupgradeneeded = () => {
+	dbOpenRequest.onupgradeneeded = (): void => {
 		const db = dbOpenRequest.result;
 		if (!db.objectStoreNames.contains(GRAPHITE_AUTO_SAVE_STORE)) {
 			db.createObjectStore(GRAPHITE_AUTO_SAVE_STORE, { keyPath: "details.id" });
 		}
 	};
 
-	dbOpenRequest.onerror = () => {
+	dbOpenRequest.onerror = (): void => {
 		// eslint-disable-next-line no-console
 		console.error("Graphite IndexedDb error:", dbOpenRequest.error);
 	};
 
-	dbOpenRequest.onsuccess = () => {
+	dbOpenRequest.onsuccess = (): void => {
 		resolve(dbOpenRequest.result);
 	};
 });
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createAutoSaveManager(editor: EditorState, documents: DocumentsState) {
 	const openAutoSavedDocuments = async (): Promise<void> => {
 		const db = await databaseConnection;
@@ -34,7 +35,7 @@ export function createAutoSaveManager(editor: EditorState, documents: DocumentsS
 		const request = transaction.objectStore(GRAPHITE_AUTO_SAVE_STORE).getAll();
 
 		return new Promise((resolve) => {
-			request.onsuccess = () => {
+			request.onsuccess = (): void => {
 				const previouslySavedDocuments: AutoSaveDocument[] = request.result;
 
 				const documentOrder: string[] = JSON.parse(window.localStorage.getItem(GRAPHITE_AUTO_SAVE_ORDER_KEY) || "[]");
@@ -48,7 +49,7 @@ export function createAutoSaveManager(editor: EditorState, documents: DocumentsS
 		});
 	};
 
-	const storeDocumentOrder = () => {
+	const storeDocumentOrder = (): void => {
 		// Make sure to store as string since JSON does not play nice with BigInt
 		const documentOrder = documents.state.documents.map((doc) => doc.id.toString());
 		window.localStorage.setItem(GRAPHITE_AUTO_SAVE_ORDER_KEY, JSON.stringify(documentOrder));

frontend/src/lifetime/errors.ts

@@ -1,10 +1,10 @@
-import { DialogState } from "@/state/dialog";
-import { TextButtonWidget } from "@/components/widgets/widgets";
 import { DisplayError, DisplayPanic } from "@/dispatcher/js-messages";
+import { DialogState } from "@/state/dialog";
 import { EditorState } from "@/state/wasm-loader";
 import { stripIndents } from "@/utilities/strip-indents";
+import { TextButtonWidget } from "@/utilities/widgets";
 
-export function initErrorHandling(editor: EditorState, dialogState: DialogState) {
+export function initErrorHandling(editor: EditorState, dialogState: DialogState): void {
 	// Graphite error dialog
 	editor.dispatcher.subscribeJsMessage(DisplayError, (displayError) => {
 		const okButton: TextButtonWidget = {
@@ -49,7 +49,7 @@ export function initErrorHandling(editor: EditorState, dialogState: DialogState)
 	});
 }
 
-function githubUrl(panicDetails: string) {
+function githubUrl(panicDetails: string): string {
 	const url = new URL("https://github.com/GraphiteEditor/Graphite/issues/new");
 
 	const body = stripIndents`

frontend/src/lifetime/input.ts

@@ -1,6 +1,6 @@
 import { DialogState } from "@/state/dialog";
-import { FullscreenState } from "@/state/fullscreen";
 import { DocumentsState } from "@/state/documents";
+import { FullscreenState } from "@/state/fullscreen";
 import { EditorState } from "@/state/wasm-loader";
 
 type EventName = keyof HTMLElementEventMap | keyof WindowEventHandlersEventMap;
@@ -9,20 +9,21 @@ interface EventListenerTarget {
 	removeEventListener: typeof window.removeEventListener;
 }
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createInputManager(editor: EditorState, container: HTMLElement, dialog: DialogState, document: DocumentsState, fullscreen: FullscreenState) {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const listeners: { target: EventListenerTarget; eventName: EventName; action: (event: any) => void; options?: boolean | AddEventListenerOptions }[] = [
-		{ target: window, eventName: "resize", action: () => onWindowResize(container) },
-		{ target: window, eventName: "beforeunload", action: (e) => onBeforeUnload(e) },
-		{ target: window.document, eventName: "contextmenu", action: (e) => e.preventDefault() },
-		{ target: window.document, eventName: "fullscreenchange", action: () => fullscreen.fullscreenModeChanged() },
-		{ target: window, eventName: "keyup", action: (e) => onKeyUp(e) },
-		{ target: window, eventName: "keydown", action: (e) => onKeyDown(e) },
-		{ target: window, eventName: "pointermove", action: (e) => onPointerMove(e) },
-		{ target: window, eventName: "pointerdown", action: (e) => onPointerDown(e) },
-		{ target: window, eventName: "pointerup", action: (e) => onPointerUp(e) },
-		{ target: window, eventName: "mousedown", action: (e) => onMouseDown(e) },
-		{ target: window, eventName: "wheel", action: (e) => onMouseScroll(e), options: { passive: false } },
+		{ target: window, eventName: "resize", action: (): void => onWindowResize(container) },
+		{ target: window, eventName: "beforeunload", action: (e: BeforeUnloadEvent): void => onBeforeUnload(e) },
+		{ target: window.document, eventName: "contextmenu", action: (e: MouseEvent): void => e.preventDefault() },
+		{ target: window.document, eventName: "fullscreenchange", action: (): void => fullscreen.fullscreenModeChanged() },
+		{ target: window, eventName: "keyup", action: (e: KeyboardEvent): void => onKeyUp(e) },
+		{ target: window, eventName: "keydown", action: (e: KeyboardEvent): void => onKeyDown(e) },
+		{ target: window, eventName: "pointermove", action: (e: PointerEvent): void => onPointerMove(e) },
+		{ target: window, eventName: "pointerdown", action: (e: PointerEvent): void => onPointerDown(e) },
+		{ target: window, eventName: "pointerup", action: (e: PointerEvent): void => onPointerUp(e) },
+		{ target: window, eventName: "mousedown", action: (e: MouseEvent): void => onMouseDown(e) },
+		{ target: window, eventName: "wheel", action: (e: WheelEvent): void => onMouseScroll(e), options: { passive: false } },
 	];
 
 	let viewportPointerInteractionOngoing = false;
@@ -60,7 +61,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 		return true;
 	};
 
-	const onKeyDown = (e: KeyboardEvent) => {
+	const onKeyDown = (e: KeyboardEvent): void => {
 		const key = getLatinKey(e);
 		if (!key) return;
 
@@ -82,7 +83,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 		}
 	};
 
-	const onKeyUp = (e: KeyboardEvent) => {
+	const onKeyUp = (e: KeyboardEvent): void => {
 		const key = getLatinKey(e);
 		if (!key) return;
 
@@ -95,14 +96,14 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 
 	// Pointer events
 
-	const onPointerMove = (e: PointerEvent) => {
+	const onPointerMove = (e: PointerEvent): void => {
 		if (!e.buttons) viewportPointerInteractionOngoing = false;
 
 		const modifiers = makeModifiersBitfield(e);
 		editor.instance.on_mouse_move(e.clientX, e.clientY, e.buttons, modifiers);
 	};
 
-	const onPointerDown = (e: PointerEvent) => {
+	const onPointerDown = (e: PointerEvent): void => {
 		const { target } = e;
 		const inCanvas = target instanceof Element && target.closest(".canvas");
 		const inDialog = target instanceof Element && target.closest(".dialog-modal .floating-menu-content");
@@ -121,7 +122,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 		}
 	};
 
-	const onPointerUp = (e: PointerEvent) => {
+	const onPointerUp = (e: PointerEvent): void => {
 		if (!e.buttons) viewportPointerInteractionOngoing = false;
 
 		const modifiers = makeModifiersBitfield(e);
@@ -130,13 +131,13 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 
 	// Mouse events
 
-	const onMouseDown = (e: MouseEvent) => {
+	const onMouseDown = (e: MouseEvent): void => {
 		// Block middle mouse button auto-scroll mode (the circlar widget that appears and allows quick scrolling by moving the cursor above or below it)
 		// This has to be in `mousedown`, not `pointerdown`, to avoid blocking Vue's middle click detection on HTML elements
 		if (e.button === 1) e.preventDefault();
 	};
 
-	const onMouseScroll = (e: WheelEvent) => {
+	const onMouseScroll = (e: WheelEvent): void => {
 		const { target } = e;
 		const inCanvas = target instanceof Element && target.closest(".canvas");
 
@@ -155,7 +156,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 
 	// Window events
 
-	const onWindowResize = (container: HTMLElement) => {
+	const onWindowResize = (container: HTMLElement): void => {
 		const viewports = Array.from(container.querySelectorAll(".canvas"));
 		const boundsOfViewports = viewports.map((canvas) => {
 			const bounds = canvas.getBoundingClientRect();
@@ -168,7 +169,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 		if (boundsOfViewports.length > 0) editor.instance.bounds_of_viewports(data);
 	};
 
-	const onBeforeUnload = (e: BeforeUnloadEvent) => {
+	const onBeforeUnload = (e: BeforeUnloadEvent): void => {
 		const activeDocument = document.state.documents[document.state.activeDocumentIndex];
 		if (!activeDocument.is_saved) editor.instance.trigger_auto_save(activeDocument.id);
 
@@ -187,11 +188,11 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 
 	// Event bindings
 
-	const addListeners = () => {
+	const addListeners = (): void => {
 		listeners.forEach(({ target, eventName, action, options }) => target.addEventListener(eventName, action, options));
 	};
 
-	const removeListeners = () => {
+	const removeListeners = (): void => {
 		listeners.forEach(({ target, eventName, action }) => target.removeEventListener(eventName, action));
 	};
 

frontend/src/main.ts

@@ -9,7 +9,7 @@ import { initWasm } from "@/state/wasm-loader";
 
 import App from "@/App.vue";
 
-(async () => {
+(async (): Promise<void> => {
 	// Initialize the WASM editor backend
 	await initWasm();
 

frontend/src/state/dialog.ts

@@ -1,10 +1,11 @@
 import { reactive, readonly } from "vue";
 
-import { TextButtonWidget } from "@/components/widgets/widgets";
-import { EditorState } from "@/state/wasm-loader";
 import { DisplayAboutGraphiteDialog } from "@/dispatcher/js-messages";
+import { EditorState } from "@/state/wasm-loader";
 import { stripIndents } from "@/utilities/strip-indents";
+import { TextButtonWidget } from "@/utilities/widgets";
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createDialogState(editor: EditorState) {
 	const state = reactive({
 		visible: false,
@@ -14,7 +15,7 @@ export function createDialogState(editor: EditorState) {
 		buttons: [] as TextButtonWidget[],
 	});
 
-	const createDialog = (icon: string, heading: string, details: string, buttons: TextButtonWidget[]) => {
+	const createDialog = (icon: string, heading: string, details: string, buttons: TextButtonWidget[]): void => {
 		state.visible = true;
 		state.icon = icon;
 		state.heading = heading;
@@ -22,11 +23,11 @@ export function createDialogState(editor: EditorState) {
 		state.buttons = buttons;
 	};
 
-	const dismissDialog = () => {
+	const dismissDialog = (): void => {
 		state.visible = false;
 	};
 
-	const submitDialog = () => {
+	const submitDialog = (): void => {
 		const firstEmphasizedButton = state.buttons.find((button) => button.props.emphasized && button.callback);
 		if (firstEmphasizedButton) {
 			// If statement satisfies TypeScript
@@ -38,7 +39,7 @@ export function createDialogState(editor: EditorState) {
 		return state.visible;
 	};
 
-	const comingSoon = (issueNumber?: number) => {
+	const comingSoon = (issueNumber?: number): void => {
 		const bugMessage = `— but you can help add it!\nSee issue #${issueNumber} on GitHub.`;
 		const details = `This feature is not implemented yet${issueNumber ? bugMessage : ""}`;
 
@@ -58,7 +59,7 @@ export function createDialogState(editor: EditorState) {
 		createDialog("Warning", "Coming soon", details, buttons);
 	};
 
-	const onAboutHandler = () => {
+	const onAboutHandler = (): void => {
 		const date = new Date(process.env.VUE_APP_COMMIT_DATE || "");
 		const dateString = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
 		const timeString = `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
@@ -80,22 +81,22 @@ export function createDialogState(editor: EditorState) {
 		const buttons: TextButtonWidget[] = [
 			{
 				kind: "TextButton",
-				callback: () => window.open("https://www.graphite.design", "_blank"),
+				callback: (): unknown => window.open("https://www.graphite.design", "_blank"),
 				props: { label: "Website", emphasized: false, minWidth: 0 },
 			},
 			{
 				kind: "TextButton",
-				callback: () => window.open("https://github.com/GraphiteEditor/Graphite/graphs/contributors", "_blank"),
+				callback: (): unknown => window.open("https://github.com/GraphiteEditor/Graphite/graphs/contributors", "_blank"),
 				props: { label: "Credits", emphasized: false, minWidth: 0 },
 			},
 			{
 				kind: "TextButton",
-				callback: () => window.open("https://raw.githubusercontent.com/GraphiteEditor/Graphite/master/LICENSE.txt", "_blank"),
+				callback: (): unknown => window.open("https://raw.githubusercontent.com/GraphiteEditor/Graphite/master/LICENSE.txt", "_blank"),
 				props: { label: "License", emphasized: false, minWidth: 0 },
 			},
 			{
 				kind: "TextButton",
-				callback: () => window.open("/third-party-licenses.txt", "_blank"),
+				callback: (): unknown => window.open("/third-party-licenses.txt", "_blank"),
 				props: { label: "Third-Party Licenses", emphasized: false, minWidth: 0 },
 			},
 		];

frontend/src/state/documents.ts

@@ -1,9 +1,6 @@
 /* eslint-disable max-classes-per-file */
 import { reactive, readonly } from "vue";
 
-import { DialogState } from "@/state/dialog";
-import { download, upload } from "@/utilities/files";
-import { EditorState } from "@/state/wasm-loader";
 import {
 	DisplayConfirmationToCloseAllDocuments,
 	DisplayConfirmationToCloseDocument,
@@ -14,7 +11,11 @@ import {
 	SetActiveDocument,
 	UpdateOpenDocumentsList,
 } from "@/dispatcher/js-messages";
+import { DialogState } from "@/state/dialog";
+import { EditorState } from "@/state/wasm-loader";
+import { download, upload } from "@/utilities/files";
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createDocumentsState(editor: EditorState, dialogState: DialogState) {
 	const state = reactive({
 		unsaved: false,
@@ -22,7 +23,7 @@ export function createDocumentsState(editor: EditorState, dialogState: DialogSta
 		activeDocumentIndex: 0,
 	});
 
-	const closeDocumentWithConfirmation = async (documentId: BigInt) => {
+	const closeDocumentWithConfirmation = async (documentId: BigInt): Promise<void> => {
 		// Assume we receive a correct document_id
 		const targetDocument = state.documents.find((doc) => doc.id === documentId) as FrontendDocumentDetails;
 		const tabLabel = targetDocument.displayName;
@@ -31,7 +32,7 @@ export function createDocumentsState(editor: EditorState, dialogState: DialogSta
 		dialogState.createDialog("File", "Save changes before closing?", tabLabel, [
 			{
 				kind: "TextButton",
-				callback: async () => {
+				callback: async (): Promise<void> => {
 					editor.instance.save_document();
 					dialogState.dismissDialog();
 				},
@@ -39,7 +40,7 @@ export function createDocumentsState(editor: EditorState, dialogState: DialogSta
 			},
 			{
 				kind: "TextButton",
-				callback: async () => {
+				callback: async (): Promise<void> => {
 					editor.instance.close_document(targetDocument.id);
 					dialogState.dismissDialog();
 				},
@@ -47,7 +48,7 @@ export function createDocumentsState(editor: EditorState, dialogState: DialogSta
 			},
 			{
 				kind: "TextButton",
-				callback: async () => {
+				callback: async (): Promise<void> => {
 					dialogState.dismissDialog();
 				},
 				props: { label: "Cancel", minWidth: 96 },
@@ -55,11 +56,11 @@ export function createDocumentsState(editor: EditorState, dialogState: DialogSta
 		]);
 	};
 
-	const closeAllDocumentsWithConfirmation = () => {
+	const closeAllDocumentsWithConfirmation = (): void => {
 		dialogState.createDialog("Copy", "Close all documents?", "Unsaved work will be lost!", [
 			{
 				kind: "TextButton",
-				callback: () => {
+				callback: (): void => {
 					editor.instance.close_all_documents();
 					dialogState.dismissDialog();
 				},
@@ -67,7 +68,7 @@ export function createDocumentsState(editor: EditorState, dialogState: DialogSta
 			},
 			{
 				kind: "TextButton",
-				callback: () => {
+				callback: (): void => {
 					dialogState.dismissDialog();
 				},
 				props: { label: "Cancel", minWidth: 96 },

frontend/src/state/fullscreen.ts

@@ -1,12 +1,13 @@
 import { reactive, readonly } from "vue";
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createFullscreenState() {
 	const state = reactive({
 		windowFullscreen: false,
 		keyboardLocked: false,
 	});
 
-	const fullscreenModeChanged = () => {
+	const fullscreenModeChanged = (): void => {
 		state.windowFullscreen = Boolean(document.fullscreenElement);
 		if (!state.windowFullscreen) state.keyboardLocked = false;
 	};
@@ -15,7 +16,7 @@ export function createFullscreenState() {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const keyboardLockApiSupported: Readonly<boolean> = "keyboard" in navigator && "lock" in (navigator as any).keyboard;
 
-	const enterFullscreen = async () => {
+	const enterFullscreen = async (): Promise<void> => {
 		await document.documentElement.requestFullscreen();
 
 		if (keyboardLockApiSupported) {
@@ -26,11 +27,11 @@ export function createFullscreenState() {
 	};
 
 	// eslint-disable-next-line class-methods-use-this
-	const exitFullscreen = async () => {
+	const exitFullscreen = async (): Promise<void> => {
 		await document.exitFullscreen();
 	};
 
-	const toggleFullscreen = async () => {
+	const toggleFullscreen = async (): Promise<void> => {
 		if (state.windowFullscreen) await exitFullscreen();
 		else await enterFullscreen();
 	};

frontend/src/state/wasm-loader.ts

@@ -7,7 +7,7 @@ export type WasmInstance = typeof import("@/../wasm/pkg");
 export type RustEditorInstance = InstanceType<WasmInstance["JsEditorHandle"]>;
 
 let wasmImport: WasmInstance | null = null;
-export async function initWasm() {
+export async function initWasm(): Promise<void> {
 	if (wasmImport !== null) return;
 
 	// Separating in two lines satisfies typescript when used below
@@ -32,7 +32,7 @@ function panicProxy<T extends object>(module: T): T {
 			// Special handling to wrap the return of a constructor in the proxy
 			const isClass = isFunction && /^\s*class\s+/.test(targetValue.toString());
 			if (isClass) {
-				return function (...args: unknown[]) {
+				return function (...args: unknown[]): unknown {
 					// eslint-disable-next-line new-cap
 					const result = new targetValue(...args);
 					return panicProxy(result);
@@ -40,7 +40,7 @@ function panicProxy<T extends object>(module: T): T {
 			}
 
 			// Replace the original function with a wrapper function that runs the original in a try-catch block
-			return function (...args: unknown[]) {
+			return function (...args: unknown[]): unknown {
 				let result;
 				try {
 					// @ts-expect-error TypeScript does not know what `this` is, since it should be able to be anything
@@ -57,16 +57,17 @@ function panicProxy<T extends object>(module: T): T {
 	return new Proxy<T>(module, proxyHandler);
 }
 
-function getWasmInstance() {
+function getWasmInstance(): WasmInstance {
 	if (wasmImport) return wasmImport;
 	throw new Error("Editor WASM backend was not initialized at application startup");
 }
 
-export function createEditorState() {
+type CreateEditorStateType = { dispatcher: ReturnType<typeof createJsDispatcher>; rawWasm: WasmInstance; instance: RustEditorInstance };
+export function createEditorState(): CreateEditorStateType {
 	const dispatcher = createJsDispatcher();
 	const rawWasm = getWasmInstance();
 
-	const rustCallback = (messageType: JsMessageType, data: Record<string, unknown>) => {
+	const rustCallback = (messageType: JsMessageType, data: Record<string, unknown>): void => {
 		dispatcher.handleJsMessage(messageType, data, rawWasm, instance);
 	};
 

frontend/src/utilities/color.ts

@@ -1,44 +1,36 @@
-export interface RGB {
-	r: number;
-	g: number;
-	b: number;
-	a: number;
-}
+import { HSVA, RGBA } from "@/dispatcher/js-messages";
 
-export interface HSV {
-	h: number;
-	s: number;
-	v: number;
-	a: number;
-}
+export function hsvaToRgba(hsva: HSVA): RGBA {
+	const { h, s, v, a } = hsva;
+
+	const hue = h * 6;
+	const hueIntegerPart = Math.floor(hue);
+	const hueFractionalPart = hue - hueIntegerPart;
+	const hueIntegerMod6 = hueIntegerPart % 6;
 
-export function hsvToRgb(hsv: HSV): RGB {
-	let { h } = hsv;
-	const { s, v } = hsv;
-	h *= 6;
-	const i = Math.floor(h);
-	const f = h - i;
 	const p = v * (1 - s);
-	const q = v * (1 - f * s);
-	const t = v * (1 - (1 - f) * s);
-	const mod = i % 6;
-	const r = Math.round([v, q, p, p, t, v][mod]);
-	const g = Math.round([t, v, v, q, p, p][mod]);
-	const b = Math.round([p, p, t, v, v, q][mod]);
-	return { r, g, b, a: hsv.a };
+	const q = v * (1 - hueFractionalPart * s);
+	const t = v * (1 - (1 - hueFractionalPart) * s);
+
+	const r = Math.round([v, q, p, p, t, v][hueIntegerMod6]);
+	const g = Math.round([t, v, v, q, p, p][hueIntegerMod6]);
+	const b = Math.round([p, p, t, v, v, q][hueIntegerMod6]);
+
+	return { r, g, b, a };
 }
 
-export function rgbToHsv(rgb: RGB) {
-	const { r, g, b } = rgb;
+export function rgbaToHsva(rgba: RGBA): HSVA {
+	const { r, g, b, a } = rgba;
+
 	const max = Math.max(r, g, b);
 	const min = Math.min(r, g, b);
+
 	const d = max - min;
 	const s = max === 0 ? 0 : d / max;
 	const v = max;
+
 	let h = 0;
-	if (max === min) {
-		h = 0;
-	} else {
+	if (max !== min) {
 		switch (max) {
 			case r:
 				h = (g - b) / d + (g < b ? 6 : 0);
@@ -53,27 +45,14 @@ export function rgbToHsv(rgb: RGB) {
 		}
 		h /= 6;
 	}
-	return { h, s, v, a: rgb.a };
+
+	return { h, s, v, a };
 }
 
-export function rgbToDecimalRgb(rgb: RGB) {
-	const r = rgb.r / 255;
-	const g = rgb.g / 255;
-	const b = rgb.b / 255;
-	return { r, g, b, a: rgb.a };
-}
+export function rgbaToDecimalRgba(rgba: RGBA): RGBA {
+	const r = rgba.r / 255;
+	const g = rgba.g / 255;
+	const b = rgba.b / 255;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isRGB(data: any): data is RGB {
-	if (typeof data !== "object" || data === null) return false;
-	return (
-		typeof data.r === "number" &&
-		!Number.isNaN(data.r) &&
-		typeof data.g === "number" &&
-		!Number.isNaN(data.g) &&
-		typeof data.b === "number" &&
-		!Number.isNaN(data.b) &&
-		typeof data.a === "number" &&
-		!Number.isNaN(data.a)
-	);
+	return { r, g, b, a: rgba.a };
 }

frontend/src/utilities/files.ts

@@ -1,4 +1,4 @@
-export function download(filename: string, fileData: string) {
+export function download(filename: string, fileData: string): void {
 	const type = filename.endsWith(".svg") ? "image/svg+xml;charset=utf-8" : "text/plain;charset=utf-8";
 	const blob = new Blob([fileData], { type });
 	const url = URL.createObjectURL(blob);
@@ -11,7 +11,7 @@ export function download(filename: string, fileData: string) {
 	element.click();
 }
 
-export async function upload(acceptedEextensions: string) {
+export async function upload(acceptedEextensions: string): Promise<{ filename: string; content: string }> {
 	return new Promise<{ filename: string; content: string }>((resolve, _) => {
 		const element = document.createElement("input");
 		element.type = "file";

frontend/src/utilities/math.ts

@@ -1,3 +1,3 @@
-export function clamp(value: number, min = 0, max = 1) {
+export function clamp(value: number, min = 0, max = 1): number {
 	return Math.max(min, Math.min(value, max));
 }

frontend/src/utilities/strip-indents.ts

@@ -1,4 +1,4 @@
-export function stripIndents(stringPieces: TemplateStringsArray, ...substitutions: unknown[]) {
+export function stripIndents(stringPieces: TemplateStringsArray, ...substitutions: unknown[]): string {
 	const interleavedSubstitutions = stringPieces.flatMap((stringPiece, index) => [stringPiece, substitutions[index] !== undefined ? substitutions[index] : ""]);
 	const stringLines = interleavedSubstitutions.join("").split("\n");
 

frontend/src/utilities/widgets.ts

@@ -74,6 +74,9 @@ export interface NumberInputProps {
 }
 
 // Separator
+export type SeparatorDirection = "Horizontal" | "Vertical";
+export type SeparatorType = "Related" | "Unrelated" | "Section" | "List";
+
 export interface SeparatorWidget {
 	kind: "Separator";
 	props: SeparatorProps;
@@ -83,15 +86,3 @@ export interface SeparatorProps {
 	direction?: SeparatorDirection;
 	type?: SeparatorType;
 }
-
-export enum SeparatorDirection {
-	"Horizontal" = "Horizontal",
-	"Vertical" = "Vertical",
-}
-
-export enum SeparatorType {
-	"Related" = "Related",
-	"Unrelated" = "Unrelated",
-	"Section" = "Section",
-	"List" = "List",
-}

frontend/vue.config.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires, no-console */
-const path = require("path");
 const { execSync, spawnSync } = require("child_process");
+const path = require("path");
 
 const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 const LicenseCheckerWebpackPlugin = require("license-checker-webpack-plugin");

frontend/wasm/src/api.rs

@@ -32,6 +32,7 @@ pub struct JsEditorHandle {
 }
 
 #[wasm_bindgen]
+#[allow(clippy::too_many_arguments)]
 impl JsEditorHandle {
 	#[wasm_bindgen(constructor)]
 	pub fn new(handle_response: js_sys::Function) -> Self {

frontend/wasm/tests/web.rs

@@ -4,7 +4,7 @@ use wasm_bindgen_test::*;
 
 wasm_bindgen_test_configure!(run_in_browser);
 
-#[wasm_bindgen_test]
-fn pass() {
-	assert_eq!(1 + 1, 2);
-}
+// #[wasm_bindgen_test]
+// fn pass() {
+// 	assert_eq!(1 + 1, 2);
+// }

graphene/src/consts.rs

@@ -1,7 +1,7 @@
 use crate::color::Color;
 
 // Document
-pub const GRAPHENE_DOCUMENT_VERSION: &'static str = "0.0.1";
+pub const GRAPHENE_DOCUMENT_VERSION: &str = "0.0.1";
 
 // RENDERING
 pub const LAYER_OUTLINE_STROKE_COLOR: Color = Color::BLACK;

graphene/src/document.rs

@@ -157,15 +157,11 @@ impl Document {
 			let index_a = *indices_for_path_a.get(i).unwrap_or(&usize::MAX) as i32;
 			let index_b = *indices_for_path_b.get(i).unwrap_or(&usize::MAX) as i32;
 
-			// index_a == index_b -> true, this means the "2" indices being compared are within the same folder
-			// eg -> [2, X] == [2, X] since we are only comparing the "2" in this iteration
-			// Continue onto comparing the X indices.
-			if index_a == index_b {
-				continue;
+			// At the point at which the two paths first differ, compare to see which is closer to the root
+			if index_a != index_b {
+				// If index_a is smaller, index_a is closer to the root
+				return index_a < index_b;
 			}
-
-			// If index_a is smaller, index_a is closer to the root
-			return index_a < index_b;
 		}
 
 		false
@@ -187,7 +183,7 @@ impl Document {
 		let layer_vs_a = self.layer_closer_to_root(target, path_a);
 		let layer_vs_b = self.layer_closer_to_root(target, path_b);
 
-		// To be inbetween you need to be above A and below B or vice versa
+		// To be in-between you need to be above A and below B or vice versa
 		layer_vs_a != layer_vs_b
 	}
 

graphene/src/layers/mod.rs

@@ -18,18 +18,11 @@ use serde::{Deserialize, Serialize};
 
 use std::fmt::Write;
 
-pub trait LayerData {
-	fn render(&mut self, svg: &mut String, transforms: &mut Vec<glam::DAffine2>, view_mode: ViewMode);
-	fn intersects_quad(&self, quad: Quad, path: &mut Vec<LayerId>, intersections: &mut Vec<Vec<LayerId>>);
-	fn bounding_box(&self, transform: glam::DAffine2) -> Option<[DVec2; 2]>;
-}
-
 #[derive(Debug, Clone, PartialEq, Deserialize, Serialize)]
 pub enum LayerDataType {
 	Folder(Folder),
 	Shape(Shape),
 }
-
 impl LayerDataType {
 	pub fn inner(&self) -> &dyn LayerData {
 		match self {
@@ -46,6 +39,12 @@ impl LayerDataType {
 	}
 }
 
+pub trait LayerData {
+	fn render(&mut self, svg: &mut String, transforms: &mut Vec<glam::DAffine2>, view_mode: ViewMode);
+	fn intersects_quad(&self, quad: Quad, path: &mut Vec<LayerId>, intersections: &mut Vec<Vec<LayerId>>);
+	fn bounding_box(&self, transform: glam::DAffine2) -> Option<[DVec2; 2]>;
+}
+
 impl LayerData for LayerDataType {
 	fn render(&mut self, svg: &mut String, transforms: &mut Vec<glam::DAffine2>, view_mode: ViewMode) {
 		self.inner_mut().render(svg, transforms, view_mode)

proc-macros/src/lib.rs

@@ -19,12 +19,12 @@ use syn::parse_macro_input;
 ///
 /// This derive macro is enum-only.
 ///
-/// The discriminant enum is a copy of the input enum with all fields of every variant removed.\
-/// *) The exception to that rule is the `#[child]` attribute
+/// The discriminant enum is a copy of the input enum with all fields of every variant removed.
+/// The exception to that rule is the `#[child]` attribute.
 ///
 /// # Helper attributes
 /// - `#[sub_discriminant]`: only usable on variants with a single field; instead of no fields, the discriminant of the single field will be included in the discriminant,
-/// 	acting as a sub-discriminant.
+///     acting as a sub-discriminant.
 /// - `#[discriminant_attr(…)]`: usable on the enum itself or on any variant; applies `#[…]` in its place on the discriminant.
 ///
 /// # Attributes on the Discriminant
@@ -40,20 +40,20 @@ use syn::parse_macro_input;
 /// #[derive(ToDiscriminant)]
 /// #[discriminant_attr(derive(Debug, Eq, PartialEq))]
 /// pub enum EnumA {
-/// 	A(u8),
-/// 	#[sub_discriminant]
-/// 	B(EnumB)
+///     A(u8),
+///     #[sub_discriminant]
+///     B(EnumB)
 /// }
 ///
 /// #[derive(ToDiscriminant)]
 /// #[discriminant_attr(derive(Debug, Eq, PartialEq))]
 /// #[discriminant_attr(repr(u8))]
 /// pub enum EnumB {
-/// 	Foo(u8),
-/// 	Bar(String),
-/// 	#[cfg(feature = "some-feature")]
-/// 	#[discriminant_attr(cfg(feature = "some-feature"))]
-/// 	WindowsBar(OsString)
+///     Foo(u8),
+///     Bar(String),
+///     #[cfg(feature = "some-feature")]
+///     #[discriminant_attr(cfg(feature = "some-feature"))]
+///     WindowsBar(OsString)
 /// }
 ///
 /// let a = EnumA::A(1);
@@ -73,7 +73,7 @@ pub fn derive_discriminant(input_item: TokenStream) -> TokenStream {
 ///
 /// # Helper Attributes
 /// - `#[parent(<Type>, <Expr>)]` (**required**): declare the parent type (`<Type>`)
-/// 	and a function (`<Expr>`, has to evaluate to a single arg function) for converting a value of this type to the parent type
+///     and a function (`<Expr>`, has to evaluate to a single arg function) for converting a value of this type to the parent type
 /// - `#[parent_is_top]`: Denote that the parent type has no further parent type (this is required because otherwise the `From` impls for parent and top parent would overlap)
 ///
 /// # Example
@@ -85,23 +85,23 @@ pub fn derive_discriminant(input_item: TokenStream) -> TokenStream {
 /// struct A { u: u8, b: B };
 ///
 /// impl A {
-/// 	pub fn from_b(b: B) -> Self {
-/// 		Self { u: 7, b }
-/// 	}
+///     pub fn from_b(b: B) -> Self {
+///         Self { u: 7, b }
+///     }
 /// }
 ///
 /// impl TransitiveChild for A {
-/// 	type Parent = Self;
-/// 	type TopParent = Self;
+///     type Parent = Self;
+///     type TopParent = Self;
 /// }
 ///
 /// #[derive(TransitiveChild, Debug, Eq, PartialEq)]
 /// #[parent(A, A::from_b)]
 /// #[parent_is_top]
 /// enum B {
-/// 	Foo,
-/// 	Bar,
-/// 	Child(C)
+///     Foo,
+///     Bar,
+///     Child(C)
 /// }
 ///
 /// #[derive(TransitiveChild, Debug, Eq, PartialEq)]
@@ -134,41 +134,41 @@ pub fn derive_transitive_child(input_item: TokenStream) -> TokenStream {
 ///
 /// #[derive(AsMessage)]
 /// pub enum TopMessage {
-/// 	A(u8),
-/// 	B(u16),
-/// 	#[child]
-/// 	C(MessageC),
-/// 	#[child]
-/// 	D(MessageD)
+///     A(u8),
+///     B(u16),
+///     #[child]
+///     C(MessageC),
+///     #[child]
+///     D(MessageD)
 /// }
 ///
 /// impl TransitiveChild for TopMessage {
-/// 	type Parent = Self;
-/// 	type TopParent = Self;
+///     type Parent = Self;
+///     type TopParent = Self;
 /// }
 ///
 /// #[derive(TransitiveChild, AsMessage, Copy, Clone)]
 /// #[parent(TopMessage, TopMessage::C)]
 /// #[parent_is_top]
 /// pub enum MessageC {
-/// 	X1,
-/// 	X2
+///     X1,
+///     X2
 /// }
 ///
 /// #[derive(TransitiveChild, AsMessage, Copy, Clone)]
 /// #[parent(TopMessage, TopMessage::D)]
 /// #[parent_is_top]
 /// pub enum MessageD {
-/// 	Y1,
-/// 	#[child]
-/// 	Y2(MessageE)
+///     Y1,
+///     #[child]
+///     Y2(MessageE)
 /// }
 ///
 /// #[derive(TransitiveChild, AsMessage, Copy, Clone)]
 /// #[parent(MessageD, MessageD::Y2)]
 /// pub enum MessageE {
-/// 	Alpha,
-/// 	Beta
+///     Alpha,
+///     Beta
 /// }
 ///
 /// let c = MessageC::X1;
@@ -195,18 +195,18 @@ pub fn derive_message(input_item: TokenStream) -> TokenStream {
 /// # Usage
 /// There are three possible argument syntaxes you can use:
 /// 1. no arguments: this is for the top-level message enum. It derives `ToDiscriminant`, `AsMessage` on the discriminant, and implements `TransitiveChild` on both
-/// 	(the parent and top parent being the respective types themselves).
-/// 	It also derives the following `std` traits on the discriminant: `Debug, Copy, Clone, PartialEq, Eq, Hash`.
+///     (the parent and top parent being the respective types themselves).
+///     It also derives the following `std` traits on the discriminant: `Debug, Copy, Clone, PartialEq, Eq, Hash`.
 /// 2. two arguments: this is for message enums whose direct parent is the top level message enum. The syntax is `#[impl_message(<Type>, <Ident>)]`,
-/// 	where `<Type>` is the parent message type and `<Ident>` is the identifier of the variant used to construct this child.
-/// 	It derives `ToDiscriminant`, `AsMessage` on the discriminant, and `TransitiveChild` on both (adding `#[parent_is_top]` to both).
-/// 	It also derives the following `std` traits on the discriminant: `Debug, Copy, Clone, PartialEq, Eq, Hash`.
+///     where `<Type>` is the parent message type and `<Ident>` is the identifier of the variant used to construct this child.
+///     It derives `ToDiscriminant`, `AsMessage` on the discriminant, and `TransitiveChild` on both (adding `#[parent_is_top]` to both).
+///     It also derives the following `std` traits on the discriminant: `Debug, Copy, Clone, PartialEq, Eq, Hash`.
 /// 3. three arguments: this is for all other message enums that are transitive children of the top level message enum. The syntax is
-/// 	`#[impl_message(<Type>, <Type>, <Ident>)]`, where the first `<Type>` is the top parent message type, the second `<Type>` is the parent message type
-/// 	and `<Ident>` is the identifier of the variant used to construct this child.
-/// 	It derives `ToDiscriminant`, `AsMessage` on the discriminant, and `TransitiveChild` on both.
-/// 	It also derives the following `std` traits on the discriminant: `Debug, Copy, Clone, PartialEq, Eq, Hash`.
-/// 	**This third option will likely change in the future**
+///     `#[impl_message(<Type>, <Type>, <Ident>)]`, where the first `<Type>` is the top parent message type, the second `<Type>` is the parent message type
+///     and `<Ident>` is the identifier of the variant used to construct this child.
+///     It derives `ToDiscriminant`, `AsMessage` on the discriminant, and `TransitiveChild` on both.
+///     It also derives the following `std` traits on the discriminant: `Debug, Copy, Clone, PartialEq, Eq, Hash`.
+///     **This third option will likely change in the future**
 #[proc_macro_attribute]
 pub fn impl_message(attr: TokenStream, input_item: TokenStream) -> TokenStream {
 	TokenStream::from(combined_message_attrs_impl(attr.into(), input_item.into()).unwrap_or_else(|err| err.to_compile_error()))
@@ -221,12 +221,12 @@ pub fn impl_message(attr: TokenStream, input_item: TokenStream) -> TokenStream {
 ///
 /// #[derive(Hint)]
 /// pub enum StateMachine {
-/// 	#[hint(rmb = "foo", lmb = "bar")]
-/// 	Ready,
-/// 	#[hint(alt = "baz")]
-/// 	RMBDown,
-/// 	// no hint (also ok)
-/// 	LMBDown
+///     #[hint(rmb = "foo", lmb = "bar")]
+///     Ready,
+///     #[hint(alt = "baz")]
+///     RMBDown,
+///     // no hint (also ok)
+///     LMBDown
 /// }
 /// ```
 #[proc_macro_derive(Hint, attributes(hint))]
@@ -239,30 +239,30 @@ pub fn derive_hint(input_item: TokenStream) -> TokenStream {
 /// # Example
 /// ```ignore
 /// match (example_tool_state, event) {
-/// 	(ToolState::Ready, Event::MouseDown(mouse_state)) if *mouse_state == MouseState::Left => {
-/// 		#[edge("LMB Down")]
-/// 		ToolState::Pending
-/// 	}
-/// 	(SelectToolState::Pending, Event::MouseUp(mouse_state)) if *mouse_state == MouseState::Left => {
-/// 		#[edge("LMB Up: Select Object")]
-/// 		SelectToolState::Ready
-/// 	}
-/// 	(SelectToolState::Pending, Event::MouseMove(x,y)) => {
-/// 		#[edge("Mouse Move")]
-/// 		SelectToolState::TransformSelected
-/// 	}
-/// 	(SelectToolState::TransformSelected, Event::MouseMove(x,y)) => {
-/// 		#[egde("Mouse Move")]
-/// 		SelectToolState::TransformSelected
-/// 	}
-/// 	(SelectToolState::TransformSelected, Event::MouseUp(mouse_state)) if *mouse_state == MouseState::Left =>  {
-/// 		#[edge("LMB Up")]
-/// 		SelectToolState::Ready
-/// 	}
-/// 	(state, _) => {
-/// 		// Do nothing
-/// 		state
-/// 	}
+///     (ToolState::Ready, Event::MouseDown(mouse_state)) if *mouse_state == MouseState::Left => {
+///         #[edge("LMB Down")]
+///         ToolState::Pending
+///     }
+///     (SelectToolState::Pending, Event::MouseUp(mouse_state)) if *mouse_state == MouseState::Left => {
+///         #[edge("LMB Up: Select Object")]
+///         SelectToolState::Ready
+///     }
+///     (SelectToolState::Pending, Event::MouseMove(x,y)) => {
+///         #[edge("Mouse Move")]
+///         SelectToolState::TransformSelected
+///     }
+///     (SelectToolState::TransformSelected, Event::MouseMove(x,y)) => {
+///         #[edge("Mouse Move")]
+///         SelectToolState::TransformSelected
+///     }
+///     (SelectToolState::TransformSelected, Event::MouseUp(mouse_state)) if *mouse_state == MouseState::Left => {
+///         #[edge("LMB Up")]
+///         SelectToolState::Ready
+///     }
+///     (state, _) => {
+///         // Do nothing
+///         state
+///     }
 /// }
 /// ```
 #[proc_macro_attribute]