vizia_core/views/
popup.rs

Help
1use crate::context::TreeProps;
2use crate::prelude::*;
3use bitflags::bitflags;
4
5use crate::vg;
6
7/// A model which can be used by views which contain a popup.
8#[derive(Debug, Default, Data, Lens, Clone)]
9pub struct PopupData {
10    /// The open state of the popup.
11    pub is_open: bool,
12}
13
14impl From<PopupData> for bool {
15    fn from(value: PopupData) -> Self {
16        value.is_open
17    }
18}
19
20impl Model for PopupData {
21    fn event(&mut self, _: &mut EventContext, event: &mut Event) {
22        event.map(|popup_event, meta| match popup_event {
23            PopupEvent::Open => {
24                self.is_open = true;
25                meta.consume();
26            }
27
28            PopupEvent::Close => {
29                self.is_open = false;
30                meta.consume();
31            }
32
33            PopupEvent::Switch => {
34                self.is_open ^= true;
35                meta.consume();
36            }
37        });
38    }
39}
40
41/// Events used by the [Popup] view.
42#[derive(Debug)]
43pub enum PopupEvent {
44    /// Opens the popup.
45    Open,
46    /// Closes the popup.
47    Close,
48    /// Switches the state of the popup from closed to open or open to closed.
49    Switch,
50}
51
52/// A view for displaying popup content.
53#[derive(Lens)]
54pub struct Popup {
55    placement: Placement,
56    show_arrow: bool,
57    arrow_size: Length,
58    should_reposition: bool,
59}
60
61impl Popup {
62    /// Creates a new [Popup] view.
63    pub fn new(cx: &mut Context, content: impl FnOnce(&mut Context)) -> Handle<Self> {
64        Self {
65            placement: Placement::Bottom,
66            show_arrow: true,
67            arrow_size: Length::Value(LengthValue::Px(0.0)),
68            should_reposition: true,
69        }
70        .build(cx, |cx| {
71            (content)(cx);
72            Binding::new(cx, Popup::show_arrow, |cx, show_arrow| {
73                if show_arrow.get(cx) {
74                    Arrow::new(cx);
75                }
76            });
77        })
78        .position_type(PositionType::Absolute)
79        .space(Pixels(0.0))
80    }
81}
82
83impl View for Popup {
84    fn element(&self) -> Option<&'static str> {
85        Some("popup")
86    }
87
88    fn event(&mut self, cx: &mut EventContext, event: &mut Event) {
89        event.map(|window_event, _| match window_event {
90            // Reposition popup if there isn't enough room for it.
91            WindowEvent::GeometryChanged(_) => {
92                let parent = cx.parent();
93                let parent_bounds = cx.cache.get_bounds(parent);
94                let bounds = cx.bounds();
95                let window_bounds = cx.cache.get_bounds(cx.parent_window());
96                let scale = cx.scale_factor();
97                let arrow_size = self.arrow_size.to_px().unwrap() * cx.scale_factor();
98
99                let shift = if self.should_reposition {
100                    let mut available = AvailablePlacement::all();
101
102                    let top_start_bounds = BoundingBox::from_min_max(
103                        parent_bounds.left(),
104                        parent_bounds.top() - bounds.height() - arrow_size,
105                        parent_bounds.left() + bounds.width(),
106                        parent_bounds.top(),
107                    );
108
109                    available.set(
110                        AvailablePlacement::TOP_START,
111                        window_bounds.contains(&top_start_bounds),
112                    );
113
114                    let top_bounds = BoundingBox::from_min_max(
115                        parent_bounds.center().0 - bounds.width() / 2.0,
116                        parent_bounds.top() - bounds.height() - arrow_size,
117                        parent_bounds.center().0 + bounds.width() / 2.0,
118                        parent_bounds.top(),
119                    );
120
121                    available.set(AvailablePlacement::TOP, window_bounds.contains(&top_bounds));
122
123                    let top_end_bounds = BoundingBox::from_min_max(
124                        parent_bounds.right() - bounds.width(),
125                        parent_bounds.top() - bounds.height() - arrow_size,
126                        parent_bounds.right(),
127                        parent_bounds.top(),
128                    );
129
130                    available
131                        .set(AvailablePlacement::TOP_END, window_bounds.contains(&top_end_bounds));
132
133                    let bottom_start_bounds = BoundingBox::from_min_max(
134                        parent_bounds.left(),
135                        parent_bounds.bottom(),
136                        parent_bounds.left() + bounds.width(),
137                        parent_bounds.bottom() + bounds.height() + arrow_size,
138                    );
139
140                    available.set(
141                        AvailablePlacement::BOTTOM_START,
142                        window_bounds.contains(&bottom_start_bounds),
143                    );
144
145                    let bottom_bounds = BoundingBox::from_min_max(
146                        parent_bounds.center().0 - bounds.width() / 2.0,
147                        parent_bounds.bottom(),
148                        parent_bounds.center().0 + bounds.width() / 2.0,
149                        parent_bounds.bottom() + bounds.height() + arrow_size,
150                    );
151
152                    available
153                        .set(AvailablePlacement::BOTTOM, window_bounds.contains(&bottom_bounds));
154
155                    let bottom_end_bounds = BoundingBox::from_min_max(
156                        parent_bounds.right() - bounds.width(),
157                        parent_bounds.bottom(),
158                        parent_bounds.right(),
159                        parent_bounds.bottom() + bounds.height() + arrow_size,
160                    );
161
162                    available.set(
163                        AvailablePlacement::BOTTOM_END,
164                        window_bounds.contains(&bottom_end_bounds),
165                    );
166
167                    let left_start_bounds = BoundingBox::from_min_max(
168                        parent_bounds.left() - bounds.width() - arrow_size,
169                        parent_bounds.top(),
170                        parent_bounds.left(),
171                        parent_bounds.top() + bounds.height(),
172                    );
173
174                    available.set(
175                        AvailablePlacement::LEFT_START,
176                        window_bounds.contains(&left_start_bounds),
177                    );
178
179                    let left_bounds = BoundingBox::from_min_max(
180                        parent_bounds.left() - bounds.width() - arrow_size,
181                        parent_bounds.center().1 - bounds.height() / 2.0,
182                        parent_bounds.left(),
183                        parent_bounds.center().1 + bounds.height() / 2.0,
184                    );
185
186                    available.set(AvailablePlacement::LEFT, window_bounds.contains(&left_bounds));
187
188                    let left_end_bounds = BoundingBox::from_min_max(
189                        parent_bounds.left() - bounds.width() - arrow_size,
190                        parent_bounds.bottom() - bounds.height(),
191                        parent_bounds.left(),
192                        parent_bounds.bottom(),
193                    );
194
195                    available.set(
196                        AvailablePlacement::LEFT_END,
197                        window_bounds.contains(&left_end_bounds),
198                    );
199
200                    let right_start_bounds = BoundingBox::from_min_max(
201                        parent_bounds.right(),
202                        parent_bounds.top(),
203                        parent_bounds.right() + bounds.width() + arrow_size,
204                        parent_bounds.top() + bounds.height(),
205                    );
206
207                    available.set(
208                        AvailablePlacement::RIGHT_START,
209                        window_bounds.contains(&right_start_bounds),
210                    );
211
212                    let right_bounds = BoundingBox::from_min_max(
213                        parent_bounds.right(),
214                        parent_bounds.center().1 - bounds.height() / 2.0,
215                        parent_bounds.right() + bounds.width() + arrow_size,
216                        parent_bounds.center().1 + bounds.height() / 2.0,
217                    );
218
219                    available.set(AvailablePlacement::RIGHT, window_bounds.contains(&right_bounds));
220
221                    let right_end_bounds = BoundingBox::from_min_max(
222                        parent_bounds.right(),
223                        parent_bounds.bottom() - bounds.height(),
224                        parent_bounds.right() + bounds.width() + arrow_size,
225                        parent_bounds.bottom(),
226                    );
227
228                    available.set(
229                        AvailablePlacement::RIGHT_END,
230                        window_bounds.contains(&right_end_bounds),
231                    );
232
233                    self.placement.place(available)
234                } else {
235                    if let Some(first_child) = cx.tree.get_layout_first_child(cx.current) {
236                        let mut child_bounds = cx.cache.get_bounds(first_child);
237                        child_bounds.h = window_bounds.bottom()
238                            - parent_bounds.bottom()
239                            - arrow_size * scale
240                            - 8.0;
241                        cx.style.max_height.insert(first_child, Pixels(child_bounds.h / scale));
242                    }
243                    self.placement
244                };
245
246                let arrow_size = self.arrow_size.to_px().unwrap();
247
248                let translate = match shift {
249                    Placement::Top => (
250                        -(bounds.width() - parent_bounds.width()) / (2.0 * scale),
251                        -bounds.height() / scale - arrow_size,
252                    ),
253                    Placement::TopStart => (0.0, -bounds.height() / scale - arrow_size),
254                    Placement::TopEnd => (
255                        -(bounds.width() - parent_bounds.width()) / scale,
256                        -bounds.height() / scale - arrow_size,
257                    ),
258                    Placement::Bottom => (
259                        -(bounds.width() - parent_bounds.width()) / (2.0 * scale),
260                        parent_bounds.height() / scale + arrow_size,
261                    ),
262                    Placement::BottomStart => (0.0, parent_bounds.height() / scale + arrow_size),
263                    Placement::BottomEnd => (
264                        -(bounds.width() - parent_bounds.width()) / scale,
265                        parent_bounds.height() / scale + arrow_size,
266                    ),
267                    Placement::LeftStart => (-(bounds.width() / scale) - arrow_size, 0.0),
268                    Placement::Left => (
269                        -(bounds.width() / scale) - arrow_size,
270                        -(bounds.height() - parent_bounds.height()) / (2.0 * scale),
271                    ),
272                    Placement::LeftEnd => (
273                        -(bounds.width() / scale) - arrow_size,
274                        -(bounds.height() - parent_bounds.height()) / scale,
275                    ),
276                    Placement::RightStart => ((parent_bounds.width() / scale) + arrow_size, 0.0),
277                    Placement::Right => (
278                        (parent_bounds.width() / scale) + arrow_size,
279                        -(bounds.height() - parent_bounds.height()) / (2.0 * scale),
280                    ),
281                    Placement::RightEnd => (
282                        (parent_bounds.width() / scale) + arrow_size,
283                        -(bounds.height() - parent_bounds.height()) / scale,
284                    ),
285
286                    _ => (0.0, 0.0),
287                };
288                cx.set_translate((Pixels(translate.0.round()), Pixels(translate.1.round())));
289            }
290
291            _ => {}
292        });
293    }
294}
295
296bitflags! {
297    #[derive(Debug, Clone, Copy)]
298    pub(crate) struct AvailablePlacement: u16 {
299        const TOP_START = 1 << 0;
300        const TOP = 1 << 1;
301        const TOP_END = 1 << 2;
302        const LEFT_START = 1 << 3;
303        const LEFT = 1 << 4;
304        const LEFT_END = 1 << 5;
305        const BOTTOM_START = 1 << 6;
306        const BOTTOM = 1 << 7;
307        const BOTTOM_END = 1 << 8;
308        const RIGHT_START = 1 << 9;
309        const RIGHT = 1 << 10;
310        const RIGHT_END = 1 << 11;
311    }
312}
313
314impl AvailablePlacement {
315    fn can_place(&self, placement: Placement) -> bool {
316        match placement {
317            Placement::Bottom => self.contains(AvailablePlacement::BOTTOM),
318            Placement::BottomStart => self.contains(AvailablePlacement::BOTTOM_START),
319            Placement::BottomEnd => self.contains(AvailablePlacement::BOTTOM_END),
320            Placement::Top => self.contains(AvailablePlacement::TOP),
321            Placement::TopStart => self.contains(AvailablePlacement::TOP_START),
322            Placement::TopEnd => self.contains(AvailablePlacement::TOP_END),
323            Placement::Left => self.contains(AvailablePlacement::LEFT),
324            Placement::LeftStart => self.contains(AvailablePlacement::LEFT_START),
325            Placement::LeftEnd => self.contains(AvailablePlacement::LEFT_END),
326            Placement::Right => self.contains(AvailablePlacement::RIGHT),
327            Placement::RightStart => self.contains(AvailablePlacement::RIGHT_START),
328            Placement::RightEnd => self.contains(AvailablePlacement::RIGHT_END),
329            _ => false,
330        }
331    }
332}
333
334impl Placement {
335    fn from_int(int: u16) -> Placement {
336        match int {
337            0 => Placement::TopStart,
338            1 => Placement::Top,
339            2 => Placement::TopEnd,
340            3 => Placement::BottomStart,
341            4 => Placement::Bottom,
342            5 => Placement::BottomEnd,
343            6 => Placement::RightStart,
344            7 => Placement::Right,
345            8 => Placement::RightEnd,
346            9 => Placement::LeftStart,
347            10 => Placement::Left,
348            11 => Placement::LeftEnd,
349            12 => Placement::Over,
350            _ => Placement::Cursor,
351        }
352    }
353
354    pub(crate) fn place(&self, available: AvailablePlacement) -> Placement {
355        if *self == Placement::Over || *self == Placement::Cursor {
356            return *self;
357        }
358
359        if available.is_empty() {
360            return Placement::Over;
361        }
362
363        let mut placement = *self;
364
365        while !available.can_place(placement) {
366            placement = placement.next(*self);
367        }
368
369        placement
370    }
371
372    fn next(&self, original: Self) -> Self {
373        const TOP_START: [u16; 12] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
374        const TOP: [u16; 12] = [2, 0, 4, 5, 3, 7, 8, 6, 10, 11, 9, 12];
375        const TOP_END: [u16; 12] = [5, 0, 1, 8, 3, 4, 11, 6, 7, 12, 9, 10];
376        const BOTTOM_START: [u16; 12] = [1, 2, 6, 4, 5, 0, 7, 8, 9, 10, 11, 12];
377        const BOTTOM: [u16; 12] = [2, 0, 7, 5, 3, 1, 8, 6, 10, 11, 9, 12];
378        const BOTTOM_END: [u16; 12] = [8, 0, 1, 2, 3, 4, 11, 6, 7, 12, 9, 10];
379        const LEFT_START: [u16; 12] = [1, 2, 12, 4, 5, 0, 7, 8, 3, 10, 11, 6];
380        const LEFT: [u16; 12] = [2, 0, 12, 5, 3, 1, 8, 6, 4, 11, 9, 7];
381        const LEFT_END: [u16; 12] = [12, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
382        const RIGHT_START: [u16; 12] = [1, 2, 12, 4, 5, 0, 7, 8, 9, 10, 11, 3];
383        const RIGHT: [u16; 12] = [2, 0, 12, 5, 3, 1, 8, 6, 10, 11, 9, 4];
384        const RIGHT_END: [u16; 12] = [12, 0, 1, 2, 3, 4, 11, 6, 7, 5, 9, 10];
385
386        let states = match original {
387            Placement::TopStart => TOP_START,
388            Placement::Top => TOP,
389            Placement::TopEnd => TOP_END,
390            Placement::BottomStart => BOTTOM_START,
391            Placement::Bottom => BOTTOM,
392            Placement::BottomEnd => BOTTOM_END,
393            Placement::RightStart => RIGHT_START,
394            Placement::Right => RIGHT,
395            Placement::RightEnd => RIGHT_END,
396            Placement::LeftStart => LEFT_START,
397            Placement::Left => LEFT,
398            Placement::LeftEnd => LEFT_END,
399            _ => unreachable!(),
400        };
401
402        Placement::from_int(states[*self as usize])
403    }
404}
405
406impl Handle<'_, Popup> {
407    /// Sets the position where the popup should appear relative to its parent element.
408    /// Defaults to `Placement::Bottom`.
409    pub fn placement(self, placement: impl Res<Placement>) -> Self {
410        self.bind(placement, |handle, placement| {
411            let placement = placement.get(&handle);
412            handle.modify(|popup| {
413                popup.placement = placement;
414            });
415        })
416    }
417
418    /// Sets whether the popup should include an arrow. Defaults to true.
419    pub fn show_arrow(self, show_arrow: impl Res<bool>) -> Self {
420        self.bind(show_arrow, |handle, show_arrow| {
421            let show_arrow = show_arrow.get(&handle);
422            handle.modify(|popup| popup.show_arrow = show_arrow);
423        })
424    }
425
426    /// Sets the size of the popup arrow, or gap if the arrow is hidden.
427    pub fn arrow_size<U: Into<Length>>(self, size: impl Res<U>) -> Self {
428        self.bind(size, |handle, size| {
429            let size = size.get(&handle).into();
430            handle.modify(|popup| popup.arrow_size = size);
431        })
432    }
433
434    /// Set to whether the popup should reposition to always be visible.
435    pub fn should_reposition(self, should_reposition: impl Res<bool>) -> Self {
436        self.bind(should_reposition, |handle, should_reposition| {
437            let should_reposition = should_reposition.get(&handle);
438            handle.modify(|popup| popup.should_reposition = should_reposition);
439        })
440    }
441
442    /// Registers a callback for when the user clicks off of the popup, usually with the intent of
443    /// closing it.
444    pub fn on_blur<F>(self, f: F) -> Self
445    where
446        F: 'static + Fn(&mut EventContext),
447    {
448        let focus_event = Box::new(f);
449        self.cx.with_current(self.entity, |cx| {
450            cx.add_listener(move |_: &mut Popup, cx, event| {
451                event.map(|window_event, meta| match window_event {
452                    WindowEvent::MouseDown(_) => {
453                        if meta.origin != cx.current() {
454                            // Check if the mouse was pressed outside of any descendants
455                            if !cx.hovered.is_descendant_of(cx.tree, cx.current) {
456                                (focus_event)(cx);
457                                meta.consume();
458                            }
459                        }
460                    }
461
462                    WindowEvent::KeyDown(code, _) => {
463                        if *code == Code::Escape {
464                            (focus_event)(cx);
465                        }
466                    }
467
468                    _ => {}
469                });
470            });
471        });
472
473        self
474    }
475}
476
477/// An arrow view used by the Popup view.
478pub(crate) struct Arrow {}
479
480impl Arrow {
481    pub(crate) fn new(cx: &mut Context) -> Handle<Self> {
482        Self {}.build(cx, |_| {}).position_type(PositionType::Absolute).bind(
483            Popup::placement,
484            |mut handle, placement| {
485                let (t, b) = match placement.get(&handle) {
486                    Placement::TopStart | Placement::Top | Placement::TopEnd => {
487                        (Percentage(100.0), Stretch(1.0))
488                    }
489                    Placement::BottomStart | Placement::Bottom | Placement::BottomEnd => {
490                        (Stretch(1.0), Percentage(100.0))
491                    }
492                    _ => (Stretch(1.0), Stretch(1.0)),
493                };
494
495                let (l, r) = match placement.get(&handle) {
496                    Placement::LeftStart | Placement::Left | Placement::LeftEnd => {
497                        (Percentage(100.0), Stretch(1.0))
498                    }
499                    Placement::RightStart | Placement::Right | Placement::RightEnd => {
500                        (Stretch(1.0), Percentage(100.0))
501                    }
502                    Placement::TopStart | Placement::BottomStart => {
503                        // TODO: Use border radius
504                        (Pixels(8.0), Stretch(1.0))
505                    }
506                    Placement::TopEnd | Placement::BottomEnd => {
507                        // TODO: Use border radius
508                        (Stretch(1.0), Pixels(8.0))
509                    }
510                    _ => (Stretch(1.0), Stretch(1.0)),
511                };
512
513                handle = handle
514                    .top(t)
515                    .bottom(b)
516                    .left(l)
517                    .right(r)
518                    .position_type(PositionType::Absolute)
519                    .hoverable(false);
520
521                handle.bind(Popup::arrow_size, move |handle, arrow_size| {
522                    let arrow_size = arrow_size.get(&handle).to_px().unwrap_or(8.0);
523                    let (w, h) = match placement.get(&handle) {
524                        Placement::Top
525                        | Placement::Bottom
526                        | Placement::TopStart
527                        | Placement::BottomStart
528                        | Placement::TopEnd
529                        | Placement::BottomEnd => (Pixels(arrow_size * 2.0), Pixels(arrow_size)),
530
531                        _ => (Pixels(arrow_size), Pixels(arrow_size * 2.0)),
532                    };
533
534                    handle.width(w).height(h);
535                });
536            },
537        )
538    }
539}
540
541impl View for Arrow {
542    fn element(&self) -> Option<&'static str> {
543        Some("arrow")
544    }
545    fn draw(&self, cx: &mut DrawContext, canvas: &Canvas) {
546        let bounds = cx.bounds();
547        let mut path = vg::Path::new();
548        match Popup::placement.get(cx) {
549            Placement::Bottom | Placement::BottomStart | Placement::BottomEnd => {
550                path.move_to(bounds.bottom_left());
551                path.line_to(bounds.center_top());
552                path.line_to(bounds.bottom_right());
553                path.line_to(bounds.bottom_left());
554            }
555
556            Placement::Top | Placement::TopStart | Placement::TopEnd => {
557                path.move_to(bounds.top_left());
558                path.line_to(bounds.center_bottom());
559                path.line_to(bounds.top_right());
560                path.line_to(bounds.top_left());
561            }
562
563            Placement::Left | Placement::LeftStart | Placement::LeftEnd => {
564                path.move_to(bounds.top_left());
565                path.line_to(bounds.center_right());
566                path.line_to(bounds.bottom_left());
567                path.line_to(bounds.top_left());
568            }
569
570            Placement::Right | Placement::RightStart | Placement::RightEnd => {
571                path.move_to(bounds.top_right());
572                path.line_to(bounds.center_left());
573                path.line_to(bounds.bottom_right());
574                path.line_to(bounds.top_right());
575            }
576
577            _ => {}
578        }
579        path.close();
580
581        let bg = cx.background_color();
582        let mut paint = vg::Paint::default();
583        paint.set_color(bg);
584        canvas.draw_path(&path, &paint);
585    }
586}
vizia_core/views/popup.rs

vizia_core/views/
popup.rs
