Integrate Vello for vector rendering (#1802)

* Start integrating vello into render pipeline

Cache vello render creation

Implement viewport navigation

Close vello path

Add transform parameter to vello render pass

* Fix render node types

* Fix a bunch of bugs in the path translation

* Avoid panic on empty document

* Fix rendering of holes

* Implement image rendering

* Implement graph recompilation afer editor api change

* Implement preferences toggle for using vello as the renderer

* Make surface creation optional

* Feature gate vello usages

* Implement skeleton for radial gradient

* Rename vello preference

* Fix some gradients

* Only update monitor nodes on graph recompile

* Fix warnings + remove dead code

* Update everything except for thumbnails after a node graph evaluation

* Fix missing click targets for Image frames

* Improve perfamance by removing unecessary widget updates

* Fix node graph paning

* Fix thumbnail loading

* Implement proper hash for vector modification

* Fix test and warnings

* Code review

* Fix dep

* Remove warning

---------

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

editor/src/messages/dialog/preferences_dialog/preferences_dialog_message_handler.rs

@@ -45,6 +45,15 @@ impl PreferencesDialogMessageHandler {
 				})
 				.widget_holder(),
 		];
+		let use_vello = vec![
+			TextLabel::new("Renderer").min_width(60).italic(true).widget_holder(),
+			TextLabel::new("Vello (Experimental)").table_align(true).widget_holder(),
+			Separator::new(SeparatorType::Unrelated).widget_holder(),
+			CheckboxInput::new(preferences.use_vello)
+				.tooltip("Use the experimental Vello renderer (your browser must support WebGPU)")
+				.on_update(|checkbox_input: &CheckboxInput| PreferencesMessage::UseVello { use_vello: checkbox_input.checked }.into())
+				.widget_holder(),
+		];
 
 		let imaginate_server_hostname = vec![
 			TextLabel::new("Imaginate").min_width(60).italic(true).widget_holder(),
@@ -71,6 +80,7 @@ impl PreferencesDialogMessageHandler {
 
 		Layout::WidgetLayout(WidgetLayout::new(vec![
 			LayoutGroup::Row { widgets: zoom_with_scroll },
+			LayoutGroup::Row { widgets: use_vello },
 			LayoutGroup::Row { widgets: imaginate_server_hostname },
 			LayoutGroup::Row { widgets: imaginate_refresh_frequency },
 		]))

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

@@ -118,6 +118,7 @@ pub struct DocumentMessageHandler {
 	#[serde(skip)]
 	node_graph_ptz: HashMap<Vec<NodeId>, PTZ>,
 	/// Transform from node graph space to viewport space.
+	// TODO: Remove this and replace its usages with a derived value from the PTZ stored above
 	#[serde(skip)]
 	node_graph_to_viewport: HashMap<Vec<NodeId>, DAffine2>,
 }
@@ -1141,9 +1142,6 @@ impl MessageHandler<DocumentMessage, DocumentMessageData<'_>> for DocumentMessag
 				responses.add(DocumentMessage::UpdateDocumentTransform { transform });
 			}
 			DocumentMessage::UpdateDocumentTransform { transform } => {
-				responses.add(DocumentMessage::RenderRulers);
-				responses.add(DocumentMessage::RenderScrollbars);
-
 				if !self.graph_view_overlay_open {
 					self.metadata.document_to_viewport = transform;
 
@@ -1159,8 +1157,6 @@ impl MessageHandler<DocumentMessage, DocumentMessageData<'_>> for DocumentMessag
 						},
 					})
 				}
