From 23ef6547ad0f0cc2944664ace4be7cdacc0a23cf Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 27 Apr 2024 06:06:13 +0200 Subject: Introduce `hover` widget --- widget/src/helpers.rs | 230 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 229 insertions(+), 1 deletion(-) (limited to 'widget/src') diff --git a/widget/src/helpers.rs b/widget/src/helpers.rs index fd345251..c86223bc 100644 --- a/widget/src/helpers.rs +++ b/widget/src/helpers.rs @@ -124,7 +124,7 @@ where } /// Wraps the given widget and captures any mouse button presses inside the bounds of -/// the widget—therefore making it _opaque_. +/// the widget—effectively making it _opaque_. /// /// This helper is meant to be used to mark elements in a [`Stack`] to avoid mouse /// events from passing through layers. @@ -290,6 +290,234 @@ where }) } +/// Displays a widget on top of another one, only when the base widget is hovered. +/// +/// This works analogously to a [`stack`], but it will only display the layer on top +/// when the cursor is over the base. It can be useful for removing visual clutter. +pub fn hover<'a, Message, Theme, Renderer>( + base: impl Into>, + top: impl Into>, +) -> Element<'a, Message, Theme, Renderer> +where + Message: 'a, + Theme: 'a, + Renderer: core::Renderer + 'a, +{ + use crate::core::event::{self, Event}; + use crate::core::layout::{self, Layout}; + use crate::core::mouse; + use crate::core::renderer; + use crate::core::widget::tree::{self, Tree}; + use crate::core::{Rectangle, Shell, Size}; + + struct Hover<'a, Message, Theme, Renderer> { + base: Element<'a, Message, Theme, Renderer>, + top: Element<'a, Message, Theme, Renderer>, + is_overlay_active: bool, + } + + impl<'a, Message, Theme, Renderer> Widget + for Hover<'a, Message, Theme, Renderer> + where + Renderer: core::Renderer, + { + fn tag(&self) -> tree::Tag { + struct Tag; + tree::Tag::of::() + } + + fn children(&self) -> Vec { + vec![Tree::new(&self.base), Tree::new(&self.top)] + } + + fn diff(&self, tree: &mut Tree) { + tree.diff_children(&[&self.base, &self.top]); + } + + fn size(&self) -> Size { + self.base.as_widget().size() + } + + fn size_hint(&self) -> Size { + self.base.as_widget().size_hint() + } + + fn layout( + &self, + tree: &mut Tree, + renderer: &Renderer, + limits: &layout::Limits, + ) -> layout::Node { + let base = self.base.as_widget().layout( + &mut tree.children[0], + renderer, + limits, + ); + + let top = self.top.as_widget().layout( + &mut tree.children[1], + renderer, + &layout::Limits::new(Size::ZERO, base.size()), + ); + + layout::Node::with_children(base.size(), vec![base, top]) + } + + fn draw( + &self, + tree: &Tree, + renderer: &mut Renderer, + theme: &Theme, + style: &renderer::Style, + layout: Layout<'_>, + cursor: mouse::Cursor, + viewport: &Rectangle, + ) { + let mut children = layout.children().zip(&tree.children); + + let (base_layout, base_tree) = children.next().unwrap(); + + self.base.as_widget().draw( + base_tree, + renderer, + theme, + style, + base_layout, + cursor, + viewport, + ); + + if cursor.is_over(layout.bounds()) || self.is_overlay_active { + let (top_layout, top_tree) = children.next().unwrap(); + + renderer.with_layer(layout.bounds(), |renderer| { + self.top.as_widget().draw( + top_tree, renderer, theme, style, top_layout, cursor, + viewport, + ); + }); + } + } + + fn operate( + &self, + tree: &mut Tree, + layout: Layout<'_>, + renderer: &Renderer, + operation: &mut dyn operation::Operation, + ) { + let children = [&self.base, &self.top] + .into_iter() + .zip(layout.children().zip(&mut tree.children)); + + for (child, (layout, tree)) in children { + child.as_widget().operate(tree, layout, renderer, operation); + } + } + + fn on_event( + &mut self, + tree: &mut Tree, + event: Event, + layout: Layout<'_>, + cursor: mouse::Cursor, + renderer: &Renderer, + clipboard: &mut dyn core::Clipboard, + shell: &mut Shell<'_, Message>, + viewport: &Rectangle, + ) -> event::Status { + let mut children = layout.children().zip(&mut tree.children); + let (base_layout, base_tree) = children.next().unwrap(); + + let top_status = if cursor.is_over(layout.bounds()) { + let (top_layout, top_tree) = children.next().unwrap(); + + self.top.as_widget_mut().on_event( + top_tree, + event.clone(), + top_layout, + cursor, + renderer, + clipboard, + shell, + viewport, + ) + } else { + event::Status::Ignored + }; + + if top_status == event::Status::Captured { + return top_status; + } + + self.base.as_widget_mut().on_event( + base_tree, + event.clone(), + base_layout, + cursor, + renderer, + clipboard, + shell, + viewport, + ) + } + + fn mouse_interaction( + &self, + tree: &Tree, + layout: Layout<'_>, + cursor: mouse::Cursor, + viewport: &Rectangle, + renderer: &Renderer, + ) -> mouse::Interaction { + [&self.base, &self.top] + .into_iter() + .rev() + .zip(layout.children().rev().zip(tree.children.iter().rev())) + .map(|(child, (layout, tree))| { + child.as_widget().mouse_interaction( + tree, layout, cursor, viewport, renderer, + ) + }) + .find(|&interaction| interaction != mouse::Interaction::None) + .unwrap_or_default() + } + + fn overlay<'b>( + &'b mut self, + tree: &'b mut core::widget::Tree, + layout: core::Layout<'_>, + renderer: &Renderer, + translation: core::Vector, + ) -> Option> + { + let overlay = [&mut self.base, &mut self.top] + .into_iter() + .rev() + .zip( + layout.children().rev().zip(tree.children.iter_mut().rev()), + ) + .find_map(|(child, (layout, tree))| { + child.as_widget_mut().overlay( + tree, + layout, + renderer, + translation, + ) + }); + + self.is_overlay_active = overlay.is_some(); + overlay + } + } + + Element::new(Hover { + base: base.into(), + top: top.into(), + is_overlay_active: false, + }) +} + /// Creates a new [`Scrollable`] with the provided content. /// /// [`Scrollable`]: crate::Scrollable -- cgit From 40dff6b23d4666d69e27addcfb90d9557f59ed6c Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 27 Apr 2024 06:15:58 +0200 Subject: Fix `overlay` behavior in `hover` widget --- widget/src/helpers.rs | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) (limited to 'widget/src') diff --git a/widget/src/helpers.rs b/widget/src/helpers.rs index c86223bc..0b5adde7 100644 --- a/widget/src/helpers.rs +++ b/widget/src/helpers.rs @@ -313,7 +313,7 @@ where struct Hover<'a, Message, Theme, Renderer> { base: Element<'a, Message, Theme, Renderer>, top: Element<'a, Message, Theme, Renderer>, - is_overlay_active: bool, + is_top_overlay_active: bool, } impl<'a, Message, Theme, Renderer> Widget @@ -387,7 +387,7 @@ where viewport, ); - if cursor.is_over(layout.bounds()) || self.is_overlay_active { + if cursor.is_over(layout.bounds()) || self.is_top_overlay_active { let (top_layout, top_tree) = children.next().unwrap(); renderer.with_layer(layout.bounds(), |renderer| { @@ -491,13 +491,10 @@ where translation: core::Vector, ) -> Option> { - let overlay = [&mut self.base, &mut self.top] + let mut overlays = [&mut self.base, &mut self.top] .into_iter() - .rev() - .zip( - layout.children().rev().zip(tree.children.iter_mut().rev()), - ) - .find_map(|(child, (layout, tree))| { + .zip(layout.children().zip(tree.children.iter_mut())) + .map(|(child, (layout, tree))| { child.as_widget_mut().overlay( tree, layout, @@ -506,15 +503,21 @@ where ) }); - self.is_overlay_active = overlay.is_some(); - overlay + if let Some(base_overlay) = overlays.next()? { + return Some(base_overlay); + } + + let top_overlay = overlays.next()?; + self.is_top_overlay_active = top_overlay.is_some(); + + top_overlay } } Element::new(Hover { base: base.into(), top: top.into(), - is_overlay_active: false, + is_top_overlay_active: false, }) } -- cgit From 95ac45e33d8490f0cc5c3cdea80be78f338d44e5 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 27 Apr 2024 06:19:25 +0200 Subject: Fix ambiguous link in documentation of `hover` helper --- widget/src/helpers.rs | 2 ++ 1 file changed, 2 insertions(+) (limited to 'widget/src') diff --git a/widget/src/helpers.rs b/widget/src/helpers.rs index 0b5adde7..5f27b680 100644 --- a/widget/src/helpers.rs +++ b/widget/src/helpers.rs @@ -294,6 +294,8 @@ where /// /// This works analogously to a [`stack`], but it will only display the layer on top /// when the cursor is over the base. It can be useful for removing visual clutter. +/// +/// [`stack`]: stack() pub fn hover<'a, Message, Theme, Renderer>( base: impl Into>, top: impl Into>, -- cgit From 9c0f2dc9a5ea172afd27b13d55dead40098eb7e3 Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 27 Apr 2024 11:21:18 +0200 Subject: Fix top layer clipping in `hover` widget --- widget/src/helpers.rs | 45 ++++++++++++++++++++++++--------------------- 1 file changed, 24 insertions(+), 21 deletions(-) (limited to 'widget/src') diff --git a/widget/src/helpers.rs b/widget/src/helpers.rs index 5f27b680..3940e389 100644 --- a/widget/src/helpers.rs +++ b/widget/src/helpers.rs @@ -375,29 +375,32 @@ where cursor: mouse::Cursor, viewport: &Rectangle, ) { - let mut children = layout.children().zip(&tree.children); + if let Some(bounds) = layout.bounds().intersection(viewport) { + let mut children = layout.children().zip(&tree.children); - let (base_layout, base_tree) = children.next().unwrap(); - - self.base.as_widget().draw( - base_tree, - renderer, - theme, - style, - base_layout, - cursor, - viewport, - ); - - if cursor.is_over(layout.bounds()) || self.is_top_overlay_active { - let (top_layout, top_tree) = children.next().unwrap(); + let (base_layout, base_tree) = children.next().unwrap(); - renderer.with_layer(layout.bounds(), |renderer| { - self.top.as_widget().draw( - top_tree, renderer, theme, style, top_layout, cursor, - viewport, - ); - }); + self.base.as_widget().draw( + base_tree, + renderer, + theme, + style, + base_layout, + cursor, + viewport, + ); + + if cursor.is_over(layout.bounds()) || self.is_top_overlay_active + { + let (top_layout, top_tree) = children.next().unwrap(); + + renderer.with_layer(bounds, |renderer| { + self.top.as_widget().draw( + top_tree, renderer, theme, style, top_layout, + cursor, viewport, + ); + }); + } } } -- cgit From 05c90775816a97e44d499aaff5e9de57b6144e8b Mon Sep 17 00:00:00 2001 From: Héctor Ramón Jiménez Date: Sat, 27 Apr 2024 11:28:43 +0200 Subject: Propagate mouse movement and button releases unconditionally in `hover` --- widget/src/helpers.rs | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'widget/src') diff --git a/widget/src/helpers.rs b/widget/src/helpers.rs index 3940e389..48c5dde4 100644 --- a/widget/src/helpers.rs +++ b/widget/src/helpers.rs @@ -434,7 +434,14 @@ where let mut children = layout.children().zip(&mut tree.children); let (base_layout, base_tree) = children.next().unwrap(); - let top_status = if cursor.is_over(layout.bounds()) { + let top_status = if matches!( + event, + Event::Mouse( + mouse::Event::CursorMoved { .. } + | mouse::Event::ButtonReleased(_) + ) + ) || cursor.is_over(layout.bounds()) + { let (top_layout, top_tree) = children.next().unwrap(); self.top.as_widget_mut().on_event( -- cgit