Implement fill tool on strokes

Author: seam0s-dev

editor/src/messages/portfolio/document/document_message_handler.rs

@@ -1063,6 +1063,7 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
 						responses.add(PortfolioMessage::UpdateDocumentWidgets);
 					}
 					OverlaysType::Handles => visibility_settings.handles = visible,
+					OverlaysType::FillableIndicator => visibility_settings.fillable_indicator = visible,
 				}
 
 				responses.add(EventMessage::ToolAbort);
@@ -2319,7 +2320,7 @@ impl DocumentMessageHandler {
 						widgets: {
 							let checkbox_id = CheckboxId::new();
 							vec![
-								CheckboxInput::new(self.overlays_visibility_settings.pivot)
+								CheckboxInput::new(self.overlays_visibility_settings.origin)
 									.on_update(|optional_input: &CheckboxInput| {
 										DocumentMessage::SetOverlaysVisibility {
 											visible: optional_input.checked,
@@ -2466,6 +2467,27 @@ impl DocumentMessageHandler {
 							]
 						},
 					},
+					LayoutGroup::Row {
+						widgets: vec![TextLabel::new("Fill Tool").widget_instance()],
+					},
+					LayoutGroup::Row {
+						widgets: {
+							let checkbox_id = CheckboxId::new();
+							vec![
+								CheckboxInput::new(self.overlays_visibility_settings.fillable_indicator)
+									.on_update(|optional_input: &CheckboxInput| {
+										DocumentMessage::SetOverlaysVisibility {
+											visible: optional_input.checked,
+											overlays_type: Some(OverlaysType::FillableIndicator),
+										}
+										.into()
+									})
+									.for_label(checkbox_id.clone())
+									.widget_instance(),
+								TextLabel::new("Fillable Indicator".to_string()).for_checkbox(checkbox_id).widget_instance(),
+							]
+						},
+					},
 				]))
 				.widget_instance(),
 			Separator::new(SeparatorStyle::Related).widget_instance(),

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

@@ -4,7 +4,6 @@ use crate::messages::portfolio::document::utility_types::network_interface::Node
 use crate::messages::prelude::*;
 use glam::{DAffine2, IVec2};
 use graph_craft::document::NodeId;
-use graphene_std::Artboard;
 use graphene_std::brush::brush_stroke::BrushStroke;
 use graphene_std::raster::BlendMode;
 use graphene_std::raster_types::{CPU, Raster};
@@ -14,6 +13,7 @@ use graphene_std::text::{Font, TypesettingConfig};
 use graphene_std::vector::PointId;
 use graphene_std::vector::VectorModificationType;
 use graphene_std::vector::style::{Fill, Stroke};
+use graphene_std::{Artboard, Color};
 
 #[impl_message(Message, DocumentMessage, GraphOperation)]
 #[derive(PartialEq, Clone, Debug, serde::Serialize, serde::Deserialize)]
@@ -41,6 +41,10 @@ pub enum GraphOperationMessage {
 		layer: LayerNodeIdentifier,
 		stroke: Stroke,
 	},
+	StrokeColorSet {
+		layer: LayerNodeIdentifier,
+		stroke_color: Color,
+	},
 	TransformChange {
 		layer: LayerNodeIdentifier,
 		transform: DAffine2,

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

@@ -65,6 +65,11 @@ impl MessageHandler<GraphOperationMessage, GraphOperationMessageContext<'_>> for
 					modify_inputs.stroke_set(stroke);
 				}
 			}
+			GraphOperationMessage::StrokeColorSet { layer, stroke_color } => {
+				if let Some(mut modify_inputs) = ModifyInputsContext::new_with_layer(layer, network_interface, responses) {
+					modify_inputs.stroke_color_set(Some(stroke_color));
+				}
+			}
 			GraphOperationMessage::TransformChange {
 				layer,
 				transform,

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

@@ -7,7 +7,6 @@ use glam::{DAffine2, IVec2};
 use graph_craft::document::value::TaggedValue;
 use graph_craft::document::{NodeId, NodeInput};
 use graph_craft::{ProtoNodeIdentifier, concrete};
-use graphene_std::Artboard;
 use graphene_std::brush::brush_stroke::BrushStroke;
 use graphene_std::raster::BlendMode;
 use graphene_std::raster_types::{CPU, Raster};
@@ -17,7 +16,7 @@ use graphene_std::text::{Font, TypesettingConfig};
 use graphene_std::vector::Vector;
 use graphene_std::vector::style::{Fill, Stroke};
 use graphene_std::vector::{PointId, VectorModificationType};
-use graphene_std::{Graphic, NodeInputDecleration};
+use graphene_std::{Artboard, Color, Graphic, NodeInputDecleration};
 
 #[derive(PartialEq, Clone, Copy, Debug, serde::Serialize, serde::Deserialize)]
 pub enum TransformIn {
@@ -423,6 +422,16 @@ impl<'a> ModifyInputsContext<'a> {
 		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::F64(stroke.dash_offset), false), true);
 	}
 
