Add renderer support for painting vector with "fill" and "stroke" attributes with graphic List<T> types (#4111)

* Add conversion from Fill to Table<Graphic> * Refactor Vector vello renderer for Gradient / Color * Refactor Vector SVG renderer for Gradient / Color * Fix conflicts * Add basic clipping-based fill for SVG rendering * Use Cow to avoid cloning graphic list for fill * Cleanup for Cow usage * format code * Use `<pattern>` instead of `<clipPath>` for clip This simplifies the future implementation of clipping-based rendering for strokes, as the stroke does not support the use of a clip path but rather paint sources from a paint server. * Move svg pattern rendering function to RenderExt * Fix comment * Fix empty fill list rendering as default black Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> * Move opaque check function to Graphic impl * Add color converter and debug node to use graphic * WIP: Use List<Graphic> to render Color & Gradient * Use `Arc<List<Vector>>` for vector_data metadata This exposes List's attributes to message handlers, enabling them to access the necessary attribute data such as ATTR_STROKE_PAINT_GRAPHIC as `Fill` and `Stroke` will not have paint information in the future. * Recurse opacity checks on nested `Graphic` Also extracts `fill_graphic_list_at` / `stroke_paint_graphic_list_at` to share the row-attribute lookup across the existing call sites. * Fix fill and stroke visibility check degradation * Fix clipping based stroke paint positioning * Refactor vello renderer for stroke to use graphic * Reduce `Fill` / `Stroke.color` to `List<Graphic>` allocations * Revert "Use `Arc<List<Vector>>` for vector_data metadata" This reverts commit 4285243a5d * Expose paint row attributes as dedicated metadata for vectors Add `fill_attributes` / `stroke_paint_attributes` to `DocumentMetadata` so the `ExpandFillStrokeOnSelectedLayers` handler can read row paint visibility without exposing entire `List<Vector>`. * Fix transparency check to consider fill opacity * Fix consistency of gradient placement for SVG stroke * Rename `stroke_paint_..` to `stroke_..` * Remove debug nodes * Allow to use any graphic type without casting * Rename `fill_graphic` / `stroke_graphic` to `fill` / `stroke` * Fix SVG pattern placement when stroke transform differs from item transform * Fix click target fill check for empty list in graphic * Fix blank fill/stroke attribute masking legacy style * Fix SVG's paint order trick for vector/raster fills * Add zero-division guard for pattern wraparound prevention * Code review --------- Co-authored-by: Keavon Chambers <keavon@keavon.com>
2026-09-15 22:28:10 +08:00 · 2026-06-11 21:50:27 +02:00
parent e524dff1a7
commit 2b8ef42086
15 changed files with 976 additions and 259 deletions
--- a/node-graph/libraries/rendering/src/render_ext.rs
+++ b/node-graph/libraries/rendering/src/render_ext.rs
@@ -1,24 +1,104 @@
 use crate::renderer::{RenderParams, format_transform_matrix};
+use crate::{Render, RenderSvgSegmentList, SvgRender};
 use core_types::color::SRGBA8;
+use core_types::list::List;
 use core_types::uuid::generate_uuid;
-use glam::DAffine2;
-use graphic_types::vector_types::gradient::{Gradient, GradientType};
-use graphic_types::vector_types::vector::style::{Fill, PaintOrder, PathStyle, Stroke, StrokeAlign, StrokeCap, StrokeJoin};
+use core_types::{ATTR_GRADIENT_TYPE, ATTR_SPREAD_METHOD, ATTR_TRANSFORM, Color};
+use glam::{DAffine2, DVec2};
+use graphic_types::Graphic;
+use graphic_types::vector_types::gradient::GradientType;
+use graphic_types::vector_types::vector::style::{PaintOrder, Stroke, StrokeAlign, StrokeCap, StrokeJoin};
 use std::fmt::Write;
+use vector_types::GradientStops;
 use vector_types::gradient::GradientSpreadMethod;

+#[derive(Copy, Clone, PartialEq)]
+pub enum PaintTarget {
+	Fill,
+	Stroke,
+}
+
+impl PaintTarget {
+	fn paint_attr(self) -> &'static str {
+		match self {
+			Self::Fill => "fill",
+			Self::Stroke => "stroke",
+		}
+	}
+
+	fn opacity_attr(self) -> &'static str {
+		match self {
+			Self::Fill => "fill-opacity",
+			Self::Stroke => "stroke-opacity",
+		}
+	}
+}
+
 pub trait RenderExt {
 	type Output;
-	fn render(&self, svg_defs: &mut String, element_transform: DAffine2, stroke_transform: DAffine2, bounds: DAffine2, transformed_bounds: DAffine2, render_params: &RenderParams) -> Self::Output;
+
+	#[allow(clippy::too_many_arguments)]
+	fn render(
+		&self,
+		svg_defs: &mut String,
+		item_transform: DAffine2,
+		element_transform: DAffine2,
+		stroke_transform: DAffine2,
+		bounds: DAffine2,
+		transformed_bounds: DAffine2,
+		render_params: &RenderParams,
+		target: PaintTarget,
+	) -> Self::Output;
 }

