reivilibre
/
iced-mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(native): add Tooltip widget

This commit is contained in:
Yusuf Bera Ertan 2020-07-28 18:07:46 +03:00
parent 4de164dcc7
commit a19f89d3a6
No known key found for this signature in database
GPG Key ID: 1D8F8FAF2294D6EA
23 changed files with 580 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Cargo.toml
View File

@ -83,6 +83,7 @@ members = [
"examples/svg",
"examples/todos",
"examples/tour",
"examples/tooltip",
]
[dependencies]

9
examples/tooltip/Cargo.toml Normal file
View File

@ -0,0 +1,9 @@
[package]
name = "tooltip"
version = "0.1.0"
authors = ["Yusuf Bera Ertan <y.bera003.06@protonmail.com>"]
edition = "2018"
publish = false
[dependencies]
iced = { path = "../..", features = ["debug"] }

14
examples/tooltip/README.md Normal file
View File

@ -0,0 +1,14 @@
## Tooltip
A tooltip.
It displays and positions a widget on another based on cursor position.
The __[`main`]__ file contains all the code of the example.
You can run it with `cargo run`:
```
cargo run --package tooltip
```
[`main`]: src/main.rs

123
examples/tooltip/src/main.rs Normal file
View File

@ -0,0 +1,123 @@
use iced::{
button, tooltip::TooltipPosition, Button, Column, Container, Element,
Length, Row, Sandbox, Settings, Text, Tooltip,
};
pub fn main() {
Example::run(Settings::default()).unwrap()
}
#[derive(Default)]
struct Example {
tooltip_top_button_state: button::State,
tooltip_bottom_button_state: button::State,
tooltip_right_button_state: button::State,
tooltip_left_button_state: button::State,
tooltip_cursor_button_state: button::State,
}
#[derive(Debug, Clone, Copy)]
struct Message;
impl Sandbox for Example {
type Message = Message;
fn new() -> Self {
Self::default()
}
fn title(&self) -> String {
String::from("Tooltip - Iced")
}
fn update(&mut self, _message: Message) {}
fn view(&mut self) -> Element<Message> {
let tooltip_top = tooltip_builder(
"Tooltip at top",
&mut self.tooltip_top_button_state,
TooltipPosition::Top,
);
let tooltip_bottom = tooltip_builder(
"Tooltip at bottom",
&mut self.tooltip_bottom_button_state,
TooltipPosition::Bottom,
);
let tooltip_right = tooltip_builder(
"Tooltip at right",
&mut self.tooltip_right_button_state,
TooltipPosition::Right,
);
let tooltip_left = tooltip_builder(
"Tooltip at left",
&mut self.tooltip_left_button_state,
TooltipPosition::Left,
);
let fixed_tooltips = Row::with_children(vec![
tooltip_top.into(),
tooltip_bottom.into(),
tooltip_left.into(),
tooltip_right.into(),
])
.width(Length::Fill)
.height(Length::Fill)
.align_items(iced::Align::Center)
.spacing(120);
let cursor_tooltip_area = Tooltip::new(
Button::new(
&mut self.tooltip_cursor_button_state,
Container::new(Text::new("Tooltip follows cursor").size(40))
.center_y()
.center_x()
.width(Length::Fill)
.height(Length::Fill),
)
.on_press(Message)
.width(Length::Fill)
.height(Length::Fill),
tooltip(),
TooltipPosition::FollowCursor,
);
let content = Column::with_children(vec![
Container::new(fixed_tooltips)
.width(Length::Fill)
.height(Length::Fill)
.center_x()
.center_y()
.into(),
cursor_tooltip_area.into(),
])
.width(Length::Fill)
.height(Length::Fill);
Container::new(content)
.width(Length::Fill)
.height(Length::Fill)
.center_x()
.center_y()
.into()
}
}
fn tooltip_builder<'a>(
label: &str,
button_state: &'a mut button::State,
position: TooltipPosition,
) -> Container<'a, Message> {
Container::new(Tooltip::new(
Button::new(button_state, Text::new(label).size(40)).on_press(Message),
tooltip(),
position,
))
.center_x()
.center_y()
.width(Length::Fill)
.height(Length::Fill)
}
fn tooltip() -> Text {
Text::new("Tooltip").size(20)
}

