Implement stroke and fill overlays for desktop

Author: seam0s-dev

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

@@ -501,7 +501,7 @@ impl<'a> ModifyInputsContext<'a> {
 		};
 
 		let stroke_color = if let Some(color) = color { Table::new_from_element(color) } else { Table::new() };
-		let input_connector = InputConnector::node(stroke_node_id, 1);
+		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), false);
 	}
 

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

@@ -73,11 +73,10 @@ impl MessageHandler<OverlaysMessage, OverlaysMessageContext<'_>> for OverlaysMes
 				let overlay_context = OverlayContext::new(*viewport, visibility_settings);
 
 				if visibility_settings.all() {
-					responses.add(DocumentMessage::GridOverlays { context: overlay_context.clone() });
-
 					for provider in &self.overlay_providers {
 						responses.add(provider(overlay_context.clone()));
 					}
+					responses.add(DocumentMessage::GridOverlays { context: overlay_context.clone() });
 				}
 				responses.add(FrontendMessage::RenderOverlays { context: overlay_context });
 			}

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

@@ -17,14 +17,14 @@ use graphene_std::table::Table;
 use graphene_std::text::{Font, TextAlign, TypesettingConfig};
 use graphene_std::vector::click_target::ClickTargetType;
 use graphene_std::vector::misc::point_to_dvec2;
-use graphene_std::vector::style::Stroke;
+use graphene_std::vector::style::{PaintOrder, Stroke, StrokeAlign};
 use graphene_std::vector::{PointId, SegmentId, Vector};
-use kurbo::{self, BezPath, ParamCurve};
+use kurbo::{self, BezPath, ParamCurve, Shape};
 use kurbo::{Affine, PathSeg};
 use std::collections::HashMap;
 use std::sync::{Arc, Mutex, MutexGuard};
 use vello::Scene;
-use vello::peniko;
+use vello::peniko::{self, BlendMode};
 
 // TODO Remove duplicated definition of this in `utility_types_web.rs`
 pub type OverlayProvider = fn(OverlayContext) -> Message;
