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/dispatcher.rs

@@ -37,6 +37,7 @@ const SIDE_EFFECT_FREE_MESSAGES: &[MessageDiscriminant] = &[
 	MessageDiscriminant::Portfolio(PortfolioMessageDiscriminant::Document(DocumentMessageDiscriminant::DocumentStructureChanged)),
 	MessageDiscriminant::Portfolio(PortfolioMessageDiscriminant::Document(DocumentMessageDiscriminant::Overlays(OverlaysMessageDiscriminant::Draw))),
 	MessageDiscriminant::Portfolio(PortfolioMessageDiscriminant::Document(DocumentMessageDiscriminant::RenderRulers)),
+	MessageDiscriminant::Portfolio(PortfolioMessageDiscriminant::Document(DocumentMessageDiscriminant::RenderScrollbars)),
 	MessageDiscriminant::Frontend(FrontendMessageDiscriminant::UpdateDocumentLayerStructure),
 	MessageDiscriminant::Frontend(FrontendMessageDiscriminant::TriggerFontLoad),
 ];

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;

editor/src/node_graph_executor.rs

@@ -9,8 +9,8 @@ use graph_craft::concrete;
 use graph_craft::document::value::TaggedValue;
 use graph_craft::document::{generate_uuid, DocumentNodeImplementation, NodeId, NodeNetwork};
 use graph_craft::graphene_compiler::Compiler;
-use graph_craft::imaginate_input::ImaginatePreferences;
 use graph_craft::proto::GraphErrors;
+use graph_craft::wasm_application_io::EditorPreferences;
 use graphene_core::application_io::{NodeGraphUpdateMessage, NodeGraphUpdateSender, RenderConfig};
 use graphene_core::memo::IORecord;
 use graphene_core::raster::ImageFrame;
