Skip to content

Commit

Permalink
gpui: Add PathBuilder based on lyon to build Path (#22808)
Browse files Browse the repository at this point in the history 
Release Notes:

- N/A

---

Continue #20499

We to draw more complex Path. Before this change, we only have
`line_to`, but it is not enough.

Add a new `PathBuilder` to use [lyon](https://github.com/nical/lyon) to
build more complex path.

And then with PR #22812 to enable anti-aliasing, all thing will be
perfect.
## Show case

```bash
cargo run -p gpui --example painting
```

Before:

<img width="1136" alt="image"
src="https://github.com/user-attachments/assets/0c15833a-ec95-404c-a469-24cf172cfd86"
/>

After:

<img width="1136" alt="image"
src="https://github.com/user-attachments/assets/42cfa35e-7e8f-4ef3-bb2d-b98defc62ad6"
/>
  • Loading branch information
@huacnlee
huacnlee authored Jan 29, 2025
1 parent 706f7be commit 31fa414
Show file tree
Hide file tree
Showing 8 changed files with 449 additions and 79 deletions.
70 changes: 70 additions & 0 deletions Cargo.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

48 changes: 25 additions & 23 deletions crates/editor/src/element.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7837,8 +7837,8 @@ impl HighlightedRange {
};

let top_curve_width = curve_width(first_line.start_x, first_line.end_x);
let mut path = gpui::Path::new(first_top_right - top_curve_width);
path.curve_to(first_top_right + curve_height, first_top_right);
let mut builder = gpui::PathBuilder::fill();
builder.curve_to(first_top_right + curve_height, first_top_right);

let mut iter = lines.iter().enumerate().peekable();
while let Some((ix, line)) = iter.next() {
Expand All @@ -7849,67 +7849,69 @@ impl HighlightedRange {

match next_top_right.x.partial_cmp(&bottom_right.x).unwrap() {
Ordering::Equal => {
path.line_to(bottom_right);
builder.line_to(bottom_right);
}
Ordering::Less => {
let curve_width = curve_width(next_top_right.x, bottom_right.x);
path.line_to(bottom_right - curve_height);
builder.line_to(bottom_right - curve_height);
if self.corner_radius > Pixels::ZERO {
path.curve_to(bottom_right - curve_width, bottom_right);
builder.curve_to(bottom_right - curve_width, bottom_right);
}
path.line_to(next_top_right + curve_width);
builder.line_to(next_top_right + curve_width);
if self.corner_radius > Pixels::ZERO {
path.curve_to(next_top_right + curve_height, next_top_right);
builder.curve_to(next_top_right + curve_height, next_top_right);
}
}
Ordering::Greater => {
let curve_width = curve_width(bottom_right.x, next_top_right.x);
path.line_to(bottom_right - curve_height);
builder.line_to(bottom_right - curve_height);
if self.corner_radius > Pixels::ZERO {
path.curve_to(bottom_right + curve_width, bottom_right);
builder.curve_to(bottom_right + curve_width, bottom_right);
}
path.line_to(next_top_right - curve_width);
builder.line_to(next_top_right - curve_width);
if self.corner_radius > Pixels::ZERO {
path.curve_to(next_top_right + curve_height, next_top_right);
builder.curve_to(next_top_right + curve_height, next_top_right);
}
}
}
} else {
let curve_width = curve_width(line.start_x, line.end_x);
path.line_to(bottom_right - curve_height);
builder.line_to(bottom_right - curve_height);
if self.corner_radius > Pixels::ZERO {
path.curve_to(bottom_right - curve_width, bottom_right);
builder.curve_to(bottom_right - curve_width, bottom_right);
}

let bottom_left = point(line.start_x, bottom_right.y);
path.line_to(bottom_left + curve_width);
builder.line_to(bottom_left + curve_width);
if self.corner_radius > Pixels::ZERO {
path.curve_to(bottom_left - curve_height, bottom_left);
builder.curve_to(bottom_left - curve_height, bottom_left);
}
}
}

if first_line.start_x > last_line.start_x {
let curve_width = curve_width(last_line.start_x, first_line.start_x);
let second_top_left = point(last_line.start_x, start_y + self.line_height);
path.line_to(second_top_left + curve_height);
builder.line_to(second_top_left + curve_height);
if self.corner_radius > Pixels::ZERO {
path.curve_to(second_top_left + curve_width, second_top_left);
builder.curve_to(second_top_left + curve_width, second_top_left);
}
let first_bottom_left = point(first_line.start_x, second_top_left.y);
path.line_to(first_bottom_left - curve_width);
builder.line_to(first_bottom_left - curve_width);
if self.corner_radius > Pixels::ZERO {
path.curve_to(first_bottom_left - curve_height, first_bottom_left);
builder.curve_to(first_bottom_left - curve_height, first_bottom_left);
}
}

path.line_to(first_top_left + curve_height);
builder.line_to(first_top_left + curve_height);
if self.corner_radius > Pixels::ZERO {
path.curve_to(first_top_left + top_curve_width, first_top_left);
builder.curve_to(first_top_left + top_curve_width, first_top_left);
}
path.line_to(first_top_right - top_curve_width);
builder.line_to(first_top_right - top_curve_width);

window.paint_path(path, self.color);
if let Ok(path) = builder.build() {
window.paint_path(path, self.color);
}
}
}

Expand Down
2 changes: 2 additions & 0 deletions crates/gpui/Cargo.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ thiserror.workspace = true
util.workspace = true
uuid.workspace = true
waker-fn = "1.2.0"
lyon = "1.0"

[dev-dependencies]
backtrace = "0.3"
Expand All @@ -117,6 +118,7 @@ rand.workspace = true
util = { workspace = true, features = ["test-support"] }
http_client = { workspace = true, features = ["test-support"] }
unicode-segmentation.workspace = true
lyon = { version = "1.0", features = ["extra"] }

[target.'cfg(target_os = "windows")'.build-dependencies]
embed-resource = "3.0"
Expand Down
14 changes: 9 additions & 5 deletions crates/gpui/examples/gradient.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,13 +218,17 @@ impl Render for GradientViewer {
let height = square_bounds.size.height;
let horizontal_offset = height;
let vertical_offset = px(30.);
let mut path = gpui::Path::new(square_bounds.bottom_left());
path.line_to(square_bounds.origin + point(horizontal_offset, vertical_offset));
path.line_to(
let mut builder = gpui::PathBuilder::fill();
builder.move_to(square_bounds.bottom_left());
builder
.line_to(square_bounds.origin + point(horizontal_offset, vertical_offset));
builder.line_to(
square_bounds.top_right() + point(-horizontal_offset, vertical_offset),
);
path.line_to(square_bounds.bottom_right());
path.line_to(square_bounds.bottom_left());

builder.line_to(square_bounds.bottom_right());
builder.line_to(square_bounds.bottom_left());
let path = builder.build().unwrap();
window.paint_path(
path,
linear_gradient(
Expand Down
Loading

0 comments on commit 31fa414

Please sign in to comment.