Integrate the node graph as a Node Graph Frame layer type (#812)

* Add node graph frame tool

* Add a brighten

* Use the node graph

* Fix topological_sort

* Update UI

* Add icons for the tool and layer type

* Avoid serde & use bitmaps to improve performance

* Allow serialising a node graph

* Fix missing ..Default::default()

* Fix incorrect comments

* Cache node graph output image

* Suppress no-cycle import warning

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

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

@@ -73,8 +73,8 @@ pub enum DocumentMessage {
 	FolderChanged {
 		affected_folder_path: Vec<LayerId>,
 	},
+	FrameClear,
 	GroupSelectedLayers,
-	ImaginateClear,
 	ImaginateGenerate,
 	ImaginateTerminate,
 	LayerChanged {
@@ -89,6 +89,7 @@ pub enum DocumentMessage {
 		layer_path: Vec<LayerId>,
 		delta: (f64, f64),
 	},
+	NodeGraphFrameGenerate,
 	NudgeSelectedLayers {
 		delta_x: f64,
 		delta_y: f64,

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

@@ -377,6 +377,30 @@ impl MessageHandler<DocumentMessage, (u64, &InputPreprocessorMessageHandler, &Pe
 				let affected_layer_path = affected_folder_path;
 				responses.extend([LayerChanged { affected_layer_path }.into(), DocumentStructureChanged.into()]);
 			}
+			FrameClear => {
+				let mut selected_frame_layers = self
+					.selected_layers_with_type(LayerDataTypeDiscriminant::Imaginate)
+					.chain(self.selected_layers_with_type(LayerDataTypeDiscriminant::NodeGraphFrame));
+				// Get what is hopefully the only selected Imaginate/NodeGraphFrame layer
+				let layer_path = selected_frame_layers.next();
+				// Abort if we didn't have any Imaginate/NodeGraphFrame layer, or if there are additional ones also selected
+				if layer_path.is_none() || selected_frame_layers.next().is_some() {
+					return;
+				}
+				let layer_path = layer_path.unwrap();
+
+				let layer = self.graphene_document.layer(layer_path).expect("Clearing Imaginate/NodeGraphFrame image for invalid layer");
+				let previous_blob_url = match &layer.data {
+					LayerDataType::Imaginate(imaginate) => &imaginate.blob_url,
+					LayerDataType::NodeGraphFrame(node_graph_frame) => &node_graph_frame.blob_url,
+					x => panic!("Cannot find blob url for layer type {}", LayerDataTypeDiscriminant::from(x)),
+				};
+
+				if let Some(url) = previous_blob_url {
+					responses.push_back(FrontendMessage::TriggerRevokeBlobUrl { url: url.clone() }.into());
+				}
+				responses.push_back(DocumentOperation::ClearBlobURL { path: layer_path.into() }.into());
+			}
 			GroupSelectedLayers => {
 				let mut new_folder_path = self.graphene_document.shallowest_common_folder(self.selected_layers()).unwrap_or(&[]).to_vec();
 
@@ -406,24 +430,6 @@ impl MessageHandler<DocumentMessage, (u64, &InputPreprocessorMessageHandler, &Pe
 					.into(),
 				);
 			}
-			ImaginateClear => {
-				let mut selected_imaginate_layers = self.selected_layers_with_type(LayerDataTypeDiscriminant::Imaginate);
-				// Get what is hopefully the only selected Imaginate layer
-				let layer_path = selected_imaginate_layers.next();
-				// Abort if we didn't have any Imaginate layer, or if there are additional ones also selected
-				if layer_path.is_none() || selected_imaginate_layers.next().is_some() {
-					return;
-				}
-				let layer_path = layer_path.unwrap();
-
-				let layer = self.graphene_document.layer(layer_path).expect("Clearing Imaginate image for invalid layer");
-				let previous_blob_url = &layer.as_imaginate().unwrap().blob_url;
-
-				if let Some(url) = previous_blob_url {
-					responses.push_back(FrontendMessage::TriggerRevokeBlobUrl { url: url.clone() }.into());
-				}
-				responses.push_back(DocumentOperation::ImaginateClear { path: layer_path.into() }.into());
-			}
 			ImaginateGenerate => {
 				if let Some(message) = self.call_imaginate(document_id, preferences, persistent_data) {
 					// TODO: Eventually remove this after a message system ordering architectural change
@@ -505,6 +511,11 @@ impl MessageHandler<DocumentMessage, (u64, &InputPreprocessorMessageHandler, &Pe
 					responses.push_back(DocumentOperation::MoveSelectedManipulatorPoints { layer_path, delta }.into());
 				}
 			}
+			NodeGraphFrameGenerate => {
+				if let Some(message) = self.call_node_graph_frame(document_id, preferences, persistent_data) {
+					responses.push_back(message);
+				}
+			}
 			NudgeSelectedLayers { delta_x, delta_y } => {
 				self.backup(responses);
 				for path in self.selected_layers().map(|path| path.to_vec()) {
@@ -705,8 +716,16 @@ impl MessageHandler<DocumentMessage, (u64, &InputPreprocessorMessageHandler, &Pe
 							responses.push_back(FrontendMessage::TriggerRevokeBlobUrl { url: url.clone() }.into());
 						}
 					}
+					LayerDataType::NodeGraphFrame(node_graph_frame) => {
+						if let Some(url) = &node_graph_frame.blob_url {
+							responses.push_back(FrontendMessage::TriggerRevokeBlobUrl { url: url.clone() }.into());
+						}
+					}
 					LayerDataType::Image(_) => {}
-					other => panic!("Setting blob URL for invalid layer type, which must be an `Imaginate` or `Image`. Found: `{:?}`", other),
+					other => panic!(
+						"Setting blob URL for invalid layer type, which must be an `Imaginate`, `NodeGraphFrame` or `Image`. Found: `{:?}`",
+						other
+					),
 				}
 
 				responses.push_back(
@@ -936,7 +955,7 @@ impl DocumentMessageHandler {
 		};
 		let base_image = if imaginate_layer.use_img2img {
 			// Calculate the size of the region to be exported
-			let size = transform.transform_point2(DVec2::ONE) - transform.transform_point2(DVec2::ZERO);
+			let size = DVec2::new(transform.transform_vector2(DVec2::new(1., 0.)).length(), transform.transform_vector2(DVec2::new(0., 1.)).length());
 
 			let old_transforms = self.remove_document_transform();
 			let svg = self.render_document(size, transform.inverse(), persistent_data, DocumentRenderMode::OnlyBelowLayerInFolder(&layer_path));
@@ -960,6 +979,32 @@ impl DocumentMessageHandler {
 		)
 	}
 
+	pub fn call_node_graph_frame(&mut self, document_id: u64, _preferences: &PreferencesMessageHandler, persistent_data: &PersistentData) -> Option<Message> {
+		let layer_path = {
+			let mut selected_nodegraph_layers = self.selected_layers_with_type(LayerDataTypeDiscriminant::NodeGraphFrame);
+
+			// Get what is hopefully the only selected nodegraph layer
+			match selected_nodegraph_layers.next() {
+				// Continue only if there are no additional nodegraph layers also selected
+				Some(layer_path) if selected_nodegraph_layers.next().is_none() => layer_path.to_owned(),
+				_ => return None,
+			}
+		};
+
+		// Prepare the node graph base image base image
+
+		// Calculate the size of the region to be exported
+
+		let old_transforms = self.remove_document_transform();
+		let transform = self.graphene_document.multiply_transforms(&layer_path).unwrap();
+		let size = DVec2::new(transform.transform_vector2(DVec2::new(1., 0.)).length(), transform.transform_vector2(DVec2::new(0., 1.)).length());
+
+		let svg = self.render_document(size, transform.inverse(), persistent_data, DocumentRenderMode::OnlyBelowLayerInFolder(&layer_path));
+		self.restore_document_transform(old_transforms);
+
+		Some(FrontendMessage::TriggerNodeGraphFrameGenerate { document_id, layer_path, svg, size }.into())
+	}
+
 	/// Remove the artwork and artboard pan/tilt/zoom to render it without the user's viewport navigation, and save it to be restored at the end
 	fn remove_document_transform(&mut self) -> [DAffine2; 2] {
 		let old_artwork_transform = self.graphene_document.root.transform;
@@ -1474,6 +1519,15 @@ impl DocumentMessageHandler {
 						});
 					}
 				}
+				LayerDataType::NodeGraphFrame(node_graph_frame) => {
+					if let Some(data) = &node_graph_frame.image_data {
+						image_data.push(FrontendImageData {
+							path: path.clone(),
+							image_data: data.image_data.clone(),
+							mime: node_graph_frame.mime.clone(),
+						});
+					}
+				}
 				_ => {}
 			}
 		}

editor/src/messages/portfolio/document/properties_panel/utility_functions.rs

@@ -14,7 +14,8 @@ use crate::messages::prelude::*;
 use graphene::color::Color;
 use graphene::document::pick_layer_safe_imaginate_resolution;
 use graphene::layers::imaginate_layer::{ImaginateLayer, ImaginateSamplingMethod, ImaginateStatus};
-use graphene::layers::layer_info::{Layer, LayerData, LayerDataType, LayerDataTypeDiscriminant};
+use graphene::layers::layer_info::{Layer, LayerDataType, LayerDataTypeDiscriminant};
+use graphene::layers::nodegraph_layer::NodeGraphFrameLayer;
 use graphene::layers::style::{Fill, Gradient, GradientType, LineCap, LineJoin, Stroke};
 use graphene::layers::text_layer::{FontCache, TextLayer};
 
@@ -251,6 +252,11 @@ pub fn register_artwork_layer_properties(layer: &Layer, responses: &mut VecDeque
 					tooltip: "Imaginate".into(),
 					..Default::default()
 				})),
