Skip to content

Commit 79d778a

Browse files
YohYamasakiYohYamasaki
authored
Add support for setting the spread method for gradient fills (#3953)
* Add spread method support for gradients * Add GradientSpreadMethod enum (Pad, Repeat, Reflect) to vector-types * Add radio buttons to gradient tool and fill properties panel * Convert spread method when importing SVGs via usvg * Sync backup gradient input when changing spread method * Table<GradientStops> rendering is not yet updated for spread method * Sync gradient tool options with layer's gradient * Sync gradient_type and spread_method from the selected layer's existing gradient to the tool options bar when switching to the gradient tool * Refactor has_gradient_on_selected_layers to reuse a new get_gradient_on_selected_layer helper * Swap Reflect and Repeat order in UI radio buttons * Fix alignment of the radio buttons in right panel * Fix the position of the radio buttons in the tool * Rename SpreadMethod to SetSpreadMethod * Move default spread method omission logic
1 parent da45ab2 commit 79d778a

File tree

6 files changed

+234
-16
lines changed

6 files changed

+234
-16
lines changed

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

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ use graphene_std::renderer::Quad;
1515
use graphene_std::renderer::convert_usvg_path::convert_usvg_path;
1616
use graphene_std::table::Table;
1717
use graphene_std::text::{Font, TypesettingConfig};
18-
use graphene_std::vector::style::{Fill, Gradient, GradientStop, GradientStops, GradientType, PaintOrder, Stroke, StrokeAlign, StrokeCap, StrokeJoin};
18+
use graphene_std::vector::style::{Fill, Gradient, GradientSpreadMethod, GradientStop, GradientStops, GradientType, PaintOrder, Stroke, StrokeAlign, StrokeCap, StrokeJoin};
1919

2020
#[derive(ExtractField)]
2121
pub struct GraphOperationMessageContext<'a> {
@@ -765,6 +765,14 @@ fn apply_usvg_stroke(stroke: &usvg::Stroke, modify_inputs: &mut ModifyInputsCont
765765
}
766766
}
767767