+	pub fn stroke_color_set(&mut self, color: Option<Color>) {
+		let Some(stroke_node_id) = self.existing_proto_node_id(graphene_std::vector::stroke::IDENTIFIER, false) else {
+			return;
+		};
+
+		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);
+		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::Color(stroke_color), false), false);
+	}
+
 	/// Update the transform value of the upstream Transform node based a change to its existing value and the given parent transform.
 	/// A new Transform node is created if one does not exist, unless it would be given the identity transform.
 	pub fn transform_change_with_parent(&mut self, transform: DAffine2, transform_in: TransformIn, parent_transform: DAffine2, skip_rerender: bool) {

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

@@ -50,20 +50,20 @@ impl MessageHandler<OverlaysMessage, OverlaysMessageContext<'_>> for OverlaysMes
 				canvas_context.clear_rect(0., 0., width, height);
 
 				if visibility_settings.all() {
-					responses.add(DocumentMessage::GridOverlays {
-						context: OverlayContext {
-							render_context: canvas_context.clone(),
-							visibility_settings: visibility_settings.clone(),
-							viewport: *viewport,
-						},
-					});
 					for provider in &self.overlay_providers {
 						responses.add(provider(OverlayContext {
 							render_context: canvas_context.clone(),
 							visibility_settings: visibility_settings.clone(),
 							viewport: *viewport,
 						}));
 					}
+					responses.add(DocumentMessage::GridOverlays {
+						context: OverlayContext {
+							render_context: canvas_context.clone(),
+							visibility_settings: visibility_settings.clone(),
+							viewport: *viewport,
+						},
+					});
 				}
 			}
 			#[cfg(all(not(target_family = "wasm"), not(test)))]

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

@@ -15,6 +15,7 @@ use graphene_std::math::quad::Quad;
 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::style::Stroke;
 use graphene_std::vector::{PointId, SegmentId, Vector};
 use kurbo::{self, Affine, CubicBez, ParamCurve, PathSeg};
 use std::collections::HashMap;