+				LayerDataType::NodeGraphFrame(_) => WidgetHolder::new(Widget::IconLabel(IconLabel {
+					icon: "NodeNodes".into(),
+					tooltip: "Node Graph Frame".into(),
+					..Default::default()
+				})),
 			},
 			WidgetHolder::new(Widget::Separator(Separator {
 				separator_type: SeparatorType::Related,
@@ -307,6 +313,9 @@ pub fn register_artwork_layer_properties(layer: &Layer, responses: &mut VecDeque
 		LayerDataType::Imaginate(imaginate) => {
 			vec![node_section_transform(layer, persistent_data), node_section_imaginate(imaginate, layer, persistent_data, responses)]
 		}
+		LayerDataType::NodeGraphFrame(node_graph_frame) => {
+			vec![node_section_transform(layer, persistent_data), node_section_node_graph_frame(node_graph_frame)]
+		}
 		LayerDataType::Folder(_) => {
 			vec![node_section_transform(layer, persistent_data)]
 		}
@@ -659,8 +668,8 @@ fn node_section_imaginate(imaginate_layer: &ImaginateLayer, layer: &Layer, persi
 								WidgetHolder::new(Widget::TextButton(TextButton {
 									label: "Clear".into(),
 									tooltip: "Remove generated image from the layer frame".into(),
-									disabled: imaginate_layer.blob_url == None,
-									on_update: WidgetCallback::new(|_| DocumentMessage::ImaginateClear.into()),
+									disabled: imaginate_layer.blob_url.is_none(),
+									on_update: WidgetCallback::new(|_| DocumentMessage::FrameClear.into()),
 									..Default::default()
 								})),
 							],
@@ -1009,6 +1018,55 @@ fn node_section_imaginate(imaginate_layer: &ImaginateLayer, layer: &Layer, persi
 	}
 }
 
+fn node_section_node_graph_frame(node_graph_frame: &NodeGraphFrameLayer) -> LayoutGroup {
+	LayoutGroup::Section {
+		name: "Node Graph Frame".into(),
+		layout: vec![
+			LayoutGroup::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+					value: "Temporary layer that applies a greyscale to the layers below it.".into(),
+					..TextLabel::default()
+				}))],
+			},
+			LayoutGroup::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+					value: "Powered by the node graph :)".into(),
+					..TextLabel::default()
+				}))],
+			},
+			LayoutGroup::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextButton(TextButton {
+					label: "Open Node Graph UI (todo)".into(),
+					tooltip: "Open the node graph associated with this layer".into(),
+					on_update: WidgetCallback::new(|_| DialogMessage::RequestComingSoonDialog { issue: Some(800) }.into()),
+					..Default::default()
+				}))],
+			},
+			LayoutGroup::Row {
+				widgets: vec![
+					WidgetHolder::new(Widget::TextButton(TextButton {
+						label: "Generate".into(),
+						tooltip: "Fill layer frame by generating a new image".into(),
+						on_update: WidgetCallback::new(|_| DocumentMessage::NodeGraphFrameGenerate.into()),
+						..Default::default()
+					})),
+					WidgetHolder::new(Widget::Separator(Separator {
+						separator_type: SeparatorType::Related,
+						direction: SeparatorDirection::Horizontal,
+					})),
+					WidgetHolder::new(Widget::TextButton(TextButton {
+						label: "Clear".into(),
+						tooltip: "Remove generated image from the layer frame".into(),
+						disabled: node_graph_frame.blob_url.is_none(),
+						on_update: WidgetCallback::new(|_| DocumentMessage::FrameClear.into()),
+						..Default::default()
+					})),
+				],
+			},
+		],
+	}
+}
+
 fn node_section_font(layer: &TextLayer) -> LayoutGroup {
 	let font = layer.font.clone();
 	let size = layer.size;
@@ -1425,7 +1483,7 @@ fn node_section_stroke(stroke: &Stroke) -> LayoutGroup {
 						direction: SeparatorDirection::Horizontal,
 					})),
 					WidgetHolder::new(Widget::NumberInput(NumberInput {
-						value: Some(stroke.weight() as f64),
+						value: Some(stroke.weight()),
 						is_integer: false,
 						min: Some(0.),
 						unit: " px".into(),
@@ -1473,7 +1531,7 @@ fn node_section_stroke(stroke: &Stroke) -> LayoutGroup {
 						direction: SeparatorDirection::Horizontal,
 					})),
 					WidgetHolder::new(Widget::NumberInput(NumberInput {
-						value: Some(stroke.dash_offset() as f64),
+						value: Some(stroke.dash_offset()),
 						is_integer: true,
 						min: Some(0.),
 						unit: " px".into(),