3
graphics/src/widget.rs
View File

@ -20,6 +20,7 @@ pub mod scrollable;
pub mod slider;
pub mod svg;
pub mod text_input;
pub mod tooltip;
mod column;
mod row;
@ -48,6 +49,8 @@ pub use scrollable::Scrollable;
pub use slider::Slider;
#[doc(no_inline)]
pub use text_input::TextInput;
#[doc(no_inline)]
pub use tooltip::Tooltip;
pub use column::Column;
pub use image::Image;

37
graphics/src/widget/tooltip.rs Normal file
View File

@ -0,0 +1,37 @@
//! Decorate content and apply alignment.
use crate::defaults::Defaults;
use crate::{Backend, Renderer};
use iced_native::{Element, Layout, Point, Rectangle};
/// An element decorating some content.
///
/// This is an alias of an `iced_native` tooltip with a default
/// `Renderer`.
pub type Tooltip<'a, Message, Backend> =
iced_native::Tooltip<'a, Message, Renderer<Backend>>;
impl<B> iced_native::tooltip::Renderer for Renderer<B>
where
B: Backend,
{
type Style = ();
fn draw<Message>(
&mut self,
defaults: &Defaults,
cursor_position: Point,
content: &Element<'_, Message, Self>,
content_layout: Layout<'_>,
viewport: &Rectangle,
) -> Self::Output {
let (content, mouse_interaction) = content.draw(
self,
&defaults,
content_layout,
cursor_position,
viewport,
);
(content, mouse_interaction)
}
}

14
native/src/element.rs
View File

@ -259,8 +259,11 @@ where
pub fn overlay<'b>(
&'b mut self,
layout: Layout<'_>,
overlay_content_bounds: Option<Rectangle>,
cursor_position: Point,
) -> Option<overlay::Element<'b, Message, Renderer>> {
self.widget.overlay(layout)
self.widget
.overlay(layout, overlay_content_bounds, cursor_position)
}
}
@ -352,11 +355,13 @@ where
fn overlay(
&mut self,
layout: Layout<'_>,
overlay_content_bounds: Option<Rectangle>,
cursor_position: Point,
) -> Option<overlay::Element<'_, B, Renderer>> {
let mapper = &self.mapper;
self.widget
.overlay(layout)
.overlay(layout, overlay_content_bounds, cursor_position)
.map(move |overlay| overlay.map(mapper))
}
}
@ -440,7 +445,10 @@ where
fn overlay(
&mut self,
layout: Layout<'_>,
overlay_content_bounds: Option<Rectangle>,
cursor_position: Point,
) -> Option<overlay::Element<'_, Message, Renderer>> {
self.element.overlay(layout)
self.element
.overlay(layout, overlay_content_bounds, cursor_position)
}
}

2
native/src/overlay.rs
View File

@ -4,6 +4,7 @@ mod element;
pub mod menu;
pub use element::Element;
use iced_core::Rectangle;
pub use menu::Menu;
use crate::event::{self, Event};
@ -35,6 +36,7 @@ where
defaults: &Renderer::Defaults,
layout: Layout<'_>,
cursor_position: Point,
viewport: &Rectangle,
) -> Renderer::Output;
/// Computes the _layout_ hash of the [`Overlay`].

8
native/src/overlay/element.rs
View File