@@ -30,57 +31,72 @@ pub fn empty_provider() -> OverlayProvider {
 /// Types of overlays used by DocumentMessage to enable/disable the selected set of viewport overlays.
 #[derive(PartialEq, Clone, Debug, serde::Serialize, serde::Deserialize, specta::Type)]
 pub enum OverlaysType {
+	// =======
+	// General
+	// =======
 	ArtboardName,
-	CompassRose,
-	QuickMeasurement,
 	TransformMeasurement,
+	// ===========
+	// Select Tool
+	// ===========
+	QuickMeasurement,
 	TransformCage,
+	CompassRose,
+	Pivot,
+	Origin,
 	HoverOutline,
 	SelectionOutline,
 	LayerOriginCross,
-	Pivot,
-	Origin,
+	// ================
+	// Pen & Path Tools
+	// ================
 	Path,
 	Anchors,
 	Handles,
+	// =========
+	// Fill Tool
+	// =========
+	FillableIndicator,
 }
 
 #[derive(PartialEq, Copy, Clone, Debug, serde::Serialize, serde::Deserialize, specta::Type)]
-#[serde(default)]
+#[serde(default = "OverlaysVisibilitySettings::default")]
 pub struct OverlaysVisibilitySettings {
 	pub all: bool,
 	pub artboard_name: bool,
-	pub compass_rose: bool,
-	pub quick_measurement: bool,
 	pub transform_measurement: bool,
+	pub quick_measurement: bool,
 	pub transform_cage: bool,
+	pub compass_rose: bool,
+	pub pivot: bool,
+	pub origin: bool,
 	pub hover_outline: bool,
 	pub selection_outline: bool,
 	pub layer_origin_cross: bool,
-	pub pivot: bool,
-	pub origin: bool,
 	pub path: bool,
 	pub anchors: bool,
 	pub handles: bool,
+	pub fillable_indicator: bool,
 }
 
 impl Default for OverlaysVisibilitySettings {
 	fn default() -> Self {
 		Self {
 			all: true,
 			artboard_name: true,
-			compass_rose: true,
-			quick_measurement: true,
 			transform_measurement: true,
+			quick_measurement: true,
 			transform_cage: true,
+			compass_rose: true,
+			pivot: true,
+			origin: true,
 			hover_outline: true,
 			selection_outline: true,
 			layer_origin_cross: true,
-			pivot: true,
-			origin: true,
 			path: true,
 			anchors: true,
 			handles: true,
+			fillable_indicator: true,
 		}
 	}
 }
@@ -141,6 +157,10 @@ impl OverlaysVisibilitySettings {
 	pub fn handles(&self) -> bool {
 		self.all && self.anchors && self.handles
 	}
+
+	pub fn fillable_indicator(&self) -> bool {
+		self.all && self.fillable_indicator
+	}
 }
 
 #[derive(PartialEq, Clone, Debug, serde::Serialize, serde::Deserialize, specta::Type)]
@@ -805,8 +825,7 @@ impl OverlayContext {
 		self.text(&text, COLOR_OVERLAY_BLUE, None, transform, 16., [Pivot::Middle, Pivot::Middle]);
 	}
 
-	/// Used by the Pen and Path tools to outline the path of the shape.
-	pub fn outline_vector(&mut self, vector: &Vector, transform: DAffine2) {
+	pub fn draw_path_from_vector_data(&mut self, vector: &Vector, transform: DAffine2) {
 		self.start_dpi_aware_transform();
 
 		self.render_context.begin_path();
@@ -818,6 +837,12 @@ impl OverlayContext {
 			self.bezier_command(bezier, transform, move_to);
 		}
 
+		self.end_dpi_aware_transform();
+	}
+
+	/// Used by the Pen and Path tools to outline the path of the shape.
+	pub fn outline_vector(&mut self, vector: &Vector, transform: DAffine2) {
+		self.draw_path_from_vector_data(vector, transform);
 		self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE);
 		self.render_context.stroke();
 
@@ -882,7 +907,7 @@ impl OverlayContext {
 		self.end_dpi_aware_transform();
 	}
 
-	fn push_path(&mut self, subpaths: impl Iterator<Item = impl Borrow<Subpath<PointId>>>, transform: DAffine2) {
+	pub fn draw_path_from_subpaths(&mut self, subpaths: impl Iterator<Item = impl Borrow<Subpath<PointId>>>, transform: DAffine2) {
 		self.start_dpi_aware_transform();
 
 		self.render_context.begin_path();
@@ -943,7 +968,7 @@ impl OverlayContext {
 		});
 
 		if !subpaths.is_empty() {
-			self.push_path(subpaths.iter(), transform);
+			self.draw_path_from_subpaths(subpaths.iter(), transform);
 
 			let color = color.unwrap_or(COLOR_OVERLAY_BLUE);
 			self.render_context.set_stroke_style_str(color);
@@ -952,18 +977,8 @@ impl OverlayContext {
 		}
 	}
 
-	/// Fills the area inside the path. Assumes `color` is in gamma space.
-	/// Used by the Pen tool to show the path being closed.
-	pub fn fill_path(&mut self, subpaths: impl Iterator<Item = impl Borrow<Subpath<PointId>>>, transform: DAffine2, color: &str) {
-		self.push_path(subpaths, transform);
-
-		self.render_context.set_fill_style_str(color);
-		self.render_context.fill();
-	}
-
-	/// Fills the area inside the path with a pattern. Assumes `color` is in gamma space.
-	/// Used by the fill tool to show the area to be filled.
-	pub fn fill_path_pattern(&mut self, subpaths: impl Iterator<Item = impl Borrow<Subpath<PointId>>>, transform: DAffine2, color: &Color) {
+	/// Default canvas pattern used for filling stroke or fill of a path.
+	fn fill_canvas_pattern(&self, color: &Color) -> web_sys::CanvasPattern {
 		const PATTERN_WIDTH: usize = 4;
 		const PATTERN_HEIGHT: usize = 4;
 
@@ -992,12 +1007,61 @@ impl OverlayContext {
 
 		let image_data = web_sys::ImageData::new_with_u8_clamped_array_and_sh(wasm_bindgen::Clamped(&data), PATTERN_WIDTH as u32, PATTERN_HEIGHT as u32).unwrap();
 		pattern_context.put_image_data(&image_data, 0., 0.).unwrap();
-		let pattern = self.render_context.create_pattern_with_offscreen_canvas(&pattern_canvas, "repeat").unwrap().unwrap();
-
-		self.push_path(subpaths, transform);
+		return self.render_context.create_pattern_with_offscreen_canvas(&pattern_canvas, "repeat").unwrap().unwrap();
+	}
 
-		self.render_context.set_fill_style_canvas_pattern(&pattern);
+	/// 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,
+		color: &Color,
+		with_pattern: bool,
+		clear_stroke_part: bool,
+		stroke_width: Option<f64>,
+	) {
+		self.render_context.save();
+		self.render_context.set_line_width(stroke_width.unwrap_or(1.));
+		self.draw_path_from_subpaths(subpaths, 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());
+		}
 		self.render_context.fill();
+
+		// Make the stroke transparent and erase the fill area overlapping the stroke.
+		if clear_stroke_part {
+			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();
+		}
+
+		self.render_context.restore();
+	}
+
+	pub fn fill_stroke(&mut self, subpaths: impl Iterator<Item = impl Borrow<Subpath<PointId>>>, overlay_stroke: &Stroke) {
+		self.render_context.save();
+
+		// debug!("overlay_stroke.weight * ptz.zoom(): {:?}", overlay_stroke.weight);
+		self.render_context.set_line_width(overlay_stroke.weight);
+		self.draw_path_from_subpaths(subpaths, overlay_stroke.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_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);
+		self.render_context.stroke();
+
+		self.render_context.restore();
+	}
+
+	pub fn get_width(&self, text: &str) -> f64 {
+		self.render_context.measure_text(text).expect("Failed to measure text dimensions").width()
 	}
 
 	pub fn text(&self, text: &str, font_color: &str, background_color: Option<&str>, transform: DAffine2, padding: f64, pivot: [Pivot; 2]) {