Refactor and add overlay support based on paint order

Author: seam0s-dev

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

@@ -17,7 +17,7 @@ use graphene_std::subpath::Subpath;
 use graphene_std::vector::click_target::ClickTargetType;
 use graphene_std::vector::misc::{dvec2_to_point, point_to_dvec2};
 use graphene_std::vector::stroke::DashLengthsInput;
-use graphene_std::vector::style::Stroke;
+use graphene_std::vector::style::{PaintOrder, Stroke};
 use graphene_std::vector::{PointId, SegmentId, Vector};
 use kurbo::{self, Affine, CubicBez, ParamCurve, PathSeg};
 use std::collections::HashMap;
@@ -1031,69 +1031,97 @@ impl OverlayContext {
 
 	/// Fills the area inside the path (with an optional pattern). Assumes `color` is in gamma space.
 	/// Used by the Pen tool to show the path being closed and by the Fill tool to show the area to be filled with a pattern.
-	pub fn fill_path(
-		&mut self,
-		subpaths: impl Iterator<Item = impl Borrow<Subpath<PointId>>>,
-		transform: DAffine2,
-		stroke_transform: DAffine2,
-		color: &Color,
-		with_pattern: bool,
-		clear_stroke_part: bool,
-		stroke_width: Option<f64>,
-	) {
+	pub fn fill_path(&mut self, subpaths: impl Iterator<Item = impl Borrow<Subpath<PointId>>>, transform: DAffine2, color: &Color) {
+		self.draw_path_from_subpaths(subpaths, transform);
+
+		let color_str = format!("#{:?}", color.to_rgba_hex_srgb());
+		self.render_context.set_fill_style_str(&color_str.as_str());
+		self.render_context.fill();
+	}
+
+	pub fn fill_overlay(&mut self, subpaths: impl Iterator<Item = impl Borrow<Subpath<PointId>>>, layer_to_viewport: DAffine2, color: &Color, stroke: Option<Stroke>) {
+		// Render for elements with fill
+		// Render for elements with fill only
+		// Render for elements with fill and stroke
+		//----PaintOrder
+		//----StrokeAlign
+
 		self.render_context.save();
 		self.start_dpi_aware_transform();
 
-		if with_pattern {
-			self.render_context.set_fill_style_canvas_pattern(&self.fill_canvas_pattern(color));
-		} else {
-			let color_str = format!("#{:?}", color.to_rgba_hex_srgb());
-			self.render_context.set_fill_style_str(&color_str.as_str());
-		}
-		// let stroke_transform = Some(stroke_transform).filter(|transform| transform.matrix2.determinant() != 0.).unwrap_or(DAffine2::IDENTITY);
-		let a = transform.matrix2.x_axis.x;
-		let b = transform.matrix2.y_axis.x;
-		let c = transform.matrix2.x_axis.y;
-		let d = transform.matrix2.y_axis.y;
-		let e = transform.translation.x;
-		let f = transform.translation.y;
-		self.render_context.transform(a, b, c, d, e, f);
-		self.draw_path_from_subpaths(subpaths, stroke_transform);
-		self.render_context.fill();
+		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 { layer_to_viewport };
+			let element_transform = if has_real_stroke { layer_to_viewport * stroke.transform.inverse() } else { DAffine2::IDENTITY };
 
-		// Make the stroke transparent and erase the fill area overlapping the stroke.
-		if clear_stroke_part {
-			self.render_context.set_line_width(stroke_width.unwrap_or(1.));
-			self.render_context.set_global_composite_operation("destination-out").expect("Failed to set global composite operation");
-			self.render_context.set_stroke_style_str(&"#000000");
-			self.render_context.stroke();
+			let [a, b, c, d, e, f] = element_transform.to_cols_array();
+			self.render_context.transform(a, b, c, d, e, f);
+
+			self.draw_path_from_subpaths(subpaths, applied_stroke_transform);
+
+			match stroke.paint_order {
+				PaintOrder::StrokeAbove => {
+					self.render_context.set_fill_style_canvas_pattern(&self.fill_canvas_pattern(color));
+					self.render_context.fill();
+
+					// Make the stroke transparent and erase the fill area overlapping the stroke.
+					self.render_context.set_stroke_style_str(&"#000000");
+					self.render_context.set_line_width(stroke.weight());
+					self.render_context.set_global_composite_operation("destination-out").expect("Failed to set global composite operation");
+					self.render_context.stroke();
+				}
+				PaintOrder::StrokeBelow => {
+					self.render_context.set_fill_style_canvas_pattern(&self.fill_canvas_pattern(color));
+					self.render_context.fill();
+				}
+			}
+		} else {
+			self.render_context.set_fill_style_canvas_pattern(&self.fill_canvas_pattern(color));
+			self.render_context.fill();
 		}
 
 		self.end_dpi_aware_transform();
 		self.render_context.restore();
 	}
 
-	pub fn fill_stroke(&mut self, subpaths: impl Iterator<Item = impl Borrow<Subpath<PointId>>>, transform: DAffine2, overlay_stroke: &Stroke) {
+	pub fn stroke_overlay(&mut self, subpaths: impl Iterator<Item = impl Borrow<Subpath<PointId>>>, layer_to_viewport: DAffine2, color: &Color, stroke: Option<Stroke>) {
+		// Render for elements with stroke
+		//----StrokeAlign
+		// Render for elements with stroke only
+		// Render for elements with stroke and fill
+		//----PaintOrder
+
 		self.render_context.save();
 		self.start_dpi_aware_transform();
 
-		self.render_context
-			.set_stroke_style_canvas_pattern(&self.fill_canvas_pattern(&overlay_stroke.color.expect("Color should be set for fill_stroke()")));
-		self.render_context.set_line_width(overlay_stroke.weight);
-		self.render_context.set_line_cap(overlay_stroke.cap.html_canvas_name().as_str());
-		self.render_context.set_line_join(overlay_stroke.join.html_canvas_name().as_str());
-		self.render_context.set_miter_limit(overlay_stroke.join_miter_limit);
-		// let stroke_transform = Some(overlay_stroke.transform).filter(|transform| transform.matrix2.determinant() != 0.).unwrap_or(DAffine2::IDENTITY);
-		// let stroke_transform = overlay_stroke.transform;
-		let a = transform.matrix2.x_axis.x;
-		let b = transform.matrix2.y_axis.x;
-		let c = transform.matrix2.x_axis.y;
-		let d = transform.matrix2.y_axis.y;
-		let e = transform.translation.x;
-		let f = transform.translation.y;
-		self.render_context.transform(a, b, c, d, e, f);
-		self.draw_path_from_subpaths(subpaths, overlay_stroke.transform);
-		self.render_context.stroke();
+		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 { layer_to_viewport };
+			let element_transform = if has_real_stroke { layer_to_viewport * stroke.transform.inverse() } else { DAffine2::IDENTITY };
+
+			let [a, b, c, d, e, f] = element_transform.to_cols_array();
+			self.render_context.transform(a, b, c, d, e, f);
+
+			self.draw_path_from_subpaths(subpaths, applied_stroke_transform);
+
+			self.render_context.set_stroke_style_canvas_pattern(&self.fill_canvas_pattern(color));
+			self.render_context.set_line_width(stroke.weight);
+			self.render_context.set_line_cap(stroke.cap.html_canvas_name().as_str());
+			self.render_context.set_line_join(stroke.join.html_canvas_name().as_str());
+			self.render_context.set_miter_limit(stroke.join_miter_limit);
+			match stroke.paint_order {
+				PaintOrder::StrokeAbove => {
+					self.render_context.stroke();
+				}
+				PaintOrder::StrokeBelow => {
+					self.render_context.stroke();
+
+					self.render_context.set_fill_style_str(&"#000000");
+					self.render_context.set_global_composite_operation("destination-out").expect("Failed to set global composite operation");
+					self.render_context.fill();
+				}
+			}
+		}
 
 		self.end_dpi_aware_transform();
 		self.render_context.restore();

editor/src/messages/tool/tool_messages/fill_tool.rs

@@ -2,12 +2,9 @@ use super::tool_prelude::*;
 use crate::messages::portfolio::document::node_graph::document_node_definitions::DefinitionIdentifier;
 use crate::messages::portfolio::document::overlays::utility_types::OverlayContext;
 use crate::messages::tool::common_functionality::graph_modification_utils::{self, NodeGraphLayer, get_stroke_width};
-use graph_craft::document::value::TaggedValue;
-use graphene_std::NodeInputDecleration;
 use graphene_std::subpath::Subpath;
 use graphene_std::vector::PointId;
-use graphene_std::vector::stroke::{AlignInput, CapInput, JoinInput, MiterLimitInput, PaintOrderInput};
-use graphene_std::vector::style::{Fill, PaintOrder, Stroke, StrokeAlign, StrokeCap, StrokeJoin};
+use graphene_std::vector::style::Fill;
 use kurbo::ParamCurveNearest;
 
 #[derive(Default, ExtractField)]
@@ -94,15 +91,6 @@ pub fn close_to_subpath(mouse_pos: DVec2, subpath: Subpath<PointId>, stroke_widt
 	}
 
 	return is_close;
-
-	// if let Some((segment_index, t)) = subpath.project(mouse_pos) {
-	// 	let nearest_point = subpath.evaluate(SubpathTValue::Parametric { segment_index, t });
-	// 	// debug!("max_stroke_distance: {max_stroke_distance}");
-	// 	// debug!("mouse-stroke distance: {:?}", (mouse_pos - nearest_point).length());
-	// 	(mouse_pos - nearest_point).length_squared() <= max_stroke_distance
-	// } else {
-	// 	false
-	// }
 }
 
 const STROKE_ID: DefinitionIdentifier = DefinitionIdentifier::ProtoNode(graphene_std::vector::stroke::IDENTIFIER);
@@ -157,61 +145,20 @@ impl Fsm for FillToolFsmState {
 						let stroke_exists_and_visible = stroke_node.is_some_and(|stroke| document.network_interface.is_visible(&stroke, &[]));
 						let stroke = vector_data.style.stroke();
 
-						let has_real_stroke = stroke.filter(|stroke| stroke.weight() > 0.);
-						let set_stroke_transform = has_real_stroke.map(|stroke| stroke.transform).filter(|transform| transform.matrix2.determinant() != 0.);
-						let applied_stroke_transform = set_stroke_transform.unwrap_or(document.metadata().transform_to_viewport(layer));
-						let element_transform = set_stroke_transform
-							.map(|stroke_transform| document.metadata().transform_to_viewport(layer) * stroke_transform.inverse())
-							.unwrap_or(DAffine2::IDENTITY);
-
 						let stroke_width = get_stroke_width(layer, &document.network_interface).unwrap_or(1.0);
-						let zoom: f64 = document.document_ptz.zoom();
-						let modified_stroke_width = stroke_width;
+						let zoom = document.document_ptz.zoom();
 						let close_to_stroke = subpaths.any(|subpath| close_to_subpath(input.mouse.position, subpath, stroke_width, zoom, document.metadata().transform_to_viewport(layer)));
 
 						// Fill
 						let fill_node = graph_layer.upstream_node_id_from_name(&FILL_ID);
 						let fill_exists_and_visible = fill_node.is_some_and(|fill| document.network_interface.is_visible(&fill, &[]));
 
 						subpaths = vector_data.stroke_bezier_paths();
+						let layer_to_viewport = document.metadata().transform_to_viewport(layer);
 						if stroke_exists_and_visible && close_to_stroke {
-							let overlay_stroke = || {
-								let mut overlay_stroke = Stroke::new(Some(preview_color), modified_stroke_width);
-								overlay_stroke.transform = applied_stroke_transform;
-
-								let align = graph_layer.find_input(&STROKE_ID, AlignInput::INDEX).unwrap();
-								overlay_stroke.align = if let TaggedValue::StrokeAlign(align) = align { *align } else { StrokeAlign::default() };
-
-								let line_cap = graph_layer.find_input(&STROKE_ID, CapInput::INDEX).unwrap();
-								overlay_stroke.cap = if let TaggedValue::StrokeCap(line_cap) = line_cap { *line_cap } else { StrokeCap::default() };
-
-								let line_join = graph_layer.find_input(&STROKE_ID, JoinInput::INDEX).unwrap();
-								overlay_stroke.join = if let TaggedValue::StrokeJoin(line_join) = line_join { *line_join } else { StrokeJoin::default() };
-
-								let miter_limit = graph_layer.find_input(&STROKE_ID, MiterLimitInput::INDEX).unwrap();
-								overlay_stroke.join_miter_limit = if let TaggedValue::F64(miter_limit) = miter_limit { *miter_limit } else { f64::default() };
-
-								let paint_order = graph_layer.find_input(&STROKE_ID, PaintOrderInput::INDEX).unwrap();
-								overlay_stroke.paint_order = if let TaggedValue::PaintOrder(paint_order) = paint_order {
-									*paint_order
-								} else {
-									PaintOrder::default()
-								};
-
-								overlay_stroke
-							};
-
-							overlay_context.fill_stroke(subpaths, element_transform, &overlay_stroke());
+							overlay_context.stroke_overlay(subpaths, layer_to_viewport, &preview_color, stroke);
 						} else if fill_exists_and_visible {
-							overlay_context.fill_path(
-								subpaths,
-								element_transform,
-								applied_stroke_transform,
-								&preview_color,
-								true,
-								stroke_exists_and_visible,
-								Some(modified_stroke_width),
-							);
+							overlay_context.fill_overlay(subpaths, layer_to_viewport, &preview_color, stroke);
 						}
 					}
 				}

editor/src/messages/tool/tool_messages/pen_tool.rs

@@ -1680,7 +1680,7 @@ impl Fsm for PenToolFsmState {
 								.collect();
 
 							let fill_color = graphene_std::Color::from_rgb_str(COLOR_OVERLAY_BLUE.strip_prefix('#').unwrap()).unwrap().with_alpha(0.05);
-							overlay_context.fill_path(subpaths.iter(), transform, DAffine2::IDENTITY, &fill_color, false, false, None);
+							overlay_context.fill_path(subpaths.iter(), transform, &fill_color);
 						}
 					}
 				}

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

@@ -727,7 +727,7 @@ impl Render for Table<Vector> {
 		for row in self.iter() {
 			let vector = &row.element;
 			// Only consider strokes with non-zero weight, since default strokes with zero weight would prevent assigning the correct stroke transform
-			let has_real_stroke = vector.style.stroke().filter(|stroke| stroke.weight() > 1.);
+			let has_real_stroke = vector.style.stroke().filter(|stroke| stroke.weight() > 0.);
 			let set_stroke_transform = has_real_stroke.map(|stroke| stroke.transform).filter(|transform| transform.matrix2.determinant() != 0.);
 			let applied_stroke_transform = set_stroke_transform.unwrap_or(*row.transform);
 			let applied_stroke_transform = render_params.alignment_parent_transform.unwrap_or(applied_stroke_transform);