768+
fn convert_spread_method(spread_method: usvg::SpreadMethod) -> GradientSpreadMethod {
769+
match spread_method {
770+
usvg::SpreadMethod::Pad => GradientSpreadMethod::Pad,
771+
usvg::SpreadMethod::Reflect => GradientSpreadMethod::Reflect,
772+
usvg::SpreadMethod::Repeat => GradientSpreadMethod::Repeat,
773+
}
774+
}
775+
768776
fn apply_usvg_fill(fill: &usvg::Fill, modify_inputs: &mut ModifyInputsContext, bounds_transform: DAffine2, graphite_gradient_stops: &HashMap<String, GradientStops>) {
769777
modify_inputs.fill_set(match &fill.paint() {
770778
usvg::Paint::Color(color) => Fill::solid(usvg_color(*color, fill.opacity().get())),
@@ -787,8 +795,15 @@ fn apply_usvg_fill(fill: &usvg::Fill, modify_inputs: &mut ModifyInputsContext, b
787795
GradientStops::new(stops)
788796
}
789797
};
790-
791-
Fill::Gradient(Gradient { start, end, gradient_type, stops })
798+
let spread_method = convert_spread_method(linear.spread_method());
799+
800+
Fill::Gradient(Gradient {
801+
start,
802+
end,
803+
gradient_type,
804+
stops,
805+
spread_method,
806+
})
792807
}
793808
usvg::Paint::RadialGradient(radial) => {
794809
let gradient_transform = usvg_transform(radial.transform());
@@ -810,8 +825,15 @@ fn apply_usvg_fill(fill: &usvg::Fill, modify_inputs: &mut ModifyInputsContext, b
810825
GradientStops::new(stops)
811826
}
812827
};
813-
814-
Fill::Gradient(Gradient { start, end, gradient_type, stops })
828+
let spread_method = convert_spread_method(radial.spread_method());
829+
830+
Fill::Gradient(Gradient {
831+
start,
832+
end,
833+
gradient_type,
834+
stops,
835+
spread_method,
836+
})
815837
}
816838
usvg::Paint::Pattern(_) => {
817839
warn!("SVG patterns are not currently supported");

‎editor/src/messages/portfolio/document/node_graph/node_properties.rs‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ use graphene_std::transform::{Footprint, ReferencePoint, ScaleType, Transform};
2727
use graphene_std::vector::QRCodeErrorCorrectionLevel;
2828
use graphene_std::vector::misc::BooleanOperation;
2929
use graphene_std::vector::misc::{ArcType, CentroidType, ExtrudeJoiningAlgorithm, GridType, InterpolationDistribution, MergeByDistanceAlgorithm, PointSpacingType, RowsOrColumns, SpiralType};
30-
use graphene_std::vector::style::{Fill, FillChoice, FillType, GradientStops, GradientType, PaintOrder, StrokeAlign, StrokeCap, StrokeJoin};
30+
use graphene_std::vector::style::{Fill, FillChoice, FillType, GradientSpreadMethod, GradientStops, GradientType, PaintOrder, StrokeAlign, StrokeCap, StrokeJoin};
3131

3232
pub(crate) fn string_properties(text: &str) -> Vec<LayoutGroup> {
3333
let widget = TextLabel::new(text).widget_instance();
@@ -2006,6 +2006,55 @@ pub(crate) fn fill_properties(node_id: NodeId, context: &mut NodePropertiesConte
20062006
]);
20072007

20082008
widgets.push(LayoutGroup::row(row));
2009+
2010+
let mut spread_methods_row: Vec<WidgetInstance> = vec![TextLabel::new("").widget_instance(), Separator::new(SeparatorStyle::Unrelated).widget_instance()];
2011+
2012+
let spread_method_entries = [GradientSpreadMethod::Pad, GradientSpreadMethod::Reflect, GradientSpreadMethod::Repeat]
2013+
.iter()
2014+
.map(|&spread_method| {
2015+
let gradient_for_input = gradient_for_closure.clone();
2016+
let gradient_for_backup = gradient_for_closure.clone();
2017+
2018+
let set_input_value = update_value(
2019+
move |_: &()| {
2020+
let mut new_gradient = gradient_for_input.clone();
2021+
new_gradient.spread_method = spread_method;
2022+
TaggedValue::Fill(Fill::Gradient(new_gradient))
2023+
},
2024+
node_id,
2025+
FillInput::<Color>::INDEX,
2026+
);
2027+
2028+
let set_backup_value = update_value(
2029+
move |_: &()| {
2030+
let mut new_gradient = gradient_for_backup.clone();
2031+
new_gradient.spread_method = spread_method;
2032+
TaggedValue::Gradient(new_gradient)
2033+
},
2034+
node_id,
2035+
BackupGradientInput::INDEX,
2036+
);
2037+
2038+
RadioEntryData::new(format!("{:?}", spread_method))
2039+
.label(format!("{:?}", spread_method))
2040+
.on_update(move |_| Message::Batched {
2041+
messages: Box::new([
2042+
set_input_value(&()),
2043+
set_backup_value(&()),
2044+
GradientToolMessage::UpdateOptions {
2045+
options: GradientOptionsUpdate::SetSpreadMethod(spread_method),
2046+
}
2047+
.into(),
2048+
]),
2049+
})
2050+
.on_commit(commit_value)
2051+
})
2052+
.collect();
2053+
2054+
add_blank_assist(&mut spread_methods_row);
2055+
spread_methods_row.extend_from_slice(&[RadioInput::new(spread_method_entries).selected_index(Some(gradient.spread_method as u32)).widget_instance()]);
2056+
2057+
widgets.push(LayoutGroup::row(spread_methods_row));
20092058
}
20102059

20112060
widgets