@ -1,3 +1,5 @@
use iced_core::Rectangle;
pub use crate::Overlay;
use crate::event::{self, Event};
@ -74,9 +76,10 @@ where
defaults: &Renderer::Defaults,
layout: Layout<'_>,
cursor_position: Point,
viewport: &Rectangle,
) -> Renderer::Output {
self.overlay
.draw(renderer, defaults, layout, cursor_position)
.draw(renderer, defaults, layout, cursor_position, viewport)
}
/// Computes the _layout_ hash of the [`Element`].
@ -145,9 +148,10 @@ where
defaults: &Renderer::Defaults,
layout: Layout<'_>,
cursor_position: Point,
viewport: &Rectangle,
) -> Renderer::Output {
self.content
.draw(renderer, defaults, layout, cursor_position)
.draw(renderer, defaults, layout, cursor_position, viewport)
}
fn hash_layout(&self, state: &mut Hasher, position: Point) {

1
native/src/overlay/menu.rs
View File

@ -239,6 +239,7 @@ where
defaults: &Renderer::Defaults,
layout: Layout<'_>,
cursor_position: Point,
_viewport: &Rectangle,
) -> Renderer::Output {
let primitives = self.container.draw(
renderer,

16
native/src/user_interface.rs
View File

@ -198,8 +198,11 @@ where
messages: &mut Vec<Message>,
) -> Vec<event::Status> {
let (base_cursor, overlay_statuses) = if let Some(mut overlay) =
self.root.overlay(Layout::new(&self.base.layout))
{
self.root.overlay(
Layout::new(&self.base.layout),
self.overlay.as_ref().map(|l| l.layout.bounds()),
cursor_position,
) {
let layer = Self::overlay_layer(
self.overlay.take(),
self.bounds,
@ -334,9 +337,11 @@ where
) -> Renderer::Output {
let viewport = Rectangle::with_size(self.bounds);
let overlay = if let Some(mut overlay) =
self.root.overlay(Layout::new(&self.base.layout))
{
let overlay = if let Some(mut overlay) = self.root.overlay(
Layout::new(&self.base.layout),
self.overlay.as_ref().map(|l| l.layout.bounds()),
cursor_position,
) {
let layer = Self::overlay_layer(
self.overlay.take(),
self.bounds,
@ -351,6 +356,7 @@ where
&Renderer::Defaults::default(),
Layout::new(&layer.layout),
cursor_position,
&viewport,
);
self.overlay = Some(layer);

5
native/src/widget.rs
View File

@ -36,6 +36,7 @@ pub mod space;
pub mod svg;
pub mod text;
pub mod text_input;
pub mod tooltip;
#[doc(no_inline)]
pub use button::Button;
@ -71,6 +72,8 @@ pub use svg::Svg;
pub use text::Text;
#[doc(no_inline)]
pub use text_input::TextInput;
#[doc(no_inline)]
pub use tooltip::Tooltip;
use crate::event::{self, Event};
use crate::layout;
@ -172,6 +175,8 @@ where
fn overlay(
&mut self,
_layout: Layout<'_>,
_overlay_content_bounds: Option<Rectangle>,
_cursor_position: Point,
) -> Option<overlay::Element<'_, Message, Renderer>> {
None
}

10
native/src/widget/column.rs
View File

@ -198,11 +198,19 @@ where
fn overlay(
&mut self,
layout: Layout<'_>,
overlay_content_bounds: Option<Rectangle>,
cursor_position: Point,
) -> Option<overlay::Element<'_, Message, Renderer>> {
self.children
.iter_mut()
.zip(layout.children())
.filter_map(|(child, layout)| child.widget.overlay(layout))
.filter_map(|(child, layout)| {
child.widget.overlay(
layout,
overlay_content_bounds,
cursor_position,
)
})
.next()
}
}

8
native/src/widget/container.rs
View File

@ -200,8 +200,14 @@ where
fn overlay(
&mut self,
layout: Layout<'_>,
overlay_content_bounds: Option<Rectangle>,
cursor_position: Point,
) -> Option<overlay::Element<'_, Message, Renderer>> {
self.content.overlay(layout.children().next().unwrap())
self.content.overlay(
layout.children().next().unwrap(),
overlay_content_bounds,
cursor_position,
)
}
}

6
native/src/widget/pane_grid.rs
View File

@ -558,11 +558,15 @@ where
fn overlay(
&mut self,
layout: Layout<'_>,
overlay_content_bounds: Option<Rectangle>,
cursor_position: Point,
) -> Option<overlay::Element<'_, Message, Renderer>> {
self.elements
.iter_mut()
.zip(layout.children())
.filter_map(|((_, pane), layout)| pane.overlay(layout))
.filter_map(|((_, pane), layout)| {
pane.overlay(layout, overlay_content_bounds, cursor_position)
})
.next()
}
}

