Add the SVG Preview render mode in place of the Vello option in the preferences (#3797)

* Remove Vello from preferences

* Add the Render Mode: SVG Preview radio button

* Remove SVG outline renderer

* Add a tooltip explaination when disabled in unsupported browsers

* Fix Eyedropper tool to support Outline render mode

* Use #[allow(clippy::too_many_arguments)] instead of tuple

* Rerun nodegraph when max render area is changed

---------

Co-authored-by: Dennis Kobert <dennis@kobert.dev>

editor/src/messages/portfolio/document/document_message_handler.rs

@@ -33,6 +33,7 @@ use graphene_std::math::quad::Quad;
 use graphene_std::path_bool::{boolean_intersect, path_bool_lib};
 use graphene_std::raster::BlendMode;
 use graphene_std::raster_types::Raster;
+use graphene_std::render_node::wgpu_available;
 use graphene_std::subpath::Subpath;
 use graphene_std::table::Table;
 use graphene_std::vector::PointId;
@@ -2549,29 +2550,46 @@ impl DocumentMessageHandler {
 				.popover_min_width(Some(320))
 				.widget_instance(),
 			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
-			RadioInput::new(vec![
-				RadioEntryData::new("Normal")
-					.icon("RenderModeNormal")
-					.tooltip_label("Render Mode: Normal")
-					.on_update(|_| DocumentMessage::SetRenderMode { render_mode: RenderMode::Normal }.into()),
-				RadioEntryData::new("Outline")
-					.icon("RenderModeOutline")
-					.tooltip_label("Render Mode: Outline")
-					.on_update(|_| DocumentMessage::SetRenderMode { render_mode: RenderMode::Outline }.into()),
-				// TODO: See issue #320
-				// RadioEntryData::new("PixelPreview")
-				// 	.icon("RenderModePixels")
-				// 	.tooltip_label("Render Mode: Pixel Preview")
-				// 	.on_update(|_| todo!()),
-				// TODO: See issue #1845
-				// RadioEntryData::new("SvgPreview")
-				// 	.icon("RenderModeSvg")
-				// 	.tooltip_label("Render Mode: SVG Preview")
-				// 	.on_update(|_| todo!()),
-			])
-			.selected_index(Some(self.render_mode as u32))
-			.narrow(true)
-			.widget_instance(),
+			{
+				let disabled = cfg!(target_family = "wasm") && wgpu_available() == Some(false);
+
+				let mut entries = vec![
+					RadioEntryData::new("Normal")
+						.icon("RenderModeNormal")
+						.tooltip_label("Render Mode: Normal")
+						.on_update(|_| DocumentMessage::SetRenderMode { render_mode: RenderMode::Normal }.into()),
+					RadioEntryData::new("Outline")
+						.icon("RenderModeOutline")
+						.tooltip_label("Render Mode: Outline")
+						.on_update(|_| DocumentMessage::SetRenderMode { render_mode: RenderMode::Outline }.into()),
+					// TODO: See issue #320
+					// RadioEntryData::new("PixelPreview")
+					// 	.icon("RenderModePixels")
+					// 	.tooltip_label("Render Mode: Pixel Preview")
+					// 	.on_update(|_| todo!()),
+					RadioEntryData::new("SvgPreview")
+						.icon("RenderModeSvg")
+						.tooltip_label("Render Mode: SVG Preview")
+						.on_update(|_| DocumentMessage::SetRenderMode { render_mode: RenderMode::SvgPreview }.into()),
+				];
+				let mut selected_index = self.render_mode as u32;
+
+				if disabled {
+					for entry in &mut entries {
+						entry.tooltip_description = "
+							*Normal* and *Outline* render modes are not available in this browser. For compatibility, *SVG Preview* mode is active as a fallback.\n\
+							\n\
+							This functionality requires WebGPU support. Check webgpu.org for browser implementation status.
+							"
+						.trim()
+						.into();
+					}
+
+					selected_index = entries.iter().position(|entry| entry.value == "SvgPreview").unwrap() as u32;
+				}
+
+				RadioInput::new(entries).selected_index(Some(selected_index)).disabled(disabled).narrow(true).widget_instance()
+			},
 			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 		];
 

editor/src/messages/portfolio/portfolio_message.rs

@@ -157,5 +157,4 @@ pub enum PortfolioMessage {
 	ToggleRulers,
 	UpdateDocumentWidgets,
 	UpdateOpenDocumentsList,
-	UpdateVelloPreference,
 }

editor/src/messages/portfolio/portfolio_message_handler.rs

@@ -407,6 +407,13 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 					// Use exact physical dimensions from browser (via ResizeObserver's devicePixelContentBoxSize)
 					let physical_resolution = viewport.size().to_physical().into_dvec2().round().as_uvec2();
 
+					// TODO: Remove this when we do the SVG rendering with a separate library on desktop, thus avoiding a need for the hole punch.
+					// TODO: See #3796. There is a second instance of this todo comment and code block (be sure to remove both).
+					#[cfg(not(target_family = "wasm"))]
+					responses.add_front(FrontendMessage::UpdateViewportHolePunch {
+						active: document.render_mode != graphene_std::vector::style::RenderMode::SvgPreview,
+					});
+
 					if let Ok(message) = self.executor.submit_node_graph_evaluation(
 						self.documents.get_mut(document_id).expect("Tried to render non-existent document"),
 						*document_id,
@@ -1163,6 +1170,13 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 				// Use exact physical dimensions from browser (via ResizeObserver's devicePixelContentBoxSize)
 				let physical_resolution = viewport.size().to_physical().into_dvec2().round().as_uvec2();
 
+				// TODO: Remove this when we do the SVG rendering with a separate library on desktop, thus avoiding a need for the hole punch.
+				// TODO: See #3796. There is a second instance of this todo comment and code block (be sure to remove both).
+				#[cfg(not(target_family = "wasm"))]
+				responses.add_front(FrontendMessage::UpdateViewportHolePunch {
+					active: document.render_mode != graphene_std::vector::style::RenderMode::SvgPreview,
+				});
+
 				let result = self
 					.executor
 					.submit_node_graph_evaluation(document, document_id, physical_resolution, scale, timing_information, node_to_inspect, ignore_hash, pointer_position);
@@ -1197,7 +1211,7 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 
 				let result = self
 					.executor
-					.submit_eyedropper_preview(document_id, preview_transform, pointer_position, resolution, scale, timing_information);
+					.submit_eyedropper_preview(document, document_id, preview_transform, pointer_position, resolution, scale, timing_information);
 
 				match result {
 					Err(description) => {
@@ -1364,13 +1378,6 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 					responses.add(PortfolioMessage::RequestWelcomeScreenButtonsLayout);
 				}
 			}
-			PortfolioMessage::UpdateVelloPreference => {
-				// TODO: Resend this message once the GPU context is initialized to avoid having the hole punch be stuck in an invalid state
-				let active = if cfg!(target_family = "wasm") { false } else { preferences.use_vello() };
-				responses.add(FrontendMessage::UpdateViewportHolePunch { active });
-				responses.add(NodeGraphMessage::RunDocumentGraph);
-				self.persistent_data.use_vello = preferences.use_vello();
-			}
 		}
 	}
 

editor/src/messages/portfolio/utility_types.rs

@@ -6,7 +6,6 @@ use graphene_std::text::{Font, FontCache};
 pub struct PersistentData {
 	pub font_cache: FontCache,
 	pub font_catalog: FontCatalog,
-	pub use_vello: bool,
 }
 
 // TODO: Should this be a BTreeMap instead?