‎editor/src/messages/tool/tool_messages/gradient_tool.rs‎

Lines changed: 101 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ use crate::messages::tool::common_functionality::auto_panning::AutoPanning;
99
use crate::messages::tool::common_functionality::graph_modification_utils::{NodeGraphLayer, get_gradient};
1010
use crate::messages::tool::common_functionality::snapping::{SnapCandidatePoint, SnapConstraint, SnapData, SnapManager, SnapTypeConfiguration};
1111
use graphene_std::raster::color::Color;
12-
use graphene_std::vector::style::{Fill, Gradient, GradientStops, GradientType};
12+
use graphene_std::vector::style::{Fill, Gradient, GradientSpreadMethod, GradientStops, GradientType};
1313

1414
#[derive(Default, ExtractField)]
1515
pub struct GradientTool {
@@ -21,6 +21,7 @@ pub struct GradientTool {
2121
#[derive(Default)]
2222
pub struct GradientOptions {
2323
gradient_type: GradientType,
24+
spread_method: GradientSpreadMethod,
2425
}
2526

2627
#[impl_message(Message, ToolMessage, Gradient)]
@@ -53,6 +54,7 @@ pub enum GradientOptionsUpdate {
5354
Type(GradientType),
5455
ReverseStops,
5556
ReverseDirection,
57+
SetSpreadMethod(GradientSpreadMethod),
5658
}
5759

5860
impl ToolMetadata for GradientTool {
@@ -84,6 +86,10 @@ impl<'a> MessageHandler<ToolMessage, &mut ToolActionMessageContext<'a>> for Grad
8486
GradientOptionsUpdate::ReverseDirection => {
8587
apply_gradient_update(&mut self.data, context, responses, |_| true, |g| std::mem::swap(&mut g.start, &mut g.end));
8688
}
89+
GradientOptionsUpdate::SetSpreadMethod(spread_method) => {
90+
self.options.spread_method = spread_method;
91+
apply_gradient_update(&mut self.data, context, responses, |g| g.spread_method != spread_method, |g| g.spread_method = spread_method);
92+
}
8793
},
8894
ToolMessage::Gradient(GradientToolMessage::StartTransactionForColorStop) => {
8995
if self.data.color_picker_transaction_open {
@@ -123,6 +129,22 @@ impl<'a> MessageHandler<ToolMessage, &mut ToolActionMessageContext<'a>> for Grad
123129
self.data.has_selected_gradient = has_gradient;
124130
responses.add(ToolMessage::RefreshToolOptions);
125131
}
132+
133+
// Sync tool options with the selected layer's gradient
134+
if has_gradient && let Some(gradient) = get_gradient_on_selected_layer(&context.document) {
135+
let type_differs = self.options.gradient_type != gradient.gradient_type;
136+
let spread_method_differs = self.options.spread_method != gradient.spread_method;
137+
138+
if type_differs {
139+
self.options.gradient_type = gradient.gradient_type;
140+
}
141+
if spread_method_differs {
142+
self.options.spread_method = gradient.spread_method;
143+
}
144+
if type_differs || spread_method_differs {
145+
responses.add(ToolMessage::RefreshToolOptions);
146+
}
147+
};
126148
}
127149
}
128150
}
@@ -168,7 +190,36 @@ impl LayoutHolder for GradientTool {
168190
})
169191
.widget_instance();
170192

