Implement clipping masks, stroke align, and stroke paint order

editor/src/messages/dialog/preferences_dialog/preferences_dialog_message_handler.rs

@@ -187,7 +187,8 @@ impl PreferencesDialogMessageHandler {
 		];
 
 		let mut checkbox_id = CheckboxId::default();
-		let vector_mesh_tooltip = "Allow tools to produce vector meshes, where more than two segments can connect to an anchor point.\n\nCurrently this does not properly handle line joins and fills.";
+		let vector_mesh_tooltip =
+			"Allow tools to produce vector meshes, where more than two segments can connect to an anchor point.\n\nCurrently this does not properly handle stroke joins and fills.";
 		let vector_meshes = vec![
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			Separator::new(SeparatorType::Unrelated).widget_holder(),

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

@@ -121,6 +121,9 @@ pub enum DocumentMessage {
 	SelectedLayersReorder {
 		relative_index_offset: isize,
 	},
+	ClipLayer {
+		id: NodeId,
+	},
 	SelectLayer {
 		id: NodeId,
 		ctrl: bool,
@@ -142,6 +145,9 @@ pub enum DocumentMessage {
 	SetOpacityForSelectedLayers {
 		opacity: f64,
 	},
+	SetFillForSelectedLayers {
+		fill: f64,
+	},
 	SetOverlaysVisibility {
 		visible: bool,
 		overlays_type: Option<OverlaysType>,

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

@@ -20,7 +20,7 @@ use crate::messages::portfolio::document::utility_types::network_interface::{Flo
 use crate::messages::portfolio::document::utility_types::nodes::RawBuffer;
 use crate::messages::portfolio::utility_types::PersistentData;
 use crate::messages::prelude::*;
-use crate::messages::tool::common_functionality::graph_modification_utils::{self, get_blend_mode, get_opacity};
+use crate::messages::tool::common_functionality::graph_modification_utils::{self, get_blend_mode, get_fill, get_opacity};
 use crate::messages::tool::tool_messages::select_tool::SelectToolPointerKeys;
 use crate::messages::tool::tool_messages::tool_prelude::Key;
 use crate::messages::tool::utility_types::ToolType;
@@ -1082,6 +1082,12 @@ impl MessageHandler<DocumentMessage, DocumentMessageData<'_>> for DocumentMessag
 			DocumentMessage::SelectedLayersReorder { relative_index_offset } => {
 				self.selected_layers_reorder(relative_index_offset, responses);
 			}
+			DocumentMessage::ClipLayer { id } => {
+				let layer = LayerNodeIdentifier::new(id, &self.network_interface, &[]);
+
+				responses.add(DocumentMessage::AddTransaction);
+				responses.add(GraphOperationMessage::ClipModeToggle { layer });
+			}
 			DocumentMessage::SelectLayer { id, ctrl, shift } => {
 				let layer = LayerNodeIdentifier::new(id, &self.network_interface, &[]);
 
@@ -1176,6 +1182,12 @@ impl MessageHandler<DocumentMessage, DocumentMessageData<'_>> for DocumentMessag
 					responses.add(GraphOperationMessage::OpacitySet { layer, opacity });
 				}
 			}
+			DocumentMessage::SetFillForSelectedLayers { fill } => {
+				let fill = fill.clamp(0., 1.);
+				for layer in self.network_interface.selected_nodes().selected_layers_except_artboards(&self.network_interface) {
+					responses.add(GraphOperationMessage::BlendingFillSet { layer, fill });
+				}
+			}
 			DocumentMessage::SetOverlaysVisibility { visible, overlays_type } => {
 				let visibility_settings = &mut self.overlays_visibility_settings;
 				let overlays_type = match overlays_type {
@@ -2532,38 +2544,47 @@ impl DocumentMessageHandler {
 		let selected_layers_except_artboards = selected_nodes.selected_layers_except_artboards(&self.network_interface);
 
 		// Look up the current opacity and blend mode of the selected layers (if any), and split the iterator into the first tuple and the rest.
-		let mut opacity_and_blend_mode = selected_layers_except_artboards.map(|layer| {
+		let mut blending_options = selected_layers_except_artboards.map(|layer| {
 			(
 				get_opacity(layer, &self.network_interface).unwrap_or(100.),
+				get_fill(layer, &self.network_interface).unwrap_or(100.),
 				get_blend_mode(layer, &self.network_interface).unwrap_or_default(),
 			)
 		});
-		let first_opacity_and_blend_mode = opacity_and_blend_mode.next();
-		let result_opacity_and_blend_mode = opacity_and_blend_mode;
+		let first_blending_options = blending_options.next();
+		let result_blending_options = blending_options;
 
 		// If there are no selected layers, disable the opacity and blend mode widgets.
-		let disabled = first_opacity_and_blend_mode.is_none();
+		let disabled = first_blending_options.is_none();
 
 		// Amongst the selected layers, check if the opacities and blend modes are identical across all layers.
 		// The result is setting `option` and `blend_mode` to Some value if all their values are identical, or None if they are not.
 		// If identical, we display the value in the widget. If not, we display a dash indicating dissimilarity.
-		let (opacity, blend_mode) = first_opacity_and_blend_mode
-			.map(|(first_opacity, first_blend_mode)| {
+		let (opacity, fill, blend_mode) = first_blending_options
+			.map(|(first_opacity, first_fill, first_blend_mode)| {
 				let mut opacity_identical = true;
+				let mut fill_identical = true;
 				let mut blend_mode_identical = true;
 
-				for (opacity, blend_mode) in result_opacity_and_blend_mode {
+				for (opacity, fill, blend_mode) in result_blending_options {
 					if (opacity - first_opacity).abs() > (f64::EPSILON * 100.) {
 						opacity_identical = false;
 					}
+					if (fill - first_fill).abs() > (f64::EPSILON * 100.) {
+						fill_identical = false;
+					}
 					if blend_mode != first_blend_mode {
 						blend_mode_identical = false;
 					}
 				}
 
-				(opacity_identical.then_some(first_opacity), blend_mode_identical.then_some(first_blend_mode))
+				(
+					opacity_identical.then_some(first_opacity),
+					fill_identical.then_some(first_fill),
+					blend_mode_identical.then_some(first_blend_mode),
+				)
 			})
-			.unwrap_or((None, None));
+			.unwrap_or((None, None, None));
 
 		let blend_mode_menu_entries = BlendMode::list_svg_subset()
 			.iter()
@@ -2622,6 +2643,28 @@ impl DocumentMessageHandler {
 				.max_width(100)
 				.tooltip("Opacity")
 				.widget_holder(),
+			Separator::new(SeparatorType::Related).widget_holder(),
+			NumberInput::new(fill)
+				.label("Fill")
+				.unit("%")
+				.display_decimal_places(0)
+				.disabled(disabled)
+				.min(0.)
+				.max(100.)
+				.range_min(Some(0.))
+				.range_max(Some(100.))
+				.mode_range()
+				.on_update(|number_input: &NumberInput| {
+					if let Some(value) = number_input.value {
+						DocumentMessage::SetFillForSelectedLayers { fill: value / 100. }.into()
+					} else {
+						Message::NoOp
+					}
+				})
+				.on_commit(|_| DocumentMessage::AddTransaction.into())
+				.max_width(100)
+				.tooltip("Fill")
+				.widget_holder(),
 		];
 		let layers_panel_control_bar_left = WidgetLayout::new(vec![LayoutGroup::Row { widgets }]);
 

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

@@ -21,6 +21,10 @@ pub enum GraphOperationMessage {
 		layer: LayerNodeIdentifier,
 		fill: Fill,
 	},
+	BlendingFillSet {
+		layer: LayerNodeIdentifier,
+		fill: f64,
+	},
 	OpacitySet {
 		layer: LayerNodeIdentifier,
 		opacity: f64,
@@ -29,6 +33,9 @@ pub enum GraphOperationMessage {
 		layer: LayerNodeIdentifier,
 		blend_mode: BlendMode,
 	},
+	ClipModeToggle {
+		layer: LayerNodeIdentifier,
+	},
 	StrokeSet {
 		layer: LayerNodeIdentifier,
 		stroke: Stroke,

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

@@ -5,12 +5,13 @@ use crate::messages::portfolio::document::utility_types::document_metadata::Laye
 use crate::messages::portfolio::document::utility_types::network_interface::{InputConnector, NodeNetworkInterface, OutputConnector};
 use crate::messages::portfolio::document::utility_types::nodes::CollapsedLayers;
 use crate::messages::prelude::*;
+use crate::messages::tool::common_functionality::graph_modification_utils::get_clip_mode;
 use glam::{DAffine2, DVec2, IVec2};
 use graph_craft::document::{NodeId, NodeInput};
 use graphene_core::Color;
 use graphene_core::renderer::Quad;
 use graphene_core::text::{Font, TypesettingConfig};
-use graphene_core::vector::style::{Fill, Gradient, GradientStops, GradientType, LineCap, LineJoin, Stroke};
+use graphene_core::vector::style::{Fill, Gradient, GradientStops, GradientType, PaintOrder, Stroke, StrokeAlign, StrokeCap, StrokeJoin};
 use graphene_std::vector::convert_usvg_path;
 
 #[derive(Debug, Clone)]
@@ -41,6 +42,11 @@ impl MessageHandler<GraphOperationMessage, GraphOperationMessageData<'_>> for Gr
 					modify_inputs.fill_set(fill);
 				}
 			}
+			GraphOperationMessage::BlendingFillSet { layer, fill } => {
+				if let Some(mut modify_inputs) = ModifyInputsContext::new_with_layer(layer, network_interface, responses) {
+					modify_inputs.blending_fill_set(fill);
+				}
+			}
 			GraphOperationMessage::OpacitySet { layer, opacity } => {
 				if let Some(mut modify_inputs) = ModifyInputsContext::new_with_layer(layer, network_interface, responses) {
 					modify_inputs.opacity_set(opacity);
@@ -51,6 +57,12 @@ impl MessageHandler<GraphOperationMessage, GraphOperationMessageData<'_>> for Gr
 					modify_inputs.blend_mode_set(blend_mode);
 				}
 			}
+			GraphOperationMessage::ClipModeToggle { layer } => {
+				let clip_mode = get_clip_mode(layer, network_interface);
+				if let Some(mut modify_inputs) = ModifyInputsContext::new_with_layer(layer, network_interface, responses) {
+					modify_inputs.clip_mode_toggle(clip_mode);
+				}
+			}
 			GraphOperationMessage::StrokeSet { layer, stroke } => {
 				if let Some(mut modify_inputs) = ModifyInputsContext::new_with_layer(layer, network_interface, responses) {
 					modify_inputs.stroke_set(stroke);
@@ -376,18 +388,20 @@ fn apply_usvg_stroke(stroke: &usvg::Stroke, modify_inputs: &mut ModifyInputsCont
 			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,
-			line_cap: match stroke.linecap() {
-				usvg::LineCap::Butt => LineCap::Butt,
-				usvg::LineCap::Round => LineCap::Round,
-				usvg::LineCap::Square => LineCap::Square,
+			cap: match stroke.linecap() {
+				usvg::LineCap::Butt => StrokeCap::Butt,
+				usvg::LineCap::Round => StrokeCap::Round,
+				usvg::LineCap::Square => StrokeCap::Square,
 			},
-			line_join: match stroke.linejoin() {
-				usvg::LineJoin::Miter => LineJoin::Miter,
-				usvg::LineJoin::MiterClip => LineJoin::Miter,
-				usvg::LineJoin::Round => LineJoin::Round,
-				usvg::LineJoin::Bevel => LineJoin::Bevel,
+			join: match stroke.linejoin() {
+				usvg::LineJoin::Miter => StrokeJoin::Miter,
+				usvg::LineJoin::MiterClip => StrokeJoin::Miter,
+				usvg::LineJoin::Round => StrokeJoin::Round,
+				usvg::LineJoin::Bevel => StrokeJoin::Bevel,
 			},
-			line_join_miter_limit: stroke.miterlimit().get() as f64,
+			join_miter_limit: stroke.miterlimit().get() as f64,
+			align: StrokeAlign::Center,
+			paint_order: PaintOrder::StrokeAbove,
 			transform,
 			non_scaling: false,
 		})

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

@@ -15,8 +15,8 @@ use graphene_core::vector::brush_stroke::BrushStroke;
 use graphene_core::vector::style::{Fill, Stroke};
 use graphene_core::vector::{PointId, VectorModificationType};
 use graphene_core::{Artboard, Color};
-use graphene_std::GraphicGroupTable;
 use graphene_std::vector::{VectorData, VectorDataTable};
+use graphene_std::{GraphicGroupTable, NodeInputDecleration};
 
 #[derive(PartialEq, Clone, Copy, Debug, serde::Serialize, serde::Deserialize)]
 pub enum TransformIn {
@@ -58,13 +58,13 @@ impl<'a> ModifyInputsContext<'a> {
 	/// Non layer nodes directly upstream of a layer are treated as part of that layer. See insert_index == 2 in the diagram
 	///       -----> Post node
 	///      |      if insert_index == 0, return (Post node, Some(Layer1))
-	/// -> Layer1   
+	/// -> Layer1
 	///      ↑      if insert_index == 1, return (Layer1, Some(Layer2))
-	/// -> Layer2   
+	/// -> Layer2
 	///      ↑
 	/// -> NonLayerNode
 	///      ↑      if insert_index == 2, return (NonLayerNode, Some(Layer3))
-	/// -> Layer3  
+	/// -> Layer3
 	///             if insert_index == 3, return (Layer3, None)
 	pub fn get_post_node_with_index(network_interface: &NodeNetworkInterface, parent: LayerNodeIdentifier, insert_index: usize) -> InputConnector {
 		let mut post_node_input_connector = if parent == LayerNodeIdentifier::ROOT_PARENT {
@@ -333,37 +333,52 @@ impl<'a> ModifyInputsContext<'a> {
 		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::Fill(fill), false), false);
 	}
 
+	pub fn blend_mode_set(&mut self, blend_mode: BlendMode) {
+		let Some(blend_node_id) = self.existing_node_id("Blending", true) else { return };
+		let input_connector = InputConnector::node(blend_node_id, 1);
+		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::BlendMode(blend_mode), false), false);
+	}
+
 	pub fn opacity_set(&mut self, opacity: f64) {
-		let Some(opacity_node_id) = self.existing_node_id("Opacity", true) else { return };
-		let input_connector = InputConnector::node(opacity_node_id, 1);
+		let Some(blend_node_id) = self.existing_node_id("Blending", true) else { return };
+		let input_connector = InputConnector::node(blend_node_id, 2);
 		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::F64(opacity * 100.), false), false);
 	}
 
-	pub fn blend_mode_set(&mut self, blend_mode: BlendMode) {
-		let Some(blend_mode_node_id) = self.existing_node_id("Blend Mode", true) else {
-			return;
-		};
-		let input_connector = InputConnector::node(blend_mode_node_id, 1);
-		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::BlendMode(blend_mode), false), false);
+	pub fn blending_fill_set(&mut self, fill: f64) {
+		let Some(blend_node_id) = self.existing_node_id("Blending", true) else { return };
+		let input_connector = InputConnector::node(blend_node_id, 3);
+		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::F64(fill * 100.), false), false);
+	}
+
+	pub fn clip_mode_toggle(&mut self, clip_mode: Option<bool>) {
+		let clip = !clip_mode.unwrap_or(false);
+		let Some(clip_node_id) = self.existing_node_id("Blending", true) else { return };
+		let input_connector = InputConnector::node(clip_node_id, 4);
+		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::Bool(clip), false), false);
 	}
 
 	pub fn stroke_set(&mut self, stroke: Stroke) {
 		let Some(stroke_node_id) = self.existing_node_id("Stroke", true) else { return };
 
-		let input_connector = InputConnector::node(stroke_node_id, 1);
+		let input_connector = InputConnector::node(stroke_node_id, graphene_std::vector::stroke::ColorInput::<Option<Color>>::INDEX);
 		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::OptionalColor(stroke.color), false), true);
-		let input_connector = InputConnector::node(stroke_node_id, 2);
+		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, 3);
+		let input_connector = InputConnector::node(stroke_node_id, graphene_std::vector::stroke::AlignInput::INDEX);
+		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::StrokeAlign(stroke.align), false), false);
+		let input_connector = InputConnector::node(stroke_node_id, graphene_std::vector::stroke::CapInput::INDEX);
+		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::StrokeCap(stroke.cap), false), true);
+		let input_connector = InputConnector::node(stroke_node_id, graphene_std::vector::stroke::JoinInput::INDEX);
+		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::StrokeJoin(stroke.join), false), true);
+		let input_connector = InputConnector::node(stroke_node_id, graphene_std::vector::stroke::MiterLimitInput::INDEX);
+		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::F64(stroke.join_miter_limit), false), false);
+		let input_connector = InputConnector::node(stroke_node_id, graphene_std::vector::stroke::PaintOrderInput::INDEX);
+		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::PaintOrder(stroke.paint_order), false), false);
+		let input_connector = InputConnector::node(stroke_node_id, graphene_std::vector::stroke::DashLengthsInput::INDEX);
 		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::VecF64(stroke.dash_lengths), false), true);
