cosmic/widget/dropdown/multi/
menu.rs

1use super::Model;
2pub use crate::widget::dropdown::menu::{Appearance, StyleSheet};
3
4use crate::widget::Container;
5use iced_core::event::{self, Event};
6use iced_core::layout::{self, Layout};
7use iced_core::text::{self, Text};
8use iced_core::widget::Tree;
9use iced_core::{
10    Border, Clipboard, Element, Length, Padding, Pixels, Point, Rectangle, Renderer, Shadow, Shell,
11    Size, Vector, Widget, alignment, mouse, overlay, renderer, svg, touch,
12};
13use iced_widget::scrollable::Scrollable;
14
15/// A dropdown menu with multiple lists.
16#[must_use]
17pub struct Menu<'a, S, Item, Message>
18where
19    S: AsRef<str>,
20{
21    state: &'a mut State,
22    options: &'a Model<S, Item>,
23    hovered_option: &'a mut Option<Item>,
24    selected_option: Option<&'a Item>,
25    on_selected: Box<dyn FnMut(Item) -> Message + 'a>,
26    on_option_hovered: Option<&'a dyn Fn(Item) -> Message>,
27    width: f32,
28    padding: Padding,
29    text_size: Option<f32>,
30    text_line_height: text::LineHeight,
31    style: (),
32}
33
34impl<'a, S, Item, Message: 'a> Menu<'a, S, Item, Message>
35where
36    S: AsRef<str>,
37    Item: Clone + PartialEq,
38{
39    /// Creates a new [`Menu`] with the given [`State`], a list of options, and
40    /// the message to produced when an option is selected.
41    pub(super) fn new(
42        state: &'a mut State,
43        options: &'a Model<S, Item>,
44        hovered_option: &'a mut Option<Item>,
45        selected_option: Option<&'a Item>,
46        on_selected: impl FnMut(Item) -> Message + 'a,
47        on_option_hovered: Option<&'a dyn Fn(Item) -> Message>,
48    ) -> Self {
49        Menu {
50            state,
51            options,
52            hovered_option,
53            selected_option,
54            on_selected: Box::new(on_selected),
55            on_option_hovered,
56            width: 0.0,
57            padding: Padding::ZERO,
58            text_size: None,
59            text_line_height: text::LineHeight::Absolute(Pixels::from(16.0)),
60            style: Default::default(),
61        }
62    }
63
64    /// Sets the width of the [`Menu`].
65    pub fn width(mut self, width: f32) -> Self {
66        self.width = width;
67        self
68    }
69
70    /// Sets the [`Padding`] of the [`Menu`].
71    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
72        self.padding = padding.into();
73        self
74    }
75
76    /// Sets the text size of the [`Menu`].
77    pub fn text_size(mut self, text_size: impl Into<Pixels>) -> Self {
78        self.text_size = Some(text_size.into().0);
79        self
80    }
81
82    /// Sets the text [`LineHeight`] of the [`Menu`].
83    pub fn text_line_height(mut self, line_height: impl Into<text::LineHeight>) -> Self {
84        self.text_line_height = line_height.into();
85        self
86    }
87
88    /// Turns the [`Menu`] into an overlay [`Element`] at the given target
89    /// position.
90    ///
91    /// The `target_height` will be used to display the menu either on top
92    /// of the target or under it, depending on the screen position and the
93    /// dimensions of the [`Menu`].
94    #[must_use]
95    pub fn overlay(
96        self,
97        position: Point,
98        target_height: f32,
99    ) -> overlay::Element<'a, Message, crate::Theme, crate::Renderer> {
100        overlay::Element::new(Box::new(Overlay::new(self, target_height, position)))
101    }
102}
103
104/// The local state of a [`Menu`].
105#[must_use]
106#[derive(Debug)]
107pub(super) struct State {
108    tree: Tree,
109}
110
111impl State {
112    /// Creates a new [`State`] for a [`Menu`].
113    pub fn new() -> Self {
114        Self {
115            tree: Tree::empty(),
116        }
117    }
118}
119
120impl Default for State {
121    fn default() -> Self {
122        Self::new()
123    }
124}
125
126struct Overlay<'a, Message> {
127    state: &'a mut Tree,
128    container: Container<'a, Message, crate::Theme, crate::Renderer>,
129    width: f32,
130    target_height: f32,
131    style: (),
132    position: Point,
133}
134
135impl<'a, Message: 'a> Overlay<'a, Message> {
136    pub fn new<S: AsRef<str>, Item: Clone + PartialEq>(
137        menu: Menu<'a, S, Item, Message>,
138        target_height: f32,
139        position: Point,
140    ) -> Self {
141        let Menu {
142            state,
143            options,
144            hovered_option,
145            selected_option,
146            on_selected,
147            on_option_hovered,
148            width,
149            padding,
150            text_size,
151            text_line_height,
152            style,
153        } = menu;
154
155        let mut container = Container::new(Scrollable::new(
156            Container::new(InnerList {
157                options,
158                hovered_option,
159                selected_option,
160                on_selected,
161                on_option_hovered,
162                padding,
163                text_size,
164                text_line_height,
165            })
166            .padding(padding),
167        ))
168        .class(crate::style::Container::Dropdown);
169
170        state.tree.diff(&mut container as &mut dyn Widget<_, _, _>);
171
172        Self {
173            state: &mut state.tree,
174            container,
175            width,
176            target_height,
177            style,
178            position,
179        }
180    }
181}
182
183impl<Message> iced_core::Overlay<Message, crate::Theme, crate::Renderer> for Overlay<'_, Message> {
184    fn layout(&mut self, renderer: &crate::Renderer, bounds: Size) -> layout::Node {
185        let position = self.position;
186        let space_below = bounds.height - (position.y + self.target_height);
187        let space_above = position.y;
188
189        let limits = layout::Limits::new(
190            Size::ZERO,
191            Size::new(
192                bounds.width - position.x,
193                if space_below > space_above {
194                    space_below
195                } else {
196                    space_above
197                },
198            ),
199        )
200        .width(self.width);
201
202        let node = self.container.layout(self.state, renderer, &limits);
203
204        let node_size = node.size();
205        node.move_to(if space_below > space_above {
206            position + Vector::new(0.0, self.target_height)
207        } else {
208            position - Vector::new(0.0, node_size.height)
209        })
210    }
211
212    fn update(
213        &mut self,
214        event: &Event,
215        layout: Layout<'_>,
216        cursor: mouse::Cursor,
217        renderer: &crate::Renderer,
218        clipboard: &mut dyn Clipboard,
219        shell: &mut Shell<'_, Message>,
220    ) {
221        let bounds = layout.bounds();
222
223        self.container.update(
224            self.state, event, layout, cursor, renderer, clipboard, shell, &bounds,
225        )
226    }
227
228    fn mouse_interaction(
229        &self,
230        layout: Layout<'_>,
231        cursor: mouse::Cursor,
232        renderer: &crate::Renderer,
233    ) -> mouse::Interaction {
234        self.container
235            .mouse_interaction(self.state, layout, cursor, &layout.bounds(), renderer)
236    }
237
238    fn draw(
239        &self,
240        renderer: &mut crate::Renderer,
241        theme: &crate::Theme,
242        style: &renderer::Style,
243        layout: Layout<'_>,
244        cursor: mouse::Cursor,
245    ) {
246        let appearance = theme.appearance(&self.style);
247        let bounds = layout.bounds();
248
249        renderer.fill_quad(
250            renderer::Quad {
251                bounds,
252                border: Border {
253                    width: appearance.border_width,
254                    color: appearance.border_color,
255                    radius: appearance.border_radius,
256                },
257                shadow: Shadow::default(),
258                snap: true,
259            },
260            appearance.background,
261        );
262
263        self.container
264            .draw(self.state, renderer, theme, style, layout, cursor, &bounds);
265    }
266}
267
268struct InnerList<'a, S, Item, Message> {
269    options: &'a Model<S, Item>,
270    hovered_option: &'a mut Option<Item>,
271    selected_option: Option<&'a Item>,
272    on_selected: Box<dyn FnMut(Item) -> Message + 'a>,
273    on_option_hovered: Option<&'a dyn Fn(Item) -> Message>,
274    padding: Padding,
275    text_size: Option<f32>,
276    text_line_height: text::LineHeight,
277}
278
279impl<S, Item, Message> Widget<Message, crate::Theme, crate::Renderer>
280    for InnerList<'_, S, Item, Message>
281where
282    S: AsRef<str>,
283    Item: Clone + PartialEq,
284{
285    fn size(&self) -> Size<Length> {
286        Size::new(Length::Fill, Length::Shrink)
287    }
288
289    fn layout(
290        &mut self,
291        _tree: &mut Tree,
292        renderer: &crate::Renderer,
293        limits: &layout::Limits,
294    ) -> layout::Node {
295        use std::f32;
296
297        let limits = limits.width(Length::Fill).height(Length::Shrink);
298        let text_size = self
299            .text_size
300            .unwrap_or_else(|| text::Renderer::default_size(renderer).0);
301
302        let text_line_height = self.text_line_height.to_absolute(Pixels(text_size));
303
304        let lists = self.options.lists.len();
305        let (descriptions, options) = self.options.lists.iter().fold((0, 0), |acc, l| {
306            (
307                acc.0 + i32::from(l.description.is_some()),
308                acc.1 + l.options.len(),
309            )
310        });
311
312        let vertical_padding = self.padding.y();
313        let text_line_height = f32::from(text_line_height);
314
315        let size = {
316            #[allow(clippy::cast_precision_loss)]
317            let intrinsic = Size::new(0.0, {
318                let text = vertical_padding + text_line_height;
319                let separators = ((vertical_padding / 2.0) + 1.0) * (lists - 1) as f32;
320                let descriptions = (text + 4.0) * descriptions as f32;
321                let options = text * options as f32;
322                separators + descriptions + options
323            });
324
325            limits.resolve(Length::Fill, Length::Shrink, intrinsic)
326        };
327
328        layout::Node::new(size)
329    }
330
331    fn update(
332        &mut self,
333        _state: &mut Tree,
334        event: &Event,
335        layout: Layout<'_>,
336        cursor: mouse::Cursor,
337        renderer: &crate::Renderer,
338        _clipboard: &mut dyn Clipboard,
339        shell: &mut Shell<'_, Message>,
340        _viewport: &Rectangle,
341    ) {
342        let bounds = layout.bounds();
343
344        match event {
345            Event::Mouse(mouse::Event::ButtonPressed(mouse::Button::Left)) => {
346                if cursor.is_over(bounds) {
347                    if let Some(item) = self.hovered_option.as_ref() {
348                        shell.publish((self.on_selected)(item.clone()));
349                        shell.capture_event();
350                        return;
351                    }
352                }
353            }
354            Event::Mouse(mouse::Event::CursorMoved { .. }) => {
355                if let Some(cursor_position) = cursor.position_in(bounds) {
356                    let text_size = self
357                        .text_size
358                        .unwrap_or_else(|| text::Renderer::default_size(renderer).0);
359
360                    let text_line_height =
361                        f32::from(self.text_line_height.to_absolute(Pixels(text_size)));
362
363                    let heights = self
364                        .options
365                        .element_heights(self.padding.y(), text_line_height);
366
367                    let mut current_offset = 0.0;
368
369                    let previous_hover_option = self.hovered_option.take();
370
371                    for (element, elem_height) in self.options.elements().zip(heights) {
372                        let bounds = Rectangle {
373                            x: 0.0,
374                            y: 0.0 + current_offset,
375                            width: bounds.width,
376                            height: elem_height,
377                        };
378
379                        if bounds.contains(cursor_position) {
380                            *self.hovered_option = if let OptionElement::Option((_, item)) = element
381                            {
382                                if previous_hover_option.as_ref() == Some(item) {
383                                    previous_hover_option
384                                } else {
385                                    shell.request_redraw();
386
387                                    if let Some(on_option_hovered) = self.on_option_hovered {
388                                        shell.publish(on_option_hovered(item.clone()));
389                                    }
390
391                                    Some(item.clone())
392                                }
393                            } else {
394                                None
395                            };
396
397                            break;
398                        }
399                        current_offset += elem_height;
400                    }
401                }
402            }
403            Event::Touch(touch::Event::FingerPressed { .. }) => {
404                if let Some(cursor_position) = cursor.position_in(bounds) {
405                    let text_size = self
406                        .text_size
407                        .unwrap_or_else(|| text::Renderer::default_size(renderer).0);
408
409                    let text_line_height =
410                        f32::from(self.text_line_height.to_absolute(Pixels(text_size)));
411
412                    let heights = self
413                        .options
414                        .element_heights(self.padding.y(), text_line_height);
415
416                    let mut current_offset = 0.0;
417
418                    let previous_hover_option = self.hovered_option.take();
419
420                    for (element, elem_height) in self.options.elements().zip(heights) {
421                        let bounds = Rectangle {
422                            x: 0.0,
423                            y: 0.0 + current_offset,
424                            width: bounds.width,
425                            height: elem_height,
426                        };
427
428                        if bounds.contains(cursor_position) {
429                            *self.hovered_option = if let OptionElement::Option((_, item)) = element
430                            {
431                                if previous_hover_option.as_ref() == Some(item) {
432                                    previous_hover_option
433                                } else {
434                                    Some(item.clone())
435                                }
436                            } else {
437                                None
438                            };
439
440                            if let Some(item) = self.hovered_option {
441                                shell.publish((self.on_selected)(item.clone()));
442                            }
443
444                            break;
445                        }
446                        current_offset += elem_height;
447                    }
448                }
449            }
450            _ => {}
451        }
452    }
453
454    fn mouse_interaction(
455        &self,
456        _state: &Tree,
457        layout: Layout<'_>,
458        cursor: mouse::Cursor,
459        _viewport: &Rectangle,
460        _renderer: &crate::Renderer,
461    ) -> mouse::Interaction {
462        let is_mouse_over = cursor.is_over(layout.bounds());
463
464        if is_mouse_over {
465            mouse::Interaction::Pointer
466        } else {
467            mouse::Interaction::default()
468        }
469    }
470
471    #[allow(clippy::too_many_lines)]
472    fn draw(
473        &self,
474        _state: &Tree,
475        renderer: &mut crate::Renderer,
476        theme: &crate::Theme,
477        style: &renderer::Style,
478        layout: Layout<'_>,
479        cursor: mouse::Cursor,
480        viewport: &Rectangle,
481    ) {
482        let appearance = theme.appearance(&());
483        let bounds = layout.bounds();
484
485        let text_size = self
486            .text_size
487            .unwrap_or_else(|| text::Renderer::default_size(renderer).0);
488
489        let offset = viewport.y - bounds.y;
490
491        let text_line_height = f32::from(self.text_line_height.to_absolute(Pixels(text_size)));
492
493        let visible_options = self.options.visible_options(
494            self.padding.y(),
495            text_line_height,
496            offset,
497            viewport.height,
498        );
499
500        let mut current_offset = 0.0;
501
502        for (elem, elem_height) in visible_options {
503            let mut bounds = Rectangle {
504                x: bounds.x,
505                y: bounds.y + current_offset,
506                width: bounds.width,
507                height: elem_height,
508            };
509
510            current_offset += elem_height;
511
512            match elem {
513                OptionElement::Option((option, item)) => {
514                    let (color, font) = if self.selected_option.as_ref() == Some(&item) {
515                        let item_x = bounds.x + appearance.border_width;
516                        let item_width = appearance.border_width.mul_add(-2.0, bounds.width);
517
518                        bounds = Rectangle {
519                            x: item_x,
520                            width: item_width,
521                            ..bounds
522                        };
523
524                        renderer.fill_quad(
525                            renderer::Quad {
526                                bounds,
527                                border: Border {
528                                    radius: appearance.border_radius,
529                                    ..Default::default()
530                                },
531                                shadow: Shadow::default(),
532                                snap: true,
533                            },
534                            appearance.selected_background,
535                        );
536
537                        let svg_bounds = Rectangle {
538                            x: item_x + item_width - 16.0 - 8.0,
539                            y: bounds.y + (bounds.height / 2.0 - 8.0),
540                            width: 16.0,
541                            height: 16.0,
542                        };
543
544                        let svg_handle =
545                            svg::Svg::new(crate::widget::common::object_select().clone())
546                                .color(appearance.selected_text_color)
547                                .border_radius(appearance.border_radius);
548                        svg::Renderer::draw_svg(renderer, svg_handle, svg_bounds, svg_bounds);
549
550                        (appearance.selected_text_color, crate::font::semibold())
551                    } else if self.hovered_option.as_ref() == Some(item) {
552                        let item_x = bounds.x + appearance.border_width;
553                        let item_width = appearance.border_width.mul_add(-2.0, bounds.width);
554
555                        bounds = Rectangle {
556                            x: item_x,
557                            width: item_width,
558                            ..bounds
559                        };
560
561                        renderer.fill_quad(
562                            renderer::Quad {
563                                bounds,
564                                border: Border {
565                                    radius: appearance.border_radius,
566                                    ..Default::default()
567                                },
568                                shadow: Shadow::default(),
569                                snap: true,
570                            },
571                            appearance.hovered_background,
572                        );
573
574                        (appearance.hovered_text_color, crate::font::default())
575                    } else {
576                        (appearance.text_color, crate::font::default())
577                    };
578
579                    let bounds = Rectangle {
580                        x: bounds.x + self.padding.left,
581                        // TODO: Figure out why it's offset by 8 pixels
582                        y: bounds.y + self.padding.top + 8.0,
583                        width: bounds.width,
584                        height: elem_height,
585                    };
586                    text::Renderer::fill_text(
587                        renderer,
588                        Text {
589                            content: option.as_ref().to_string(),
590                            bounds: bounds.size(),
591                            size: iced::Pixels(text_size),
592                            line_height: self.text_line_height,
593                            font,
594                            align_x: text::Alignment::Left,
595                            align_y: alignment::Vertical::Center,
596                            shaping: text::Shaping::Advanced,
597                            wrapping: text::Wrapping::default(),
598                            ellipsize: text::Ellipsize::default(),
599                        },
600                        bounds.position(),
601                        color,
602                        *viewport,
603                    );
604                }
605
606                OptionElement::Separator => {
607                    let divider = crate::widget::divider::horizontal::light().height(1.0);
608
609                    let layout_node = layout::Node::new(Size {
610                        width: bounds.width,
611                        height: 1.0,
612                    })
613                    .move_to(Point {
614                        x: bounds.x,
615                        y: bounds.y + (self.padding.y() / 2.0) - 4.0,
616                    });
617
618                    Widget::<Message, crate::Theme, crate::Renderer>::draw(
619                        crate::Element::<Message>::from(divider).as_widget(),
620                        &Tree::empty(),
621                        renderer,
622                        theme,
623                        style,
624                        Layout::new(&layout_node),
625                        cursor,
626                        viewport,
627                    );
628                }
629
630                OptionElement::Description(description) => {
631                    let bounds = Rectangle {
632                        x: bounds.center_x(),
633                        y: bounds.center_y(),
634                        ..bounds
635                    };
636                    text::Renderer::fill_text(
637                        renderer,
638                        Text {
639                            content: description.as_ref().to_string(),
640                            bounds: bounds.size(),
641                            size: iced::Pixels(text_size),
642                            line_height: text::LineHeight::Absolute(Pixels(text_line_height + 4.0)),
643                            font: crate::font::default(),
644                            align_x: text::Alignment::Center,
645                            align_y: alignment::Vertical::Center,
646                            shaping: text::Shaping::Advanced,
647                            wrapping: text::Wrapping::default(),
648                            ellipsize: text::Ellipsize::default(),
649                        },
650                        bounds.position(),
651                        appearance.description_color,
652                        *viewport,
653                    );
654                }
655            }
656        }
657    }
658}
659
660impl<'a, S, Item, Message: 'a> From<InnerList<'a, S, Item, Message>>
661    for Element<'a, Message, crate::Theme, crate::Renderer>
662where
663    S: AsRef<str>,
664    Item: Clone + PartialEq,
665{
666    fn from(list: InnerList<'a, S, Item, Message>) -> Self {
667        Element::new(list)
668    }
669}
670
671pub(super) enum OptionElement<'a, S, Item> {
672    Description(&'a S),
673    Option(&'a (S, Item)),
674    Separator,
675}
676
677impl<S, Message> Model<S, Message> {
678    pub(super) fn elements(&self) -> impl Iterator<Item = OptionElement<'_, S, Message>> + '_ {
679        self.lists.iter().flat_map(|list| {
680            let description = list
681                .description
682                .as_ref()
683                .into_iter()
684                .map(OptionElement::Description);
685
686            let options = list.options.iter().map(OptionElement::Option);
687
688            description
689                .chain(options)
690                .chain(std::iter::once(OptionElement::Separator))
691        })
692    }
693
694    fn element_heights(
695        &self,
696        vertical_padding: f32,
697        text_line_height: f32,
698    ) -> impl Iterator<Item = f32> + '_ {
699        self.elements().map(move |element| match element {
700            OptionElement::Option(_) => vertical_padding + text_line_height,
701            OptionElement::Separator => (vertical_padding / 2.0) + 1.0,
702            OptionElement::Description(_) => vertical_padding + text_line_height + 4.0,
703        })
704    }
705
706    fn visible_options(
707        &self,
708        padding_vertical: f32,
709        text_line_height: f32,
710        offset: f32,
711        height: f32,
712    ) -> impl Iterator<Item = (OptionElement<'_, S, Message>, f32)> + '_ {
713        let heights = self.element_heights(padding_vertical, text_line_height);
714
715        let mut current = 0.0;
716        self.elements()
717            .zip(heights)
718            .filter(move |(_, element_height)| {
719                let end = current + element_height;
720                let visible = current >= offset && end <= offset + height;
721                current = end;
722                visible
723            })
724    }
725}
cosmic/widget/dropdown/multi/menu.rs

cosmic/widget/dropdown/multi/
menu.rs