@@ -1123,20 +1123,116 @@ impl OverlayContextInternal {
 	/// Fills the shape's fill region with a pattern of the given color. Assumes `color` is in gamma space.
 	/// Used by the fill tool to show the area to be filled.
 	fn fill_overlay(&mut self, subpaths: impl Iterator<Item = impl Borrow<Subpath<PointId>>>, transform: DAffine2, color: &Color, stroke: Option<Stroke>) {
-		let path = self.path_from_subpaths(subpaths, transform);
-		let brush = peniko::Brush::Image(self.fill_canvas_pattern_image(color));
+		if let Some(stroke) = stroke {
+			let has_real_stroke = stroke.weight() > 0. && stroke.transform.matrix2.determinant() != 0.;
+			let applied_stroke_transform = if has_real_stroke { stroke.transform } else { transform };
+			let element_transform = if has_real_stroke { transform * stroke.transform.inverse() } else { DAffine2::IDENTITY };
+
+			let path = self.path_from_subpaths(subpaths, applied_stroke_transform);
+			let brush = peniko::Brush::Image(self.fill_canvas_pattern_image(color));
+
+			let do_fill = |scene: &mut Scene| {
+				let element_transform = Affine::new(element_transform.to_cols_array());
+				scene.fill(peniko::Fill::NonZero, element_transform, &brush, Some(element_transform.inverse()), &path);
+			};
+			let composite_stroke_out = |scene: &mut Scene, compose_mode: peniko::Compose, stroke_scale: Option<f64>| {
+				let element_transform = Affine::new(element_transform.to_cols_array());
+				let mut stroke = stroke.to_kurbo();
+				if let Some(scale) = stroke_scale {
+					stroke.width *= scale;
+				}
+				let path_bbox = path.bounding_box().inflate(stroke.width, stroke.width);
+
+				scene.push_layer(peniko::Fill::NonZero, BlendMode::new(peniko::Mix::Normal, compose_mode), 1.0, element_transform, &path_bbox);
+				scene.stroke(&stroke, element_transform, &brush, Some(element_transform.inverse()), &path);
+				scene.pop_layer();
+			};
 
-		self.scene.fill(peniko::Fill::NonZero, self.get_transform(), &brush, None, &path);
+			// For layers with open subpaths, stroke align is ignored and set to default
+			let is_closed_on_all = true;
+			let stroke_align = if is_closed_on_all { stroke.align } else { StrokeAlign::Center };
+
+			match (stroke_align, stroke.paint_order) {
+				(StrokeAlign::Inside, PaintOrder::StrokeAbove) => {
+					do_fill(&mut self.scene);
+					composite_stroke_out(&mut self.scene, peniko::Compose::DestOut, Some(2.0));
+				}
+				(StrokeAlign::Inside, PaintOrder::StrokeBelow) => {
+					do_fill(&mut self.scene);
+				}
+				(StrokeAlign::Center, PaintOrder::StrokeAbove) => {
+					do_fill(&mut self.scene);
+					composite_stroke_out(&mut self.scene, peniko::Compose::DestOut, None);
+				}
+				(StrokeAlign::Center, PaintOrder::StrokeBelow) => {
+					do_fill(&mut self.scene);
+				}
+				// Paint order does not affect this
+				(StrokeAlign::Outside, _) => {
+					do_fill(&mut self.scene);
+				}
+			}
+		} else {
+			let path = self.path_from_subpaths(subpaths, transform);
+			let brush = peniko::Brush::Image(self.fill_canvas_pattern_image(color));
+			self.scene.fill(peniko::Fill::NonZero, Affine::IDENTITY, &brush, None, &path);
+		}
 	}
 
 	/// Fills the shape's fill region with a pattern of the given color. Assumes `color` is in gamma space.
 	/// https://www.w3schools.com/tags/canvas_globalcompositeoperation.asp
 	pub fn stroke_overlay(&mut self, subpaths: impl Iterator<Item = impl Borrow<Subpath<PointId>>>, transform: DAffine2, color: &Color, stroke: Option<Stroke>) {
-		let path = self.path_from_subpaths(subpaths, transform);
-
 		if let Some(stroke) = stroke {
-			let brush = peniko::Brush::Image(self.fill_canvas_pattern_image(&color));
-			self.scene.stroke(&kurbo::Stroke::new(stroke.weight), self.get_transform(), &brush, None, &path);
+			let has_real_stroke = stroke.weight() > 0. && stroke.transform.matrix2.determinant() != 0.;
+			let applied_stroke_transform = if has_real_stroke { stroke.transform } else { transform };
+			let element_transform = if has_real_stroke { transform * stroke.transform.inverse() } else { DAffine2::IDENTITY };
+
+			let path = self.path_from_subpaths(subpaths, applied_stroke_transform);
+			let brush = peniko::Brush::Image(self.fill_canvas_pattern_image(color));
+
+			let do_stroke = |scene: &mut Scene, stroke_scale: Option<f64>| {
+				let element_transform = Affine::new(element_transform.to_cols_array());
+				let mut stroke = stroke.to_kurbo();
+				if let Some(scale) = stroke_scale {
+					stroke.width *= scale;
+				}
+
+				scene.stroke(&stroke, element_transform, &brush, Some(element_transform.inverse()), &path);
+			};
+			let composite_fill_out = |scene: &mut Scene, compose_mode: peniko::Compose, stroke_scale: Option<f64>| {
+				let element_transform = Affine::new(element_transform.to_cols_array());
+				let stroke_width = stroke.weight() * stroke_scale.map_or(1.0, |scale| scale);
+				let path_bbox = path.bounding_box().inflate(stroke_width, stroke_width);
+
+				scene.push_layer(peniko::Fill::NonZero, BlendMode::new(peniko::Mix::Normal, compose_mode), 1.0, element_transform, &path_bbox);
+				scene.fill(peniko::Fill::NonZero, element_transform, &brush, Some(element_transform.inverse()), &path);
+				scene.pop_layer();
+			};
+
+			// For layers with open subpaths, stroke align is ignored and set to default
+			let is_closed_on_all = true;
+			let stroke_align = if is_closed_on_all { stroke.align } else { StrokeAlign::Center };
+
+			match (stroke_align, stroke.paint_order) {
+				(StrokeAlign::Inside, PaintOrder::StrokeAbove) => {
+					// TODO: Fix overlay leak outside the stroke region
+					do_stroke(&mut self.scene, Some(2.0));
+					composite_fill_out(&mut self.scene, peniko::Compose::DestIn, Some(2.0));
+				}
+				(StrokeAlign::Inside, PaintOrder::StrokeBelow) => {}
+				(StrokeAlign::Center, PaintOrder::StrokeAbove) => {
+					do_stroke(&mut self.scene, None);
+				}
+				(StrokeAlign::Center, PaintOrder::StrokeBelow) => {
+					do_stroke(&mut self.scene, None);
+					composite_fill_out(&mut self.scene, peniko::Compose::DestOut, None);
+				}
+				// Paint order does not affect this
+				(StrokeAlign::Outside, _) => {
+					do_stroke(&mut self.scene, Some(2.0));
+					composite_fill_out(&mut self.scene, peniko::Compose::DestOut, Some(2.0));
+				}
+			}
 		}
 	}
 

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

@@ -1050,7 +1050,7 @@ impl OverlayContext {
 		// 4x4 pixels, 4 components (RGBA) per pixel
 		let mut data = [0_u8; 4 * PATTERN_WIDTH * PATTERN_HEIGHT];
 
-		let rgba = hex_to_rgba_u8(color.to_rgba_hex_srgb().as_str());
+		let rgba = color.to_rgba8_srgb();
 
 		// ┌▄▄┬──┬──┬──┐
 		// ├▀▀┼──┼──┼──┤

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

@@ -3132,7 +3132,7 @@ impl NodeNetworkInterface {
 			return Some(modified);
 		}
 
-		self.document_metadata.layer_vector_data.get(&layer).map(|arc| arc.as_ref().clone())
+		self.vector_data_from_layer(layer)
 	}
 
 	pub fn vector_data_from_layer(&self, layer: LayerNodeIdentifier) -> Option<Vector> {

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

@@ -885,7 +885,7 @@ impl Render for Table<Vector> {
 			let mut path = String::new();
 
 			for mut bezpath in row.element.stroke_bezpath_iter() {
-				// Only seems to affect upstream-transformed (from stroke node) layers ~~with row.transform~~
+				// Only affects layers with upstream transforms (from stroke node)
 				bezpath.apply_affine(Affine::new(applied_stroke_transform.to_cols_array()));
 				path.push_str(bezpath.to_svg().as_str());
 			}
@@ -904,7 +904,6 @@ impl Render for Table<Vector> {
 			let wants_stroke_below = vector.style.stroke().map(|s| s.paint_order) == Some(PaintOrder::StrokeBelow);
 
 			if needs_separate_alignment_fill && !wants_stroke_below {
-				log::info!("Entering needs_separate_alignment_fill && !wants_stroke_below");
 				render.leaf_tag("path", |attributes| {
 					attributes.push("d", path.clone());
 					let matrix = format_transform_matrix(element_transform);
@@ -944,7 +943,6 @@ impl Render for Table<Vector> {
 
 			let use_face_fill = vector.use_face_fill();
 			if use_face_fill {
-				log::info!("Entering vector.is_branching()");
 				for mut face_path in vector.construct_faces().filter(|face| face.area() >= 0.) {
 					face_path.apply_affine(Affine::new(applied_stroke_transform.to_cols_array()));
 
@@ -972,16 +970,14 @@ impl Render for Table<Vector> {
 
 			render.leaf_tag("path", |attributes| {
 				attributes.push("d", path.clone());
-				// Only seem to affect layers with downstream-transformed layers (from stroke node) with ~~row.transform*stroke_transform.inverse()~~
-				// and affect layers with upstream-transformed (from stroke node) layers ~~with IDENTITY~~
+				// Affects all layers regardless of upstream/downstream transforms (from the stroke node)
 				let matrix = format_transform_matrix(element_transform);
 				if !matrix.is_empty() {
 					attributes.push("transform", matrix);
 				}
 
 				let defs = &mut attributes.0.svg_defs;
 				if let Some((ref id, mask_type, ref vector_row)) = push_id {
-					log::info!("Entering Some(p) = push_id");
 					let mut svg = SvgRender::new();
 					vector_row.render_svg(&mut svg, &render_params.for_alignment(applied_stroke_transform));
 					let stroke = row.element.style.stroke().unwrap();
@@ -1015,13 +1011,11 @@ impl Render for Table<Vector> {
 				}
 
 				let fill_and_stroke = style.render(defs, element_transform, applied_stroke_transform, bounds_matrix, transformed_bounds_matrix, &render_params);
-				// log::info!("file_and_stroke: {:?}", fill_and_stroke);
 
 				if let Some((id, mask_type, _)) = push_id {
 					let selector = format!("url(#{id})");
 					attributes.push(mask_type.to_attribute(), selector);
 				}
-				// Look here to see how to adjust the stroke
 				attributes.push_val(fill_and_stroke);
 
 				if vector.is_branching() && !use_face_fill {
@@ -1040,7 +1034,6 @@ impl Render for Table<Vector> {
 
 			// When splitting passes and stroke is below, draw the fill after the stroke.
 			if needs_separate_alignment_fill && wants_stroke_below {
-				log::info!("Entering needs_separate_alignment_fill && wants_stroke_below");
 				render.leaf_tag("path", |attributes| {
 					attributes.push("d", path);
 					let matrix = format_transform_matrix(element_transform);
@@ -1064,7 +1057,7 @@ impl Render for Table<Vector> {
 	}
 
 	fn render_to_vello(&self, scene: &mut Scene, parent_transform: DAffine2, _context: &mut RenderContext, render_params: &RenderParams) {
-		use graphic_types::vector_types::vector::style::{GradientType, StrokeCap, StrokeJoin};
+		use graphic_types::vector_types::vector::style::GradientType;
 
 		for row in self.iter() {
 			use graphic_types::vector_types::vector;
@@ -1214,23 +1207,13 @@ impl Render for Table<Vector> {
 						Some(color) => peniko::Color::new([color.r(), color.g(), color.b(), color.a()]),
 						None => peniko::Color::TRANSPARENT,
 					};
-					let cap = match stroke.cap {
-						StrokeCap::Butt => Cap::Butt,
-						StrokeCap::Round => Cap::Round,
-						StrokeCap::Square => Cap::Square,
-					};
-					let join = match stroke.join {
-						StrokeJoin::Miter => Join::Miter,
-						StrokeJoin::Bevel => Join::Bevel,
-						StrokeJoin::Round => Join::Round,
-					};
 					let dash_pattern = stroke.dash_lengths.iter().map(|l| l.max(0.)).collect();
 					let stroke = kurbo::Stroke {
 						width: stroke.weight * width_scale,
 						miter_limit: stroke.join_miter_limit,
-						join,
-						start_cap: cap,
-						end_cap: cap,
+						join: stroke.join.to_kurbo(),
+						start_cap: stroke.cap.to_kurbo(),
+						end_cap: stroke.cap.to_kurbo(),
 						dash_pattern,
 						dash_offset: stroke.dash_offset,
 					};

node-graph/libraries/vector-types/src/vector/style.rs

@@ -245,6 +245,14 @@ impl StrokeCap {
 			StrokeCap::Square => String::from("square"),
 		}
 	}
+
+	pub fn to_kurbo(&self) -> kurbo::Cap {
+		match self {
+			StrokeCap::Butt => kurbo::Cap::Butt,
+			StrokeCap::Round => kurbo::Cap::Round,
+			StrokeCap::Square => kurbo::Cap::Square,
+		}
+	}
 }
 
 #[repr(C)]
@@ -274,6 +282,14 @@ impl StrokeJoin {
 			StrokeJoin::Round => String::from("round"),
 		}
 	}
+
+	pub fn to_kurbo(&self) -> kurbo::Join {
+		match self {
+			StrokeJoin::Bevel => kurbo::Join::Bevel,
+			StrokeJoin::Miter => kurbo::Join::Miter,
+			StrokeJoin::Round => kurbo::Join::Round,
+		}
+	}
 }
 
 #[repr(C)]
@@ -372,6 +388,18 @@ impl Stroke {
 		}
 	}
 
+	pub fn to_kurbo(&self) -> kurbo::Stroke {
+		kurbo::Stroke {
+			width: self.weight,
+			join: self.join.to_kurbo(),
+			miter_limit: self.join_miter_limit,
+			start_cap: self.cap.to_kurbo(),
+			end_cap: self.cap.to_kurbo(),
+			dash_offset: self.dash_offset,
+			..Default::default()
+		}
+	}
+
 	pub fn lerp(&self, other: &Self, time: f64) -> Self {
 		Self {
 			color: self.color.map(|color| color.lerp(&other.color.unwrap_or(color), time as f32)),

node-graph/nodes/vector/src/vector_nodes.rs

@@ -1123,16 +1123,7 @@ async fn offset_path(_: impl Ctx, content: Table<Vector>, distance: f64, join: S
 				bezpath.apply_affine(transform);
 
 				// Taking the existing stroke data and passing it to Kurbo to generate new paths.
-				let mut bezpath_out = offset_bezpath(
-					&bezpath,
-					-distance,
-					match join {
-						StrokeJoin::Miter => kurbo::Join::Miter,
-						StrokeJoin::Bevel => kurbo::Join::Bevel,
-						StrokeJoin::Round => kurbo::Join::Round,
-					},
-					Some(miter_limit),
-				);
+				let mut bezpath_out = offset_bezpath(&bezpath, -distance, join.to_kurbo(), Some(miter_limit));
 
 				bezpath_out.apply_affine(transform.inverse());
 
@@ -1163,16 +1154,8 @@ async fn solidify_stroke(_: impl Ctx, content: Table<Vector>) -> Table<Vector> {
 			let mut solidified_stroke = Vector::default();
 
 			// Taking the existing stroke data and passing it to kurbo::stroke to generate new fill paths.
-			let join = match stroke.join {
-				StrokeJoin::Miter => kurbo::Join::Miter,
-				StrokeJoin::Bevel => kurbo::Join::Bevel,
-				StrokeJoin::Round => kurbo::Join::Round,
-			};
-			let cap = match stroke.cap {
-				StrokeCap::Butt => kurbo::Cap::Butt,
-				StrokeCap::Round => kurbo::Cap::Round,
-				StrokeCap::Square => kurbo::Cap::Square,
-			};
+			let join = stroke.join.to_kurbo();
+			let cap = stroke.cap.to_kurbo();
 			let dash_offset = stroke.dash_offset;
 			let dash_pattern = stroke.dash_lengths;
 			let miter_limit = stroke.join_miter_limit;