feat: implemented stroke gradient feature

Author: mohan-bee

editor/src/messages/portfolio/document/data_panel/data_panel_message_handler.rs

@@ -389,7 +389,7 @@ impl TableRowLayout for Vector {
 				}
 
 				if let Some(stroke) = self.style.stroke.clone() {
-					let color = if let Some(color) = stroke.color { FillChoice::Solid(color) } else { FillChoice::None };
+					let color = if let Some(color) = stroke.color() { FillChoice::Solid(color) } else { FillChoice::None };
 					table_rows.push(vec![
 						TextLabel::new("Stroke").narrow(true).widget_instance(),
 						ColorInput::new(color).disabled(true).menu_direction(Some(MenuDirection::Top)).narrow(true).widget_instance(),

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

@@ -496,7 +496,7 @@ fn import_usvg_node(
 fn apply_usvg_stroke(stroke: &usvg::Stroke, modify_inputs: &mut ModifyInputsContext, transform: DAffine2) {
 	if let usvg::Paint::Color(color) = &stroke.paint() {
 		modify_inputs.stroke_set(Stroke {
-			color: Some(usvg_color(*color, stroke.opacity().get())),
+			paint: Fill::Solid(usvg_color(*color, stroke.opacity().get())),
 			weight: stroke.width().get() as f64,
 			dash_lengths: stroke.dasharray().as_ref().map(|lengths| lengths.iter().map(|&length| length as f64).collect()).unwrap_or_default(),
 			dash_offset: stroke.dashoffset() as f64,

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

@@ -401,10 +401,23 @@ impl<'a> ModifyInputsContext<'a> {
 			return;
 		};
 
-		let stroke_color = if let Some(color) = stroke.color { Table::new_from_element(color) } else { Table::new() };
+		match &stroke.paint {
+			Fill::None => {
+				let input_connector = InputConnector::node(stroke_node_id, graphene_std::vector::stroke::BackupColorInput::INDEX);
+				self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::Color(Table::new()), false), true);
+			}
+			Fill::Solid(color) => {
+				let input_connector = InputConnector::node(stroke_node_id, graphene_std::vector::stroke::BackupColorInput::INDEX);
+				self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::Color(Table::new_from_element(*color)), false), true);
+			}
+			Fill::Gradient(gradient) => {
+				let input_connector = InputConnector::node(stroke_node_id, graphene_std::vector::stroke::BackupGradientInput::INDEX);
+				self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::Gradient(gradient.clone()), false), true);
+			}
+		}
 
-		let input_connector = InputConnector::node(stroke_node_id, graphene_std::vector::stroke::ColorInput::INDEX);
-		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::Color(stroke_color), false), true);
+		let input_connector = InputConnector::node(stroke_node_id, graphene_std::vector::stroke::ColorInput::<Fill>::INDEX);
+		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::Fill(stroke.paint.clone()), false), true);
 		let input_connector = InputConnector::node(stroke_node_id, graphene_std::vector::stroke::WeightInput::INDEX);
 		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::F64(stroke.weight), false), true);
 		let input_connector = InputConnector::node(stroke_node_id, graphene_std::vector::stroke::AlignInput::INDEX);

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

@@ -27,7 +27,7 @@ use graphene_std::text::{Font, TextAlign};
 use graphene_std::transform::{Footprint, ReferencePoint, Transform};
 use graphene_std::vector::QRCodeErrorCorrectionLevel;
 use graphene_std::vector::misc::{ArcType, CentroidType, ExtrudeJoiningAlgorithm, GridType, MergeByDistanceAlgorithm, PointSpacingType, RowsOrColumns, SpiralType};
-use graphene_std::vector::style::{Fill, FillChoice, FillType, GradientStops, GradientType, PaintOrder, StrokeAlign, StrokeCap, StrokeJoin};
+use graphene_std::vector::style::{Fill, FillChoice, FillType, Gradient, GradientStops, GradientType, PaintOrder, StrokeAlign, StrokeCap, StrokeJoin};
 
 pub(crate) fn string_properties(text: &str) -> Vec<LayoutGroup> {
 	let widget = TextLabel::new(text).widget_instance();
@@ -2009,44 +2009,207 @@ pub fn stroke_properties(node_id: NodeId, context: &mut NodePropertiesContext) -
 		Some(TaggedValue::StrokeJoin(x)) => x,
 		_ => &StrokeJoin::Miter,
 	};
