Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

gpui: Add linear gradient support to fill background #20812

Merged
merged 40 commits into from
Dec 11, 2024
Merged

gpui: Add linear gradient support to fill background #20812

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
16a225e
gpui: Add linear gradient support to fill background.
huacnlee Nov 18, 2024
18e648b
.
huacnlee Nov 18, 2024
e9a3ffb
Fix color stop
huacnlee Nov 18, 2024
40ea10c
.
huacnlee Nov 18, 2024
cdf6c59
Update Background_LinearGradient metal code
huacnlee Nov 18, 2024
8a6b7b6
.
huacnlee Nov 19, 2024
4e07357
Fix grident direction
huacnlee Nov 19, 2024
94eb680
Fix color position
huacnlee Nov 19, 2024
b0dddbe
Update gradient methods.
huacnlee Nov 19, 2024
01de91a
Fix color direction
huacnlee Nov 19, 2024
1232c26
Add gradient to wgsl.
huacnlee Nov 19, 2024
28ec5af
Update Background struct for Wgsl.
huacnlee Nov 19, 2024
b2365ed
Fix clippy wraning.
huacnlee Nov 19, 2024
40c74c9
.
huacnlee Nov 19, 2024
6a6d779
.
huacnlee Nov 19, 2024
1cf5511
.
huacnlee Nov 19, 2024
926b83f
.
huacnlee Nov 19, 2024
77578d2
.
huacnlee Nov 19, 2024
a54c125
Remove useless code.
huacnlee Nov 19, 2024
ef93548
Add test for Background
huacnlee Nov 19, 2024
e5dc6c5
Reduce calc
huacnlee Nov 19, 2024
00d45cb
Fix color on Linux and Windows.
huacnlee Nov 20, 2024
dda75f5
Add to let paint_path support Background color.
huacnlee Nov 21, 2024
729f00b
update wgsl, and fix for better detail.
huacnlee Nov 21, 2024
1a24030
Use bulit-in color methods.
huacnlee Nov 28, 2024
8036ff6
Improve example to support switch color for test.
huacnlee Nov 28, 2024
50087c1
Add oklab
huacnlee Nov 28, 2024
707fdcc
Fix blade render
huacnlee Nov 28, 2024
a9f5030
Rename to use ColorSpace
huacnlee Nov 28, 2024
54aef79
fix oklab color
huacnlee Nov 28, 2024
c50afa2
done for blade
huacnlee Nov 28, 2024
0f7257a
Fix metal
huacnlee Nov 28, 2024
ffacf0f
fix wgsl, remove duplicate call.
huacnlee Nov 28, 2024
81ffdb3
Reduce example colors and fix sRGB in Blade.
huacnlee Nov 28, 2024
aea2cf5
Remove color switch display all colors.
huacnlee Nov 28, 2024
9d7f08f
update wgsl
huacnlee Nov 29, 2024
4f7b391
wip
huacnlee Nov 29, 2024
1d7ee20
update metal, wip
huacnlee Nov 29, 2024
63ece35
Metal fixed.
huacnlee Nov 29, 2024
3a5f7ad
Split duplicate code to `prepare_gradient_color` method.
huacnlee Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
254 changes: 254 additions & 0 deletions crates/gpui/examples/gradient.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,254 @@
use gpui::{
canvas, div, linear_color_stop, linear_gradient, point, prelude::*, px, size, App, AppContext,
Bounds, ColorSpace, Half, Render, ViewContext, WindowOptions,
};

struct GradientViewer {
color_space: ColorSpace,
}

impl GradientViewer {
fn new() -> Self {
Self {
color_space: ColorSpace::default(),
}
}
}

