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/frontend/frontend_message.rs

@@ -86,6 +86,14 @@ pub enum FrontendMessage {
 	},
 	TriggerLoadAutoSaveDocuments,
 	TriggerLoadPreferences,
+	TriggerNodeGraphFrameGenerate {
+		#[serde(rename = "documentId")]
+		document_id: u64,
+		#[serde(rename = "layerPath")]
+		layer_path: Vec<LayerId>,
+		svg: String,
+		size: glam::DVec2,
+	},
 	TriggerOpenDocument,
 	TriggerPaste,
 	TriggerRasterDownload {

editor/src/messages/input_mapper/default_mapping.rs

@@ -123,6 +123,13 @@ pub fn default_mapping() -> Mapping {
 		entry!(KeyDown(Escape); action_dispatch=ImaginateToolMessage::Abort),
 		entry!(PointerMove; refresh_keys=[Alt, Shift], action_dispatch=ImaginateToolMessage::Resize { center: Alt, lock_ratio: Shift }),
 		//
+		// NodeGraphFrameToolMessage
+		entry!(KeyDown(Lmb); action_dispatch=NodeGraphFrameToolMessage::DragStart),
+		entry!(KeyUp(Lmb); action_dispatch=NodeGraphFrameToolMessage::DragStop),
+		entry!(KeyDown(Rmb); action_dispatch=NodeGraphFrameToolMessage::Abort),
+		entry!(KeyDown(Escape); action_dispatch=NodeGraphFrameToolMessage::Abort),
+		entry!(PointerMove; refresh_keys=[Alt, Shift], action_dispatch=NodeGraphFrameToolMessage::Resize { center: Alt, lock_ratio: Shift }),
+		//
 		// EllipseToolMessage
 		entry!(KeyDown(Lmb); action_dispatch=EllipseToolMessage::DragStart),
 		entry!(KeyUp(Lmb); action_dispatch=EllipseToolMessage::DragStop),

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(),

editor/src/messages/portfolio/portfolio_message.rs

@@ -109,6 +109,12 @@ pub enum PortfolioMessage {
 		data: String,
 	},
 	PrevDocument,
+	ProcessNodeGraphFrame {
+		document_id: u64,
+		layer_path: Vec<LayerId>,
+		image_data: Vec<u8>,
+		size: (u32, u32),
+	},
 	SelectDocument {
 		document_id: u64,
 	},

editor/src/messages/portfolio/portfolio_message_handler.rs

@@ -2,16 +2,16 @@ use super::utility_types::PersistentData;
 use crate::application::generate_uuid;
 use crate::consts::{DEFAULT_DOCUMENT_NAME, GRAPHITE_DOCUMENT_VERSION};
 use crate::messages::dialog::simple_dialogs;
-use crate::messages::frontend::utility_types::FrontendDocumentDetails;
+use crate::messages::frontend::utility_types::{FrontendDocumentDetails, FrontendImageData};
 use crate::messages::layout::utility_types::layout_widget::PropertyHolder;
 use crate::messages::layout::utility_types::misc::LayoutTarget;
 use crate::messages::portfolio::document::utility_types::clipboards::{Clipboard, CopyBufferEntry, INTERNAL_CLIPBOARD_COUNT};
 use crate::messages::portfolio::utility_types::ImaginateServerStatus;
 use crate::messages::prelude::*;
 
-use graphene::layers::layer_info::LayerDataTypeDiscriminant;
+use graphene::layers::layer_info::{LayerDataType, LayerDataTypeDiscriminant};
 use graphene::layers::text_layer::Font;
-use graphene::Operation as DocumentOperation;
+use graphene::{LayerId, Operation as DocumentOperation};
 
 #[derive(Debug, Clone, Default)]
 pub struct PortfolioMessageHandler {
@@ -413,6 +413,86 @@ impl MessageHandler<PortfolioMessage, (&InputPreprocessorMessageHandler, &Prefer
 					responses.push_back(PortfolioMessage::SelectDocument { document_id: prev_id }.into());
 				}
 			}
+			PortfolioMessage::ProcessNodeGraphFrame {
+				document_id,
+				layer_path,
+				image_data,
+				size,
+			} => {
+				fn read_image(document: Option<&DocumentMessageHandler>, layer_path: &[LayerId], image_data: Vec<u8>, (width, height): (u32, u32)) -> Result<Vec<u8>, String> {
+					use graphene_std::raster::Image;
+					use image::{ImageBuffer, Rgba};
+					use std::io::Cursor;
+
+					let data = image_data.chunks_exact(4).map(|v| graphene_core::raster::color::Color::from_rgba8(v[0], v[1], v[2], v[3])).collect();
+					let image = graphene_std::raster::Image { width, height, data };
+
+					let document = document.ok_or_else(|| "Invalid document".to_string())?;
+					let layer = document.graphene_document.layer(layer_path).map_err(|e| format!("No layer: {e:?}"))?;
+					let node_graph_frame = match &layer.data {
+						LayerDataType::NodeGraphFrame(frame) => Ok(frame),
+						_ => Err("Invalid layer type".to_string()),
+					}?;
+
+					// Execute the node graph
+
+					let mut network = node_graph_frame.network.clone();
+
+					let stack = borrow_stack::FixedSizeStack::new(256);
+					network.flatten(0);
+
+					let mut proto_network = network.into_proto_network();
+					proto_network.reorder_ids();
+
+					for (_id, node) in proto_network.nodes {
+						graph_craft::node_registry::push_node(node, &stack);
+					}
+
+					use borrow_stack::BorrowStack;
+					use dyn_any::IntoDynAny;
+					use graphene_core::Node;
+					let result = unsafe { stack.get().last().unwrap().eval(image.into_dyn()) };
+					let result = *dyn_any::downcast::<Image>(result).unwrap();
+
+					let mut bytes: Vec<u8> = Vec::new();
+					let [result_width, result_height] = [result.width, result.height];
+					let size_estimate = (result_width * result_height * 4) as usize;
+
+					let mut result_bytes = Vec::with_capacity(size_estimate);
+					result_bytes.extend(result.data.into_iter().flat_map(|colour| colour.to_rgba8()));
+					let output: ImageBuffer<Rgba<u8>, _> = image::ImageBuffer::from_raw(result_width, result_height, result_bytes).ok_or_else(|| "Invalid image size".to_string())?;
+					output.write_to(&mut Cursor::new(&mut bytes), image::ImageOutputFormat::Bmp).map_err(|e| e.to_string())?;
+
+					Ok(bytes)
+				}
+
+				match read_image(self.documents.get(&document_id), &layer_path, image_data, size) {
+					Ok(image_data) => {
+						responses.push_back(
+							DocumentOperation::SetNodeGraphFrameImageData {
+								layer_path: layer_path.clone(),
+								image_data: image_data.clone(),
+							}
+							.into(),
+						);
+						let mime = "image/bmp".to_string();
+						responses.push_back(
+							FrontendMessage::UpdateImageData {
+								document_id,
+								image_data: vec![FrontendImageData { path: layer_path, image_data, mime }],
+							}
+							.into(),
+						);
+					}
+					Err(description) => responses.push_back(
+						DialogMessage::DisplayDialogError {
+							title: "Failed to update image".to_string(),
+							description,
+						}
+						.into(),
+					),
+				}
+			}
 			PortfolioMessage::SelectDocument { document_id } => {
 				if let Some(document) = self.active_document() {
 					if !document.is_auto_saved() {

editor/src/messages/prelude.rs

@@ -37,6 +37,7 @@ pub use crate::messages::tool::tool_messages::gradient_tool::{GradientToolMessag
 pub use crate::messages::tool::tool_messages::imaginate_tool::{ImaginateToolMessage, ImaginateToolMessageDiscriminant};
 pub use crate::messages::tool::tool_messages::line_tool::{LineToolMessage, LineToolMessageDiscriminant};
 pub use crate::messages::tool::tool_messages::navigate_tool::{NavigateToolMessage, NavigateToolMessageDiscriminant};
+pub use crate::messages::tool::tool_messages::node_graph_frame_tool::{NodeGraphFrameToolMessage, NodeGraphFrameToolMessageDiscriminant};
 pub use crate::messages::tool::tool_messages::path_tool::{PathToolMessage, PathToolMessageDiscriminant};
 pub use crate::messages::tool::tool_messages::pen_tool::{PenToolMessage, PenToolMessageDiscriminant};
 pub use crate::messages::tool::tool_messages::rectangle_tool::{RectangleToolMessage, RectangleToolMessageDiscriminant};

editor/src/messages/tool/tool_message.rs

@@ -78,6 +78,9 @@ pub enum ToolMessage {
 	#[remain::unsorted]
 	#[child]
 	Imaginate(ImaginateToolMessage),
+	#[remain::unsorted]
+	#[child]
+	NodeGraphFrame(NodeGraphFrameToolMessage),
 
 	// Messages
 	#[remain::unsorted]
@@ -114,6 +117,8 @@ pub enum ToolMessage {
 
 	#[remain::unsorted]
 	ActivateToolImaginate,
+	#[remain::unsorted]
+	ActivateToolNodeGraphFrame,
 
 	ActivateTool {
 		tool_type: ToolType,

editor/src/messages/tool/tool_messages/mod.rs

@@ -7,6 +7,7 @@ pub mod gradient_tool;
 pub mod imaginate_tool;
 pub mod line_tool;
 pub mod navigate_tool;
+pub mod node_graph_frame_tool;
 pub mod path_tool;
 pub mod pen_tool;
 pub mod rectangle_tool;

editor/src/messages/tool/tool_messages/node_graph_frame_tool.rs

@@ -0,0 +1,231 @@
+use crate::consts::DRAG_THRESHOLD;
+use crate::messages::frontend::utility_types::MouseCursorIcon;
+use crate::messages::input_mapper::utility_types::input_keyboard::{Key, KeysGroup, MouseMotion};
+use crate::messages::layout::utility_types::layout_widget::PropertyHolder;
+use crate::messages::prelude::*;
+use crate::messages::tool::common_functionality::resize::Resize;
+use crate::messages::tool::utility_types::{EventToMessageMap, Fsm, ToolActionHandlerData, ToolMetadata, ToolTransition, ToolType};
+use crate::messages::tool::utility_types::{HintData, HintGroup, HintInfo};
+
+use graphene::Operation;
+
+use glam::DAffine2;
+use serde::{Deserialize, Serialize};
+
+#[derive(Default)]
+pub struct NodeGraphFrameTool {
+	fsm_state: NodeGraphToolFsmState,
+	tool_data: NodeGraphToolData,
+}
+
+#[remain::sorted]
+#[impl_message(Message, ToolMessage, NodeGraphFrame)]
+#[derive(PartialEq, Eq, Clone, Debug, Hash, Serialize, Deserialize)]
+pub enum NodeGraphFrameToolMessage {
+	// Standard messages
+	#[remain::unsorted]
+	Abort,
+
+	// Tool-specific messages
+	DragStart,
+	DragStop,
+	Resize {
+		center: Key,
+		lock_ratio: Key,
+	},
+}
+
+impl PropertyHolder for NodeGraphFrameTool {}
+
+impl<'a> MessageHandler<ToolMessage, ToolActionHandlerData<'a>> for NodeGraphFrameTool {
+	fn process_message(&mut self, message: ToolMessage, tool_data: ToolActionHandlerData<'a>, responses: &mut VecDeque<Message>) {
+		if message == ToolMessage::UpdateHints {
+			self.fsm_state.update_hints(responses);
+			return;
+		}
+
+		if message == ToolMessage::UpdateCursor {
+			self.fsm_state.update_cursor(responses);
+			return;
+		}
+
+		let new_state = self.fsm_state.transition(message, &mut self.tool_data, tool_data, &(), responses);
+
+		if self.fsm_state != new_state {
+			self.fsm_state = new_state;
+			self.fsm_state.update_hints(responses);
+			self.fsm_state.update_cursor(responses);
+		}
+	}
+
+	fn actions(&self) -> ActionList {
+		use NodeGraphToolFsmState::*;
+
+		match self.fsm_state {
+			Ready => actions!(NodeGraphFrameToolMessageDiscriminant;
+				DragStart,
+			),
+			Drawing => actions!(NodeGraphFrameToolMessageDiscriminant;
+				DragStop,
+				Abort,
+				Resize,
+			),
+		}
+	}
+}
+
+impl ToolMetadata for NodeGraphFrameTool {
+	fn icon_name(&self) -> String {
+		"RasterNodesTool".into()
+	}
+	fn tooltip(&self) -> String {
+		"Node Graph Frame Tool".into()
+	}
+	fn tool_type(&self) -> crate::messages::tool::utility_types::ToolType {
+		ToolType::NodeGraphFrame
+	}
+}
+
+impl ToolTransition for NodeGraphFrameTool {
+	fn event_to_message_map(&self) -> EventToMessageMap {
+		EventToMessageMap {
+			document_dirty: None,
+			tool_abort: Some(NodeGraphFrameToolMessage::Abort.into()),
+			selection_changed: None,
+		}
+	}
+}
+
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+enum NodeGraphToolFsmState {
+	Ready,
+	Drawing,
+}
+
+impl Default for NodeGraphToolFsmState {
+	fn default() -> Self {
+		NodeGraphToolFsmState::Ready
+	}
+}
+#[derive(Clone, Debug, Default)]
+struct NodeGraphToolData {
+	data: Resize,
+}
+
+impl Fsm for NodeGraphToolFsmState {
+	type ToolData = NodeGraphToolData;
+	type ToolOptions = ();
+
+	fn transition(
+		self,
+		event: ToolMessage,
+		tool_data: &mut Self::ToolData,
+		(document, _document_id, _global_tool_data, input, font_cache): ToolActionHandlerData,
+		_tool_options: &Self::ToolOptions,
+		responses: &mut VecDeque<Message>,
+	) -> Self {
+		use NodeGraphFrameToolMessage::*;
+		use NodeGraphToolFsmState::*;
+
+		let mut shape_data = &mut tool_data.data;
+
+		if let ToolMessage::NodeGraphFrame(event) = event {
+			match (self, event) {
+				(Ready, DragStart) => {
+					shape_data.start(responses, document, input.mouse.position, font_cache);
+					responses.push_back(DocumentMessage::StartTransaction.into());
+					shape_data.path = Some(document.get_path_for_new_layer());
+					responses.push_back(DocumentMessage::DeselectAllLayers.into());
+
+					responses.push_back(
+						Operation::AddNodeGraphFrame {
+							path: shape_data.path.clone().unwrap(),
+							insert_index: -1,
+							transform: DAffine2::ZERO.to_cols_array(),
+						}
+						.into(),
+					);
+
+					Drawing
+				}
+				(state, Resize { center, lock_ratio }) => {
+					if let Some(message) = shape_data.calculate_transform(responses, document, center, lock_ratio, input) {
+						responses.push_back(message);
+					}
+
+					state
+				}
+				(Drawing, DragStop) => {
+					match shape_data.drag_start.distance(input.mouse.position) <= DRAG_THRESHOLD {
+						true => responses.push_back(DocumentMessage::AbortTransaction.into()),
+						false => responses.push_back(DocumentMessage::CommitTransaction.into()),
+					}
+
+					shape_data.cleanup(responses);
+
+					Ready
+				}
+				(Drawing, Abort) => {
+					responses.push_back(DocumentMessage::AbortTransaction.into());
+
+					shape_data.cleanup(responses);
+
+					Ready
+				}
+				_ => self,
+			}
+		} else {
+			self
+		}
+	}
+
+	fn update_hints(&self, responses: &mut VecDeque<Message>) {
+		let hint_data = match self {
+			NodeGraphToolFsmState::Ready => HintData(vec![HintGroup(vec![
+				HintInfo {
+					key_groups: vec![],
+					key_groups_mac: None,
+					mouse: Some(MouseMotion::LmbDrag),
+					label: String::from("Draw Repaint Frame"),
+					plus: false,
+				},
+				HintInfo {
+					key_groups: vec![KeysGroup(vec![Key::Shift])],
+					key_groups_mac: None,
+					mouse: None,
+					label: String::from("Constrain Square"),
+					plus: true,
+				},
+				HintInfo {
+					key_groups: vec![KeysGroup(vec![Key::Alt])],
+					key_groups_mac: None,
+					mouse: None,
+					label: String::from("From Center"),
+					plus: true,
+				},
+			])]),
+			NodeGraphToolFsmState::Drawing => HintData(vec![HintGroup(vec![
+				HintInfo {
+					key_groups: vec![KeysGroup(vec![Key::Shift])],
+					key_groups_mac: None,
+					mouse: None,
+					label: String::from("Constrain Square"),
+					plus: false,
+				},
+				HintInfo {
+					key_groups: vec![KeysGroup(vec![Key::Alt])],
+					key_groups_mac: None,
+					mouse: None,
+					label: String::from("From Center"),
+					plus: false,
+				},
+			])]),
+		};
+
+		responses.push_back(FrontendMessage::UpdateInputHints { hint_data }.into());
+	}
+
+	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
+		responses.push_back(FrontendMessage::UpdateMouseCursor { cursor: MouseCursorIcon::Crosshair }.into());
+	}
+}

editor/src/messages/tool/utility_types.rs

@@ -281,6 +281,7 @@ pub enum ToolType {
 	Detail,
 	Relight,
 	Imaginate,
+	NodeGraphFrame,
 }
 
 enum ToolAvailability {
@@ -293,28 +294,29 @@ fn list_tools_in_groups() -> Vec<Vec<ToolAvailability>> {
 	vec![
 		vec![
 			// General tool group
-			ToolAvailability::Available(Box::new(select_tool::SelectTool::default())),
-			ToolAvailability::Available(Box::new(artboard_tool::ArtboardTool::default())),
-			ToolAvailability::Available(Box::new(navigate_tool::NavigateTool::default())),
-			ToolAvailability::Available(Box::new(eyedropper_tool::EyedropperTool::default())),
-			ToolAvailability::Available(Box::new(fill_tool::FillTool::default())),
-			ToolAvailability::Available(Box::new(gradient_tool::GradientTool::default())),
+			ToolAvailability::Available(Box::<select_tool::SelectTool>::default()),
+			ToolAvailability::Available(Box::<artboard_tool::ArtboardTool>::default()),
+			ToolAvailability::Available(Box::<navigate_tool::NavigateTool>::default()),
+			ToolAvailability::Available(Box::<eyedropper_tool::EyedropperTool>::default()),
+			ToolAvailability::Available(Box::<fill_tool::FillTool>::default()),
+			ToolAvailability::Available(Box::<gradient_tool::GradientTool>::default()),
 		],
 		vec![
 			// Vector tool group
-			ToolAvailability::Available(Box::new(path_tool::PathTool::default())),
-			ToolAvailability::Available(Box::new(pen_tool::PenTool::default())),
-			ToolAvailability::Available(Box::new(freehand_tool::FreehandTool::default())),
-			ToolAvailability::Available(Box::new(spline_tool::SplineTool::default())),
-			ToolAvailability::Available(Box::new(line_tool::LineTool::default())),
-			ToolAvailability::Available(Box::new(rectangle_tool::RectangleTool::default())),
-			ToolAvailability::Available(Box::new(ellipse_tool::EllipseTool::default())),
-			ToolAvailability::Available(Box::new(shape_tool::ShapeTool::default())),
-			ToolAvailability::Available(Box::new(text_tool::TextTool::default())),
+			ToolAvailability::Available(Box::<path_tool::PathTool>::default()),
+			ToolAvailability::Available(Box::<pen_tool::PenTool>::default()),
+			ToolAvailability::Available(Box::<freehand_tool::FreehandTool>::default()),
+			ToolAvailability::Available(Box::<spline_tool::SplineTool>::default()),
+			ToolAvailability::Available(Box::<line_tool::LineTool>::default()),
+			ToolAvailability::Available(Box::<rectangle_tool::RectangleTool>::default()),
+			ToolAvailability::Available(Box::<ellipse_tool::EllipseTool>::default()),
+			ToolAvailability::Available(Box::<shape_tool::ShapeTool>::default()),
+			ToolAvailability::Available(Box::<text_tool::TextTool>::default()),
 		],
 		vec![
 			// Raster tool group
-			ToolAvailability::Available(Box::new(imaginate_tool::ImaginateTool::default())),
+			ToolAvailability::Available(Box::<imaginate_tool::ImaginateTool>::default()),
+			ToolAvailability::Available(Box::<node_graph_frame_tool::NodeGraphFrameTool>::default()),
 			ToolAvailability::ComingSoon(ToolEntry {
 				tool_type: ToolType::Brush,
 				icon_name: "RasterBrushTool".into(),
@@ -384,6 +386,7 @@ pub fn tool_message_to_tool_type(tool_message: &ToolMessage) -> ToolType {
 		// ToolMessage::Detail(_) => ToolType::Detail,
 		// ToolMessage::Relight(_) => ToolType::Relight,
 		ToolMessage::Imaginate(_) => ToolType::Imaginate,
+		ToolMessage::NodeGraphFrame(_) => ToolType::NodeGraphFrame,
 		_ => panic!(
 			"Conversion from ToolMessage to ToolType impossible because the given ToolMessage does not have a matching ToolType. Got: {:?}",
 			tool_message
@@ -420,6 +423,7 @@ pub fn tool_type_to_activate_tool_message(tool_type: ToolType) -> ToolMessageDis
 		// ToolType::Detail => ToolMessageDiscriminant::ActivateToolDetail,
 		// ToolType::Relight => ToolMessageDiscriminant::ActivateToolRelight,
 		ToolType::Imaginate => ToolMessageDiscriminant::ActivateToolImaginate,
+		ToolType::NodeGraphFrame => ToolMessageDiscriminant::ActivateToolNodeGraphFrame,
 		_ => panic!(
 			"Conversion from ToolType to ToolMessage impossible because the given ToolType does not have a matching ToolMessage. Got: {:?}",
 			tool_type