Add the first field-based nodes: 'Instance on Points', 'Instance Position', 'Instance Index', as well as 'Grid' (#2574)

* Basic fields

* Add 'Extract XY' and 'Split Vector2' nodes

* Add 'Instance Index' node

* Fix test again

* Improve grid generator to support rectangular as well

* Avoid crashing

---------

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

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

@@ -20,6 +20,7 @@ use graphene_core::text::{Font, TypesettingConfig};
 use graphene_core::transform::Footprint;
 use graphene_core::vector::VectorDataTable;
 use graphene_core::*;
+use graphene_std::ops::XY;
 use std::collections::{HashMap, HashSet, VecDeque};
 #[cfg(feature = "gpu")]
 use wgpu_executor::{Bindgroup, CommandBuffer, PipelineLayout, ShaderHandle, ShaderInputFrame, WgpuShaderInput};
@@ -900,6 +901,75 @@ fn static_nodes() -> Vec<DocumentNodeDefinition> {
 			description: Cow::Borrowed("TODO"),
 			properties: None,
 		},
+		DocumentNodeDefinition {
+			identifier: "Split Vector2",
+			category: "Math: Vector",
+			node_template: NodeTemplate {
+				document_node: DocumentNode {
+					implementation: DocumentNodeImplementation::Network(NodeNetwork {
+						exports: vec![NodeInput::node(NodeId(0), 0), NodeInput::node(NodeId(1), 0)],
+						nodes: [
+							DocumentNode {
+								inputs: vec![NodeInput::network(concrete!(ImageFrameTable<Color>), 0), NodeInput::value(TaggedValue::XY(XY::X), false)],
+								implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("graphene_core::ops::ExtractXyNode")),
+								manual_composition: Some(generic!(T)),
+								..Default::default()
+							},
+							DocumentNode {
+								inputs: vec![NodeInput::network(concrete!(ImageFrameTable<Color>), 0), NodeInput::value(TaggedValue::XY(XY::Y), false)],
+								implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("graphene_core::ops::ExtractXyNode")),
+								manual_composition: Some(generic!(T)),
+								..Default::default()
+							},
+						]
+						.into_iter()
+						.enumerate()
+						.map(|(id, node)| (NodeId(id as u64), node))
+						.collect(),
+
+						..Default::default()
+					}),
+					inputs: vec![NodeInput::value(TaggedValue::ImageFrame(ImageFrameTable::one_empty_image()), true)],
+					..Default::default()
+				},
+				persistent_node_metadata: DocumentNodePersistentMetadata {
+					input_properties: vec!["Vector2".into()],
+					output_names: vec!["X".to_string(), "Y".to_string()],
+					has_primary_output: false,
+					network_metadata: Some(NodeNetworkMetadata {
+						persistent_metadata: NodeNetworkPersistentMetadata {
+							node_metadata: [
+								DocumentNodeMetadata {
+									persistent_metadata: DocumentNodePersistentMetadata {
+										display_name: "Extract XY".to_string(),
+										node_type_metadata: NodeTypePersistentMetadata::node(IVec2::new(0, 0)),
+										..Default::default()
+									},
+									..Default::default()
+								},
+								DocumentNodeMetadata {
+									persistent_metadata: DocumentNodePersistentMetadata {
+										display_name: "Extract XY".to_string(),
+										node_type_metadata: NodeTypePersistentMetadata::node(IVec2::new(0, 2)),
+										..Default::default()
+									},
+									..Default::default()
+								},
+							]
+							.into_iter()
+							.enumerate()
+							.map(|(id, node)| (NodeId(id as u64), node))
+							.collect(),
+							..Default::default()
+						},
+						..Default::default()
+					}),
+					..Default::default()
+				},
+			},
+			description: Cow::Borrowed("TODO"),
+			properties: None,
+		},
 		DocumentNodeDefinition {
 			identifier: "Brush",
 			category: "Raster",
@@ -2889,6 +2959,7 @@ fn static_node_properties() -> NodeProperties {
 	map.insert("exposure_properties".to_string(), Box::new(node_properties::exposure_properties));
 	map.insert("math_properties".to_string(), Box::new(node_properties::math_properties));
 	map.insert("rectangle_properties".to_string(), Box::new(node_properties::rectangle_properties));
+	map.insert("grid_properties".to_string(), Box::new(node_properties::grid_properties));
 	map.insert(
 		"identity_properties".to_string(),
 		Box::new(|_node_id, _context| node_properties::string_properties("The identity node simply passes its data through.")),

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

@@ -21,9 +21,10 @@ use graphene_core::vector::misc::CentroidType;
 use graphene_core::vector::style::{GradientType, LineCap, LineJoin};
 use graphene_std::animation::RealTimeMode;
 use graphene_std::application_io::TextureFrameTable;
+use graphene_std::ops::XY;
 use graphene_std::transform::Footprint;
 use graphene_std::vector::VectorDataTable;
-use graphene_std::vector::misc::BooleanOperation;
+use graphene_std::vector::misc::{BooleanOperation, GridType};
 use graphene_std::vector::style::{Fill, FillChoice, FillType, GradientStops};
 use graphene_std::{GraphicGroupTable, RasterFrame};
 
@@ -168,6 +169,7 @@ pub(crate) fn property_from_type(
 						Some(x) if x == TypeId::of::<RealTimeMode>() => real_time_mode(document_node, node_id, index, name, true),
 						Some(x) if x == TypeId::of::<RedGreenBlue>() => color_channel(document_node, node_id, index, name, true),
 						Some(x) if x == TypeId::of::<RedGreenBlueAlpha>() => rgba_channel(document_node, node_id, index, name, true),
+						Some(x) if x == TypeId::of::<XY>() => xy_components(document_node, node_id, index, name, true),
 						Some(x) if x == TypeId::of::<NoiseType>() => noise_type(document_node, node_id, index, name, true),
 						Some(x) if x == TypeId::of::<FractalType>() => fractal_type(document_node, node_id, index, name, true, false),
 						Some(x) if x == TypeId::of::<CellularDistanceFunction>() => cellular_distance_function(document_node, node_id, index, name, true, false),
@@ -185,6 +187,7 @@ pub(crate) fn property_from_type(
 							.widget_holder(),
 						]
 						.into(),
+						Some(x) if x == TypeId::of::<GridType>() => grid_type_widget(document_node, node_id, index, name, true),
 						Some(x) if x == TypeId::of::<LineCap>() => line_cap_widget(document_node, node_id, index, name, true),
 						Some(x) if x == TypeId::of::<LineJoin>() => line_join_widget(document_node, node_id, index, name, true),
 						Some(x) if x == TypeId::of::<FillType>() => vec![
@@ -567,6 +570,28 @@ pub fn vec2_widget(
 					.widget_holder(),
 			]);
 		}
+		Some(&TaggedValue::F64(value)) => {
+			widgets.extend_from_slice(&[
+				Separator::new(SeparatorType::Unrelated).widget_holder(),
+				NumberInput::new(Some(value))
+					.label(x)
+					.unit(unit)
+					.min(min.unwrap_or(-((1_u64 << f64::MANTISSA_DIGITS) as f64)))
+					.max((1_u64 << f64::MANTISSA_DIGITS) as f64)
+					.on_update(update_value(move |input: &NumberInput| TaggedValue::DVec2(DVec2::new(input.value.unwrap(), value)), node_id, index))
+					.on_commit(commit_value)
+					.widget_holder(),
+				Separator::new(SeparatorType::Related).widget_holder(),
+				NumberInput::new(Some(value))
+					.label(y)
+					.unit(unit)
+					.min(min.unwrap_or(-((1_u64 << f64::MANTISSA_DIGITS) as f64)))
+					.max((1_u64 << f64::MANTISSA_DIGITS) as f64)
+					.on_update(update_value(move |input: &NumberInput| TaggedValue::DVec2(DVec2::new(value, input.value.unwrap())), node_id, index))
+					.on_commit(commit_value)
+					.widget_holder(),
+			]);
+		}
 		_ => {}
 	}
 
@@ -745,6 +770,15 @@ pub fn number_widget(document_node: &DocumentNode, node_id: NodeId, index: usize
 					.widget_holder(),
 			]);
 		}
