vizia_core/views/
tooltip.rs

Help
1use crate::context::TreeProps;
2use crate::prelude::*;
3use crate::vg;
4
5/// A tooltip view.
6///
7/// Should be used with the [tooltip](crate::modifiers::ActionModifiers::tooltip) modifier.
8///
9/// # Example
10/// ```
11/// # use vizia_core::prelude::*;
12/// #
13/// # enum AppEvent {
14/// #     Action,
15/// # }
16/// #
17/// # let cx = &mut Context::default();
18/// #
19/// Button::new(cx, |cx| Label::new(cx, "Text"))
20///     .tooltip(|cx|{
21///         Tooltip::new(cx, |cx|{
22///             Label::new(cx, "Tooltip Text");
23///         })
24///     })
25
26#[derive(Lens)]
27pub struct Tooltip {
28    placement: Placement,
29    shift: Placement,
30    show_arrow: bool,
31    arrow_size: Length,
32}
33
34impl Tooltip {
35    /// Creates a new Tooltip view with the given content.
36    ///
37    /// Should be used with the [tooltip](crate::modifiers::ActionModifiers::tooltip) modifier.
38    ///
39    /// # Example
40    /// ```
41    /// # use vizia_core::prelude::*;
42    /// #
43    /// # enum AppEvent {
44    /// #     Action,
45    /// # }
46    /// #
47    /// # let cx = &mut Context::default();
48    /// #
49    /// Button::new(cx, |cx| Label::new(cx, "Text"))
50    ///     .tooltip(|cx|{
51    ///         Tooltip::new(cx, |cx|{
52    ///             Label::new(cx, "Tooltip Text");
53    ///         })
54    ///     })
55    /// ```
56    pub fn new(cx: &mut Context, content: impl FnOnce(&mut Context)) -> Handle<Self> {
57        Self {
58            placement: Placement::Top,
59            shift: Placement::Top,
60            show_arrow: true,
61            arrow_size: Length::Value(LengthValue::Px(8.0)),
62        }
63        .build(cx, |cx| {
64            Binding::new(cx, Tooltip::show_arrow, |cx, show_arrow| {
65                if show_arrow.get(cx) {
66                    Arrow::new(cx);
67                }
68            });
69            (content)(cx);
70        })
71        .z_index(110)
72        .hoverable(false)
73        .position_type(PositionType::Absolute)
74        .space(Pixels(0.0))
75        .on_build(|ex| {
76            ex.add_listener(move |tooltip: &mut Tooltip, ex, event| {
77                event.map(|window_event, _| match window_event {
78                    WindowEvent::MouseMove(x, y) => {
79                        if tooltip.placement == Placement::Cursor && !x.is_nan() && !y.is_nan() {
80                            let scale = ex.scale_factor();
81                            let parent = ex.parent();
82                            let parent_bounds = ex.cache.get_bounds(parent);
83                            if parent_bounds.contains_point(*x, *y) {
84                                ex.set_left(Pixels(
85                                    ((*x - parent_bounds.x) - ex.bounds().width() / 2.0) / scale,
86                                ));
87                                ex.set_top(Pixels((*y - parent_bounds.y) / scale));
88                            }
89                        }
90                    }
91
92                    _ => {}
93                });
94            });
95        })
96    }
97}
98
99impl View for Tooltip {
100    fn element(&self) -> Option<&'static str> {
101        Some("tooltip")
102    }
103
104    fn event(&mut self, cx: &mut EventContext, event: &mut Event) {
105        event.map(|window_event, _| match window_event {
106            // Reposition popup if there isn't enough room for it.
107            WindowEvent::GeometryChanged(_) => {
108                let parent = cx.parent();
109                let parent_bounds = cx.cache.get_bounds(parent);
110                let bounds = cx.bounds();
111                let window_bounds = cx.cache.get_bounds(cx.parent_window());
112
113                let arrow_size = self.arrow_size.to_px().unwrap() * cx.scale_factor();
114
115                let mut available = AvailablePlacement::all();
116
117                let top_start_bounds = BoundingBox::from_min_max(
118                    parent_bounds.left(),
119                    parent_bounds.top() - bounds.height() - arrow_size,
120                    parent_bounds.left() + bounds.width(),
121                    parent_bounds.top(),
122                );
123
124                available
125                    .set(AvailablePlacement::TOP_START, window_bounds.contains(&top_start_bounds));
126
127                let top_bounds = BoundingBox::from_min_max(
128                    parent_bounds.center().0 - bounds.width() / 2.0,
129                    parent_bounds.top() - bounds.height() - arrow_size,
130                    parent_bounds.center().0 + bounds.width() / 2.0,
131                    parent_bounds.top(),
132                );
133
134                available.set(AvailablePlacement::TOP, window_bounds.contains(&top_bounds));
135
136                let top_end_bounds = BoundingBox::from_min_max(
137                    parent_bounds.right() - bounds.width(),
138                    parent_bounds.top() - bounds.height() - arrow_size,
139                    parent_bounds.right(),
140                    parent_bounds.top(),
141                );
142
143                available.set(AvailablePlacement::TOP_END, window_bounds.contains(&top_end_bounds));
144
145                let bottom_start_bounds = BoundingBox::from_min_max(
146                    parent_bounds.left(),
147                    parent_bounds.bottom(),
148                    parent_bounds.left() + bounds.width(),
149                    parent_bounds.bottom() + bounds.height() + arrow_size,
150                );
151
152                available.set(
153                    AvailablePlacement::BOTTOM_START,
154                    window_bounds.contains(&bottom_start_bounds),
155                );
156
157                let bottom_bounds = BoundingBox::from_min_max(
158                    parent_bounds.center().0 - bounds.width() / 2.0,
159                    parent_bounds.bottom(),
160                    parent_bounds.center().0 + bounds.width() / 2.0,
161                    parent_bounds.bottom() + bounds.height() + arrow_size,
162                );
163
164                available.set(AvailablePlacement::BOTTOM, window_bounds.contains(&bottom_bounds));
165
166                let bottom_end_bounds = BoundingBox::from_min_max(
167                    parent_bounds.right() - bounds.width(),
168                    parent_bounds.bottom(),
169                    parent_bounds.right(),
170                    parent_bounds.bottom() + bounds.height() + arrow_size,
171                );
172
173                available.set(
174                    AvailablePlacement::BOTTOM_END,
175                    window_bounds.contains(&bottom_end_bounds),
176                );
177
178                let left_start_bounds = BoundingBox::from_min_max(
179                    parent_bounds.left() - bounds.width() - arrow_size,
180                    parent_bounds.top(),
181                    parent_bounds.left(),
182                    parent_bounds.top() + bounds.height(),
183                );
184
185                available.set(
186                    AvailablePlacement::LEFT_START,
187                    window_bounds.contains(&left_start_bounds),
188                );
189
190                let left_bounds = BoundingBox::from_min_max(
191                    parent_bounds.left() - bounds.width() - arrow_size,
192                    parent_bounds.center().1 - bounds.height() / 2.0,
193                    parent_bounds.left(),
194                    parent_bounds.center().1 + bounds.height() / 2.0,
195                );
196
197                available.set(AvailablePlacement::LEFT, window_bounds.contains(&left_bounds));
198
199                let left_end_bounds = BoundingBox::from_min_max(
200                    parent_bounds.left() - bounds.width() - arrow_size,
201                    parent_bounds.bottom() - bounds.height(),
202                    parent_bounds.left(),
203                    parent_bounds.bottom(),
204                );
205
206                available
207                    .set(AvailablePlacement::LEFT_END, window_bounds.contains(&left_end_bounds));
208
209                let right_start_bounds = BoundingBox::from_min_max(
210                    parent_bounds.right(),
211                    parent_bounds.top(),
212                    parent_bounds.right() + bounds.width() + arrow_size,
213                    parent_bounds.top() + bounds.height(),
214                );
215
216                available.set(
217                    AvailablePlacement::RIGHT_START,
218                    window_bounds.contains(&right_start_bounds),
219                );
220
221                let right_bounds = BoundingBox::from_min_max(
222                    parent_bounds.right(),
223                    parent_bounds.center().1 - bounds.height() / 2.0,
224                    parent_bounds.right() + bounds.width() + arrow_size,
225                    parent_bounds.center().1 + bounds.height() / 2.0,
226                );
227
228                available.set(AvailablePlacement::RIGHT, window_bounds.contains(&right_bounds));
229
230                let right_end_bounds = BoundingBox::from_min_max(
231                    parent_bounds.right(),
232                    parent_bounds.bottom() - bounds.height(),
233                    parent_bounds.right() + bounds.width() + arrow_size,
234                    parent_bounds.bottom(),
235                );
236
237                available
238                    .set(AvailablePlacement::RIGHT_END, window_bounds.contains(&right_end_bounds));
239
240                let scale = cx.scale_factor();
241
242                self.shift = self.placement.place(available);
243
244                let arrow_size = self.arrow_size.to_px().unwrap();
245
246                let translate = match self.shift {
247                    Placement::Top => (
248                        -(bounds.width() - parent_bounds.width()) / (2.0 * scale),
249                        -bounds.height() / scale - arrow_size,
250                    ),
251                    Placement::TopStart => (0.0, -bounds.height() / scale - arrow_size),
252                    Placement::TopEnd => (
253                        -(bounds.width() - parent_bounds.width()) / scale,
254                        -bounds.height() / scale - arrow_size,
255                    ),
256                    Placement::Bottom => (
257                        -(bounds.width() - parent_bounds.width()) / (2.0 * scale),
258                        parent_bounds.height() / scale + arrow_size,
259                    ),
260                    Placement::BottomStart => (0.0, parent_bounds.height() / scale + arrow_size),
261                    Placement::BottomEnd => (
262                        -(bounds.width() - parent_bounds.width()) / scale,
263                        parent_bounds.height() / scale + arrow_size,
264                    ),
265                    Placement::LeftStart => (-(bounds.width() / scale) - arrow_size, 0.0),
266                    Placement::Left => (
267                        -(bounds.width() / scale) - arrow_size,
268                        -(bounds.height() - parent_bounds.height()) / (2.0 * scale),
269                    ),
270                    Placement::LeftEnd => (
271                        -(bounds.width() / scale) - arrow_size,
272                        -(bounds.height() - parent_bounds.height()) / scale,
273                    ),
274                    Placement::RightStart => ((parent_bounds.width() / scale) + arrow_size, 0.0),
275                    Placement::Right => (
276                        (parent_bounds.width() / scale) + arrow_size,
277                        -(bounds.height() - parent_bounds.height()) / (2.0 * scale),
278                    ),
279                    Placement::RightEnd => (
280                        (parent_bounds.width() / scale) + arrow_size,
281                        -(bounds.height() - parent_bounds.height()) / scale,
282                    ),
283
284                    _ => (0.0, 0.0),
285                };
286
287                cx.set_translate((Pixels(translate.0.round()), Pixels(translate.1.round())));
288            }
289
290            _ => {}
291        });
292    }
293}
294
295impl Handle<'_, Tooltip> {
296    /// Sets the position where the tooltip should appear relative to its parent element.
297    /// Defaults to `Placement::Bottom`.
298    pub fn placement<U: Into<Placement>>(self, placement: impl Res<U>) -> Self {
299        self.bind(placement, |handle, val| {
300            let placement = val.get(&handle).into();
301            handle.modify(|tooltip| {
302                tooltip.placement = placement;
303                tooltip.shift = placement;
304            });
305        })
306    }
307
308    /// Sets whether the tooltip should include an arrow. Defaults to true.
309    pub fn arrow<U: Into<bool>>(self, show_arrow: impl Res<U>) -> Self {
310        self.bind(show_arrow, |handle, val| {
311            let show_arrow = val.get(&handle).into();
312            handle.modify(|tooltip| tooltip.show_arrow = show_arrow);
313        })
314    }
315
316    /// Sets the size of the tooltip arrow if enabled.
317    pub fn arrow_size<U: Into<Length>>(self, size: impl Res<U>) -> Self {
318        self.bind(size, |handle, val| {
319            let size = val.get(&handle).into();
320            handle.modify(|tooltip| tooltip.arrow_size = size);
321        })
322    }
323}
324
325/// An arrow view used by the Tooltip view.
326pub(crate) struct Arrow {}
327
328impl Arrow {
329    pub(crate) fn new(cx: &mut Context) -> Handle<Self> {
330        Self {}.build(cx, |_| {}).bind(Tooltip::shift, |mut handle, placement| {
331            let (t, b) = match placement.get(&handle) {
332                Placement::TopStart | Placement::Top | Placement::TopEnd => {
333                    (Percentage(100.0), Stretch(1.0))
334                }
335                Placement::BottomStart | Placement::Bottom | Placement::BottomEnd => {
336                    (Stretch(1.0), Percentage(100.0))
337                }
338                _ => (Stretch(1.0), Stretch(1.0)),
339            };
340
341            let (l, r) = match placement.get(&handle) {
342                Placement::LeftStart | Placement::Left | Placement::LeftEnd => {
343                    (Percentage(100.0), Stretch(1.0))
344                }
345                Placement::RightStart | Placement::Right | Placement::RightEnd => {
346                    (Stretch(1.0), Percentage(100.0))
347                }
348                Placement::TopStart | Placement::BottomStart => {
349                    // TODO: Use border radius
350                    (Pixels(8.0), Stretch(1.0))
351                }
352                Placement::TopEnd | Placement::BottomEnd => {
353                    // TODO: Use border radius
354                    (Stretch(1.0), Pixels(8.0))
355                }
356                _ => (Stretch(1.0), Stretch(1.0)),
357            };
358
359            handle = handle.top(t).bottom(b).left(l).right(r).position_type(PositionType::Absolute);
360
361            handle.bind(Tooltip::arrow_size, move |handle, arrow_size| {
362                let arrow_size = arrow_size.get(&handle).to_px().unwrap_or(8.0);
363                let (w, h) = match placement.get(&handle) {
364                    Placement::Top
365                    | Placement::Bottom
366                    | Placement::TopStart
367                    | Placement::BottomStart
368                    | Placement::TopEnd
369                    | Placement::BottomEnd => (Pixels(arrow_size * 2.0), Pixels(arrow_size)),
370
371                    _ => (Pixels(arrow_size), Pixels(arrow_size * 2.0)),
372                };
373
374                handle.width(w).height(h);
375            });
376        })
377    }
378}
379
380impl View for Arrow {
381    fn element(&self) -> Option<&'static str> {
382        Some("arrow")
383    }
384    fn draw(&self, cx: &mut DrawContext, canvas: &Canvas) {
385        let bounds = cx.bounds();
386        let mut path = vg::Path::new();
387        match Tooltip::shift.get(cx) {
388            Placement::Bottom | Placement::BottomStart | Placement::BottomEnd => {
389                path.move_to(bounds.bottom_left());
390                path.line_to(bounds.center_top());
391                path.line_to(bounds.bottom_right());
392                path.line_to(bounds.bottom_left());
393            }
394
395            Placement::Top | Placement::TopStart | Placement::TopEnd => {
396                path.move_to(bounds.top_left());
397                path.line_to(bounds.center_bottom());
398                path.line_to(bounds.top_right());
399                path.line_to(bounds.top_left());
400            }
401
402            Placement::Left | Placement::LeftStart | Placement::LeftEnd => {
403                path.move_to(bounds.top_left());
404                path.line_to(bounds.center_right());
405                path.line_to(bounds.bottom_left());
406                path.line_to(bounds.top_left());
407            }
408
409            Placement::Right | Placement::RightStart | Placement::RightEnd => {
410                path.move_to(bounds.top_right());
411                path.line_to(bounds.center_left());
412                path.line_to(bounds.bottom_right());
413                path.line_to(bounds.top_right());
414            }
415
416            _ => {}
417        }
418        path.close();
419
420        let bg = cx.background_color();
421
422        let mut paint = vg::Paint::default();
423        paint.set_color(bg);
424        canvas.draw_path(&path, &paint);
425    }
426}
vizia_core/views/tooltip.rs

vizia_core/views/
tooltip.rs
