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                                    if let Some(on_option_hovered) = self.on_option_hovered {
386                                        shell.publish(on_option_hovered(item.clone()));
387                                    }
388
389                                    Some(item.clone())
390                                }
391                            } else {
392                                None
393                            };
394
395                            break;
396                        }
397                        current_offset += elem_height;
398                    }
399                }
400            }
401            Event::Touch(touch::Event::FingerPressed { .. }) => {
402                if let Some(cursor_position) = cursor.position_in(bounds) {
403                    let text_size = self
404                        .text_size
405                        .unwrap_or_else(|| text::Renderer::default_size(renderer).0);
406
407                    let text_line_height =
408                        f32::from(self.text_line_height.to_absolute(Pixels(text_size)));
409
410                    let heights = self
411                        .options
412                        .element_heights(self.padding.y(), text_line_height);
413
414                    let mut current_offset = 0.0;
415
416                    let previous_hover_option = self.hovered_option.take();
417
418                    for (element, elem_height) in self.options.elements().zip(heights) {
419                        let bounds = Rectangle {
420                            x: 0.0,
421                            y: 0.0 + current_offset,
422                            width: bounds.width,
423                            height: elem_height,
424                        };
425
426                        if bounds.contains(cursor_position) {
427                            *self.hovered_option = if let OptionElement::Option((_, item)) = element
428                            {
429                                if previous_hover_option.as_ref() == Some(item) {
430                                    previous_hover_option
431                                } else {
432                                    Some(item.clone())
433                                }
434                            } else {
435                                None
436                            };
437
438                            if let Some(item) = self.hovered_option {
439                                shell.publish((self.on_selected)(item.clone()));
440                            }
441
442                            break;
443                        }
444                        current_offset += elem_height;
445                    }
446                }
447            }
448            _ => {}
449        }
450    }
451
452    fn mouse_interaction(
453        &self,
454        _state: &Tree,
455        layout: Layout<'_>,
456        cursor: mouse::Cursor,
457        _viewport: &Rectangle,
458        _renderer: &crate::Renderer,
459    ) -> mouse::Interaction {
460        let is_mouse_over = cursor.is_over(layout.bounds());
461
462        if is_mouse_over {
463            mouse::Interaction::Pointer
464        } else {
465            mouse::Interaction::default()
466        }
467    }
468
469    #[allow(clippy::too_many_lines)]
470    fn draw(
471        &self,
472        _state: &Tree,
473        renderer: &mut crate::Renderer,
474        theme: &crate::Theme,
475        style: &renderer::Style,
476        layout: Layout<'_>,
477        cursor: mouse::Cursor,
478        viewport: &Rectangle,
479    ) {
480        let appearance = theme.appearance(&());
481        let bounds = layout.bounds();
482
483        let text_size = self
484            .text_size
485            .unwrap_or_else(|| text::Renderer::default_size(renderer).0);
486
487        let offset = viewport.y - bounds.y;
488
489        let text_line_height = f32::from(self.text_line_height.to_absolute(Pixels(text_size)));
490
491        let visible_options = self.options.visible_options(
492            self.padding.y(),
493            text_line_height,
494            offset,
495            viewport.height,
496        );
497
498        let mut current_offset = 0.0;
499
500        for (elem, elem_height) in visible_options {
501            let mut bounds = Rectangle {
502                x: bounds.x,
503                y: bounds.y + current_offset,
504                width: bounds.width,
505                height: elem_height,
506            };
507
508            current_offset += elem_height;
509
510            match elem {
511                OptionElement::Option((option, item)) => {
512                    let (color, font) = if self.selected_option.as_ref() == Some(&item) {
513                        let item_x = bounds.x + appearance.border_width;
514                        let item_width = appearance.border_width.mul_add(-2.0, bounds.width);
515
516                        bounds = Rectangle {
517                            x: item_x,
518                            width: item_width,
519                            ..bounds
520                        };
521
522                        renderer.fill_quad(
523                            renderer::Quad {
524                                bounds,
525                                border: Border {
526                                    radius: appearance.border_radius,
527                                    ..Default::default()
528                                },
529                                shadow: Shadow::default(),
530                                snap: true,
531                            },
532                            appearance.selected_background,
533                        );
534
535                        let svg_bounds = Rectangle {
536                            x: item_x + item_width - 16.0 - 8.0,
537                            y: bounds.y + (bounds.height / 2.0 - 8.0),
538                            width: 16.0,
539                            height: 16.0,
540                        };
541
542                        let svg_handle =
543                            svg::Svg::new(crate::widget::common::object_select().clone())
544                                .color(appearance.selected_text_color)
545                                .border_radius(appearance.border_radius);
546                        svg::Renderer::draw_svg(renderer, svg_handle, svg_bounds, svg_bounds);
547
548                        (appearance.selected_text_color, crate::font::semibold())
549                    } else if self.hovered_option.as_ref() == Some(item) {
550                        let item_x = bounds.x + appearance.border_width;
551                        let item_width = appearance.border_width.mul_add(-2.0, bounds.width);
552
553                        bounds = Rectangle {
554                            x: item_x,
555                            width: item_width,
556                            ..bounds
557                        };
558
559                        renderer.fill_quad(
560                            renderer::Quad {
561                                bounds,
562                                border: Border {
563                                    radius: appearance.border_radius,
564                                    ..Default::default()
565                                },
566                                shadow: Shadow::default(),
567                                snap: true,
568                            },
569                            appearance.hovered_background,
570                        );
571
572                        (appearance.hovered_text_color, crate::font::default())
573                    } else {
574                        (appearance.text_color, crate::font::default())
575                    };
576
577                    let bounds = Rectangle {
578                        x: bounds.x + self.padding.left,
579                        // TODO: Figure out why it's offset by 8 pixels
580                        y: bounds.y + self.padding.top + 8.0,
581                        width: bounds.width,
582                        height: elem_height,
583                    };
584                    text::Renderer::fill_text(
585                        renderer,
586                        Text {
587                            content: option.as_ref().to_string(),
588                            bounds: bounds.size(),
589                            size: iced::Pixels(text_size),
590                            line_height: self.text_line_height,
591                            font,
592                            align_x: text::Alignment::Left,
593                            align_y: alignment::Vertical::Center,
594                            shaping: text::Shaping::Advanced,
595                            wrapping: text::Wrapping::default(),
596                            ellipsize: text::Ellipsize::default(),
597                        },
598                        bounds.position(),
599                        color,
600                        *viewport,
601                    );
602                }
603
604                OptionElement::Separator => {
605                    let divider = crate::widget::divider::horizontal::light().height(1.0);
606
607                    let layout_node = layout::Node::new(Size {
608                        width: bounds.width,
609                        height: 1.0,
610                    })
611                    .move_to(Point {
612                        x: bounds.x,
613                        y: bounds.y + (self.padding.y() / 2.0) - 4.0,
614                    });
615
616                    Widget::<Message, crate::Theme, crate::Renderer>::draw(
617                        crate::Element::<Message>::from(divider).as_widget(),
618                        &Tree::empty(),
619                        renderer,
620                        theme,
621                        style,
622                        Layout::new(&layout_node),
623                        cursor,
624                        viewport,
625                    );
626                }
627
628                OptionElement::Description(description) => {
629                    let bounds = Rectangle {
630                        x: bounds.center_x(),
631                        y: bounds.center_y(),
632                        ..bounds
633                    };
634                    text::Renderer::fill_text(
635                        renderer,
636                        Text {
637                            content: description.as_ref().to_string(),
638                            bounds: bounds.size(),
639                            size: iced::Pixels(text_size),
640                            line_height: text::LineHeight::Absolute(Pixels(text_line_height + 4.0)),
641                            font: crate::font::default(),
642                            align_x: text::Alignment::Center,
643                            align_y: alignment::Vertical::Center,
644                            shaping: text::Shaping::Advanced,
645                            wrapping: text::Wrapping::default(),
646                            ellipsize: text::Ellipsize::default(),
647                        },
648                        bounds.position(),
649                        appearance.description_color,
650                        *viewport,
651                    );
652                }
653            }
654        }
655    }
656}
657
658impl<'a, S, Item, Message: 'a> From<InnerList<'a, S, Item, Message>>
659    for Element<'a, Message, crate::Theme, crate::Renderer>
660where
661    S: AsRef<str>,
662    Item: Clone + PartialEq,
663{
664    fn from(list: InnerList<'a, S, Item, Message>) -> Self {
665        Element::new(list)
666    }
667}
668
669pub(super) enum OptionElement<'a, S, Item> {
670    Description(&'a S),
671    Option(&'a (S, Item)),
672    Separator,
673}
674
675impl<S, Message> Model<S, Message> {
676    pub(super) fn elements(&self) -> impl Iterator<Item = OptionElement<'_, S, Message>> + '_ {
677        self.lists.iter().flat_map(|list| {
678            let description = list
679                .description
680                .as_ref()
681                .into_iter()
682                .map(OptionElement::Description);
683
684            let options = list.options.iter().map(OptionElement::Option);
685
686            description
687                .chain(options)
688                .chain(std::iter::once(OptionElement::Separator))
689        })
690    }
691
692    fn element_heights(
693        &self,
694        vertical_padding: f32,
695        text_line_height: f32,
696    ) -> impl Iterator<Item = f32> + '_ {
697        self.elements().map(move |element| match element {
698            OptionElement::Option(_) => vertical_padding + text_line_height,
699            OptionElement::Separator => (vertical_padding / 2.0) + 1.0,
700            OptionElement::Description(_) => vertical_padding + text_line_height + 4.0,
701        })
702    }
703
704    fn visible_options(
705        &self,
706        padding_vertical: f32,
707        text_line_height: f32,
708        offset: f32,
709        height: f32,
710    ) -> impl Iterator<Item = (OptionElement<'_, S, Message>, f32)> + '_ {
711        let heights = self.element_heights(padding_vertical, text_line_height);
712
713        let mut current = 0.0;
714        self.elements()
715            .zip(heights)
716            .filter(move |(_, element_height)| {
717                let end = current + element_height;
718                let visible = current >= offset && end <= offset + height;
719                current = end;
720                visible
721            })
722    }
723}
cosmic/widget/dropdown/multi/menu.rs

cosmic/widget/dropdown/multi/
menu.rs