-		let input_connector = InputConnector::node(stroke_node_id, 4);
+		let input_connector = InputConnector::node(stroke_node_id, graphene_std::vector::stroke::DashOffsetInput::INDEX);
 		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::F64(stroke.dash_offset), false), true);
-		let input_connector = InputConnector::node(stroke_node_id, 5);
-		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::LineCap(stroke.line_cap), false), true);
-		let input_connector = InputConnector::node(stroke_node_id, 6);
-		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::LineJoin(stroke.line_join), false), true);
-		let input_connector = InputConnector::node(stroke_node_id, 7);
-		self.set_input_with_refresh(input_connector, NodeInput::value(TaggedValue::F64(stroke.line_join_miter_limit), false), false);
 	}
 
 	/// Update the transform value of the upstream Transform node based a change to its existing value and the given parent transform.

editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs

@@ -15,6 +15,7 @@ use crate::messages::portfolio::document::utility_types::network_interface::{
 use crate::messages::portfolio::document::utility_types::nodes::{CollapsedLayers, LayerPanelEntry};
 use crate::messages::prelude::*;
 use crate::messages::tool::common_functionality::auto_panning::AutoPanning;
+use crate::messages::tool::common_functionality::graph_modification_utils::get_clip_mode;
 use crate::messages::tool::tool_messages::tool_prelude::{Key, MouseMotion};
 use crate::messages::tool::utility_types::{HintData, HintGroup, HintInfo};
 use glam::{DAffine2, DVec2, IVec2};
@@ -2442,6 +2443,7 @@ impl NodeGraphMessageHandler {
 					}
 				});
 
+				let clippable = layer.can_be_clipped(network_interface.document_metadata());
 				let data = LayerPanelEntry {
 					id: node_id,
 					alias: network_interface.display_name(&node_id, &[]),
@@ -2461,6 +2463,8 @@ impl NodeGraphMessageHandler {
 					selected: selected_layers.contains(&node_id),
 					ancestor_of_selected: ancestors_of_selected.contains(&node_id),
 					descendant_of_selected: descendants_of_selected.contains(&node_id),
+					clipped: get_clip_mode(layer, network_interface).unwrap_or(false) && clippable,
+					clippable,
 				};
 				responses.add(FrontendMessage::UpdateDocumentLayerDetails { data });
 			}