Implement outline view mode (#401)

* Created wasm binding to action's of the radio buttons which control the view mode
Added entry to DocumentMessage Enum

* draw in wireframe mode by changing parameters on each shape
added functions/changed behavior to do as above
not working yet
   - newly added shapes should be drawn in wireframe
   - setting fill to "none" on a path does not only draw an outline
      - maybe the stroke width is 0?

* Wire frame view mostly functional for ellipses
   - Need to implement for all shapes
   - BUG: shapes don't immediatley update upon changing view-mode

* Fixed: active document now updates after view mode swap

* The Pros:
   - wire frame mode effects all shapes correctly

The Cons:
   - wire frame mode effects everything, including things that maybe shouldn't be, like select boxes and pen lines

* wire frame view no longer effects overlay layers

* Fixed: While in wireframe view the pen tool will draw regular thickness lines.

* some commenting

* Fixed potential bug:
   In layer/file system with a Folder layer with a sub-layer that is also
   a Folder cache_dirty must be set in order for all shapes to update properly

* refactored code to use ViewMode enum names throughout

* Changed: All wireframe lines are blank
cargo fmt

* Wireframe thickness doesn't change as a result of zooming
   - Added DocumentMessage::ReRenderDocument, which marks layers as dirty and renders with the updated render-string
   - All "zoom" messages in the movement_handler send a re-render message
   - while in wireframe view, the "render-transform" of all shapes includes the root layer transform

Added getter/setter methods for graphene::Document::view_mode

* cargo fmt

* wireframe now has proper thickness after "Zoom Canvas to Fit all" action

* Refactored
   - Changed FrontendMessage::UpdateCanvas to RenderDocument message to allow for lazy evaluation
   - Created DocumentOperation::SetViewMode to be more consistent with existing code
   - removed log statement
   - Added constants for empty fill and thin-black stroke

* cargo fmt

* Removed ReRenderDocument message

* cargo fmt

* Fixes as suggested by TrueDoctor

* clean up merge
cargo fmt

* Refactor:
   moved view_mode to DocumentMessageHandler

* Polishing

* changed those two comments

* Remove unknown todo comment

Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/src/components/panels/Document.vue

@@ -264,6 +264,9 @@ export default defineComponent({
 		setSnap(newStatus: boolean) {
 			this.editor.instance.set_snapping(newStatus);
 		},
+		setViewMode(newViewMode: string) {
+			this.editor.instance.set_view_mode(newViewMode);
+		},
 		viewportResize() {
 			const canvas = this.$refs.canvas as HTMLElement;
 			// Get the width and height rounded up to the nearest even number because resizing is centered and dividing an odd number by 2 for centering causes antialiasing
@@ -358,8 +361,8 @@ export default defineComponent({
 			],
 		];
 		const viewModeEntries: RadioEntries = [
-			{ value: "normal", icon: "ViewModeNormal", tooltip: "View Mode: Normal" },
-			{ value: "outline", icon: "ViewModeOutline", tooltip: "View Mode: Outline", action: () => this.dialog.comingSoon(319) },
+			{ 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) },
 		];
 

frontend/wasm/src/api.rs

@@ -5,16 +5,15 @@
 use std::cell::Cell;
 
 use crate::helpers::Error;
-use crate::type_translators::{translate_blend_mode, translate_key, translate_tool_type};
+use crate::type_translators::{translate_blend_mode, translate_key, translate_tool_type, translate_view_mode};
 use crate::{EDITOR_HAS_CRASHED, EDITOR_INSTANCES};
 use editor::consts::FILE_SAVE_SUFFIX;
 use editor::input::input_preprocessor::ModifierKeys;
 use editor::input::mouse::{EditorMouseState, ScrollDelta, ViewportBounds};
+use editor::message_prelude::*;
 use editor::misc::EditorError;
 use editor::tool::{tool_options::ToolOptions, tools, ToolType};
-use editor::Color;
-use editor::LayerId;
-use editor::{message_prelude::*, Editor};
+use editor::{Color, Editor, LayerId};
 use wasm_bindgen::prelude::*;
 
 // To avoid wasm-bindgen from checking mutable reference issues using WasmRefCell
@@ -379,6 +378,15 @@ impl JsEditorHandle {
 		self.dispatch(message);
 	}
 
+	/// Set the view mode to change the way layers are drawn in the viewport
+	pub fn set_view_mode(&self, new_mode: String) -> Result<(), JsValue> {
+		match translate_view_mode(new_mode.as_str()) {
+			Some(view_mode) => self.dispatch(DocumentMessage::SetViewMode(view_mode)),
+			None => return Err(Error::new("Invalid view mode").into()),
+		};
+		Ok(())
+	}
+
 	/// Sets the zoom to the value
 	pub fn set_canvas_zoom(&self, new_zoom: f64) {
 		let message = MovementMessage::SetCanvasZoom(new_zoom);

frontend/wasm/src/type_translators.rs

@@ -1,7 +1,7 @@
 use crate::helpers::match_string_to_enum;
 use editor::input::keyboard::Key;
 use editor::tool::ToolType;
-use graphene::layers::BlendMode;
+use graphene::layers::{style::ViewMode, BlendMode};
 
 pub fn translate_tool_type(name: &str) -> Option<ToolType> {
 	use ToolType::*;
@@ -126,3 +126,12 @@ pub fn translate_key(name: &str) -> Key {
 		_ => UnknownKey,
 	}
 }
+
+pub fn translate_view_mode(name: &str) -> Option<ViewMode> {
+	Some(match name {
+		"Normal" => ViewMode::Normal,
+		"Outline" => ViewMode::Outline,
+		"Pixels" => ViewMode::Pixels,
+		_ => return None,
+	})
+}