171-
let mut widgets = vec![gradient_type, Separator::new(SeparatorStyle::Unrelated).widget_instance(), reverse_stops];
193+
let spread_method = RadioInput::new(vec![
194+
RadioEntryData::new("Pad").label("Pad").tooltip_label("Pad").on_update(move |_| {
195+
GradientToolMessage::UpdateOptions {
196+
options: GradientOptionsUpdate::SetSpreadMethod(GradientSpreadMethod::Pad),
197+
}
198+
.into()
199+
}),
200+
RadioEntryData::new("Reflect").label("Reflect").tooltip_label("Reflect").on_update(move |_| {
201+
GradientToolMessage::UpdateOptions {
202+
options: GradientOptionsUpdate::SetSpreadMethod(GradientSpreadMethod::Reflect),
203+
}
204+
.into()
205+
}),
206+
RadioEntryData::new("Repeat").label("Repeat").tooltip_label("Repeat").on_update(move |_| {
207+
GradientToolMessage::UpdateOptions {
208+
options: GradientOptionsUpdate::SetSpreadMethod(GradientSpreadMethod::Repeat),
209+
}
210+
.into()
211+
}),
212+
])
213+
.selected_index(Some(self.options.spread_method as u32))
214+
.widget_instance();
215+
216+
let mut widgets = vec![
217+
gradient_type,
218+
Separator::new(SeparatorStyle::Unrelated).widget_instance(),
219+
spread_method,
220+
Separator::new(SeparatorStyle::Unrelated).widget_instance(),
221+
reverse_stops,
222+
];
172223