7
native/src/widget/pane_grid/content.rs
View File

@ -1,3 +1,5 @@
use iced_core::Rectangle;
use crate::container;
use crate::event::{self, Event};
use crate::layout;
@ -189,6 +191,8 @@ where
pub(crate) fn overlay(
&mut self,
layout: Layout<'_>,
overlay_content_bounds: Option<Rectangle>,
cursor_position: Point,
) -> Option<overlay::Element<'_, Message, Renderer>> {
let body_layout = if self.title_bar.is_some() {
let mut children = layout.children();
@ -201,7 +205,8 @@ where
layout
};
self.body.overlay(body_layout)
self.body
.overlay(body_layout, overlay_content_bounds, cursor_position)
}
}

2
native/src/widget/pick_list.rs
View File

@ -274,6 +274,8 @@ where
fn overlay(
&mut self,
layout: Layout<'_>,
_overlay_content_bounds: Option<Rectangle>,
_cursor_position: Point,
) -> Option<overlay::Element<'_, Message, Renderer>> {
if *self.is_open {
let bounds = layout.bounds();

10
native/src/widget/row.rs
View File

@ -197,11 +197,19 @@ where
fn overlay(
&mut self,
layout: Layout<'_>,
overlay_content_bounds: Option<Rectangle>,
cursor_position: Point,
) -> Option<overlay::Element<'_, Message, Renderer>> {
self.children
.iter_mut()
.zip(layout.children())
.filter_map(|(child, layout)| child.widget.overlay(layout))
.filter_map(|(child, layout)| {
child.widget.overlay(
layout,
overlay_content_bounds,
cursor_position,
)
})
.next()
}
}

8
native/src/widget/scrollable.rs
View File