-
 	let dash_lengths_val = match &document_node.inputs[DashLengthsInput::<Vec<f64>>::INDEX].as_value() {
 		Some(TaggedValue::VecF64(x)) => x,
 		_ => &vec![],
 	};
+
 	let has_dash_lengths = dash_lengths_val.is_empty();
 	let miter_limit_disabled = join_value != &StrokeJoin::Miter;
 
-	let color = color_widget(
-		ParameterWidgetsInfo::new(node_id, ColorInput::INDEX, true, context),
-		crate::messages::layout::utility_types::widgets::button_widgets::ColorInput::default(),
+	let fill = document_node
+		.inputs
+		.get(ColorInput::<Fill>::INDEX)
+		.and_then(|i| i.as_non_exposed_value())
+		.and_then(|t| match t {
+			TaggedValue::Fill(f) => Some(f.clone()),
+			_ => None,
+		})
+		.unwrap_or(Fill::None);
+	let backup_color = document_node
+		.inputs
+		.get(BackupColorInput::INDEX)
+		.and_then(|i| i.as_non_exposed_value())
+		.and_then(|t| match t {
+			TaggedValue::Color(c) => Some(c.clone()),
+			_ => None,
+		})
+		.unwrap_or(Table::new());
+	let backup_gradient = document_node
+		.inputs
+		.get(BackupGradientInput::INDEX)
+		.and_then(|i| i.as_non_exposed_value())
+		.and_then(|t| match t {
+			TaggedValue::Gradient(g) => Some(g.clone()),
+			_ => None,
+		})
+		.unwrap_or(Gradient::default());
+
+	let mut widgets = Vec::new();
+
+	let mut widgets_first_row = start_widgets(ParameterWidgetsInfo::new(node_id, ColorInput::<Fill>::INDEX, true, context));
+	let fill2 = fill.clone();
+	let backup_color_fill: Fill = backup_color.clone().into();
+	let backup_gradient_fill: Fill = backup_gradient.clone().into();
+
+	widgets_first_row.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
+	widgets_first_row.push(
+		crate::messages::layout::utility_types::widgets::button_widgets::ColorInput::default()
+			.value(fill.clone().into())
+			.on_update(move |x: &crate::messages::layout::utility_types::widgets::button_widgets::ColorInput| Message::Batched {
+				messages: Box::new([
+					match &fill2 {
+						Fill::None => NodeGraphMessage::SetInputValue {
+							node_id,
+							input_index: BackupColorInput::INDEX,
+							value: TaggedValue::Color(Table::new()),
+						}
+						.into(),
+						Fill::Solid(color) => NodeGraphMessage::SetInputValue {
+							node_id,
+							input_index: BackupColorInput::INDEX,
+							value: TaggedValue::Color(Table::new_from_element(*color)),
+						}
+						.into(),
+						Fill::Gradient(gradient) => NodeGraphMessage::SetInputValue {
+							node_id,
+							input_index: BackupGradientInput::INDEX,
+							value: TaggedValue::Gradient(gradient.clone()),
+						}
+						.into(),
+					},
+					NodeGraphMessage::SetInputValue {
+						node_id,
+						input_index: ColorInput::<Fill>::INDEX,
+						value: TaggedValue::Fill(x.value.to_fill(fill2.as_gradient())),
+					}
+					.into(),
+				]),
+			})
+			.on_commit(commit_value)
+			.widget_instance(),
 	);
+	widgets.push(LayoutGroup::row(widgets_first_row));
+
+	let mut fill_type_row = vec![TextLabel::new("").widget_instance()];
+	match fill {
+		Fill::Solid(_) | Fill::None => add_blank_assist(&mut fill_type_row),
+		Fill::Gradient(ref gradient) => {
+			let reverse_button = IconButton::new("Reverse", 24)
+				.tooltip_description("Reverse the gradient color stops.")
+				.on_update(update_value(
+					{
+						let gradient = gradient.clone();
+						move |_| {
+							let mut gradient = gradient.clone();
+							gradient.stops = gradient.stops.reversed();
+							TaggedValue::Fill(Fill::Gradient(gradient))
+						}
+					},
+					node_id,
+					ColorInput::<Fill>::INDEX,
+				))
+				.widget_instance();
+			fill_type_row.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
+			fill_type_row.push(reverse_button);
+		}
+	}
+
+	let entries = vec![
+		RadioEntryData::new("solid")
+			.label("Solid")
+			.on_update(update_value(move |_| TaggedValue::Fill(backup_color_fill.clone()), node_id, ColorInput::<Fill>::INDEX))
+			.on_commit(commit_value),
+		RadioEntryData::new("gradient")
+			.label("Gradient")
+			.on_update(update_value(move |_| TaggedValue::Fill(backup_gradient_fill.clone()), node_id, ColorInput::<Fill>::INDEX))
+			.on_commit(commit_value),
+	];
+
+	fill_type_row.extend_from_slice(&[
+		Separator::new(SeparatorStyle::Unrelated).widget_instance(),
+		RadioInput::new(entries).selected_index(Some(if fill.as_gradient().is_some() { 1 } else { 0 })).widget_instance(),
+	]);
+	widgets.push(LayoutGroup::row(fill_type_row));
+
+	if let Fill::Gradient(gradient) = fill.clone() {
+		let mut row = vec![TextLabel::new("").widget_instance()];
+		match gradient.gradient_type {
+			GradientType::Linear => add_blank_assist(&mut row),
+			GradientType::Radial => {
+				let orientation = if (gradient.end.x - gradient.start.x).abs() > f64::EPSILON * 1e6 {
+					gradient.end.x > gradient.start.x
+				} else {
+					(gradient.start.x + gradient.start.y) < (gradient.end.x + gradient.end.y)
+				};
+				let reverse_radial_gradient_button = IconButton::new(if orientation { "ReverseRadialGradientToRight" } else { "ReverseRadialGradientToLeft" }, 24)
+					.tooltip_description("Reverse which end the gradient radiates from.")
+					.on_update(update_value(
+						{
+							let gradient = gradient.clone();
+							move |_| {
+								let mut gradient = gradient.clone();
+								std::mem::swap(&mut gradient.start, &mut gradient.end);
+								TaggedValue::Fill(Fill::Gradient(gradient))
+							}
+						},
+						node_id,
+						ColorInput::<Fill>::INDEX,
+					))
+					.widget_instance();
+				row.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
+				row.push(reverse_radial_gradient_button);
+			}
+		}
+
+		let gradient_for_closure = gradient.clone();
+
+		let entries = [GradientType::Linear, GradientType::Radial]
+			.iter()
+			.map(|&grad_type| {
+				let gradient = gradient_for_closure.clone();
+				let set_input_value = update_value(
+					move |_: &()| {
+						let mut new_gradient = gradient.clone();
+						new_gradient.gradient_type = grad_type;
+						TaggedValue::Fill(Fill::Gradient(new_gradient))
+					},
+					node_id,
+					ColorInput::<Fill>::INDEX,
+				);
+				RadioEntryData::new(format!("{:?}", grad_type))
+					.label(format!("{:?}", grad_type))
+					.on_update(move |_| Message::Batched {
+						messages: Box::new([
+							set_input_value(&()),
+							GradientToolMessage::UpdateOptions {
+								options: GradientOptionsUpdate::Type(grad_type),
+							}
+							.into(),
+						]),
+					})
+					.on_commit(commit_value)
+			})
+			.collect();
+
+		row.extend_from_slice(&[
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
+			RadioInput::new(entries).selected_index(Some(gradient.gradient_type as u32)).widget_instance(),
+		]);
+
+		widgets.push(LayoutGroup::row(row));
+	}
+
 	let weight = number_widget(ParameterWidgetsInfo::new(node_id, WeightInput::INDEX, true, context), NumberInput::default().unit(" px").min(0.));
-	let align = enum_choice::<StrokeAlign>()
-		.for_socket(ParameterWidgetsInfo::new(node_id, AlignInput::INDEX, true, context))
-		.property_row();
+	let align = enum_choice::<StrokeAlign>().for_socket(ParameterWidgetsInfo::new(node_id, AlignInput::INDEX, true, context)).property_row();
 	let cap = enum_choice::<StrokeCap>().for_socket(ParameterWidgetsInfo::new(node_id, CapInput::INDEX, true, context)).property_row();
-	let join = enum_choice::<StrokeJoin>()
-		.for_socket(ParameterWidgetsInfo::new(node_id, JoinInput::INDEX, true, context))
-		.property_row();
-
-	let miter_limit = number_widget(
-		ParameterWidgetsInfo::new(node_id, MiterLimitInput::INDEX, true, context),
-		NumberInput::default().min(0.).disabled(miter_limit_disabled),
-	);
-	let paint_order = enum_choice::<PaintOrder>()
-		.for_socket(ParameterWidgetsInfo::new(node_id, PaintOrderInput::INDEX, true, context))
-		.property_row();
-	let disabled_number_input = NumberInput::default().unit(" px").disabled(has_dash_lengths);
-	let dash_lengths = array_of_number_widget(
-		ParameterWidgetsInfo::new(node_id, DashLengthsInput::<Vec<f64>>::INDEX, true, context),
-		TextInput::default().centered(true),
-	);
-	let number_input = disabled_number_input;
-	let dash_offset = number_widget(ParameterWidgetsInfo::new(node_id, DashOffsetInput::INDEX, true, context), number_input);
+	let join = enum_choice::<StrokeJoin>().for_socket(ParameterWidgetsInfo::new(node_id, JoinInput::INDEX, true, context)).property_row();
+	let miter_limit = number_widget(ParameterWidgetsInfo::new(node_id, MiterLimitInput::INDEX, true, context), NumberInput::default().min(0.).disabled(miter_limit_disabled));
+	let paint_order = enum_choice::<PaintOrder>().for_socket(ParameterWidgetsInfo::new(node_id, PaintOrderInput::INDEX, true, context)).property_row();
+	let dash_lengths = array_of_number_widget(ParameterWidgetsInfo::new(node_id, DashLengthsInput::<Vec<f64>>::INDEX, true, context), TextInput::default().centered(true));
+	let dash_offset = number_widget(ParameterWidgetsInfo::new(node_id, DashOffsetInput::INDEX, true, context), NumberInput::default().unit(" px").disabled(has_dash_lengths));
 
-	vec![
-		color,
+	widgets.extend([
 		LayoutGroup::row(weight),
 		align,
 		cap,
@@ -2055,7 +2218,9 @@ pub fn stroke_properties(node_id: NodeId, context: &mut NodePropertiesContext) -
 		paint_order,
 		LayoutGroup::row(dash_lengths),
 		LayoutGroup::row(dash_offset),
-	]
+	]);
+
+	widgets
 }
 
 pub fn offset_path_properties(node_id: NodeId, context: &mut NodePropertiesContext) -> Vec<LayoutGroup> {

node-graph/libraries/rendering/src/render_ext.rs

@@ -99,15 +99,13 @@ impl RenderExt for Stroke {
 	/// Provide the SVG attributes for the stroke.
 	fn render(
 		&self,
-		_svg_defs: &mut String,
-		_element_transform: DAffine2,
-		_stroke_transform: DAffine2,
-		_bounds: DAffine2,
+		svg_defs: &mut String,
+		element_transform: DAffine2,
+		stroke_transform: DAffine2,
+		bounds: DAffine2,
 		_transformed_bounds: DAffine2,
 		render_params: &RenderParams,
 	) -> Self::Output {
-		// Don't render a stroke at all if it would be invisible
-		let Some(color) = self.color else { return String::new() };
 		if !self.has_renderable_stroke() {
 			return String::new();
 		}
@@ -123,10 +121,21 @@ impl RenderExt for Stroke {
 		let paint_order = (self.paint_order != PaintOrder::StrokeAbove || render_params.override_paint_order).then_some(PaintOrder::StrokeBelow);
 
 		// Render the needed stroke attributes
-		let mut attributes = format!(r##" stroke="#{}""##, color.to_rgb_hex_srgb_from_gamma());
-		if color.a() < 1. {
-			let _ = write!(&mut attributes, r#" stroke-opacity="{}""#, (color.a() * 1000.).round() / 1000.);
-		}
+		let mut attributes = match &self.paint {
+			Fill::None => return String::new(),
+			Fill::Solid(color) => {
+				let mut result = format!(r##" stroke="#{}""##, color.to_rgb_hex_srgb_from_gamma());
+				if color.a() < 1. {
+					let _ = write!(result, r#" stroke-opacity="{}""#, (color.a() * 1000.).round() / 1000.);
+				}
+				result
+			}
+			Fill::Gradient(gradient) => {
+				let gradient_id = gradient.render(svg_defs, element_transform, stroke_transform, bounds, _transformed_bounds, render_params);
+				format!(r##" stroke="url('#{gradient_id}')""##)
+			}
+		};
+
 		if let Some(mut weight) = weight {
 			if stroke_align.is_some() && render_params.aligned_strokes {
 				weight *= 2.;