+		Some(&TaggedValue::DVec2(dvec2)) => widgets.extend_from_slice(&[
+			Separator::new(SeparatorType::Unrelated).widget_holder(),
+			number_props
+			// We use an arbitrary `y` instead of an arbitrary `x` here because the "Grid" node's "Spacing" value's height should be used from rectangular mode when transferred to "Y Spacing" in isometric mode
+				.value(Some(dvec2.y))
+				.on_update(update_value(move |x: &NumberInput| TaggedValue::F64(x.value.unwrap()), node_id, index))
+				.on_commit(commit_value)
+				.widget_holder(),
+		]),
 		_ => {}
 	}
 
@@ -840,6 +874,33 @@ pub fn rgba_channel(document_node: &DocumentNode, node_id: NodeId, index: usize,
 	LayoutGroup::Row { widgets }.with_tooltip("Color Channel")
 }
 
+pub fn xy_components(document_node: &DocumentNode, node_id: NodeId, index: usize, name: &str, blank_assist: bool) -> LayoutGroup {
+	let mut widgets = start_widgets(document_node, node_id, index, name, FrontendGraphDataType::General, blank_assist);
+	let Some(input) = document_node.inputs.get(index) else {
+		log::warn!("A widget failed to be built because its node's input index is invalid.");
+		return LayoutGroup::Row { widgets: vec![] };
+	};
+	if let Some(&TaggedValue::XY(mode)) = input.as_non_exposed_value() {
+		let calculation_modes = [XY::X, XY::Y];
+		let mut entries = Vec::with_capacity(calculation_modes.len());
+		for method in calculation_modes {
+			entries.push(
+				MenuListEntry::new(format!("{method:?}"))
+					.label(method.to_string())
+					.on_update(update_value(move |_| TaggedValue::XY(method), node_id, index))
+					.on_commit(commit_value),
+			);
+		}
+		let entries = vec![entries];
+
+		widgets.extend_from_slice(&[
+			Separator::new(SeparatorType::Unrelated).widget_holder(),
+			DropdownInput::new(entries).selected_index(Some(mode as u32)).widget_holder(),
+		]);
+	}
+	LayoutGroup::Row { widgets }.with_tooltip("X or Y Component of Vector2")
+}
+
 // TODO: Generalize this instead of using a separate function per dropdown menu enum
 pub fn noise_type(document_node: &DocumentNode, node_id: NodeId, index: usize, name: &str, blank_assist: bool) -> LayoutGroup {
 	let mut widgets = start_widgets(document_node, node_id, index, name, FrontendGraphDataType::General, blank_assist);
@@ -1064,6 +1125,31 @@ pub fn boolean_operation_radio_buttons(document_node: &DocumentNode, node_id: No
 	LayoutGroup::Row { widgets }
 }
 
+pub fn grid_type_widget(document_node: &DocumentNode, node_id: NodeId, index: usize, name: &str, blank_assist: bool) -> LayoutGroup {
+	let mut widgets = start_widgets(document_node, node_id, index, name, FrontendGraphDataType::General, blank_assist);
+	let Some(input) = document_node.inputs.get(index) else {
+		log::warn!("A widget failed to be built because its node's input index is invalid.");
+		return LayoutGroup::Row { widgets: vec![] };
+	};
+	if let Some(&TaggedValue::GridType(grid_type)) = input.as_non_exposed_value() {
+		let entries = [("Rectangular", GridType::Rectangular), ("Isometric", GridType::Isometric)]
+			.into_iter()
+			.map(|(name, val)| {
+				RadioEntryData::new(format!("{val:?}"))
+					.label(name)
+					.on_update(update_value(move |_| TaggedValue::GridType(val), node_id, index))
+					.on_commit(commit_value)
+			})
+			.collect();
+
+		widgets.extend_from_slice(&[
+			Separator::new(SeparatorType::Unrelated).widget_holder(),
+			RadioInput::new(entries).selected_index(Some(grid_type as u32)).widget_holder(),
+		]);
+	}
+	LayoutGroup::Row { widgets }
+}
+
 pub fn line_cap_widget(document_node: &DocumentNode, node_id: NodeId, index: usize, name: &str, blank_assist: bool) -> LayoutGroup {
 	let mut widgets = start_widgets(document_node, node_id, index, name, FrontendGraphDataType::General, blank_assist);
 	let Some(input) = document_node.inputs.get(index) else {
@@ -1484,6 +1570,52 @@ pub(crate) fn _gpu_map_properties(document_node: &DocumentNode, node_id: NodeId,
 	vec![LayoutGroup::Row { widgets: map }]
 }
 
+pub(crate) fn grid_properties(node_id: NodeId, context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
+	let grid_type_index = 1;
+	let spacing_index = 2;
+	let angles_index = 3;
+	let rows_index = 4;
+	let columns_index = 5;
+
+	let document_node = match get_document_node(node_id, context) {
+		Ok(document_node) => document_node,
+		Err(err) => {
+			log::error!("Could not get document node in exposure_properties: {err}");
+			return Vec::new();
+		}
+	};
+	let grid_type = grid_type_widget(document_node, node_id, grid_type_index, "Grid Type", true);
+
+	let mut widgets = vec![grid_type];
+
+	let Some(grid_type_input) = document_node.inputs.get(grid_type_index) else {
+		log::warn!("A widget failed to be built because its node's input index is invalid.");
+		return vec![];
+	};
+	if let Some(&TaggedValue::GridType(grid_type)) = grid_type_input.as_non_exposed_value() {
+		match grid_type {
+			GridType::Rectangular => {
+				let spacing = vec2_widget(document_node, node_id, spacing_index, "Spacing", "W", "H", " px", Some(0.), add_blank_assist);
+				widgets.push(spacing);
+			}
+			GridType::Isometric => {
+				let spacing = LayoutGroup::Row {
+					widgets: number_widget(document_node, node_id, spacing_index, "Spacing", NumberInput::default().label("H").min(0.).unit(" px"), true),
+				};
+				let angles = vec2_widget(document_node, node_id, angles_index, "Angles", "", "", "°", None, add_blank_assist);
+				widgets.extend([spacing, angles]);
+			}
+		}
+	}
+
+	let rows = number_widget(document_node, node_id, rows_index, "Rows", NumberInput::default().min(1.), true);
+	let columns = number_widget(document_node, node_id, columns_index, "Columns", NumberInput::default().min(1.), true);
+
+	widgets.extend([LayoutGroup::Row { widgets: rows }, LayoutGroup::Row { widgets: columns }]);
+
+	widgets
+}
+
 pub(crate) fn exposure_properties(node_id: NodeId, context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {
 	let document_node = match get_document_node(node_id, context) {
 		Ok(document_node) => document_node,

editor/src/messages/portfolio/document/overlays/grid_overlays.rs

@@ -176,7 +176,7 @@ fn grid_overlay_isometric_dot(document: &DocumentMessageHandler, overlay_context
 
 pub fn grid_overlay(document: &DocumentMessageHandler, overlay_context: &mut OverlayContext) {
 	match document.snapping_state.grid.grid_type {
-		GridType::Rectangle { spacing } => {
+		GridType::Rectangular { spacing } => {
 			if document.snapping_state.grid.dot_display {
 				grid_overlay_rectangular_dot(document, overlay_context, spacing)
 			} else {
@@ -238,14 +238,14 @@ pub fn overlay_options(grid: &GridSnapping) -> Vec<LayoutGroup> {
 			RadioInput::new(vec![
 				RadioEntryData::new("rectangular")
 					.label("Rectangular")
-					.on_update(update_val(grid, |grid, _| grid.grid_type = GridType::RECTANGLE)),
+					.on_update(update_val(grid, |grid, _| grid.grid_type = GridType::RECTANGULAR)),
 				RadioEntryData::new("isometric")
 					.label("Isometric")
 					.on_update(update_val(grid, |grid, _| grid.grid_type = GridType::ISOMETRIC)),
 			])
 			.min_width(200)
 			.selected_index(Some(match grid.grid_type {
-				GridType::Rectangle { .. } => 0,
+				GridType::Rectangular { .. } => 0,
 				GridType::Isometric { .. } => 1,
 			}))
 			.widget_holder(),
@@ -291,7 +291,7 @@ pub fn overlay_options(grid: &GridSnapping) -> Vec<LayoutGroup> {
 	});
 
 	match grid.grid_type {
-		GridType::Rectangle { spacing } => widgets.push(LayoutGroup::Row {
+		GridType::Rectangular { spacing } => widgets.push(LayoutGroup::Row {
 			widgets: vec![
 				TextLabel::new("Spacing").table_align(true).widget_holder(),
 				Separator::new(SeparatorType::Unrelated).widget_holder(),
@@ -300,7 +300,7 @@ pub fn overlay_options(grid: &GridSnapping) -> Vec<LayoutGroup> {
 					.unit(" px")
 					.min(0.)
 					.min_width(98)
-					.on_update(update_origin(grid, |grid| grid.grid_type.rect_spacing().map(|spacing| &mut spacing.x)))
+					.on_update(update_origin(grid, |grid| grid.grid_type.rectangular_spacing().map(|spacing| &mut spacing.x)))
 					.widget_holder(),
 				Separator::new(SeparatorType::Related).widget_holder(),
 				NumberInput::new(Some(spacing.y))
@@ -308,7 +308,7 @@ pub fn overlay_options(grid: &GridSnapping) -> Vec<LayoutGroup> {
 					.unit(" px")
 					.min(0.)
 					.min_width(98)
-					.on_update(update_origin(grid, |grid| grid.grid_type.rect_spacing().map(|spacing| &mut spacing.y)))
+					.on_update(update_origin(grid, |grid| grid.grid_type.rectangular_spacing().map(|spacing| &mut spacing.y)))
 					.widget_holder(),
 			],
 		}),

editor/src/messages/portfolio/document/utility_types/misc.rs

@@ -160,26 +160,33 @@ impl Default for PathSnapping {
 
 #[derive(Clone, Copy, Debug, serde::Serialize, serde::Deserialize, PartialEq)]
 pub enum GridType {
-	Rectangle { spacing: DVec2 },
-	Isometric { y_axis_spacing: f64, angle_a: f64, angle_b: f64 },
+	#[serde(alias = "Rectangle")]
+	Rectangular {
+		spacing: DVec2,
+	},
+	Isometric {
+		y_axis_spacing: f64,
+		angle_a: f64,
+		angle_b: f64,
+	},
 }
 
 impl Default for GridType {
 	fn default() -> Self {
-		Self::RECTANGLE
+		Self::RECTANGULAR
 	}
 }
 
 impl GridType {
-	pub const RECTANGLE: Self = GridType::Rectangle { spacing: DVec2::ONE };
+	pub const RECTANGULAR: Self = GridType::Rectangular { spacing: DVec2::ONE };
 	pub const ISOMETRIC: Self = GridType::Isometric {
 		y_axis_spacing: 1.,
 		angle_a: 30.,
 		angle_b: 30.,
 	};
-	pub fn rect_spacing(&mut self) -> Option<&mut DVec2> {
+	pub fn rectangular_spacing(&mut self) -> Option<&mut DVec2> {
 		match self {
-			Self::Rectangle { spacing } => Some(spacing),
+			Self::Rectangular { spacing } => Some(spacing),
 			_ => None,
 		}
 	}

editor/src/messages/tool/common_functionality/snapping/grid_snapper.rs

@@ -34,6 +34,7 @@ impl GridSnapper {
 		}
 		lines
 	}
+
 	// Isometric grid has 6 lines around a point, 2 y axis, 2 on the angle a, and 2 on the angle b.
 	fn get_snap_lines_isometric(&self, document_point: DVec2, snap_data: &mut SnapData, y_axis_spacing: f64, angle_a: f64, angle_b: f64) -> Vec<Line> {
 		let document = snap_data.document;
@@ -86,9 +87,10 @@ impl GridSnapper {
 
 		lines
 	}
+
 	fn get_snap_lines(&self, document_point: DVec2, snap_data: &mut SnapData) -> Vec<Line> {
 		match snap_data.document.snapping_state.grid.grid_type {
-			GridType::Rectangle { spacing } => self.get_snap_lines_rectangular(document_point, snap_data, spacing),
+			GridType::Rectangular { spacing } => self.get_snap_lines_rectangular(document_point, snap_data, spacing),
 			GridType::Isometric { y_axis_spacing, angle_a, angle_b } => self.get_snap_lines_isometric(document_point, snap_data, y_axis_spacing, angle_a, angle_b),
 		}
 	}