Add secondary inputs to nodes UI

editor/src/messages/layout/layout_message_handler.rs

@@ -154,6 +154,10 @@ impl<F: Fn(&MessageDiscriminant) -> Vec<KeysGroup>> MessageHandler<LayoutMessage
 						let callback_message = (optional_input.on_update.callback)(optional_input);
 						responses.push_back(callback_message);
 					}
+					Widget::ParameterExposeButton(parameter_expose_button) => {
+						let callback_message = (parameter_expose_button.on_update.callback)(parameter_expose_button);
+						responses.push_back(callback_message);
+					}
 					Widget::PivotAssist(pivot_assist) => {
 						let update_value = value.as_str().expect("RadioInput update was not of type: u64");
 						pivot_assist.position = update_value.into();

editor/src/messages/layout/utility_types/layout_widget.rs

@@ -67,6 +67,7 @@ impl Layout {
 					Widget::LayerReferenceInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 					Widget::NumberInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 					Widget::OptionalInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
+					Widget::ParameterExposeButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 					Widget::PopoverButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 					Widget::TextButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 					Widget::IconLabel(_)
@@ -294,6 +295,7 @@ pub enum Widget {
 	LayerReferenceInput(LayerReferenceInput),
 	NumberInput(NumberInput),
 	OptionalInput(OptionalInput),
+	ParameterExposeButton(ParameterExposeButton),
 	PivotAssist(PivotAssist),
 	PopoverButton(PopoverButton),
 	RadioInput(RadioInput),

editor/src/messages/layout/utility_types/widgets/button_widgets.rs

@@ -1,5 +1,5 @@
-use crate::messages::input_mapper::utility_types::misc::ActionKeys;
 use crate::messages::layout::utility_types::layout_widget::WidgetCallback;
+use crate::messages::{input_mapper::utility_types::misc::ActionKeys, portfolio::document::node_graph::FrontendGraphDataType};
 
 use derivative::*;
 use serde::{Deserialize, Serialize};
@@ -45,6 +45,26 @@ pub struct PopoverButton {
 	pub tooltip_shortcut: Option<ActionKeys>,
 }
 
+#[derive(Clone, Serialize, Deserialize, Derivative, Default)]
+#[derivative(Debug, PartialEq)]
+#[serde(rename_all(serialize = "camelCase", deserialize = "camelCase"))]
+pub struct ParameterExposeButton {
+	pub exposed: bool,
+
+	#[serde(rename = "dataType")]
+	pub data_type: FrontendGraphDataType,
+
+	pub tooltip: String,
+
+	#[serde(skip)]
+	pub tooltip_shortcut: Option<ActionKeys>,
+
+	// Callbacks
+	#[serde(skip)]
+	#[derivative(Debug = "ignore", PartialEq = "ignore")]
+	pub on_update: WidgetCallback<ParameterExposeButton>,
+}
+
 #[derive(Clone, Serialize, Deserialize, Derivative, Default)]
 #[derivative(Debug, PartialEq)]
 #[serde(rename_all(serialize = "camelCase", deserialize = "camelCase"))]

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

@@ -8,9 +8,26 @@ use graphene::layers::nodegraph_layer::NodeGraphFrameLayer;
 mod document_node_types;
 mod node_properties;
 
-#[derive(Clone, Debug, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
-pub enum DataType {
+#[derive(Clone, Copy, Debug, Default, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
+pub enum FrontendGraphDataType {
+	#[default]
+	#[serde(rename = "general")]
+	General,
+	#[serde(rename = "raster")]
 	Raster,
+	#[serde(rename = "color")]
+	Color,
+	#[serde(rename = "vector")]
+	Vector,
+	#[serde(rename = "number")]
+	Number,
+}
+
+#[derive(Clone, Debug, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
+pub struct NodeGraphInput {
+	#[serde(rename = "dataType")]
+	data_type: FrontendGraphDataType,
+	name: String,
 }
 
 #[derive(Clone, Debug, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
@@ -19,8 +36,8 @@ pub struct FrontendNode {
 	#[serde(rename = "displayName")]
 	pub display_name: String,
 	#[serde(rename = "exposedInputs")]
-	pub exposed_inputs: Vec<DataType>,
-	pub outputs: Vec<DataType>,
+	pub exposed_inputs: Vec<NodeGraphInput>,
+	pub outputs: Vec<FrontendGraphDataType>,
 	pub position: (i32, i32),
 }
 
@@ -98,11 +115,24 @@ impl NodeGraphMessageHandler {
 
 		let mut nodes = Vec::new();
 		for (id, node) in &network.nodes {
+			let Some(node_type) = document_node_types::resolve_document_node_type(&node.name) else{
+				warn!("Node '{}' does not exist in library", node.name);
+				continue
+			};
 			nodes.push(FrontendNode {
 				id: *id,
 				display_name: node.name.clone(),
-				exposed_inputs: node.inputs.iter().filter(|input| input.is_exposed()).map(|_| DataType::Raster).collect(),
-				outputs: vec![DataType::Raster],
+				exposed_inputs: node
+					.inputs
+					.iter()
+					.zip(node_type.inputs)
+					.filter(|(input, _)| input.is_exposed())
+					.map(|(_, input_type)| NodeGraphInput {
+						data_type: input_type.data_type,
+						name: input_type.name.to_string(),
+					})
+					.collect(),
+				outputs: node_type.outputs.to_vec(),
 				position: node.metadata.position,
 			})
 		}
@@ -160,7 +190,7 @@ impl MessageHandler<NodeGraphMessage, (&mut Document, &InputPreprocessorMessageH
 					return;
 				};
 
-				let num_inputs = document_node_type.default_inputs.len();
+				let num_inputs = document_node_type.inputs.len();
 
 				let inner_network = NodeNetwork {
 					inputs: (0..num_inputs).map(|_| 0).collect(),
@@ -182,7 +212,7 @@ impl MessageHandler<NodeGraphMessage, (&mut Document, &InputPreprocessorMessageH
 					node_id,
 					DocumentNode {
 						name: node_type.clone(),
-						inputs: document_node_type.default_inputs.to_vec(),
+						inputs: document_node_type.inputs.iter().map(|input| input.default.clone()).collect(),
 						// TODO: Allow inserting nodes that contain other nodes.
 						implementation: DocumentNodeImplementation::Network(inner_network),
 						metadata: graph_craft::document::DocumentNodeMetadata {
@@ -228,6 +258,7 @@ impl MessageHandler<NodeGraphMessage, (&mut Document, &InputPreprocessorMessageH
 						node.metadata.position.1 += displacement_y;
 					}
 				}
+				Self::send_graph(network, responses);
 			}
 			NodeGraphMessage::OpenNodeGraph { layer_path } => {
 				if let Some(_old_layer_path) = self.layer_path.replace(layer_path) {

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

@@ -1,86 +1,175 @@
-use std::borrow::Cow;
+use super::{FrontendGraphDataType, FrontendNodeType};
+use crate::messages::layout::utility_types::layout_widget::{LayoutGroup, Widget, WidgetHolder};
+use crate::messages::layout::utility_types::widgets::label_widgets::TextLabel;
 
 use graph_craft::document::value::TaggedValue;
-use graph_craft::document::NodeInput;
+use graph_craft::document::{DocumentNode, NodeId, NodeInput};
 use graph_craft::proto::{NodeIdentifier, Type};
 use graphene_std::raster::Image;
 
-use super::FrontendNodeType;
+use std::borrow::Cow;
+
+pub struct DocumentInputType {
+	pub name: &'static str,
+	pub data_type: FrontendGraphDataType,
+	pub default: NodeInput,
+}
 
 pub struct DocumentNodeType {
 	pub name: &'static str,
 	pub identifier: NodeIdentifier,
-	pub default_inputs: &'static [NodeInput],
+	pub inputs: &'static [DocumentInputType],
+	pub outputs: &'static [FrontendGraphDataType],
+	pub properties: fn(&DocumentNode, NodeId) -> Vec<LayoutGroup>,
 }
 
 // TODO: Dynamic node library
-static DOCUMENT_NODE_TYPES: [DocumentNodeType; 5] = [
+static DOCUMENT_NODE_TYPES: [DocumentNodeType; 7] = [
 	DocumentNodeType {
 		name: "Identity",
 		identifier: NodeIdentifier::new("graphene_core::ops::IdNode", &[Type::Concrete(Cow::Borrowed("Any<'_>"))]),
-		default_inputs: &[NodeInput::Node(0)],
+		inputs: &[DocumentInputType {
+			name: "In",
+			data_type: FrontendGraphDataType::General,
+			default: NodeInput::Node(0),
+		}],
+		outputs: &[FrontendGraphDataType::General],
+		properties: |_document_node, _node_id| {
+			vec![LayoutGroup::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+					value: format!("The identity node simply returns the input"),
+					..Default::default()
+				}))],
+			}]
+		},
+	},
+	DocumentNodeType {
+		name: "Input",
+		identifier: NodeIdentifier::new("graphene_core::ops::IdNode", &[Type::Concrete(Cow::Borrowed("Any<'_>"))]),
+		inputs: &[],
+		outputs: &[FrontendGraphDataType::Raster],
+		properties: |_document_node, _node_id| {
+			vec![LayoutGroup::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+					value: format!("The input to the graph is the bitmap under the frame"),
+					..Default::default()
+				}))],
+			}]
+		},
+	},
+	DocumentNodeType {
+		name: "Output",
+		identifier: NodeIdentifier::new("graphene_core::ops::IdNode", &[Type::Concrete(Cow::Borrowed("Any<'_>"))]),
+		inputs: &[DocumentInputType {
+			name: "In",
+			data_type: FrontendGraphDataType::Raster,
+			default: NodeInput::Value {
+				tagged_value: TaggedValue::Image(Image::empty()),
+				exposed: true,
+			},
+		}],
+		outputs: &[],
+		properties: |_document_node, _node_id| {
+			vec![LayoutGroup::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+					value: format!("The output to the graph is rendered in the frame"),
+					..Default::default()
+				}))],
+			}]
+		},
 	},
 	DocumentNodeType {
 		name: "Grayscale Image",
 		identifier: NodeIdentifier::new("graphene_std::raster::GrayscaleImageNode", &[]),
-		default_inputs: &[NodeInput::Value {
-			tagged_value: TaggedValue::Image(Image {
-				width: 0,
-				height: 0,
-				data: Vec::new(),
-			}),
-			exposed: true,
+		inputs: &[DocumentInputType {
+			name: "Image",
+			data_type: FrontendGraphDataType::Raster,
+			default: NodeInput::Value {
+				tagged_value: TaggedValue::Image(Image::empty()),
+				exposed: true,
+			},
 		}],
+		outputs: &[FrontendGraphDataType::Raster],
+		properties: |_document_node, _node_id| {
+			vec![LayoutGroup::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+					value: format!("The output to the graph is rendered in the frame"),
+					..Default::default()
+				}))],
+			}]
+		},
 	},
 	DocumentNodeType {
 		name: "Brighten Image",
 		identifier: NodeIdentifier::new("graphene_std::raster::BrightenImageNode", &[Type::Concrete(Cow::Borrowed("&TypeErasedNode"))]),
-		default_inputs: &[
-			NodeInput::Value {
-				tagged_value: TaggedValue::Image(Image {
-					width: 0,
-					height: 0,
-					data: Vec::new(),
-				}),
-				exposed: true,
+		inputs: &[
+			DocumentInputType {
+				name: "Image",
+				data_type: FrontendGraphDataType::Raster,
+				default: NodeInput::Value {
+					tagged_value: TaggedValue::Image(Image::empty()),
+					exposed: true,
+				},
 			},
-			NodeInput::Value {
-				tagged_value: TaggedValue::F32(10.),
-				exposed: false,
+			DocumentInputType {
+				name: "Amount",
+				data_type: FrontendGraphDataType::Number,
+				default: NodeInput::Value {
+					tagged_value: TaggedValue::F32(10.),
+					exposed: false,
+				},
 			},
 		],
+		outputs: &[FrontendGraphDataType::Raster],
+		properties: super::node_properties::brighten_image_properties,
 	},
 	DocumentNodeType {
 		name: "Hue Shift Image",
 		identifier: NodeIdentifier::new("graphene_std::raster::HueShiftImage", &[Type::Concrete(Cow::Borrowed("&TypeErasedNode"))]),
-		default_inputs: &[
-			NodeInput::Value {
-				tagged_value: TaggedValue::Image(Image {
-					width: 0,
-					height: 0,
-					data: Vec::new(),
-				}),
-				exposed: true,
+		inputs: &[
+			DocumentInputType {
+				name: "Image",
+				data_type: FrontendGraphDataType::Raster,
+				default: NodeInput::Value {
+					tagged_value: TaggedValue::Image(Image::empty()),
+					exposed: true,
+				},
 			},
-			NodeInput::Value {
-				tagged_value: TaggedValue::F32(50.),
-				exposed: false,
+			DocumentInputType {
+				name: "Amount",
+				data_type: FrontendGraphDataType::Number,
+				default: NodeInput::Value {
+					tagged_value: TaggedValue::F32(10.),
+					exposed: false,
+				},
 			},
 		],
+		outputs: &[FrontendGraphDataType::Raster],
+		properties: super::node_properties::hue_shift_image_properties,
 	},
 	DocumentNodeType {
 		name: "Add",
-		identifier: NodeIdentifier::new("graphene_core::ops::AddNode", &[Type::Concrete(Cow::Borrowed("u32")), Type::Concrete(Cow::Borrowed("u32"))]),
-		default_inputs: &[
-			NodeInput::Value {
-				tagged_value: TaggedValue::U32(0),
-				exposed: false,
+		identifier: NodeIdentifier::new("graphene_core::ops::AddNode", &[Type::Concrete(Cow::Borrowed("&TypeErasedNode"))]),
+		inputs: &[
+			DocumentInputType {
+				name: "Left",
+				data_type: FrontendGraphDataType::Number,
+				default: NodeInput::Value {
+					tagged_value: TaggedValue::F32(0.),
+					exposed: true,
+				},
 			},
-			NodeInput::Value {
-				tagged_value: TaggedValue::U32(0),
-				exposed: false,
+			DocumentInputType {
+				name: "Right",
+				data_type: FrontendGraphDataType::Number,
+				default: NodeInput::Value {
+					tagged_value: TaggedValue::F32(0.),
+					exposed: true,
+				},
 			},
 		],
+		outputs: &[FrontendGraphDataType::Number],
+		properties: super::node_properties::add_properties,
 	},
 ];