1
0
mirror of https://github.com/emilk/egui.git synced 2026-08-29 04:40:03 -04:00

Round the corners of the color picker (#8439)

The color picker's gradients and background checkers now follow the
style's corner radius, giving it a softer look.

This required changing the painting from being Mesh-based to being
texture-based

it's subtle with the default settings:

<img width="286" height="397" alt="Screenshot 2026-08-21 at 15 08 18"
src="https://github.com/user-attachments/assets/3a9d5289-71fb-4f34-8a20-1fe96891ba36"
/>


But you can [increase it](https://github.com/emilk/egui/pull/8445):


<img width="285" height="391" alt="Screenshot 2026-08-21 at 15 08 41"
src="https://github.com/user-attachments/assets/b0dfa7da-5b96-40e0-a80d-1da385d57a1a"
/>


### Before
for reference
<img width="286" height="392" alt="Screenshot 2026-08-21 at 19 08 27"
src="https://github.com/user-attachments/assets/7c754f36-795c-4381-9f9f-1fc8dd9a0264"
/>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Emil Ernerfeldt
2026-08-24 02:28:14 -07:00
committed by GitHub
parent a15a7e6611
commit 726b995608
24 changed files with 411 additions and 155 deletions

View File

@@ -73,6 +73,7 @@ impl CornerRadiusF32 {
/// Same rounding on all four corners.
#[inline]
#[must_use]
pub const fn same(radius: f32) -> Self {
Self {
nw: radius,
@@ -90,6 +91,7 @@ impl CornerRadiusF32 {
/// Make sure each corner has a rounding of at least this.
#[inline]
#[must_use]
pub fn at_least(&self, min: f32) -> Self {
Self {
nw: self.nw.max(min),
@@ -101,6 +103,7 @@ impl CornerRadiusF32 {
/// Make sure each corner has a rounding of at most this.
#[inline]
#[must_use]
pub fn at_most(&self, max: f32) -> Self {
Self {
nw: self.nw.min(max),
@@ -109,79 +112,111 @@ impl CornerRadiusF32 {
se: self.se.min(max),
}
}
/// Set the rounding of the two east (right) corners.
#[inline]
#[must_use]
pub fn with_east(self, radius: f32) -> Self {
Self {
ne: radius,
se: radius,
..self
}
}
/// Set the rounding of the two north (top) corners.
#[inline]
#[must_use]
pub fn with_north(self, radius: f32) -> Self {
Self {
nw: radius,
ne: radius,
..self
}
}
/// Set the rounding of the two south (bottom) corners.
#[inline]
#[must_use]
pub fn with_south(self, radius: f32) -> Self {
Self {
sw: radius,
se: radius,
..self
}
}
/// Set the rounding of the two west (left) corners.
#[inline]
#[must_use]
pub fn with_west(self, radius: f32) -> Self {
Self {
nw: radius,
sw: radius,
..self
}
}
}
impl core::ops::Add for CornerRadiusF32 {
type Output = Self;
/// Saturates at zero: no corner radius will go negative.
#[inline]
fn add(self, rhs: Self) -> Self {
Self {
nw: self.nw + rhs.nw,
ne: self.ne + rhs.ne,
sw: self.sw + rhs.sw,
se: self.se + rhs.se,
nw: (self.nw + rhs.nw).max(0.0),
ne: (self.ne + rhs.ne).max(0.0),
sw: (self.sw + rhs.sw).max(0.0),
se: (self.se + rhs.se).max(0.0),
}
}
}
impl core::ops::AddAssign for CornerRadiusF32 {
/// Saturates at zero: no corner radius will go negative.
#[inline]
fn add_assign(&mut self, rhs: Self) {
*self = Self {
nw: self.nw + rhs.nw,
ne: self.ne + rhs.ne,
sw: self.sw + rhs.sw,
se: self.se + rhs.se,
};
*self = *self + rhs;
}
}
impl core::ops::AddAssign<f32> for CornerRadiusF32 {
/// Saturates at zero: no corner radius will go negative.
#[inline]
fn add_assign(&mut self, rhs: f32) {
*self = Self {
nw: self.nw + rhs,
ne: self.ne + rhs,
sw: self.sw + rhs,
se: self.se + rhs,
};
*self = *self + Self::same(rhs);
}
}
impl core::ops::Sub for CornerRadiusF32 {
type Output = Self;
/// Saturates at zero: no corner radius will go negative.
#[inline]
fn sub(self, rhs: Self) -> Self {
Self {
nw: self.nw - rhs.nw,
ne: self.ne - rhs.ne,
sw: self.sw - rhs.sw,
se: self.se - rhs.se,
nw: (self.nw - rhs.nw).max(0.0),
ne: (self.ne - rhs.ne).max(0.0),
sw: (self.sw - rhs.sw).max(0.0),
se: (self.se - rhs.se).max(0.0),
}
}
}
impl core::ops::SubAssign for CornerRadiusF32 {
/// Saturates at zero: no corner radius will go negative.
#[inline]
fn sub_assign(&mut self, rhs: Self) {
*self = Self {
nw: self.nw - rhs.nw,
ne: self.ne - rhs.ne,
sw: self.sw - rhs.sw,
se: self.se - rhs.se,
};
*self = *self - rhs;
}
}
impl core::ops::SubAssign<f32> for CornerRadiusF32 {
/// Saturates at zero: no corner radius will go negative.
#[inline]
fn sub_assign(&mut self, rhs: f32) {
*self = Self {
nw: self.nw - rhs,
ne: self.ne - rhs,
sw: self.sw - rhs,
se: self.se - rhs,
};
*self = *self - Self::same(rhs);
}
}
@@ -234,3 +269,26 @@ impl core::ops::MulAssign<f32> for CornerRadiusF32 {
};
}
}
#[cfg(test)]
mod tests {
use super::CornerRadiusF32;
#[test]
fn add_and_sub_saturate_at_zero() {
assert_eq!(
CornerRadiusF32::same(2.0) + CornerRadiusF32::same(-5.0),
CornerRadiusF32::ZERO
);
assert_eq!(
CornerRadiusF32::same(2.0) - CornerRadiusF32::same(5.0),
CornerRadiusF32::ZERO
);
let mut cr = CornerRadiusF32::same(1.0);
cr += -3.0;
assert_eq!(cr, CornerRadiusF32::ZERO);
cr -= -2.0;
assert_eq!(cr, CornerRadiusF32::same(2.0));
}
}

View File

@@ -53,6 +53,13 @@ impl RoundedRect {
)
}
/// Shrink the rectangle and the corner radii by the given amount.
#[inline]
#[must_use]
pub fn shrink(self, amount: f32) -> Self {
self.expand(-amount)
}
/// Clamp the given position to lie within this rounded rectangle.
///
/// Positions in the corner regions are projected onto the corner arcs.