Add Gradient in Stroke Node

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

@@ -165,6 +165,7 @@ fn generate_layout(introspected_data: &Arc<dyn std::any::Any + Send + Sync + 'st
 		Table<Raster<CPU>>,
 		Table<Raster<GPU>>,
 		Table<Color>,
+		Table<Fill>,
 		Table<GradientStops>,
 		GradientStops,
 		f64,
@@ -389,7 +390,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(),
@@ -556,6 +557,58 @@ impl TableRowLayout for Color {
 	}
 }
 
+impl TableRowLayout for Fill {
+	fn type_name() -> &'static str {
+		"Fill"
+	}
+	fn identifier(&self) -> String {
+		match self {
+			Self::None => "None".to_string(),
+			Self::Solid(color) => format!("Solid (#{})", color.to_gamma_srgb().to_rgba_hex_srgb()),
+			Self::Gradient(gradient) => format!("{} Gradient ({} stops)", gradient.gradient_type, gradient.stops.len()),
+		}
+	}
+	fn element_widget(&self, _index: usize) -> WidgetInstance {
+		let choice = match self {
+			Self::None => FillChoice::None,
+			Self::Solid(color) => FillChoice::Solid(*color),
+			Self::Gradient(gradient) => FillChoice::Gradient(gradient.stops.clone()),
+		};
+		ColorInput::new(choice).disabled(true).menu_direction(Some(MenuDirection::Top)).narrow(true).widget_instance()
+	}
+	fn element_page(&self, _data: &mut LayoutData) -> Vec<LayoutGroup> {
+		let mut table_rows = Vec::new();
+		table_rows.push(column_headings(&["property", "value"]));
+
+		match self {
+			Self::None => table_rows.push(vec![TextLabel::new("Type").narrow(true).widget_instance(), TextLabel::new("None").narrow(true).widget_instance()]),
+			Self::Solid(color) => {
+				table_rows.push(vec![TextLabel::new("Type").narrow(true).widget_instance(), TextLabel::new("Solid").narrow(true).widget_instance()]);
+				table_rows.push(vec![
+					TextLabel::new("Color").narrow(true).widget_instance(),
+					TextLabel::new(format!("#{} (Alpha: {}%)", color.to_rgb_hex_srgb(), color.a() * 100.)).narrow(true).widget_instance(),
+				]);
+			}
+			Self::Gradient(gradient) => {
+				table_rows.push(vec![
+					TextLabel::new("Type").narrow(true).widget_instance(),
+					TextLabel::new(format!("{} Gradient", gradient.gradient_type)).narrow(true).widget_instance(),
+				]);
+				table_rows.push(vec![
+					TextLabel::new("Start").narrow(true).widget_instance(),
+					TextLabel::new(format_dvec2(gradient.start)).narrow(true).widget_instance(),
+				]);
+				table_rows.push(vec![
+					TextLabel::new("End").narrow(true).widget_instance(),
+					TextLabel::new(format_dvec2(gradient.end)).narrow(true).widget_instance(),
+				]);
+			}
+		}
+
+		vec![LayoutGroup::table(table_rows, false)]
+	}
+}
+
 impl TableRowLayout for GradientStops {
 	fn type_name() -> &'static str {
 		"Gradient"

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

@@ -664,7 +664,7 @@ fn set_import_child_positions(
 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,
@@ -683,6 +683,7 @@ fn apply_usvg_stroke(stroke: &usvg::Stroke, modify_inputs: &mut ModifyInputsCont
 			align: StrokeAlign::Center,
 			paint_order: PaintOrder::StrokeAbove,
 			transform,
+			non_scaling: false,
 		})
 	}
 }

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

@@ -404,10 +404,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);