-
-				responses.add(PortfolioMessage::UpdateDocumentWidgets);
 			}
 			DocumentMessage::ZoomCanvasTo100Percent => {
 				responses.add_front(NavigationMessage::CanvasZoomSet { zoom_factor: 1. });

editor/src/messages/portfolio/document/graph_operation/graph_operation_message_handler.rs

@@ -569,7 +569,8 @@ impl MessageHandler<GraphOperationMessage, GraphOperationMessageData<'_>> for Gr
 				parent,
 				insert_index,
 			} => {
-				let tree = match usvg::Tree::from_str(&svg, &usvg::Options::default()) {
+				let database = usvg::fontdb::Database::new();
+				let tree = match usvg::Tree::from_str(&svg, &usvg::Options::default(), &database) {
 					Ok(t) => t,
 					Err(e) => {
 						responses.add(DocumentMessage::DocumentHistoryBackward);
@@ -582,7 +583,7 @@ impl MessageHandler<GraphOperationMessage, GraphOperationMessageData<'_>> for Gr
 				};
 				let mut modify_inputs = ModifyInputsContext::new(document_network, document_metadata, node_graph, responses);
 
-				import_usvg_node(&mut modify_inputs, &usvg::Node::Group(Box::new(tree.root)), transform, id, parent, insert_index);
+				import_usvg_node(&mut modify_inputs, &usvg::Node::Group(Box::new(tree.root().clone())), transform, id, parent, insert_index);
 				load_network_structure(document_network, document_metadata, collapsed);
 			}
 			GraphOperationMessage::SetNodePosition { node_id, position } => {
@@ -715,7 +716,7 @@ fn import_usvg_node(modify_inputs: &mut ModifyInputsContext, node: &usvg::Node,
 	modify_inputs.layer_node = Some(layer);
 	match node {
 		usvg::Node::Group(group) => {
-			for child in &group.children {
+			for child in group.children() {
 				import_usvg_node(modify_inputs, child, transform, NodeId(generate_uuid()), LayerNodeIdentifier::new_unchecked(layer), -1);
 			}
 			modify_inputs.layer_node = Some(layer);
@@ -723,58 +724,46 @@ fn import_usvg_node(modify_inputs: &mut ModifyInputsContext, node: &usvg::Node,
 		usvg::Node::Path(path) => {
 			let subpaths = convert_usvg_path(path);
 			let bounds = subpaths.iter().filter_map(|subpath| subpath.bounding_box()).reduce(Quad::combine_bounds).unwrap_or_default();
-			let transformed_bounds = subpaths
-				.iter()
-				.filter_map(|subpath| subpath.bounding_box_with_transform(transform * usvg_transform(node.abs_transform())))
-				.reduce(Quad::combine_bounds)
-				.unwrap_or_default();
 			modify_inputs.insert_vector_data(subpaths, layer);
 
 			modify_inputs.modify_inputs("Transform", true, |inputs, _node_id, _metadata| {
 				transform_utils::update_transform(inputs, transform * usvg_transform(node.abs_transform()));
 			});
 			let bounds_transform = DAffine2::from_scale_angle_translation(bounds[1] - bounds[0], 0., bounds[0]);
-			let transformed_bound_transform = DAffine2::from_scale_angle_translation(transformed_bounds[1] - transformed_bounds[0], 0., transformed_bounds[0]);
-			apply_usvg_fill(
-				&path.fill,
-				modify_inputs,
-				transform * usvg_transform(node.abs_transform()),
-				bounds_transform,
-				transformed_bound_transform,
-			);
-			apply_usvg_stroke(&path.stroke, modify_inputs);
+			apply_usvg_fill(path.fill(), modify_inputs, transform * usvg_transform(node.abs_transform()), bounds_transform);
+			apply_usvg_stroke(path.stroke(), modify_inputs);
 		}
 		usvg::Node::Image(_image) => {
 			warn!("Skip image")
 		}
 		usvg::Node::Text(text) => {
 			let font = Font::new(graphene_core::consts::DEFAULT_FONT_FAMILY.to_string(), graphene_core::consts::DEFAULT_FONT_STYLE.to_string());
-			modify_inputs.insert_text(text.chunks.iter().map(|chunk| chunk.text.clone()).collect(), font, 24., layer);
+			modify_inputs.insert_text(text.chunks().iter().map(|chunk| chunk.text()).collect(), font, 24., layer);
 			modify_inputs.fill_set(Fill::Solid(Color::BLACK));
 		}
 	}
 }
 
-fn apply_usvg_stroke(stroke: &Option<usvg::Stroke>, modify_inputs: &mut ModifyInputsContext) {
+fn apply_usvg_stroke(stroke: Option<&usvg::Stroke>, modify_inputs: &mut ModifyInputsContext) {
 	if let Some(stroke) = stroke {
-		if let usvg::Paint::Color(color) = &stroke.paint {
+		if let usvg::Paint::Color(color) = &stroke.paint() {
 			modify_inputs.stroke_set(Stroke {
-				color: Some(usvg_color(*color, stroke.opacity.get())),
-				weight: stroke.width.get() as f64,
-				dash_lengths: stroke.dasharray.as_ref().map(|lengths| lengths.iter().map(|&length| length as f64).collect()).unwrap_or_default(),
-				dash_offset: stroke.dashoffset as f64,
-				line_cap: match stroke.linecap {
+				color: Some(usvg_color(*color, stroke.opacity().get())),
+				weight: stroke.width().get() as f64,
+				dash_lengths: stroke.dasharray().as_ref().map(|lengths| lengths.iter().map(|&length| length as f64).collect()).unwrap_or_default(),
+				dash_offset: stroke.dashoffset() as f64,
+				line_cap: match stroke.linecap() {
 					usvg::LineCap::Butt => LineCap::Butt,
 					usvg::LineCap::Round => LineCap::Round,
 					usvg::LineCap::Square => LineCap::Square,
 				},
-				line_join: match stroke.linejoin {
+				line_join: match stroke.linejoin() {
 					usvg::LineJoin::Miter => LineJoin::Miter,
 					usvg::LineJoin::MiterClip => LineJoin::Miter,
 					usvg::LineJoin::Round => LineJoin::Round,
 					usvg::LineJoin::Bevel => LineJoin::Bevel,
 				},
-				line_join_miter_limit: stroke.miterlimit.get() as f64,
+				line_join_miter_limit: stroke.miterlimit().get() as f64,
 			})
 		} else {
 			warn!("Skip non-solid stroke")
@@ -782,25 +771,27 @@ fn apply_usvg_stroke(stroke: &Option<usvg::Stroke>, modify_inputs: &mut ModifyIn
 	}
 }
 
-fn apply_usvg_fill(fill: &Option<usvg::Fill>, modify_inputs: &mut ModifyInputsContext, transform: DAffine2, bounds_transform: DAffine2, transformed_bound_transform: DAffine2) {
+fn apply_usvg_fill(fill: Option<&usvg::Fill>, modify_inputs: &mut ModifyInputsContext, transform: DAffine2, bounds_transform: DAffine2) {
 	if let Some(fill) = &fill {
-		modify_inputs.fill_set(match &fill.paint {
-			usvg::Paint::Color(color) => Fill::solid(usvg_color(*color, fill.opacity.get())),
+		modify_inputs.fill_set(match &fill.paint() {
+			usvg::Paint::Color(color) => Fill::solid(usvg_color(*color, fill.opacity().get())),
 			usvg::Paint::LinearGradient(linear) => {
-				let local = [DVec2::new(linear.x1 as f64, linear.y1 as f64), DVec2::new(linear.x2 as f64, linear.y2 as f64)];
+				let local = [DVec2::new(linear.x1() as f64, linear.y1() as f64), DVec2::new(linear.x2() as f64, linear.y2() as f64)];
 
-				let to_doc_transform = if linear.base.units == usvg::Units::UserSpaceOnUse {
-					transform
-				} else {
-					transformed_bound_transform
-				};
-				let to_doc = to_doc_transform * usvg_transform(linear.transform);
+				// TODO: fix this
+				// let to_doc_transform = if linear.base.units() == usvg::Units::UserSpaceOnUse {
+				// 	transform
+				// } else {
+				// 	transformed_bound_transform
+				// };
+				let to_doc_transform = transform;
+				let to_doc = to_doc_transform * usvg_transform(linear.transform());
 
 				let document = [to_doc.transform_point2(local[0]), to_doc.transform_point2(local[1])];
 				let layer = [transform.inverse().transform_point2(document[0]), transform.inverse().transform_point2(document[1])];
 
 				let [start, end] = [bounds_transform.inverse().transform_point2(layer[0]), bounds_transform.inverse().transform_point2(layer[1])];
-				let stops = linear.stops.iter().map(|stop| (stop.offset.get() as f64, usvg_color(stop.color, stop.opacity.get()))).collect();
+				let stops = linear.stops().iter().map(|stop| (stop.offset().get() as f64, usvg_color(stop.color(), stop.opacity().get()))).collect();
 				let stops = GradientStops(stops);
 
 				Fill::Gradient(Gradient {
@@ -812,20 +803,22 @@ fn apply_usvg_fill(fill: &Option<usvg::Fill>, modify_inputs: &mut ModifyInputsCo
 				})
 			}
 			usvg::Paint::RadialGradient(radial) => {
-				let local = [DVec2::new(radial.cx as f64, radial.cy as f64), DVec2::new(radial.fx as f64, radial.fy as f64)];
+				let local = [DVec2::new(radial.cx() as f64, radial.cy() as f64), DVec2::new(radial.fx() as f64, radial.fy() as f64)];
 
-				let to_doc_transform = if radial.base.units == usvg::Units::UserSpaceOnUse {
-					transform
-				} else {
-					transformed_bound_transform
-				};
-				let to_doc = to_doc_transform * usvg_transform(radial.transform);
+				// TODO: fix this
+				// let to_doc_transform = if radial.base.units == usvg::Units::UserSpaceOnUse {
+				// 	transform
+				// } else {
+				// 	transformed_bound_transform
+				// };
+				let to_doc_transform = transform;
+				let to_doc = to_doc_transform * usvg_transform(radial.transform());
 
 				let document = [to_doc.transform_point2(local[0]), to_doc.transform_point2(local[1])];
 				let layer = [transform.inverse().transform_point2(document[0]), transform.inverse().transform_point2(document[1])];
 
 				let [start, end] = [bounds_transform.inverse().transform_point2(layer[0]), bounds_transform.inverse().transform_point2(layer[1])];
-				let stops = radial.stops.iter().map(|stop| (stop.offset.get() as f64, usvg_color(stop.color, stop.opacity.get()))).collect();
+				let stops = radial.stops().iter().map(|stop| (stop.offset().get() as f64, usvg_color(stop.color(), stop.opacity().get()))).collect();
 				let stops = GradientStops(stops);
 
 				Fill::Gradient(Gradient {

editor/src/messages/portfolio/document/node_graph/document_node_types.rs

@@ -1311,15 +1311,16 @@ fn static_nodes() -> Vec<DocumentNodeDefinition> {
 				nodes: [
 					DocumentNode {
 						name: "Create Gpu Surface".to_string(),
+						manual_composition: Some(concrete!(Footprint)),
 						inputs: vec![NodeInput::scope("editor-api")],
-						implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("wgpu_executor::CreateGpuSurfaceNode")),
+						implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("wgpu_executor::CreateGpuSurfaceNode<_>")),
 						..Default::default()
 					},
 					DocumentNode {
 						name: "Cache".to_string(),
-						manual_composition: Some(concrete!(())),
+						manual_composition: Some(concrete!(Footprint)),
 						inputs: vec![NodeInput::node(NodeId(0), 0)],
-						implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("graphene_core::memo::MemoNode<_, _>")),
+						implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("graphene_core::memo::ImpureMemoNode<_, _, _>")),
 						..Default::default()
 					},
 				]
@@ -2789,16 +2790,17 @@ pub fn wrap_network_in_scope(mut network: NodeNetwork, editor_api: Arc<WasmEdito
 			nodes: [
 				DocumentNode {
 					name: "Create Canvas".to_string(),
-					inputs: vec![NodeInput::network(concrete!(&WasmEditorApi), 1)],
-					implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("graphene_std::wasm_application_io::CreateSurfaceNode")),
+					inputs: vec![NodeInput::scope("editor-api")],
+					manual_composition: Some(concrete!(Footprint)),
+					implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("wgpu_executor::CreateGpuSurfaceNode<_>")),
 					skip_deduplication: true,
 					..Default::default()
 				},
 				DocumentNode {
 					name: "Cache".to_string(),
-					manual_composition: Some(concrete!(())),
+					manual_composition: Some(concrete!(Footprint)),
 					inputs: vec![NodeInput::node(NodeId(0), 0)],
-					implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("graphene_core::memo::MemoNode<_, _>")),
+					implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("graphene_core::memo::ImpureMemoNode<_, _, _>")),
 					..Default::default()
 				},
 				// TODO: Add conversion step
@@ -2806,6 +2808,7 @@ pub fn wrap_network_in_scope(mut network: NodeNetwork, editor_api: Arc<WasmEdito
 					name: "RenderNode".to_string(),
 					manual_composition: Some(concrete!(RenderConfig)),
 					inputs: vec![
+						NodeInput::scope("editor-api"),
 						NodeInput::network(graphene_core::Type::Fn(Box::new(concrete!(Footprint)), Box::new(generic!(T))), 0),
 						NodeInput::node(NodeId(1), 0),
 					],

editor/src/messages/portfolio/portfolio_message.rs

@@ -52,7 +52,7 @@ pub enum PortfolioMessage {
 	},
 	ImaginateCheckServerStatus,
 	ImaginatePollServerStatus,
-	ImaginatePreferences,
+	EditorPreferences,
 	ImaginateServerHostname,
 	Import,
 	LoadDocumentResources {
@@ -103,4 +103,5 @@ pub enum PortfolioMessage {
 	ToggleRulers,
 	UpdateDocumentWidgets,
 	UpdateOpenDocumentsList,
+	UpdateVelloPreference,
 }

editor/src/messages/portfolio/portfolio_message_handler.rs

@@ -324,7 +324,7 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageData<'_>> for PortfolioMes
 				self.persistent_data.imaginate.poll_server_check();
 				responses.add(PropertiesPanelMessage::Refresh);
 			}
-			PortfolioMessage::ImaginatePreferences => self.executor.update_imaginate_preferences(preferences.get_imaginate_preferences()),
+			PortfolioMessage::EditorPreferences => self.executor.update_editor_preferences(preferences.editor_preferences()),
 			PortfolioMessage::ImaginateServerHostname => {
 				self.persistent_data.imaginate.set_host_name(&preferences.imaginate_server_hostname);
 			}
@@ -496,6 +496,7 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageData<'_>> for PortfolioMes
 
 				document.set_auto_save_state(document_is_auto_saved);
 				document.set_save_state(document_is_saved);
+
 				self.load_document(document, document_id, responses);
 			}
 			PortfolioMessage::PasteIntoFolder { clipboard, parent, insert_index } => {
@@ -640,6 +641,9 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageData<'_>> for PortfolioMes
 					.collect::<Vec<_>>();
 				responses.add(FrontendMessage::UpdateOpenDocumentsList { open_documents });
 			}
+			PortfolioMessage::UpdateVelloPreference => {
+				self.persistent_data.use_vello = preferences.use_vello;
+			}
 		}
 	}
 

editor/src/messages/portfolio/utility_types.rs

@@ -4,6 +4,7 @@ use graphene_std::{imaginate::ImaginatePersistentData, text::FontCache};
 pub struct PersistentData {
 	pub font_cache: FontCache,
 	pub imaginate: ImaginatePersistentData,
+	pub use_vello: bool,
 }
 
 #[derive(PartialEq, Eq, Clone, Copy, Default, Debug, serde::Serialize, serde::Deserialize)]

editor/src/messages/preferences/preferences_message.rs

@@ -7,6 +7,7 @@ pub enum PreferencesMessage {
 	ResetToDefaults,
 
 	ImaginateRefreshFrequency { seconds: f64 },
+	UseVello { use_vello: bool },
 	ImaginateServerHostname { hostname: String },
 	ModifyLayout { zoom_with_scroll: bool },
 }

editor/src/messages/preferences/preferences_message_handler.rs

@@ -1,29 +1,35 @@
 use crate::messages::input_mapper::key_mapping::MappingVariant;
 use crate::messages::prelude::*;
-use graph_craft::imaginate_input::ImaginatePreferences;
+use graph_craft::wasm_application_io::EditorPreferences;
 
 #[derive(Debug, PartialEq, Clone, serde::Serialize, serde::Deserialize, specta::Type)]
 pub struct PreferencesMessageHandler {
 	pub imaginate_server_hostname: String,
 	pub imaginate_refresh_frequency: f64,
 	pub zoom_with_scroll: bool,
+	pub use_vello: bool,
 }
 
 impl PreferencesMessageHandler {
-	pub fn get_imaginate_preferences(&self) -> ImaginatePreferences {
-		ImaginatePreferences {
-			host_name: self.imaginate_server_hostname.clone(),
+	pub fn editor_preferences(&self) -> EditorPreferences {
+		EditorPreferences {
+			imaginate_hostname: self.imaginate_server_hostname.clone(),
+			use_vello: self.use_vello,
 		}
 	}
 }
 
 impl Default for PreferencesMessageHandler {
 	fn default() -> Self {
-		let ImaginatePreferences { host_name } = Default::default();
+		let EditorPreferences {
+			imaginate_hostname: host_name,
+			use_vello,
+		} = Default::default();
 		Self {
 			imaginate_server_hostname: host_name,
 			imaginate_refresh_frequency: 1.,
 			zoom_with_scroll: matches!(MappingVariant::default(), MappingVariant::ZoomWithScroll),
+			use_vello,
 		}
 	}
 }
@@ -37,7 +43,8 @@ impl MessageHandler<PreferencesMessage, ()> for PreferencesMessageHandler {
 
 					responses.add(PortfolioMessage::ImaginateServerHostname);
 					responses.add(PortfolioMessage::ImaginateCheckServerStatus);
-					responses.add(PortfolioMessage::ImaginatePreferences);
+					responses.add(PortfolioMessage::EditorPreferences);
+					responses.add(PortfolioMessage::UpdateVelloPreference);
 					responses.add(PreferencesMessage::ModifyLayout {
 						zoom_with_scroll: self.zoom_with_scroll,
 					});
@@ -53,7 +60,12 @@ impl MessageHandler<PreferencesMessage, ()> for PreferencesMessageHandler {
 			PreferencesMessage::ImaginateRefreshFrequency { seconds } => {
 				self.imaginate_refresh_frequency = seconds;
 				responses.add(PortfolioMessage::ImaginateCheckServerStatus);
-				responses.add(PortfolioMessage::ImaginatePreferences);
+				responses.add(PortfolioMessage::EditorPreferences);
+			}
+			PreferencesMessage::UseVello { use_vello } => {
+				self.use_vello = use_vello;
+				responses.add(PortfolioMessage::UpdateVelloPreference);
+				responses.add(PortfolioMessage::EditorPreferences);
 			}
 			PreferencesMessage::ImaginateServerHostname { hostname } => {
 				let initial = hostname.clone();
@@ -68,7 +80,7 @@ impl MessageHandler<PreferencesMessage, ()> for PreferencesMessageHandler {
 				self.imaginate_server_hostname = hostname;
 				responses.add(PortfolioMessage::ImaginateServerHostname);
 				responses.add(PortfolioMessage::ImaginateCheckServerStatus);
-				responses.add(PortfolioMessage::ImaginatePreferences);
+				responses.add(PortfolioMessage::EditorPreferences);
 			}
 			PreferencesMessage::ModifyLayout { zoom_with_scroll } => {
 				self.zoom_with_scroll = zoom_with_scroll;