Make the toggle overlays button functional (#484)

* Make the toggle overlays button functional

* Move state from the OverlaysMessageHandler to DocumentMessageHandler

* Code review fixes

editor/src/document/document_message.rs

@@ -91,6 +91,9 @@ pub enum DocumentMessage {
 	SetOpacityForSelectedLayers {
 		opacity: f64,
 	},
+	SetOverlaysVisibility {
+		visible: bool,
+	},
 	SetSelectedLayers {
 		replacement_selected_layers: Vec<Vec<LayerId>>,
 	},

editor/src/document/document_message_handler.rs

@@ -41,6 +41,7 @@ pub struct DocumentMessageHandler {
 	artboard_message_handler: ArtboardMessageHandler,
 	#[serde(skip)]
 	transform_layer_handler: TransformLayerMessageHandler,
+	pub overlays_visible: bool,
 	pub snapping_enabled: bool,
 	pub view_mode: ViewMode,
 	pub version: String,
@@ -61,6 +62,7 @@ impl Default for DocumentMessageHandler {
 			artboard_message_handler: ArtboardMessageHandler::default(),
 			transform_layer_handler: TransformLayerMessageHandler::default(),
 			snapping_enabled: true,
+			overlays_visible: true,
 			view_mode: ViewMode::default(),
 			version: GRAPHITE_DOCUMENT_VERSION.to_string(),
 		}
@@ -703,11 +705,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessorMessageHandler> for Docum
 				responses.push_back(ToolMessage::DocumentIsDirty.into());
 			}
 			Overlays(message) => {
-				self.overlays_message_handler.process_action(
-					message,
-					(Self::layer_metadata_mut_no_borrow_self(&mut self.layer_metadata, &[]), &self.graphene_document, ipp),
-					responses,
-				);
+				self.overlays_message_handler.process_action(message, self.overlays_visible, responses);
 				// responses.push_back(OverlaysMessage::RenderOverlays.into());
 			}
 			Redo => {
@@ -909,6 +907,10 @@ impl MessageHandler<DocumentMessage, &InputPreprocessorMessageHandler> for Docum
 					responses.push_back(DocumentOperation::SetLayerOpacity { path, opacity }.into());
 				}
 			}
+			SetOverlaysVisibility { visible } => {
+				self.overlays_visible = visible;
+				responses.push_back(OverlaysMessage::Rerender.into());
+			}
 			SetSelectedLayers { replacement_selected_layers } => {
 				let selected = self.layer_metadata.iter_mut().filter(|(_, layer_metadata)| layer_metadata.selected);
 				selected.for_each(|(path, layer_metadata)| {

editor/src/document/overlays_message.rs

@@ -10,6 +10,7 @@ use serde::{Deserialize, Serialize};
 pub enum OverlaysMessage {
 	ClearAllOverlays,
 	DispatchOperation(Box<DocumentOperation>),
+	Rerender,
 }
 
 impl From<DocumentOperation> for OverlaysMessage {

editor/src/document/overlays_message_handler.rs

@@ -1,8 +1,5 @@
-use super::layer_panel::LayerMetadata;
-use crate::input::InputPreprocessorMessageHandler;
 use crate::message_prelude::*;
 
-use graphene::document::Document;
 use graphene::document::Document as GrapheneDocument;
 use graphene::layers::style::ViewMode;
 
@@ -11,12 +8,11 @@ pub struct OverlaysMessageHandler {
 	pub overlays_graphene_document: GrapheneDocument,
 }
 
-impl MessageHandler<OverlaysMessage, (&mut LayerMetadata, &Document, &InputPreprocessorMessageHandler)> for OverlaysMessageHandler {
+impl MessageHandler<OverlaysMessage, bool> for OverlaysMessageHandler {
 	#[remain::check]
-	fn process_action(&mut self, message: OverlaysMessage, _data: (&mut LayerMetadata, &Document, &InputPreprocessorMessageHandler), responses: &mut VecDeque<Message>) {
+	fn process_action(&mut self, message: OverlaysMessage, overlays_visible: bool, responses: &mut VecDeque<Message>) {
 		use OverlaysMessage::*;
 
-		// let (layer_metadata, document, ipp) = data;
 		#[remain::sorted]
 		match message {
 			ClearAllOverlays => todo!(),
@@ -24,12 +20,17 @@ impl MessageHandler<OverlaysMessage, (&mut LayerMetadata, &Document, &InputPrepr
 				Ok(_) => (),
 				Err(e) => log::error!("OverlaysError: {:?}", e),
 			},
+			Rerender => (),
 		}
 
 		// Render overlays
 		responses.push_back(
 			FrontendMessage::UpdateDocumentOverlays {
-				svg: self.overlays_graphene_document.render_root(ViewMode::Normal),
+				svg: if overlays_visible {
+					self.overlays_graphene_document.render_root(ViewMode::Normal)
+				} else {
+					String::from("")
+				},
 			}
 			.into(),
 		);

frontend/src/App.vue

@@ -187,6 +187,7 @@ img {
 	justify-content: center;
 	display: flex;
 }
+
 .unsupported-modal {
 	background: var(--color-3-darkgray);
 	border-radius: 4px;
@@ -199,6 +200,7 @@ img {
 		color: var(--color-accent-hover);
 	}
 }
+
 .unsupported-modal-button {
 	flex: 1;
 	background: var(--color-1-nearblack);

frontend/src/components/panels/Document.vue

@@ -10,7 +10,7 @@
 			</div>
 			<div class="spacer"></div>
 			<div class="right side">
-				<OptionalInput v-model:checked="snappingEnabled" @update:checked="(newStatus: boolean) => setSnap(newStatus)" :icon="'Snapping'" title="Snapping" />
+				<OptionalInput v-model:checked="snappingEnabled" @update:checked="(snap: boolean) => setSnapping(snap)" :icon="'Snapping'" title="Snapping" />
 				<PopoverButton>
 					<h3>Snapping</h3>
 					<p>The contents of this popover menu are coming soon</p>
@@ -26,7 +26,7 @@
 
 				<Separator :type="'Unrelated'" />
 
-				<OptionalInput v-model:checked="overlaysEnabled" @update:checked="() => dialog.comingSoon(99)" :icon="'Overlays'" title="Overlays" />
+				<OptionalInput v-model:checked="overlaysEnabled" @update:checked="(visible: boolean) => setOverlaysVisibility(visible)" :icon="'Overlays'" title="Overlays" />
 				<PopoverButton>
 					<h3>Overlays</h3>
 					<p>The contents of this popover menu are coming soon</p>
@@ -283,8 +283,11 @@ import Separator from "@/components/widgets/separators/Separator.vue";
 export default defineComponent({
 	inject: ["editor", "dialog"],
 	methods: {
-		setSnap(newStatus: boolean) {
-			this.editor.instance.set_snapping(newStatus);
+		setSnapping(snap: boolean) {
+			this.editor.instance.set_snapping(snap);
+		},
+		setOverlaysVisibility(visible: boolean) {
+			this.editor.instance.set_overlays_visibility(visible);
 		},
 		setViewMode(newViewMode: string) {
 			this.editor.instance.set_view_mode(newViewMode);

frontend/wasm/src/api.rs

@@ -415,12 +415,18 @@ impl JsEditorHandle {
 		self.dispatch(message);
 	}
 
-	/// Set snapping disabled / enabled
+	/// Set snapping on or off
 	pub fn set_snapping(&self, snap: bool) {
 		let message = DocumentMessage::SetSnapping { snap };
 		self.dispatch(message);
 	}
 
+	/// Set display of overlays on or off
+	pub fn set_overlays_visibility(&self, visible: bool) {
+		let message = DocumentMessage::SetOverlaysVisibility { visible };
+		self.dispatch(message);
+	}
+
 	/// Set the view mode to change the way layers are drawn in the viewport
 	pub fn set_view_mode(&self, view_mode: String) -> Result<(), JsValue> {
 		if let Some(view_mode) = translate_view_mode(view_mode.as_str()) {