@ -401,11 +401,17 @@ where
fn overlay(
&mut self,
layout: Layout<'_>,
overlay_content_bounds: Option<Rectangle>,
cursor_position: Point,
) -> Option<overlay::Element<'_, Message, Renderer>> {
let Self { content, state, .. } = self;
content
.overlay(layout.children().next().unwrap())
.overlay(
layout.children().next().unwrap(),
overlay_content_bounds,
cursor_position,
)
.map(|overlay| {
let bounds = layout.bounds();
let content_layout = layout.children().next().unwrap();

300
native/src/widget/tooltip.rs Normal file
View File

@ -0,0 +1,300 @@
//! Display a widget over another.
use std::hash::Hash;
use iced_core::Rectangle;
use crate::{
event, layout, overlay, Clipboard, Element, Event, Hasher, Layout, Length,
Point, Size, Vector, Widget,
};
/// An element to display a widget over another.
#[allow(missing_debug_implementations)]
pub struct Tooltip<'a, Message, Renderer: self::Renderer> {
content: Element<'a, Message, Renderer>,
tooltip: Element<'a, Message, Renderer>,
tooltip_position: TooltipPosition,
}
impl<'a, Message, Renderer> Tooltip<'a, Message, Renderer>
where
Renderer: self::Renderer,
{
/// Creates an empty [`Tooltip`].
///
/// [`Tooltip`]: struct.Tooltip.html
pub fn new<T, H>(
content: T,
tooltip: H,
tooltip_position: TooltipPosition,
) -> Self
where
T: Into<Element<'a, Message, Renderer>>,
H: Into<Element<'a, Message, Renderer>>,
{
Tooltip {
content: content.into(),
tooltip: tooltip.into(),
tooltip_position,
}
}
}
/// The position of the tooltip. Defaults to following the cursor.
#[derive(Debug, PartialEq)]
pub enum TooltipPosition {
/// The tooltip will follow the cursor.
FollowCursor,
/// The tooltip will appear on the top of the widget.
Top,
/// The tooltip will appear on the bottom of the widget.
Bottom,
/// The tooltip will appear on the left of the widget.
Left,
/// The tooltip will appear on the right of the widget.
Right,
}
impl Default for TooltipPosition {
fn default() -> Self {
TooltipPosition::FollowCursor
}
}
impl<'a, Message, Renderer> Widget<Message, Renderer>
for Tooltip<'a, Message, Renderer>
where
Renderer: self::Renderer,
{
fn width(&self) -> Length {
self.content.width()
}
fn height(&self) -> Length {
self.content.height()
}
fn layout(
&self,
renderer: &Renderer,
limits: &layout::Limits,
) -> layout::Node {
self.content.layout(renderer, limits)
}
fn on_event(
&mut self,
event: Event,
layout: Layout<'_>,
cursor_position: Point,
messages: &mut Vec<Message>,
renderer: &Renderer,
clipboard: Option<&dyn Clipboard>,
) -> event::Status {
self.content.widget.on_event(
event,
layout,
cursor_position,
messages,
renderer,
clipboard,
)
}
fn draw(
&self,
renderer: &mut Renderer,
defaults: &Renderer::Defaults,
layout: Layout<'_>,
cursor_position: Point,
viewport: &Rectangle,
) -> Renderer::Output {
renderer.draw(
defaults,
cursor_position,
&self.content,
layout,
viewport,
)
}
fn hash_layout(&self, state: &mut Hasher) {
struct Marker;
std::any::TypeId::of::<Marker>().hash(state);
self.content.hash_layout(state);
}
fn overlay(
&mut self,
layout: Layout<'_>,
overlay_content_bounds: Option<Rectangle>,
cursor_position: Point,
) -> Option<overlay::Element<'_, Message, Renderer>> {
let bounds = layout.bounds();
if bounds.contains(cursor_position) {
let mut position = cursor_position;
if let Some(content_bounds) = overlay_content_bounds {
if TooltipPosition::FollowCursor != self.tooltip_position {
match self.tooltip_position {
TooltipPosition::Top | TooltipPosition::Bottom => {
let x = bounds.x + bounds.width * 0.5
- content_bounds.width * 0.5;
position = match self.tooltip_position {
TooltipPosition::Top => Point::new(
x,
bounds.y - content_bounds.height,
),
TooltipPosition::Bottom => Point::new(
x,
bounds.y
+ bounds.height
+ content_bounds.height,
),
_ => unreachable!(),
};
}
TooltipPosition::Left | TooltipPosition::Right => {
let y =
bounds.center_y() + content_bounds.height * 0.5;
position = match self.tooltip_position {
TooltipPosition::Left => Point::new(
bounds.x - content_bounds.width,
y,
),
TooltipPosition::Right => {
Point::new(bounds.x + bounds.width, y)
}
_ => unreachable!(),
};
}
_ => {}
}
}
}
Some(overlay::Element::new(
position,
Box::new(Overlay::new(&self.tooltip)),
))
} else {
None
}
}
}
struct Overlay<'a, Message, Renderer: self::Renderer> {
content: &'a Element<'a, Message, Renderer>,
}
impl<'a, Message, Renderer: self::Renderer> Overlay<'a, Message, Renderer>
where
Message: 'a,
Renderer: 'a,
{
pub fn new(content: &'a Element<'a, Message, Renderer>) -> Self {
Self { content }
}
}
impl<'a, Message, Renderer> crate::Overlay<Message, Renderer>
for Overlay<'a, Message, Renderer>
where
Renderer: self::Renderer,
{
fn layout(
&self,
renderer: &Renderer,
bounds: Size,
position: Point,
) -> layout::Node {
let space_below = bounds.height - position.y;
let space_above = position.y;
let limits = layout::Limits::new(
Size::ZERO,
Size::new(
bounds.width - position.x,
if space_below > space_above {
space_below
} else {
space_above
},
),
)
.width(self.content.width());
let mut node = self.content.layout(renderer, &limits);
node.move_to(position - Vector::new(0.0, node.size().height));
node
}
fn hash_layout(&self, state: &mut Hasher, position: Point) {
struct Marker;
std::any::TypeId::of::<Marker>().hash(state);
(position.x as u32).hash(state);
(position.y as u32).hash(state);
self.content.hash_layout(state);
}
fn draw(
&self,
renderer: &mut Renderer,
defaults: &Renderer::Defaults,
layout: Layout<'_>,
cursor_position: Point,
viewport: &Rectangle,
) -> Renderer::Output {
renderer.draw(
defaults,
cursor_position,
&self.content,
layout,
viewport,
)
}
}
/// The renderer of a [`Tooltip`].
///
/// Your [renderer] will need to implement this trait before being
/// able to use a [`Tooltip`] in your user interface.
///
/// [`Tooltip`]: struct.Tooltip.html
/// [renderer]: ../../renderer/index.html
pub trait Renderer: crate::Renderer {
/// The style supported by this renderer.
type Style: Default;
/// Draws a [`Tooltip`].
///
/// [`Tooltip`]: struct.Tooltip.html
fn draw<Message>(
&mut self,
defaults: &Self::Defaults,
cursor_position: Point,
content: &Element<'_, Message, Self>,
content_layout: Layout<'_>,
viewport: &Rectangle,
) -> Self::Output;
}
impl<'a, Message, Renderer> From<Tooltip<'a, Message, Renderer>>
for Element<'a, Message, Renderer>
where
Renderer: 'a + self::Renderer,
Message: 'a,
{
fn from(
column: Tooltip<'a, Message, Renderer>,
) -> Element<'a, Message, Renderer> {
Element::new(column)
}
}

