leyoda/libcosmic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(image-button): fix rendering on wgpu

Browse source
This commit is contained in:
Michael Aaron Murphy 2024-05-27 22:37:48 +02:00 • committed by Michael Murphy
parent 8b0bb6a677
commit d559403f7f
1 changed files with 122 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

196
src/widget/button/widget.rs
View file

@ -21,6 +21,7 @@ use iced_core::{
Background, Clipboard, Color, Layout, Length, Padding, Point, Rectangle, Shell, Vector, Widget, Background, Clipboard, Color, Layout, Length, Padding, Point, Rectangle, Shell, Vector, Widget,
}; };
use iced_renderer::core::widget::{operation, OperationOutputWrapper}; use iced_renderer::core::widget::{operation, OperationOutputWrapper};
use iced_wgpu::graphics::Mesh;
use crate::theme::THEME; use crate::theme::THEME;
@ -409,77 +410,105 @@ impl<'a, Message: 'a + Clone> Widget<Message, crate::Theme, crate::Renderer>
on_remove, on_remove,
} = &self.variant } = &self.variant
{ {
let selection_background = theme.selection_background(); let mut parent_bounds = bounds;
parent_bounds.y -= 8.0;
parent_bounds.width += 16.0;
parent_bounds.height += 16.0;
let c_rad = THEME.with(|t| t.borrow().cosmic().corner_radii); renderer.with_layer(parent_bounds, |renderer| {
let selection_background = theme.selection_background();
if self.selected { let c_rad = THEME.with(|t| t.borrow().cosmic().corner_radii);
renderer.fill_quad(
Quad { // NOTE: Workaround to round the border of the unselected, unhovered image.
bounds: Rectangle { if !self.selected && !is_mouse_over {
width: 24.0, let mut bounds = bounds;
height: 20.0, bounds.x -= 2.0;
x: bounds.x + styling.border_width, bounds.y -= 2.0;
y: bounds.y + (bounds.height - 20.0 - styling.border_width), bounds.width += 4.0;
bounds.height += 4.0;
renderer.fill_quad(
renderer::Quad {
bounds,
border: Border {
width: 2.0,
color: crate::theme::active().current_container().base.into(),
radius: 9.0.into(),
},
shadow: Shadow::default(),
}, },
border: Border { Color::TRANSPARENT,
radius: [ );
c_rad.radius_0[0], }
c_rad.radius_s[1],
c_rad.radius_0[2], if self.selected {
c_rad.radius_s[3], renderer.fill_quad(
] Quad {
.into(), bounds: Rectangle {
..Default::default() width: 24.0,
height: 20.0,
x: bounds.x + styling.border_width,
y: bounds.y + (bounds.height - 20.0 - styling.border_width),
},
border: Border {
radius: [
c_rad.radius_0[0],
c_rad.radius_s[1],
c_rad.radius_0[2],
c_rad.radius_s[3],
]
.into(),
..Default::default()
},
shadow: Shadow::default(),
}, },
shadow: Shadow::default(), selection_background,
}, );
selection_background,
);
iced_core::svg::Renderer::draw( iced_core::svg::Renderer::draw(
renderer, renderer,
crate::widget::common::object_select().clone(), crate::widget::common::object_select().clone(),
Some(icon_color), Some(icon_color),
Rectangle { Rectangle {
width: 16.0, width: 16.0,
height: 16.0, height: 16.0,
x: bounds.x + 5.0 + styling.border_width, x: bounds.x + 5.0 + styling.border_width,
y: bounds.y + (bounds.height - 18.0 - styling.border_width), y: bounds.y + (bounds.height - 18.0 - styling.border_width),
}, },
); );
} }
if on_remove.is_some() { if on_remove.is_some() {
if let Some(position) = cursor.position() { if let Some(position) = cursor.position() {
if bounds.contains(position) { if bounds.contains(position) {
let bounds = removal_bounds(layout.bounds(), 4.0); let bounds = removal_bounds(layout.bounds(), 4.0);
renderer.fill_quad( renderer.fill_quad(
renderer::Quad { renderer::Quad {
bounds, bounds,
shadow: Shadow::default(), shadow: Shadow::default(),
border: Border { border: Border {
radius: c_rad.radius_m.into(), radius: c_rad.radius_m.into(),
..Default::default() ..Default::default()
},
}, },
}, selection_background,
selection_background, );
);
iced_core::svg::Renderer::draw( iced_core::svg::Renderer::draw(
renderer, renderer,
close_icon.clone(), close_icon.clone(),
Some(icon_color), Some(icon_color),
Rectangle { Rectangle {
width: 16.0, width: 16.0,
height: 16.0, height: 16.0,
x: bounds.x + 4.0, x: bounds.x + 4.0,
y: bounds.y + 4.0, y: bounds.y + 4.0,
}, },
); );
}
} }
} }
} });
} }
} }
@ -525,7 +554,7 @@ impl<'a, Message: 'a + Clone> Widget<Message, crate::Theme, crate::Renderer>
let child_tree = self let child_tree = self
.content .content
.as_widget() .as_widget()
.a11y_nodes(child_layout, &child_tree, p); .a11y_nodes(child_layout, child_tree, p);
let Rectangle { let Rectangle {
x, x,
@ -781,19 +810,38 @@ pub fn draw<Renderer: iced_core::Renderer, Theme>(
// Then draw the button contents onto the background. // Then draw the button contents onto the background.
draw_contents(renderer, styling); draw_contents(renderer, styling);
// Finish by drawing the border above the contents. let mut clipped_bounds = bounds;
renderer.fill_quad( clipped_bounds.height += styling.border_width;
renderer::Quad {
bounds, renderer.with_layer(clipped_bounds, |renderer| {
border: Border { // NOTE: Workaround to round the border of the hovered/selected image.
width: styling.border_width, renderer.fill_quad(
color: styling.border_color, renderer::Quad {
radius: styling.border_radius, bounds,
border: Border {
width: styling.border_width,
color: crate::theme::active().current_container().base.into(),
radius: 0.0.into(),
},
shadow: Shadow::default(),
}, },
shadow: Shadow::default(), Color::TRANSPARENT,
}, );
Color::TRANSPARENT,
); // Finish by drawing the border above the contents.
renderer.fill_quad(
renderer::Quad {
bounds,
border: Border {
width: styling.border_width,
color: styling.border_color,
radius: styling.border_radius,
},
shadow: Shadow::default(),
},
Color::TRANSPARENT,
);
});
} else { } else {
draw_contents(renderer, styling); draw_contents(renderer, styling);
} }