impl Render for GradientViewer {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
let color_space = self.color_space;

div()
.font_family(".SystemUIFont")
.bg(gpui::white())
.size_full()
.p_4()
.flex()
.flex_col()
.gap_3()
.child(
div()
.flex()
.gap_2()
.justify_between()
.items_center()
.child("Gradient Examples")
.child(
div().flex().gap_2().items_center().child(
div()
.id("method")
.flex()
.px_3()
.py_1()
.text_sm()
.bg(gpui::black())
.text_color(gpui::white())
.child(format!("{}", color_space))
.active(|this| this.opacity(0.8))
.on_click(cx.listener(move |this, _, cx| {
this.color_space = match this.color_space {
ColorSpace::Oklab => ColorSpace::Srgb,
ColorSpace::Srgb => ColorSpace::Oklab,
};
cx.notify();
})),
),
),
)
.child(
div()
.flex()
.flex_1()
.gap_3()
.child(
div()
.size_full()
.rounded_xl()
.flex()
.items_center()
.justify_center()
.bg(gpui::red())
.text_color(gpui::white())
.child("Solid Color"),
)
.child(
div()
.size_full()
.rounded_xl()
.flex()
.items_center()
.justify_center()
.bg(gpui::blue())
.text_color(gpui::white())
.child("Solid Color"),
),
)
.child(
div()
.flex()
.flex_1()
.gap_3()
.h_24()
.text_color(gpui::white())
.child(
div().flex_1().rounded_xl().bg(linear_gradient(
45.,
linear_color_stop(gpui::red(), 0.),
linear_color_stop(gpui::blue(), 1.),
)
.color_space(color_space)),
)
.child(
div().flex_1().rounded_xl().bg(linear_gradient(
135.,
linear_color_stop(gpui::red(), 0.),
linear_color_stop(gpui::green(), 1.),
)
.color_space(color_space)),
)
.child(
div().flex_1().rounded_xl().bg(linear_gradient(
225.,
linear_color_stop(gpui::green(), 0.),
linear_color_stop(gpui::blue(), 1.),
)
.color_space(color_space)),
)
.child(
div().flex_1().rounded_xl().bg(linear_gradient(
315.,
linear_color_stop(gpui::green(), 0.),
linear_color_stop(gpui::yellow(), 1.),
)
.color_space(color_space)),
),
)
.child(
div()
.flex()
.flex_1()
.gap_3()
.h_24()
.text_color(gpui::white())
.child(
div().flex_1().rounded_xl().bg(linear_gradient(
0.,
linear_color_stop(gpui::red(), 0.),
linear_color_stop(gpui::white(), 1.),
)
.color_space(color_space)),
)
.child(
div().flex_1().rounded_xl().bg(linear_gradient(
90.,
linear_color_stop(gpui::blue(), 0.),
linear_color_stop(gpui::white(), 1.),
)
.color_space(color_space)),
)
.child(
div().flex_1().rounded_xl().bg(linear_gradient(
180.,
linear_color_stop(gpui::green(), 0.),
linear_color_stop(gpui::white(), 1.),
)
.color_space(color_space)),
)
.child(
div().flex_1().rounded_xl().bg(linear_gradient(
360.,
linear_color_stop(gpui::yellow(), 0.),
linear_color_stop(gpui::white(), 1.),
)
.color_space(color_space)),
),
)
.child(
div().flex_1().rounded_xl().bg(linear_gradient(
0.,
linear_color_stop(gpui::green(), 0.05),
linear_color_stop(gpui::yellow(), 0.95),
)
.color_space(color_space)),
)
.child(
div().flex_1().rounded_xl().bg(linear_gradient(
90.,
linear_color_stop(gpui::blue(), 0.05),
linear_color_stop(gpui::red(), 0.95),
)
.color_space(color_space)),
)
.child(
div()
.flex()
.flex_1()
.gap_3()
.child(
div().flex().flex_1().gap_3().child(
div().flex_1().rounded_xl().bg(linear_gradient(
90.,
linear_color_stop(gpui::blue(), 0.5),
linear_color_stop(gpui::red(), 0.5),
)
.color_space(color_space)),
),
)
.child(
div().flex_1().rounded_xl().bg(linear_gradient(
180.,
linear_color_stop(gpui::green(), 0.),
linear_color_stop(gpui::blue(), 0.5),
)
.color_space(color_space)),
),
)
.child(div().h_24().child(canvas(
move |_, _| {},
move |bounds, _, cx| {
let size = size(bounds.size.width * 0.8, px(80.));
let square_bounds = Bounds {
origin: point(
bounds.size.width.half() - size.width.half(),
bounds.origin.y,
),
size,
};
let height = square_bounds.size.height;
let horizontal_offset = height;
let vertical_offset = px(30.);
let mut path = gpui::Path::new(square_bounds.lower_left());
path.line_to(square_bounds.origin + point(horizontal_offset, vertical_offset));
path.line_to(
square_bounds.upper_right() + point(-horizontal_offset, vertical_offset),
);
path.line_to(square_bounds.lower_right());
path.line_to(square_bounds.lower_left());
cx.paint_path(
path,
linear_gradient(
180.,
linear_color_stop(gpui::red(), 0.),
linear_color_stop(gpui::blue(), 1.),
)
.color_space(color_space),
);
},
)))
}
}

fn main() {
App::new().run(|cx: &mut AppContext| {
cx.open_window(
WindowOptions {
focus: true,
..Default::default()
},
|cx| cx.new_view(|_| GradientViewer::new()),
)
.unwrap();
cx.activate(true);
});
}
Loading
Loading