173224
if self.options.gradient_type == GradientType::Radial {
174225
let orientation = self
@@ -1149,7 +1200,14 @@ impl Fsm for GradientToolFsmState {
11491200
gradient.clone()
11501201
} else {
11511202
// Generate a new gradient
1152-
Gradient::new(DVec2::ZERO, global_tool_data.secondary_color, DVec2::ONE, global_tool_data.primary_color, tool_options.gradient_type)
1203+
Gradient::new(
1204+
DVec2::ZERO,
1205+
global_tool_data.secondary_color,
1206+
DVec2::ONE,
1207+
global_tool_data.primary_color,
1208+
tool_options.gradient_type,
1209+
tool_options.spread_method,
1210+
)
11531211
};
11541212
let mut selected_gradient = SelectedGradient::new(gradient, layer, document);
11551213
selected_gradient.dragging = GradientDragTarget::New;
@@ -1501,12 +1559,16 @@ fn apply_gradient_update(
15011559
responses.add(ToolMessage::RefreshToolOptions);
15021560
}
15031561

1504-
fn has_gradient_on_selected_layers(document: &DocumentMessageHandler) -> bool {
1562+
fn get_gradient_on_selected_layer(document: &DocumentMessageHandler) -> Option<Gradient> {
15051563
document
15061564
.network_interface
15071565
.selected_nodes()
15081566
.selected_visible_layers(&document.network_interface)
1509-
.any(|layer| get_gradient(layer, &document.network_interface).is_some())
1567+
.find_map(|layer| get_gradient(layer, &document.network_interface))
1568+
}
1569+
1570+
fn has_gradient_on_selected_layers(document: &DocumentMessageHandler) -> bool {
1571+
get_gradient_on_selected_layer(document).is_some()
15101572
}
15111573

15121574
#[inline(always)]
@@ -1941,4 +2003,38 @@ mod test_gradient {
19412003
// Additional verification that 0.75 stop is gone
19422004
assert!(!final_positions.iter().any(|pos| (pos - 0.75).abs() < 0.05), "Stop at position 0.75 should have been deleted");
19432005
}
2006+
2007+
#[tokio::test]
2008+
async fn change_spread_method() {
2009+
use graphene_std::vector::style::GradientSpreadMethod;
2010+
2011+
let mut editor = EditorTestUtils::create();
2012+
editor.new_document().await;
2013+
editor.drag_tool(ToolType::Rectangle, 0., 0., 100., 100., ModifierKeys::empty()).await;
2014+
editor.drag_tool(ToolType::Gradient, 10., 10., 90., 90., ModifierKeys::empty()).await;
2015+
2016+
// Verify default spread method is Pad
2017+
let (gradient, _) = get_gradient(&mut editor).await;
2018+
assert_eq!(gradient.spread_method, GradientSpreadMethod::Pad);
2019+
2020+
// Update spread method to Repeat
2021+
editor
2022+
.handle_message(GradientToolMessage::UpdateOptions {
2023+
options: GradientOptionsUpdate::SetSpreadMethod(GradientSpreadMethod::Repeat),
2024+
})
2025+
.await;
2026+
2027+
let (gradient, _) = get_gradient(&mut editor).await;
2028+
assert_eq!(gradient.spread_method, GradientSpreadMethod::Repeat);
2029+
2030+
// Update spread method to Reflect
2031+
editor
2032+
.handle_message(GradientToolMessage::UpdateOptions {
2033+
options: GradientOptionsUpdate::SetSpreadMethod(GradientSpreadMethod::Reflect),
2034+
})
2035+
.await;
2036+
2037+
let (gradient, _) = get_gradient(&mut editor).await;
2038+
assert_eq!(gradient.spread_method, GradientSpreadMethod::Reflect);
2039+
}
19442040
}

‎node-graph/libraries/rendering/src/render_ext.rs‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ use glam::DAffine2;
44
use graphic_types::vector_types::gradient::{Gradient, GradientType};
55
use graphic_types::vector_types::vector::style::{Fill, PaintOrder, PathStyle, Stroke, StrokeAlign, StrokeCap, StrokeJoin};
66
use std::fmt::Write;
7+
use vector_types::gradient::GradientSpreadMethod;
78

89
pub trait RenderExt {
910
type Output;
@@ -47,21 +48,27 @@ impl RenderExt for Gradient {
4748
format!(r#" gradientTransform="{gradient_transform}""#)
4849
};
4950

51+
let spread_method = if self.spread_method == GradientSpreadMethod::Pad {
52+
String::new()
53+
} else {
54+
format!(r#" spreadMethod="{}""#, self.spread_method.svg_name())
55+
};
56+
5057
let gradient_id = generate_uuid();
5158

5259
match self.gradient_type {
5360
GradientType::Linear => {
5461
let _ = write!(
5562
svg_defs,
56-
r#"<linearGradient id="{}" x1="{}" y1="{}" x2="{}" y2="{}"{gradient_transform}>{}</linearGradient>"#,
63+
r#"<linearGradient id="{}" x1="{}" y1="{}" x2="{}" y2="{}"{spread_method}{gradient_transform}>{}</linearGradient>"#,
5764
gradient_id, start.x, start.y, end.x, end.y, stop
5865
);
5966
}
6067
GradientType::Radial => {
6168
let radius = (f64::powi(start.x - end.x, 2) + f64::powi(start.y - end.y, 2)).sqrt();
6269
let _ = write!(
6370
svg_defs,
64-
r#"<radialGradient id="{}" cx="{}" cy="{}" r="{}"{gradient_transform}>{}</radialGradient>"#,
71+
r#"<radialGradient id="{}" cx="{}" cy="{}" r="{}"{spread_method}{gradient_transform}>{}</radialGradient>"#,
6572
gradient_id, start.x, start.y, radius, stop
6673
);
6774
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ use std::fmt::Write;
2424
use std::hash::{Hash, Hasher};
2525
use std::ops::Deref;
2626
use std::sync::{Arc, LazyLock};
27+
use vector_types::gradient::GradientSpreadMethod;
2728
use vello::*;
2829

2930
/// Cached 16x16 transparency checkerboard image data (two 8x8 cells of #ffffff and #cccccc).
@@ -1159,6 +1160,11 @@ impl Render for Table<Vector> {
11591160
.into()
11601161
}
11611162
},
1163+
extend: match gradient.spread_method {
1164+
GradientSpreadMethod::Pad => peniko::Extend::Pad,
1165+
GradientSpreadMethod::Reflect => peniko::Extend::Reflect,
1166+
GradientSpreadMethod::Repeat => peniko::Extend::Repeat,
1167+
},
11621168
stops,
11631169
interpolation_alpha_space: peniko::InterpolationAlphaSpace::Premultiplied,
11641170
..Default::default()

0 commit comments

Comments
 (0)