@@ -36,8 +36,9 @@ pub struct NodeRuntime {
 	executor: DynamicExecutor,
 	receiver: Receiver<NodeRuntimeMessage>,
 	sender: InternalNodeGraphUpdateSender,
-	imaginate_preferences: ImaginatePreferences,
-	recompile_graph: bool,
+	editor_preferences: EditorPreferences,
+	old_graph: Option<NodeNetwork>,
+	update_thumbnails: bool,
 
 	editor_api: Arc<WasmEditorApi>,
 	node_graph_errors: GraphErrors,
@@ -60,7 +61,7 @@ pub enum NodeRuntimeMessage {
 	GraphUpdate(NodeNetwork),
 	ExecutionRequest(ExecutionRequest),
 	FontCacheUpdate(FontCache),
-	ImaginatePreferencesUpdate(ImaginatePreferences),
+	EditorPreferencesUpdate(EditorPreferences),
 }
 
 #[derive(Default, Debug, Clone)]
@@ -127,12 +128,13 @@ impl NodeRuntime {
 			executor: DynamicExecutor::default(),
 			receiver,
 			sender: InternalNodeGraphUpdateSender(sender.clone()),
-			imaginate_preferences: ImaginatePreferences::default(),
-			recompile_graph: true,
+			editor_preferences: EditorPreferences::default(),
+			old_graph: None,
+			update_thumbnails: true,
 
 			editor_api: WasmEditorApi {
 				font_cache: FontCache::default(),
-				imaginate_preferences: Box::new(ImaginatePreferences::default()),
+				editor_preferences: Box::new(EditorPreferences::default()),
 				node_graph_message_sender: Box::new(InternalNodeGraphUpdateSender(sender)),
 
 				application_io: None,
@@ -154,7 +156,7 @@ impl NodeRuntime {
 		// TODO: Currently we still render the document after we submit the node graph execution request. This should be avoided in the future.
 
 		let mut font = None;
-		let mut imaginate = None;
+		let mut preferences = None;
 		let mut graph = None;
 		let mut execution = None;
 		for request in self.receiver.try_iter() {
@@ -162,10 +164,10 @@ impl NodeRuntime {
 				NodeRuntimeMessage::GraphUpdate(_) => graph = Some(request),
 				NodeRuntimeMessage::ExecutionRequest(_) => execution = Some(request),
 				NodeRuntimeMessage::FontCacheUpdate(_) => font = Some(request),
-				NodeRuntimeMessage::ImaginatePreferencesUpdate(_) => imaginate = Some(request),
+				NodeRuntimeMessage::EditorPreferencesUpdate(_) => preferences = Some(request),
 			}
 		}
-		let requests = [font, imaginate, graph, execution].into_iter().flatten();
+		let requests = [font, preferences, graph, execution].into_iter().flatten();
 
 		for request in requests {
 			match request {
@@ -174,38 +176,46 @@ impl NodeRuntime {
 						font_cache,
 						application_io: self.editor_api.application_io.clone(),
 						node_graph_message_sender: Box::new(self.sender.clone()),
-						imaginate_preferences: Box::new(self.imaginate_preferences.clone()),
+						editor_preferences: Box::new(self.editor_preferences.clone()),
 					}
 					.into();
-					self.recompile_graph = true;
+					if let Some(graph) = self.old_graph.clone() {
+						// We ignore this result as compilation errors should have been reported in an earlier iteration
+						let _ = self.update_network(graph).await;
+					}
 				}
-				NodeRuntimeMessage::ImaginatePreferencesUpdate(preferences) => {
+				NodeRuntimeMessage::EditorPreferencesUpdate(preferences) => {
+					self.editor_preferences = preferences.clone();
 					self.editor_api = WasmEditorApi {
 						font_cache: self.editor_api.font_cache.clone(),
 						application_io: self.editor_api.application_io.clone(),
 						node_graph_message_sender: Box::new(self.sender.clone()),
-						imaginate_preferences: Box::new(preferences),
+						editor_preferences: Box::new(preferences),
 					}
 					.into();
-					self.recompile_graph = true;
+					if let Some(graph) = self.old_graph.clone() {
+						// We ignore this result as compilation errors should have been reported in an earlier iteration
+						let _ = self.update_network(graph).await;
+					}
 				}
 				NodeRuntimeMessage::GraphUpdate(graph) => {
+					self.old_graph = Some(graph.clone());
 					self.node_graph_errors.clear();
 					let result = self.update_network(graph).await;
+					self.update_thumbnails = true;
 					self.sender.send_generation_response(CompilationResponse {
 						result,
 						resolved_types: self.resolved_types.clone(),
 						node_graph_errors: self.node_graph_errors.clone(),
 					});
-					self.recompile_graph = true;
 				}
 				NodeRuntimeMessage::ExecutionRequest(ExecutionRequest { execution_id, render_config, .. }) => {
 					let transform = render_config.viewport.transform;
 
 					let result = self.execute_network(render_config).await;
-
 					let mut responses = VecDeque::new();
-					self.process_monitor_nodes(&mut responses);
+					self.process_monitor_nodes(&mut responses, self.update_thumbnails);
+					self.update_thumbnails = false;
 
 					self.sender.send_execution_response(ExecutionResponse {
 						execution_id,
@@ -227,7 +237,7 @@ impl NodeRuntime {
 				application_io: Some(WasmApplicationIo::new().await.into()),
 				font_cache: self.editor_api.font_cache.clone(),
 				node_graph_message_sender: Box::new(self.sender.clone()),
-				imaginate_preferences: Box::new(ImaginatePreferences::default()),
+				editor_preferences: Box::new(self.editor_preferences.clone()),
 			}
 			.into();
 		}
@@ -274,7 +284,7 @@ impl NodeRuntime {
 	}
 
 	/// Updates state data
-	pub fn process_monitor_nodes(&mut self, responses: &mut VecDeque<FrontendMessage>) {
+	pub fn process_monitor_nodes(&mut self, responses: &mut VecDeque<FrontendMessage>, update_thumbnails: bool) {
 		// TODO: Consider optimizing this since it's currently O(m*n^2), with a sort it could be made O(m * n*log(n))
 		self.thumbnail_renders.retain(|id, _| self.monitor_nodes.iter().any(|monitor_node_path| monitor_node_path.contains(id)));
 
@@ -290,15 +300,15 @@ impl NodeRuntime {
 			let Some(introspected_data) = self.executor.introspect(monitor_node_path).flatten() else {
 				// TODO: Fix the root of the issue causing the spam of this warning (this at least temporarily disables it in release builds)
 				#[cfg(debug_assertions)]
-				warn!("Failed to introspect monitor node");
+				warn!("Failed to introspect monitor node {:?}", self.executor.introspect(monitor_node_path));
 
 				continue;
 			};
 
 			if let Some(io) = introspected_data.downcast_ref::<IORecord<Footprint, graphene_core::GraphicElement>>() {
-				Self::process_graphic_element(&mut self.thumbnail_renders, &mut self.click_targets, parent_network_node_id, &io.output, responses)
+				Self::process_graphic_element(&mut self.thumbnail_renders, &mut self.click_targets, parent_network_node_id, &io.output, responses, update_thumbnails)
 			} else if let Some(io) = introspected_data.downcast_ref::<IORecord<Footprint, graphene_core::Artboard>>() {
-				Self::process_graphic_element(&mut self.thumbnail_renders, &mut self.click_targets, parent_network_node_id, &io.output, responses)
+				Self::process_graphic_element(&mut self.thumbnail_renders, &mut self.click_targets, parent_network_node_id, &io.output, responses, update_thumbnails)
 			} else if let Some(record) = introspected_data.downcast_ref::<IORecord<Footprint, VectorData>>() {
 				// Insert the vector modify if we are dealing with vector data
 				self.vector_modify.insert(parent_network_node_id, record.output.clone());
@@ -330,6 +340,7 @@ impl NodeRuntime {
 		parent_network_node_id: NodeId,
 		graphic_element: &impl GraphicElementRendered,
 		responses: &mut VecDeque<FrontendMessage>,
+		update_thumbnails: bool,
 	) {
 		let click_targets = click_targets.entry(parent_network_node_id).or_default();
 		click_targets.clear();
@@ -337,6 +348,10 @@ impl NodeRuntime {
 
 		// RENDER THUMBNAIL
 
+		if !update_thumbnails {
+			return;
+		}
+
 		let bounds = graphic_element.bounding_box(DAffine2::IDENTITY);
 
 		// Render the thumbnail from a `GraphicElement` into an SVG string
@@ -429,10 +444,10 @@ impl NodeGraphExecutor {
 		self.sender.send(NodeRuntimeMessage::FontCacheUpdate(font_cache)).expect("Failed to send font cache update");
 	}
 
-	pub fn update_imaginate_preferences(&self, imaginate_preferences: ImaginatePreferences) {
+	pub fn update_editor_preferences(&self, editor_preferences: EditorPreferences) {
 		self.sender
-			.send(NodeRuntimeMessage::ImaginatePreferencesUpdate(imaginate_preferences))
-			.expect("Failed to send imaginate preferences");
+			.send(NodeRuntimeMessage::EditorPreferencesUpdate(editor_preferences))
+			.expect("Failed to send editor preferences");
 	}
 
 	pub fn introspect_node_in_network<T: std::any::Any + core::fmt::Debug, U, F1: FnOnce(&NodeNetwork) -> Option<NodeId>, F2: FnOnce(&T) -> U>(
@@ -560,15 +575,13 @@ impl NodeGraphExecutor {
 					let ExecutionResponse {
 						execution_id,
 						result,
-						responses: existing_responses,
 						new_click_targets,
+						responses: existing_responses,
 						new_vector_modify,
 						new_upstream_transforms,
 						transform,
 					} = execution_response;
 
-					responses.extend(existing_responses.into_iter().map(Into::into));
-					responses.add(NodeGraphMessage::SendGraph);
 					responses.add(OverlaysMessage::Draw);
 
 					let node_graph_output = match result {
@@ -581,6 +594,7 @@ impl NodeGraphExecutor {
 						}
 					};
 
+					responses.extend(existing_responses.into_iter().map(Into::into));
 					document.metadata.update_transforms(new_upstream_transforms);
 					document.metadata.update_from_monitor(new_click_targets, new_vector_modify);
 
@@ -606,6 +620,7 @@ impl NodeGraphExecutor {
 						return Err("Node graph evaluation failed".to_string());
 					};
 
+					responses.add(NodeGraphMessage::SendGraph);
 					responses.add(NodeGraphMessage::UpdateTypes { resolved_types, node_graph_errors });
 				}
 				NodeGraphUpdate::NodeGraphUpdateMessage(NodeGraphUpdateMessage::ImaginateStatusUpdate) => {
@@ -634,17 +649,17 @@ impl NodeGraphExecutor {
 
 	fn process_node_graph_output(&mut self, node_graph_output: TaggedValue, transform: DAffine2, responses: &mut VecDeque<Message>) -> Result<(), String> {
 		match node_graph_output {
-			TaggedValue::SurfaceFrame(SurfaceFrame { surface_id: _, transform: _ }) => {
+			TaggedValue::SurfaceFrame(SurfaceFrame { .. }) => {
 				// TODO: Reimplement this now that document-legacy is gone
 			}
 			TaggedValue::RenderOutput(graphene_std::wasm_application_io::RenderOutput::Svg(svg)) => {
 				// Send to frontend
 				responses.add(FrontendMessage::UpdateDocumentArtwork { svg });
 				responses.add(DocumentMessage::RenderScrollbars);
+				responses.add(DocumentMessage::RenderRulers);
 			}
 			TaggedValue::RenderOutput(graphene_std::wasm_application_io::RenderOutput::CanvasFrame(frame)) => {
 				// Send to frontend
-				responses.add(DocumentMessage::RenderScrollbars);
 				let matrix = frame
 					.transform
 					.to_cols_array()
@@ -655,9 +670,11 @@ impl NodeGraphExecutor {
 					r#"
 					<svg><foreignObject width="{}" height="{}" transform="matrix({})"><div data-canvas-placeholder="canvas{}"></div></foreignObject></svg>
 					"#,
-					1920, 1080, matrix, frame.surface_id.0
+					frame.resolution.x, frame.resolution.y, matrix, frame.surface_id.0
 				);
 				responses.add(FrontendMessage::UpdateDocumentArtwork { svg });
+				responses.add(DocumentMessage::RenderScrollbars);
+				responses.add(DocumentMessage::RenderRulers);
 			}
 			TaggedValue::Bool(render_object) => Self::debug_render(render_object, transform, responses),
 			TaggedValue::String(render_object) => Self::debug_render(render_object, transform, responses),