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/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),
 					],