5
src/widget.rs
View File

@ -17,7 +17,8 @@
mod platform {
pub use crate::renderer::widget::{
button, checkbox, container, pane_grid, pick_list, progress_bar, radio,
rule, scrollable, slider, text_input, Column, Row, Space, Text,
rule, scrollable, slider, text_input, tooltip, Column, Row, Space,
Text,
};
#[cfg(any(feature = "canvas", feature = "glow_canvas"))]
@ -52,7 +53,7 @@ mod platform {
button::Button, checkbox::Checkbox, container::Container, image::Image,
pane_grid::PaneGrid, pick_list::PickList, progress_bar::ProgressBar,
radio::Radio, rule::Rule, scrollable::Scrollable, slider::Slider,
svg::Svg, text_input::TextInput,
svg::Svg, text_input::TextInput, tooltip::Tooltip,
};
#[cfg(any(feature = "canvas", feature = "glow_canvas"))]

3
wgpu/src/widget.rs
View File

@ -20,6 +20,7 @@ pub mod rule;
pub mod scrollable;
pub mod slider;
pub mod text_input;
pub mod tooltip;
#[doc(no_inline)]
pub use button::Button;
@ -43,6 +44,8 @@ pub use scrollable::Scrollable;
pub use slider::Slider;
#[doc(no_inline)]
pub use text_input::TextInput;
#[doc(no_inline)]
pub use tooltip::Tooltip;
#[cfg(feature = "canvas")]
#[cfg_attr(docsrs, doc(cfg(feature = "canvas")))]

6
wgpu/src/widget/tooltip.rs Normal file
View File

@ -0,0 +1,6 @@
//! Display a widget over another.
/// A widget allowing the selection of a single value from a list of options.
pub type Tooltip<'a, Message> =
iced_native::Tooltip<'a, Message, crate::Renderer>;
pub use iced_native::tooltip::TooltipPosition;