diff --git a/editor/src/messages/portfolio/document/graph_operation/graph_operation_message_handler.rs b/editor/src/messages/portfolio/document/graph_operation/graph_operation_message_handler.rs index cea12c3e5b..5e6742b56d 100644 --- a/editor/src/messages/portfolio/document/graph_operation/graph_operation_message_handler.rs +++ b/editor/src/messages/portfolio/document/graph_operation/graph_operation_message_handler.rs @@ -386,6 +386,7 @@ fn apply_usvg_stroke(stroke: &usvg::Stroke, modify_inputs: &mut ModifyInputsCont }, line_join_miter_limit: stroke.miterlimit().get() as f64, transform, + non_scaling: false, }) } } diff --git a/editor/src/messages/portfolio/document/node_graph/node_properties.rs b/editor/src/messages/portfolio/document/node_graph/node_properties.rs index 40dc2f96c2..f46fa5ed6a 100644 --- a/editor/src/messages/portfolio/document/node_graph/node_properties.rs +++ b/editor/src/messages/portfolio/document/node_graph/node_properties.rs @@ -2421,7 +2421,6 @@ pub fn stroke_properties(node_id: NodeId, context: &mut NodePropertiesContext) - }; let number_input = NumberInput::default().min(0.).disabled(line_join_val != &LineJoin::Miter); let miter_limit = number_widget(document_node, node_id, miter_limit_index, "Miter Limit", number_input, true); - vec![ color, LayoutGroup::Row { widgets: weight }, diff --git a/node-graph/gcore/src/graphic_element/renderer.rs b/node-graph/gcore/src/graphic_element/renderer.rs index 7a4fa7bebd..74c36527c2 100644 --- a/node-graph/gcore/src/graphic_element/renderer.rs +++ b/node-graph/gcore/src/graphic_element/renderer.rs @@ -274,8 +274,7 @@ pub trait GraphicElementRendered { fn render_svg(&self, render: &mut SvgRender, render_params: &RenderParams); #[cfg(feature = "vello")] - fn render_to_vello(&self, _scene: &mut Scene, _transform: DAffine2, _render_context: &mut RenderContext) {} - + fn render_to_vello(&self, scene: &mut Scene, transform: DAffine2, context: &mut RenderContext, _render_params: &RenderParams); fn bounding_box(&self, transform: DAffine2) -> Option<[DVec2; 2]>; // The upstream click targets for each layer are collected during the render so that they do not have to be calculated for each click detection @@ -325,7 +324,7 @@ impl GraphicElementRendered for GraphicGroupTable { } #[cfg(feature = "vello")] - fn render_to_vello(&self, scene: &mut Scene, transform: DAffine2, context: &mut RenderContext) { + fn render_to_vello(&self, scene: &mut Scene, transform: DAffine2, context: &mut RenderContext, render_params: &RenderParams) { for instance in self.instances() { let transform = transform * *instance.transform; let alpha_blending = *instance.alpha_blending; @@ -345,7 +344,7 @@ impl GraphicElementRendered for GraphicGroupTable { } } - instance.instance.render_to_vello(scene, transform, context); + instance.instance.render_to_vello(scene, transform, context, render_params); if layer { scene.pop_layer(); @@ -461,7 +460,7 @@ impl GraphicElementRendered for VectorDataTable { } #[cfg(feature = "vello")] - fn render_to_vello(&self, scene: &mut Scene, parent_transform: DAffine2, _: &mut RenderContext) { + fn render_to_vello(&self, scene: &mut Scene, parent_transform: DAffine2, _: &mut RenderContext, render_params: &RenderParams) { use crate::vector::style::GradientType; use vello::peniko; @@ -469,12 +468,8 @@ impl GraphicElementRendered for VectorDataTable { let mut layer = false; let multiplied_transform = parent_transform * *instance.transform; - let set_stroke_transform = instance - .instance - .style - .stroke() - .map(|stroke| stroke.transform) - .filter(|transform| transform.matrix2.determinant() != 0.); + let has_real_stroke = instance.instance.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(multiplied_transform); let element_transform = set_stroke_transform.map(|stroke_transform| multiplied_transform * stroke_transform.inverse()); let element_transform = element_transform.unwrap_or(DAffine2::IDENTITY); @@ -495,86 +490,90 @@ impl GraphicElementRendered for VectorDataTable { for subpath in instance.instance.stroke_bezier_paths() { subpath.to_vello_path(applied_stroke_transform, &mut path); } - - match instance.instance.style.fill() { - Fill::Solid(color) => { - let fill = peniko::Brush::Solid(peniko::Color::new([color.r(), color.g(), color.b(), color.a()])); - scene.fill(peniko::Fill::NonZero, kurbo::Affine::new(element_transform.to_cols_array()), &fill, None, &path); - } - Fill::Gradient(gradient) => { - let mut stops = peniko::ColorStops::new(); - for &(offset, color) in &gradient.stops.0 { - stops.push(peniko::ColorStop { - offset: offset as f32, - color: peniko::color::DynamicColor::from_alpha_color(peniko::Color::new([color.r(), color.g(), color.b(), color.a()])), - }); - } - // Compute bounding box of the shape to determine the gradient start and end points - let bounds = instance.instance.nonzero_bounding_box(); - let bound_transform = DAffine2::from_scale_angle_translation(bounds[1] - bounds[0], 0., bounds[0]); - - let inverse_parent_transform = (parent_transform.matrix2.determinant() != 0.).then(|| parent_transform.inverse()).unwrap_or_default(); - let mod_points = inverse_parent_transform * multiplied_transform * bound_transform; - - let start = mod_points.transform_point2(gradient.start); - let end = mod_points.transform_point2(gradient.end); - - let fill = peniko::Brush::Gradient(peniko::Gradient { - kind: match gradient.gradient_type { - GradientType::Linear => peniko::GradientKind::Linear { - start: to_point(start), - end: to_point(end), - }, - GradientType::Radial => { - let radius = start.distance(end); - peniko::GradientKind::Radial { - start_center: to_point(start), - start_radius: 0., - end_center: to_point(start), - end_radius: radius as f32, - } + match render_params.view_mode { + ViewMode::Outline => {} + _ => { + match instance.instance.style.fill() { + Fill::Solid(color) => { + let fill = peniko::Brush::Solid(peniko::Color::new([color.r(), color.g(), color.b(), color.a()])); + scene.fill(peniko::Fill::NonZero, kurbo::Affine::new(element_transform.to_cols_array()), &fill, None, &path); + } + Fill::Gradient(gradient) => { + let mut stops = peniko::ColorStops::new(); + for &(offset, color) in &gradient.stops.0 { + stops.push(peniko::ColorStop { + offset: offset as f32, + color: peniko::color::DynamicColor::from_alpha_color(peniko::Color::new([color.r(), color.g(), color.b(), color.a()])), + }); } - }, - stops, - ..Default::default() - }); - // Vello does `element_transform * brush_transform` internally. We don't want element_transform to have any impact so we need to left multiply by the inverse. - // This makes the final internal brush transform equal to `parent_transform`, allowing you to stretch a gradient by transforming the parent folder. - let inverse_element_transform = (element_transform.matrix2.determinant() != 0.).then(|| element_transform.inverse()).unwrap_or_default(); - let brush_transform = kurbo::Affine::new((inverse_element_transform * parent_transform).to_cols_array()); - scene.fill(peniko::Fill::NonZero, kurbo::Affine::new(element_transform.to_cols_array()), &fill, Some(brush_transform), &path); - } - Fill::None => (), - }; - - if let Some(stroke) = instance.instance.style.stroke() { - let color = match stroke.color { - Some(color) => peniko::Color::new([color.r(), color.g(), color.b(), color.a()]), - None => peniko::Color::TRANSPARENT, - }; - use crate::vector::style::{LineCap, LineJoin}; - use vello::kurbo::{Cap, Join}; - let cap = match stroke.line_cap { - LineCap::Butt => Cap::Butt, - LineCap::Round => Cap::Round, - LineCap::Square => Cap::Square, - }; - let join = match stroke.line_join { - LineJoin::Miter => Join::Miter, - LineJoin::Bevel => Join::Bevel, - LineJoin::Round => Join::Round, - }; - let stroke = kurbo::Stroke { - width: stroke.weight, - miter_limit: stroke.line_join_miter_limit, - join, - start_cap: cap, - end_cap: cap, - dash_pattern: stroke.dash_lengths.into(), - dash_offset: stroke.dash_offset, - }; - if stroke.width > 0. { - scene.stroke(&stroke, kurbo::Affine::new(element_transform.to_cols_array()), color, None, &path); + // Compute bounding box of the shape to determine the gradient start and end points + let bounds = instance.instance.nonzero_bounding_box(); + let bound_transform = DAffine2::from_scale_angle_translation(bounds[1] - bounds[0], 0., bounds[0]); + + let inverse_parent_transform = (parent_transform.matrix2.determinant() != 0.).then(|| parent_transform.inverse()).unwrap_or_default(); + let mod_points = inverse_parent_transform * multiplied_transform * bound_transform; + + let start = mod_points.transform_point2(gradient.start); + let end = mod_points.transform_point2(gradient.end); + + let fill = peniko::Brush::Gradient(peniko::Gradient { + kind: match gradient.gradient_type { + GradientType::Linear => peniko::GradientKind::Linear { + start: to_point(start), + end: to_point(end), + }, + GradientType::Radial => { + let radius = start.distance(end); + peniko::GradientKind::Radial { + start_center: to_point(start), + start_radius: 0., + end_center: to_point(start), + end_radius: radius as f32, + } + } + }, + stops, + ..Default::default() + }); + // Vello does `element_transform * brush_transform` internally. We don't want element_transform to have any impact so we need to left multiply by the inverse. + // This makes the final internal brush transform equal to `parent_transform`, allowing you to stretch a gradient by transforming the parent folder. + let inverse_element_transform = (element_transform.matrix2.determinant() != 0.).then(|| element_transform.inverse()).unwrap_or_default(); + let brush_transform = kurbo::Affine::new((inverse_element_transform * parent_transform).to_cols_array()); + scene.fill(peniko::Fill::NonZero, kurbo::Affine::new(element_transform.to_cols_array()), &fill, Some(brush_transform), &path); + } + Fill::None => (), + }; + + if let Some(stroke) = instance.instance.style.stroke() { + let color = match stroke.color { + Some(color) => peniko::Color::new([color.r(), color.g(), color.b(), color.a()]), + None => peniko::Color::TRANSPARENT, + }; + use crate::vector::style::{LineCap, LineJoin}; + use vello::kurbo::{Cap, Join}; + let cap = match stroke.line_cap { + LineCap::Butt => Cap::Butt, + LineCap::Round => Cap::Round, + LineCap::Square => Cap::Square, + }; + let join = match stroke.line_join { + LineJoin::Miter => Join::Miter, + LineJoin::Bevel => Join::Bevel, + LineJoin::Round => Join::Round, + }; + let stroke = kurbo::Stroke { + width: stroke.weight, + miter_limit: stroke.line_join_miter_limit, + join, + start_cap: cap, + end_cap: cap, + dash_pattern: stroke.dash_lengths.into(), + dash_offset: stroke.dash_offset, + }; + if stroke.width > 0. { + scene.stroke(&stroke, kurbo::Affine::new(element_transform.to_cols_array()), color, None, &path); + } + } } } if layer { @@ -707,7 +706,7 @@ impl GraphicElementRendered for Artboard { } #[cfg(feature = "vello")] - fn render_to_vello(&self, scene: &mut Scene, transform: DAffine2, context: &mut RenderContext) { + fn render_to_vello(&self, scene: &mut Scene, transform: DAffine2, context: &mut RenderContext, render_params: &RenderParams) { use vello::peniko; // Render background @@ -725,7 +724,7 @@ impl GraphicElementRendered for Artboard { } // Since the graphic group's transform is right multiplied in when rendering the graphic group, we just need to right multiply by the offset here. let child_transform = transform * DAffine2::from_translation(self.location.as_dvec2()); - self.graphic_group.render_to_vello(scene, child_transform, context); + self.graphic_group.render_to_vello(scene, child_transform, context, render_params); if self.clip { scene.pop_layer(); } @@ -772,9 +771,9 @@ impl GraphicElementRendered for ArtboardGroupTable { } #[cfg(feature = "vello")] - fn render_to_vello(&self, scene: &mut Scene, transform: DAffine2, context: &mut RenderContext) { + fn render_to_vello(&self, scene: &mut Scene, transform: DAffine2, context: &mut RenderContext, render_params: &RenderParams) { for instance in self.instances() { - instance.instance.render_to_vello(scene, transform, context) + instance.instance.render_to_vello(scene, transform, context, render_params); } } @@ -837,7 +836,7 @@ impl GraphicElementRendered for ImageFrameTable { } #[cfg(feature = "vello")] - fn render_to_vello(&self, scene: &mut Scene, transform: DAffine2, _: &mut RenderContext) { + fn render_to_vello(&self, scene: &mut Scene, transform: DAffine2, _: &mut RenderContext, _render_params: &RenderParams) { use vello::peniko; for instance in self.instances() { @@ -887,7 +886,7 @@ impl GraphicElementRendered for RasterFrame { } #[cfg(feature = "vello")] - fn render_to_vello(&self, scene: &mut Scene, transform: DAffine2, context: &mut RenderContext) { + fn render_to_vello(&self, scene: &mut Scene, transform: DAffine2, context: &mut RenderContext, _render_params: &RenderParams) { use vello::peniko; let mut render_stuff = |image: vello::peniko::Image, blend_mode: crate::AlphaBlending| { @@ -964,11 +963,11 @@ impl GraphicElementRendered for GraphicElement { } #[cfg(feature = "vello")] - fn render_to_vello(&self, scene: &mut Scene, transform: DAffine2, context: &mut RenderContext) { + fn render_to_vello(&self, scene: &mut Scene, transform: DAffine2, context: &mut RenderContext, render_params: &RenderParams) { match self { - GraphicElement::VectorData(vector_data) => vector_data.render_to_vello(scene, transform, context), - GraphicElement::GraphicGroup(graphic_group) => graphic_group.render_to_vello(scene, transform, context), - GraphicElement::RasterFrame(raster) => raster.render_to_vello(scene, transform, context), + GraphicElement::VectorData(vector_data) => vector_data.render_to_vello(scene, transform, context, render_params), + GraphicElement::GraphicGroup(graphic_group) => graphic_group.render_to_vello(scene, transform, context, render_params), + GraphicElement::RasterFrame(raster) => raster.render_to_vello(scene, transform, context, render_params), } } @@ -1051,6 +1050,9 @@ impl GraphicElementRendered for P { fn bounding_box(&self, _transform: DAffine2) -> Option<[DVec2; 2]> { None } + + #[cfg(feature = "vello")] + fn render_to_vello(&self, _scene: &mut Scene, _transform: DAffine2, _context: &mut RenderContext, _render_params: &RenderParams) {} } impl GraphicElementRendered for Option { @@ -1076,6 +1078,9 @@ impl GraphicElementRendered for Option { fn bounding_box(&self, _transform: DAffine2) -> Option<[DVec2; 2]> { None } + + #[cfg(feature = "vello")] + fn render_to_vello(&self, _scene: &mut Scene, _transform: DAffine2, _context: &mut RenderContext, _render_params: &RenderParams) {} } impl GraphicElementRendered for Vec { @@ -1097,6 +1102,9 @@ impl GraphicElementRendered for Vec { fn bounding_box(&self, _transform: DAffine2) -> Option<[DVec2; 2]> { None } + + #[cfg(feature = "vello")] + fn render_to_vello(&self, _scene: &mut Scene, _transform: DAffine2, _context: &mut RenderContext, _render_params: &RenderParams) {} } #[derive(Debug, Clone, PartialEq, Eq)] diff --git a/node-graph/gcore/src/vector/style.rs b/node-graph/gcore/src/vector/style.rs index 03386719cb..41069fc816 100644 --- a/node-graph/gcore/src/vector/style.rs +++ b/node-graph/gcore/src/vector/style.rs @@ -468,6 +468,8 @@ pub struct Stroke { pub line_join_miter_limit: f64, #[serde(default = "daffine2_identity")] pub transform: DAffine2, + #[serde(default)] + pub non_scaling: bool, } impl core::hash::Hash for Stroke { @@ -480,6 +482,7 @@ impl core::hash::Hash for Stroke { self.line_cap.hash(state); self.line_join.hash(state); self.line_join_miter_limit.to_bits().hash(state); + self.non_scaling.hash(state); } } @@ -505,6 +508,7 @@ impl Stroke { line_join: LineJoin::Miter, line_join_miter_limit: 4., transform: DAffine2::IDENTITY, + non_scaling: false, } } @@ -521,6 +525,7 @@ impl Stroke { time * self.transform.matrix2 + (1. - time) * other.transform.matrix2, self.transform.translation * time + other.transform.translation * (1. - time), ), + non_scaling: if time < 0.5 { self.non_scaling } else { other.non_scaling }, } } @@ -597,7 +602,10 @@ impl Stroke { if let Some(line_join_miter_limit) = line_join_miter_limit { let _ = write!(&mut attributes, r#" stroke-miterlimit="{}""#, line_join_miter_limit); } - + // Add vector-effect attribute to make strokes non-scaling + if self.non_scaling { + let _ = write!(&mut attributes, r#" vector-effect="non-scaling-stroke""#); + } attributes } @@ -644,6 +652,11 @@ impl Stroke { self.line_join_miter_limit = limit; self } + + pub fn with_non_scaling(mut self, non_scaling: bool) -> Self { + self.non_scaling = non_scaling; + self + } } // Having an alpha of 1 to start with leads to a better experience with the properties panel @@ -658,6 +671,7 @@ impl Default for Stroke { line_join: LineJoin::Miter, line_join_miter_limit: 4., transform: DAffine2::IDENTITY, + non_scaling: false, } } } @@ -820,7 +834,10 @@ impl PathStyle { match view_mode { ViewMode::Outline => { let fill_attribute = Fill::None.render(svg_defs, element_transform, stroke_transform, bounds, transformed_bounds); - let stroke_attribute = Stroke::new(Some(LAYER_OUTLINE_STROKE_COLOR), LAYER_OUTLINE_STROKE_WEIGHT).render(); + let mut outline_stroke = Stroke::new(Some(LAYER_OUTLINE_STROKE_COLOR), LAYER_OUTLINE_STROKE_WEIGHT); + // Outline strokes should be non-scaling by default + outline_stroke.non_scaling = true; + let stroke_attribute = outline_stroke.render(); format!("{fill_attribute}{stroke_attribute}") } _ => { diff --git a/node-graph/gcore/src/vector/vector_nodes.rs b/node-graph/gcore/src/vector/vector_nodes.rs index 21f4982236..dcb8f1753f 100644 --- a/node-graph/gcore/src/vector/vector_nodes.rs +++ b/node-graph/gcore/src/vector/vector_nodes.rs @@ -182,6 +182,7 @@ where line_join, line_join_miter_limit: miter_limit, transform: DAffine2::IDENTITY, + non_scaling: false, }; for vector in vector_data.vector_iter_mut() { let mut stroke = stroke.clone(); diff --git a/node-graph/gstd/src/wasm_application_io.rs b/node-graph/gstd/src/wasm_application_io.rs index 0bee4e770e..86ccbc6f86 100644 --- a/node-graph/gstd/src/wasm_application_io.rs +++ b/node-graph/gstd/src/wasm_application_io.rs @@ -116,7 +116,13 @@ fn render_svg(data: impl GraphicElementRendered, mut render: SvgRender, render_p #[cfg(feature = "vello")] #[cfg_attr(not(target_arch = "wasm32"), allow(dead_code))] -async fn render_canvas(render_config: RenderConfig, data: impl GraphicElementRendered, editor: &WasmEditorApi, surface_handle: wgpu_executor::WgpuSurface) -> RenderOutputType { +async fn render_canvas( + render_config: RenderConfig, + data: impl GraphicElementRendered, + editor: &WasmEditorApi, + surface_handle: wgpu_executor::WgpuSurface, + render_params: RenderParams, +) -> RenderOutputType { use graphene_core::SurfaceFrame; let footprint = render_config.viewport; @@ -129,7 +135,7 @@ async fn render_canvas(render_config: RenderConfig, data: impl GraphicElementRen let mut child = Scene::new(); let mut context = wgpu_executor::RenderContext::default(); - data.render_to_vello(&mut child, Default::default(), &mut context); + data.render_to_vello(&mut child, Default::default(), &mut context, &render_params); // TODO: Instead of applying the transform here, pass the transform during the translation to avoid the O(Nr cost scene.append(&child, Some(kurbo::Affine::new(footprint.transform.to_cols_array()))); @@ -266,7 +272,7 @@ async fn render<'a: 'n, T: 'n + GraphicElementRendered + WasmNotSend>( if use_vello && editor_api.application_io.as_ref().unwrap().gpu_executor().is_some() { #[cfg(all(feature = "vello", target_arch = "wasm32"))] return RenderOutput { - data: render_canvas(render_config, data, editor_api, surface_handle.unwrap()).await, + data: render_canvas(render_config, data, editor_api, surface_handle.unwrap(), render_params).await, metadata, }; #[cfg(not(all(feature = "vello", target_arch = "wasm32")))]