leyoda/iced-yoda
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Implement overlay ordering for Image::float

Browse source
This commit is contained in:
Héctor Ramón Jiménez 2025-04-25 11:20:16 +02:00
parent 7f1dcec391
commit e64c58d032
No known key found for this signature in database
GPG key ID: 7CC46565708259A7
8 changed files with 416 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

7
widget/src/helpers.rs
View file

@ -1844,7 +1844,12 @@ where
/// ```
/// <img src="https://github.com/iced-rs/iced/blob/9712b319bb7a32848001b96bd84977430f14b623/examples/resources/ferris.png?raw=true" width="300">
#[cfg(feature = "image")]
pub fn image<Handle>(handle: impl Into<Handle>) -> crate::Image<Handle> {
pub fn image<'a, Handle, Theme>(
handle: impl Into<Handle>,
) -> crate::Image<'a, Handle, Theme>
where
Theme: crate::image::Catalog,
{
crate::Image::new(handle.into())
}

337
widget/src/image.rs
View file

@ -19,14 +19,17 @@
pub mod viewer;
pub use viewer::Viewer;
use crate::core;
use crate::core::border;
use crate::core::image;
use crate::core::layout;
use crate::core::mouse;
use crate::core::overlay;
use crate::core::renderer;
use crate::core::widget::Tree;
use crate::core::{
ContentFit, Element, Layout, Length, Point, Rectangle, Rotation, Size,
Vector, Widget,
ContentFit, Element, Layout, Length, Point, Rectangle, Rotation, Shadow,
Size, Vector, Widget,
};
pub use image::{FilterMethod, Handle};
@ -55,7 +58,10 @@ pub fn viewer<Handle>(handle: Handle) -> Viewer<Handle> {
/// ```
/// <img src="https://github.com/iced-rs/iced/blob/9712b319bb7a32848001b96bd84977430f14b623/examples/resources/ferris.png?raw=true" width="300">
#[derive(Debug)]
pub struct Image<Handle = image::Handle> {
pub struct Image<'a, Handle = image::Handle, Theme = crate::Theme>
where
Theme: Catalog,
{
handle: Handle,
width: Length,
height: Length,
@ -64,9 +70,14 @@ pub struct Image<Handle = image::Handle> {
rotation: Rotation,
opacity: f32,
scale: f32,
float: bool,
class: Theme::Class<'a>,
}
impl<Handle> Image<Handle> {
impl<'a, Handle, Theme> Image<'a, Handle, Theme>
where
Theme: Catalog,
{
/// Creates a new [`Image`] with the given path.
pub fn new(handle: impl Into<Handle>) -> Self {
Image {
@ -78,6 +89,8 @@ impl<Handle> Image<Handle> {
rotation: Rotation::default(),
opacity: 1.0,
scale: 1.0,
float: false,
class: Theme::default(),
}
}
@ -130,6 +143,35 @@ impl<Handle> Image<Handle> {
self.scale = scale.into();
self
}
/// Sets whether an [`Image`] should float above other content when scaled up.
///
/// By default, an [`Image`] has this flag set to `false`; meaning it
/// will be clipped or "framed" inside its bounds when scaled.
///
/// Enabling this flag is useful to create cool hover effects!
pub fn float(mut self, float: bool) -> Self {
self.float = float;
self
}
/// Sets the style of the [`Image`].
#[must_use]
pub fn style(mut self, style: impl Fn(&Theme) -> Style + 'a) -> Self
where
Theme::Class<'a>: From<StyleFn<'a, Theme>>,
{
self.class = (Box::new(style) as StyleFn<'a, Theme>).into();
self
}
/// Sets the style class of the [`Image`].
#[cfg(feature = "advanced")]
#[must_use]
pub fn class(mut self, class: impl Into<Theme::Class<'a>>) -> Self {
self.class = class.into();
self
}
}
/// Computes the layout of an [`Image`].
@ -174,26 +216,20 @@ where
layout::Node::new(final_size)
}
/// Draws an [`Image`]
pub fn draw<Renderer, Handle>(
renderer: &mut Renderer,
layout: Layout<'_>,
viewport: &Rectangle,
fn drawing_bounds<Renderer, Handle>(
renderer: &Renderer,
bounds: Rectangle,
handle: &Handle,
content_fit: ContentFit,
filter_method: FilterMethod,
rotation: Rotation,
opacity: f32,
scale: f32,
) where
) -> Rectangle
where
Renderer: image::Renderer<Handle = Handle>,
Handle: Clone,
{
let Size { width, height } = renderer.measure_image(handle);
let image_size = Size::new(width as f32, height as f32);
let rotated_size = rotation.apply(image_size);
let bounds = layout.bounds();
let adjusted_fit = content_fit.fit(rotated_size, bounds.size());
let fit_scale = Vector::new(
@ -214,36 +250,103 @@ pub fn draw<Renderer, Handle>(
),
};
let drawing_bounds = Rectangle::new(position, final_size);
Rectangle::new(position, final_size)
}
let render = |renderer: &mut Renderer| {
renderer.draw_image(
image::Image {
handle: handle.clone(),
filter_method,
rotation: rotation.radians(),
opacity,
snap: true,
},
drawing_bounds,
);
};
fn must_clip(bounds: Rectangle, drawing_bounds: Rectangle) -> bool {
drawing_bounds.width > bounds.width || drawing_bounds.height > bounds.height
}
/// Draws an [`Image`]
pub fn draw<Renderer, Handle>(
renderer: &mut Renderer,
layout: Layout<'_>,
viewport: &Rectangle,
handle: &Handle,
content_fit: ContentFit,
filter_method: FilterMethod,
rotation: Rotation,
opacity: f32,
scale: f32,
float: bool,
style: Style,
) where
Renderer: image::Renderer<Handle = Handle>,
Handle: Clone,
{
let bounds = layout.bounds();
let drawing_bounds =
drawing_bounds(renderer, bounds, handle, content_fit, rotation, scale);
if must_clip(bounds, drawing_bounds) {
if scale > 1.0 && float {
return;
}
if adjusted_fit.width > bounds.width || adjusted_fit.height > bounds.height
{
if let Some(bounds) = bounds.intersection(viewport) {
renderer.with_layer(bounds, render);
renderer.with_layer(bounds, |renderer| {
render(
renderer,
handle,
filter_method,
rotation,
opacity,
drawing_bounds,
);
});
}
} else {
render(renderer);
render(
renderer,
handle,
filter_method,
rotation,
opacity,
drawing_bounds,
);
}
if style.shadow.color.a > 0.0 {
renderer.fill_quad(
renderer::Quad {
bounds: bounds.shrink(1.0),
shadow: style.shadow,
border: border::rounded(style.shadow_border_radius),
},
style.shadow.color,
);
}
}
fn render<Renderer, Handle>(
renderer: &mut Renderer,
handle: &Handle,
filter_method: FilterMethod,
rotation: Rotation,
opacity: f32,
drawing_bounds: Rectangle,
) where
Renderer: image::Renderer<Handle = Handle>,
Handle: Clone,
{
renderer.draw_image(
image::Image {
handle: handle.clone(),
filter_method,
rotation: rotation.radians(),
opacity,
snap: true,
},
drawing_bounds,
);
}
impl<Message, Theme, Renderer, Handle> Widget<Message, Theme, Renderer>
for Image<Handle>
for Image<'_, Handle, Theme>
where
Renderer: image::Renderer<Handle = Handle>,
Handle: Clone,
Theme: Catalog,
{
fn size(&self) -> Size<Length> {
Size {
@ -273,7 +376,7 @@ where
&self,
_state: &Tree,
renderer: &mut Renderer,
_theme: &Theme,
theme: &Theme,
_style: &renderer::Style,
layout: Layout<'_>,
_cursor: mouse::Cursor,
@ -289,17 +392,179 @@ where
self.rotation,
self.opacity,
self.scale,
self.float,
theme.style(&self.class),
);
}
fn overlay<'a>(
&'a mut self,
_state: &'a mut Tree,
layout: Layout<'_>,
renderer: &Renderer,
translation: Vector,
) -> Option<overlay::Element<'a, Message, Theme, Renderer>> {
if !self.float || self.scale <= 1.0 {
return None;
}
let bounds = layout.bounds() + translation;
let drawing_bounds = drawing_bounds(
renderer,
bounds,
&self.handle,
self.content_fit,
self.rotation,
self.scale,
);
if must_clip(bounds, drawing_bounds) {
Some(overlay::Element::new(Box::new(Overlay {
image: self,
clip_bounds: bounds,
drawing_bounds,
})))
} else {
None
}
}
}
impl<'a, Message, Theme, Renderer, Handle> From<Image<Handle>>
impl<'a, Message, Theme, Renderer, Handle> From<Image<'a, Handle, Theme>>
for Element<'a, Message, Theme, Renderer>
where
Renderer: image::Renderer<Handle = Handle>,
Handle: Clone + 'a,
Theme: Catalog + 'a,
{
fn from(image: Image<Handle>) -> Element<'a, Message, Theme, Renderer> {
fn from(
image: Image<'a, Handle, Theme>,
) -> Element<'a, Message, Theme, Renderer> {
Element::new(image)
}
}
/// The theme catalog of an [`Image`].
///
/// All themes that can be used with [`Image`]
/// must implement this trait.
pub trait Catalog {
/// The item class of the [`Catalog`].
type Class<'a>;
/// The default class produced by the [`Catalog`].
fn default<'a>() -> Self::Class<'a>;
/// The [`Style`] of a class with the given status.
fn style(&self, class: &Self::Class<'_>) -> Style;
}
/// A styling function for a [`Button`].
pub type StyleFn<'a, Theme> = Box<dyn Fn(&Theme) -> Style + 'a>;
impl Catalog for crate::Theme {
type Class<'a> = StyleFn<'a, Self>;
fn default<'a>() -> Self::Class<'a> {
Box::new(|_| Style::default())
}
fn style(&self, class: &Self::Class<'_>) -> Style {
class(self)
}
}
/// The style of an [`Image`].
#[derive(Debug, Clone, Copy, PartialEq, Default)]
pub struct Style {
/// The [`Shadow`] of the [`Image`].
pub shadow: Shadow,
/// The border radius of the shadow.
pub shadow_border_radius: border::Radius,
}
struct Overlay<'a, 'b, Handle, Theme>
where
Theme: Catalog,
{
image: &'a Image<'b, Handle, Theme>,
clip_bounds: Rectangle,
drawing_bounds: Rectangle,
}
impl<Message, Theme, Renderer, Handle> core::Overlay<Message, Theme, Renderer>
for Overlay<'_, '_, Handle, Theme>
where
Renderer: image::Renderer<Handle = Handle>,
Handle: Clone,
Theme: Catalog,
{
fn layout(&mut self, _renderer: &Renderer, _bounds: Size) -> layout::Node {
layout::Node::new(self.clip_bounds.size())
.move_to(self.clip_bounds.position())
}
fn is_over(
&self,
_layout: Layout<'_>,
_renderer: &Renderer,
_cursor_position: Point,
) -> bool {
false
}
fn draw(
&self,
renderer: &mut Renderer,
theme: &Theme,
_style: &renderer::Style,
_layout: Layout<'_>,
_cursor: mouse::Cursor,
) {
let clip_bounds = Rectangle {
x: self.clip_bounds.x
- (self.clip_bounds.width * self.image.scale
- self.clip_bounds.width)
/ 2.0,
y: self.clip_bounds.y
- (self.clip_bounds.height * self.image.scale
- self.clip_bounds.height)
/ 2.0,
width: self.clip_bounds.width * self.image.scale,
height: self.clip_bounds.height * self.image.scale,
};
let style = theme.style(&self.image.class);
if style.shadow.color.a > 0.0 {
renderer.with_layer(
clip_bounds.expand(style.shadow.blur_radius),
|renderer| {
renderer.fill_quad(
renderer::Quad {
bounds: clip_bounds.shrink(1.0),
shadow: style.shadow,
border: border::rounded(style.shadow_border_radius),
},
style.shadow.color,
);
},
);
}
renderer.with_layer(clip_bounds, |renderer| {
render(
renderer,
&self.image.handle,
self.image.filter_method,
self.image.rotation,
self.image.opacity,
self.drawing_bounds,
);
});
}
fn index(&self) -> f32 {
self.image.scale * 0.5
}
}

17
widget/src/themer.rs
View file

@ -198,7 +198,7 @@ where
renderer: &Renderer,
bounds: Size,
) -> layout::Node {
self.content.layout(renderer, bounds)
self.content.as_overlay_mut().layout(renderer, bounds)
}
fn draw(
@ -209,7 +209,7 @@ where
layout: Layout<'_>,
cursor: mouse::Cursor,
) {
self.content.draw(
self.content.as_overlay().draw(
renderer,
&(self.to_theme)(theme),
style,
@ -228,6 +228,7 @@ where
shell: &mut Shell<'_, Message>,
) {
self.content
.as_overlay_mut()
.update(event, layout, cursor, renderer, clipboard, shell);
}
@ -237,7 +238,9 @@ where
renderer: &Renderer,
operation: &mut dyn Operation,
) {
self.content.operate(layout, renderer, operation);
self.content
.as_overlay_mut()
.operate(layout, renderer, operation);
}
fn mouse_interaction(
@ -248,6 +251,7 @@ where
renderer: &Renderer,
) -> mouse::Interaction {
self.content
.as_overlay()
.mouse_interaction(layout, cursor, viewport, renderer)
}
@ -257,7 +261,11 @@ where
renderer: &Renderer,
cursor_position: Point,
) -> bool {
self.content.is_over(layout, renderer, cursor_position)
self.content.as_overlay().is_over(
layout,
renderer,
cursor_position,
)
}
fn overlay<'b>(
@ -267,6 +275,7 @@ where
) -> Option<overlay::Element<'b, Message, Theme, Renderer>>
{
self.content
.as_overlay_mut()
.overlay(layout, renderer)
.map(|content| Overlay {
to_theme: &self.to_theme,