-impl RenderExt for Gradient {
+impl RenderExt for List<Color> {
+	type Output = String;
+
+	fn render(
+		&self,
+		_svg_defs: &mut String,
+		_item_transform: DAffine2,
+		_element_transform: DAffine2,
+		_stroke_transform: DAffine2,
+		_bounds: DAffine2,
+		_transformed_bounds: DAffine2,
+		_render_params: &RenderParams,
+		target: PaintTarget,
+	) -> Self::Output {
+		let Some(color) = self.element(0) else { return r#" fill="none""#.to_string() };
+
+		let mut result = format!(r##" {}="#{}""##, target.paint_attr(), SRGBA8::from(*color).to_rgb_hex());
+		if color.a() < 1. {
+			let _ = write!(result, r#" {}="{}""#, target.opacity_attr(), (color.a() * 1000.).round() / 1000.);
+		}
+
+		result
+	}
+}
+
+impl RenderExt for List<GradientStops> {
 	type Output = u64;

 	/// Adds the gradient def through mutating the first argument, returning the gradient ID.
-	fn render(&self, svg_defs: &mut String, element_transform: DAffine2, stroke_transform: DAffine2, bounds: DAffine2, transformed_bounds: DAffine2, _render_params: &RenderParams) -> Self::Output {
+	fn render(
+		&self,
+		svg_defs: &mut String,
+		_item_transform: DAffine2,
+		element_transform: DAffine2,
+		stroke_transform: DAffine2,
+		bounds: DAffine2,
+		transformed_bounds: DAffine2,
+		_render_params: &RenderParams,
+		_target: PaintTarget,
+	) -> Self::Output {
 		let mut stop = String::new();
-		for (position, color, original_midpoint) in self.stops.interpolated_samples() {
+
+		let Some(stops) = self.element(0) else { return 0 };
+		let gradient_type: GradientType = self.attribute_cloned_or_default(ATTR_GRADIENT_TYPE, 0);
+		let gradient_transform: DAffine2 = self.attribute_cloned_or_default(ATTR_TRANSFORM, 0);
+		let spread_method: GradientSpreadMethod = self.attribute_cloned_or_default(ATTR_SPREAD_METHOD, 0);
+
+		for (position, color, original_midpoint) in stops.interpolated_samples() {
 			stop.push_str("<stop");
 			if position != 0. {
 				let _ = write!(stop, r#" offset="{}""#, (position * 1_000_000.).round() / 1_000_000.);
@@ -33,9 +113,9 @@ impl RenderExt for Gradient {
 			stop.push_str(" />")
 		}

-		let transform_points = element_transform * stroke_transform * bounds;
-		let start = transform_points.transform_point2(self.start);
-		let end = transform_points.transform_point2(self.end);
+		let transform_points = element_transform * stroke_transform * bounds * gradient_transform;
+		let start = transform_points.transform_point2(DVec2::ZERO);
+		let end = transform_points.transform_point2(DVec2::X);

 		let gradient_transform = if transformed_bounds.matrix2.determinant() != 0. {
 			transformed_bounds.inverse()
@@ -49,15 +129,15 @@ impl RenderExt for Gradient {
 			format!(r#" gradientTransform="{gradient_transform}""#)
 		};

-		let spread_method = if self.spread_method == GradientSpreadMethod::Pad {
+		let spread_method = if spread_method == GradientSpreadMethod::Pad {
 			String::new()
 		} else {
-			format!(r#" spreadMethod="{}""#, self.spread_method.svg_name())
+			format!(r#" spreadMethod="{}""#, spread_method.svg_name())
 		};

 		let gradient_id = generate_uuid();

-		match self.gradient_type {
+		match gradient_type {
 			GradientType::Linear => {
 				let _ = write!(
 					svg_defs,
@@ -79,43 +159,22 @@ impl RenderExt for Gradient {
 	}
 }

-impl RenderExt for Fill {
-	type Output = String;
-
-	/// Renders the fill, adding necessary defs through mutating the first argument.
-	fn render(&self, svg_defs: &mut String, element_transform: DAffine2, stroke_transform: DAffine2, bounds: DAffine2, transformed_bounds: DAffine2, render_params: &RenderParams) -> Self::Output {
-		match self {
-			Self::None => r#" fill="none""#.to_string(),
-			Self::Solid(color) => {
-				let mut result = format!(r##" fill="#{}""##, SRGBA8::from(*color).to_rgb_hex());
-				if color.a() < 1. {
-					let _ = write!(result, r#" fill-opacity="{}""#, (color.a() * 1000.).round() / 1000.);
-				}
-				result
-			}
-			Self::Gradient(gradient) => {
-				let gradient_id = gradient.render(svg_defs, element_transform, stroke_transform, bounds, transformed_bounds, render_params);
-				format!(r##" fill="url('#{gradient_id}')""##)
-			}
-		}
-	}
-}
-
 impl RenderExt for Stroke {
 	type Output = String;

-	/// Provide the SVG attributes for the stroke.
+	/// Provide the shape-related SVG attributes for the stroke. The paint-related attributes for the stroke are generated from `List<Graphic>.render` with `PaintTarget::Stroke`.
 	fn render(
 		&self,
 		_svg_defs: &mut String,
+		_item_transform: DAffine2,
 		_element_transform: DAffine2,
 		_stroke_transform: DAffine2,
 		_bounds: DAffine2,
 		_transformed_bounds: DAffine2,
 		render_params: &RenderParams,
+		_target: PaintTarget,
 	) -> 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();
 		}
@@ -133,10 +192,7 @@ 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="#{}""##, SRGBA8::from(color).to_rgb_hex());
-		if color.a() < 1. {
-			let _ = write!(&mut attributes, r#" stroke-opacity="{}""#, (color.a() * 1000.).round() / 1000.);
-		}
+		let mut attributes = String::new();
 		if let Some(mut weight) = weight {
 			if stroke_align.is_some() && render_params.aligned_strokes {
 				weight *= 2.;
@@ -165,18 +221,84 @@ impl RenderExt for Stroke {
 	}
 }

-impl RenderExt for PathStyle {
+impl RenderExt for List<Graphic> {
 	type Output = String;

-	/// Renders the shape's fill and stroke attributes as a string with them concatenated together.
-	#[allow(clippy::too_many_arguments)]
-	fn render(&self, svg_defs: &mut String, element_transform: DAffine2, stroke_transform: DAffine2, bounds: DAffine2, transformed_bounds: DAffine2, render_params: &RenderParams) -> String {
-		let fill_attribute = self.fill.render(svg_defs, element_transform, stroke_transform, bounds, transformed_bounds, render_params);
-		let stroke_attribute = self
-			.stroke
-			.as_ref()
-			.map(|stroke| stroke.render(svg_defs, element_transform, stroke_transform, bounds, transformed_bounds, render_params))
-			.unwrap_or_default();
-		format!("{fill_attribute}{stroke_attribute}")
+	fn render(
+		&self,
+		svg_defs: &mut String,
+		item_transform: DAffine2,
+		element_transform: DAffine2,
+		stroke_transform: DAffine2,
+		bounds: DAffine2,
+		transformed_bounds: DAffine2,
+		render_params: &RenderParams,
+		target: PaintTarget,
+	) -> Self::Output {
+		let fill_graphic = self.element(0);
+		let paint_attr = target.paint_attr();
+
+		match fill_graphic {
+			Some(Graphic::Color(color_list)) => color_list.render(svg_defs, item_transform, element_transform, stroke_transform, bounds, transformed_bounds, render_params, target),
+			Some(Graphic::Gradient(gradient_list)) => {
+				let gradient_id = gradient_list.render(svg_defs, item_transform, element_transform, stroke_transform, bounds, transformed_bounds, render_params, target);
+				format!(r##" {paint_attr}="url(#{gradient_id})""##)
+			}
+			Some(Graphic::Vector(_)) | Some(Graphic::RasterCPU(_)) | Some(Graphic::RasterGPU(_)) | Some(Graphic::Graphic(_)) => {
+				let bounds = if target == PaintTarget::Stroke {
+					// To prevent a wraparound artefact occurring when the tile boundary and the stroke region are perfectly aligned, the local coordinate is expanded slightly.
+					let inverse = |len: f64| if len > 0. { 1. / len } else { 0. };
+					let inflate = DVec2::new(inverse(item_transform.matrix2.x_axis.length()), inverse(item_transform.matrix2.y_axis.length()));
+					let min = bounds.transform_point2(DVec2::ZERO) - inflate;
+					let max = bounds.transform_point2(DVec2::ONE) + inflate;
+					DAffine2::from_scale_angle_translation(max - min, 0., min)
+				} else {
+					bounds
+				};
+				render_svg_pattern(svg_defs, self, stroke_transform, bounds, render_params)
+					.map(|id| format!(r##" {paint_attr}="url(#{id})""##))
+					.unwrap_or_else(|| format!(r#" {paint_attr}="none""#))
+			}
+			None => format!(r#" {paint_attr}="none""#),
+		}
 	}
 }
+
+/// Emits an SVG `<pattern>` paint server into `svg_defs` that renders the given graphic list as the paint content, and returns the pattern ID.
+/// Currently, this function is only used for clipping-based filling and stroking, not considering tiling yet.
+fn render_svg_pattern(svg_defs: &mut String, fill_graphic_list: &List<Graphic>, stroke_transform: DAffine2, bounds: DAffine2, render_params: &RenderParams) -> Option<String> {
+	let min = bounds.transform_point2(DVec2::ZERO);
+	let max = bounds.transform_point2(DVec2::ONE);
+	let size = max - min;
+	if size.x <= 0. || size.y <= 0. {
+		return None;
+	}
+
+	// Render the pattern content recursively
+	let mut content = SvgRender::new();
+	fill_graphic_list.render_svg(&mut content, &render_params.for_pattern());
+
+	// Unwrap the inner def element
+	write!(svg_defs, "{}", content.svg_defs).unwrap();
+
+	let pattern_transform = stroke_transform * DAffine2::from_translation(min);
+	let transform_str = format_transform_matrix(pattern_transform);
+	let transform_attr = if transform_str.is_empty() {
+		String::new()
+	} else {
+		format!(r#" patternTransform="{transform_str}""#)
+	};
+
+	let pattern_id = format!("pattern-{}", generate_uuid());
+	write!(
+		svg_defs,
+		r##"<pattern id="{pattern_id}" patternUnits="userSpaceOnUse" x="0" y="0" width="{}" height="{}"{transform_attr}>"##,
+		size.x, size.y,
+	)
+	.unwrap();
+
+	let content_shift = format_transform_matrix(DAffine2::from_translation(-min));
+	write!(svg_defs, r##"<g transform="{content_shift}">{}</g></pattern>"##, content.svg.to_svg_string()).unwrap();
+
+	Some(pattern_id)
+}