Add Table<GradientStops> gradient rendering

* Add SVG and Vello renderers for Table<GradientStops>

* Add thumbnail rendering for Table<GradientStops>

* Use row transform to map (0,0), (1,0) unit line to document space

* Set 100px width for the initially created gradient

* Add support of table gradients for the gradient tool

Author: YohYamasaki

Cargo.lock

@@ -10,10 +10,9 @@ use graphene_std::raster_types::{CPU, Raster};
 use graphene_std::subpath::Subpath;
 use graphene_std::table::Table;
 use graphene_std::text::{Font, TypesettingConfig};
-use graphene_std::vector::PointId;
-use graphene_std::vector::VectorModificationType;
 use graphene_std::vector::style::{Fill, Stroke};
 use graphene_std::{Artboard, Color};
+use graphene_std::vector::{GradientStops, PointId, VectorModificationType};
 
 #[impl_message(Message, DocumentMessage, GraphOperation)]
 #[derive(PartialEq, Clone, Debug, serde::Serialize, serde::Deserialize)]
@@ -26,6 +25,11 @@ pub enum GraphOperationMessage {
 		layer: LayerNodeIdentifier,
 		fill: f64,
 	},
+	GradientTableSet {
+		layer: LayerNodeIdentifier,
+		stops: GradientStops,
+		transform: DAffine2,
+	},
 	OpacitySet {
 		layer: LayerNodeIdentifier,
 		opacity: f64,

editor/src/messages/portfolio/document/graph_operation/graph_operation_message.rs

@@ -45,6 +45,11 @@ impl MessageHandler<GraphOperationMessage, GraphOperationMessageContext<'_>> for
 					modify_inputs.blending_fill_set(fill);
 				}
 			}
+			GraphOperationMessage::GradientTableSet { layer, stops, transform } => {
+				if let Some(mut modify_inputs) = ModifyInputsContext::new_with_layer(layer, network_interface, responses) {
+					modify_inputs.gradient_table_set(stops, transform);
+				}
+			}
 			GraphOperationMessage::OpacitySet { layer, opacity } => {
 				if let Some(mut modify_inputs) = ModifyInputsContext::new_with_layer(layer, network_interface, responses) {
 					modify_inputs.opacity_set(opacity);

editor/src/messages/portfolio/document/graph_operation/graph_operation_message_handler.rs

@@ -11,11 +11,10 @@ use graphene_std::brush::brush_stroke::BrushStroke;
 use graphene_std::raster::BlendMode;
 use graphene_std::raster_types::{CPU, Raster};
 use graphene_std::subpath::Subpath;
-use graphene_std::table::Table;
+use graphene_std::table::{Table, TableRow};
 use graphene_std::text::{Font, TypesettingConfig};
-use graphene_std::vector::Vector;
 use graphene_std::vector::style::{Fill, Stroke};
-use graphene_std::vector::{PointId, VectorModificationType};
+use graphene_std::vector::{GradientStops, PointId, Vector, VectorModificationType};
 use graphene_std::{Artboard, Color, Graphic, NodeInputDecleration};
 
 #[derive(PartialEq, Clone, Copy, Debug, serde::Serialize, serde::Deserialize)]
@@ -457,6 +456,20 @@ impl<'a> ModifyInputsContext<'a> {
 		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::F64(fill * 100.), false), false);
 	}
 
+	pub fn gradient_table_set(&mut self, stops: GradientStops, transform: DAffine2) {
+		let Some(gradient_node_id) = self.existing_proto_node_id(graphene_std::math_nodes::gradient_value::IDENTIFIER, true) else {
+			return;
+		};
+
+		let table = Table::new_from_row(TableRow {
+			element: stops,
+			transform,
+			..Default::default()
+		});
+		let input_connector = InputConnector::node(gradient_node_id, 1);
+		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::GradientTable(table), false), false);
+	}
+
 	pub fn clip_mode_toggle(&mut self, clip_mode: Option<bool>) {
 		let clip = !clip_mode.unwrap_or(false);
 		let Some(clip_node_id) = self.existing_proto_node_id(graphene_std::blending_nodes::blending::IDENTIFIER, true) else {

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

@@ -1153,20 +1153,37 @@ pub fn color_widget(parameter_widgets_info: ParameterWidgetsInfo, color_button:
 				.on_commit(commit_value)
 				.widget_instance(),
 		),
-		TaggedValue::GradientTable(gradient_table) => widgets.push(
-			color_button
-				.value(match gradient_table.iter().next() {
-					Some(row) => FillChoice::Gradient(row.element.clone()),
-					None => FillChoice::Gradient(GradientStops::default()),
-				})
-				.on_update(update_value(
-					|input: &ColorInput| TaggedValue::GradientTable(input.value.as_gradient().iter().map(|&gradient| TableRow::new_from_element(gradient.clone())).collect()),
-					node_id,
-					index,
-				))
-				.on_commit(commit_value)
-				.widget_instance(),
-		),
+		TaggedValue::GradientTable(gradient_table) => {
+			let existing_transform = gradient_table.iter().next().map(|row| *row.transform).unwrap_or_default();
+
+			widgets.push(
+				color_button
+					.value(match gradient_table.iter().next() {
+						Some(row) => FillChoice::Gradient(row.element.clone()),
+						None => FillChoice::Gradient(GradientStops::default()),
+					})
+					.on_update(update_value(
+						move |input: &ColorInput| {
+							TaggedValue::GradientTable(
+								input
+									.value
+									.as_gradient()
+									.iter()
+									.map(|&gradient| TableRow {
+										element: gradient.clone(),
+										transform: existing_transform,
+										..Default::default()
+									})
+									.collect(),
+							)
+						},
+						node_id,
+						index,
+					))
+					.on_commit(commit_value)
+					.widget_instance(),
+			)
+		}
 		x => warn!("Color {x:?}"),
 	}
 

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

@@ -16,7 +16,7 @@ use graphene_std::table::Table;
 use graphene_std::text::{Font, TypesettingConfig};
 use graphene_std::vector::misc::ManipulatorPointId;
 use graphene_std::vector::style::{Fill, Gradient};
-use graphene_std::vector::{PointId, SegmentId, VectorModificationType};
+use graphene_std::vector::{GradientStops, PointId, SegmentId, VectorModificationType};
 use std::collections::VecDeque;
 
 /// Returns the ID of the first Spline node in the horizontal flow which is not followed by a `Path` node, or `None` if none exists.
@@ -285,6 +285,17 @@ pub fn get_gradient(layer: LayerNodeIdentifier, network_interface: &NodeNetworkI
 	Some(gradient.clone())
 }
 
+/// Get the gradient table of a layer.
+pub fn get_gradient_table(layer: LayerNodeIdentifier, network_interface: &NodeNetworkInterface) -> Option<Table<GradientStops>> {
+	let gradient_table_index = 1;
+
+	let inputs = NodeGraphLayer::new(layer, network_interface).find_node_inputs(&DefinitionIdentifier::ProtoNode(graphene_std::math_nodes::gradient_value::IDENTIFIER))?;
+	let TaggedValue::GradientTable(gradient_table) = inputs.get(gradient_table_index)?.as_value()? else {
+		return None;
+	};
+	Some(gradient_table.clone())
+}
+
 /// Get the current fill of a layer from the closest "Fill" node.
 pub fn get_fill_color(layer: LayerNodeIdentifier, network_interface: &NodeNetworkInterface) -> Option<Color> {
 	let fill_index = 1;