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 on_event(
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    ) -> event::Status {
221        let bounds = layout.bounds();
222
223        self.container.on_event(
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        viewport: &Rectangle,
233        renderer: &crate::Renderer,
234    ) -> mouse::Interaction {
235        self.container
236            .mouse_interaction(self.state, layout, cursor, viewport, renderer)
237    }
238
239    fn draw(
240        &self,
241        renderer: &mut crate::Renderer,
242        theme: &crate::Theme,
243        style: &renderer::Style,
244        layout: Layout<'_>,
245        cursor: mouse::Cursor,
246    ) {
247        let appearance = theme.appearance(&self.style);
248        let bounds = layout.bounds();
249
250        renderer.fill_quad(
251            renderer::Quad {
252                bounds,
253                border: Border {
254                    width: appearance.border_width,
255                    color: appearance.border_color,
256                    radius: appearance.border_radius,
257                },
258                shadow: Shadow::default(),
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        &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.vertical();
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 on_event(
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    ) -> event::Status {
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                        return event::Status::Captured;
350                    }
351                }
352            }
353            Event::Mouse(mouse::Event::CursorMoved { .. }) => {
354                if let Some(cursor_position) = cursor.position_in(bounds) {
355                    let text_size = self
356                        .text_size
357                        .unwrap_or_else(|| text::Renderer::default_size(renderer).0);
358
359                    let text_line_height =
360                        f32::from(self.text_line_height.to_absolute(Pixels(text_size)));
361
362                    let heights = self
363                        .options
364                        .element_heights(self.padding.vertical(), text_line_height);
365
366                    let mut current_offset = 0.0;
367
368                    let previous_hover_option = self.hovered_option.take();
369
370                    for (element, elem_height) in self.options.elements().zip(heights) {
371                        let bounds = Rectangle {
372                            x: 0.0,
373                            y: 0.0 + current_offset,
374                            width: bounds.width,
375                            height: elem_height,
376                        };
377
378                        if bounds.contains(cursor_position) {
379                            *self.hovered_option = if let OptionElement::Option((_, item)) = element
380                            {
381                                if previous_hover_option.as_ref() == Some(item) {
382                                    previous_hover_option
383                                } else {
384                                    if let Some(on_option_hovered) = self.on_option_hovered {
385                                        shell.publish(on_option_hovered(item.clone()));
386                                    }
387
388                                    Some(item.clone())
389                                }
390                            } else {
391                                None
392                            };
393
394                            break;
395                        }
396                        current_offset += elem_height;
397                    }
398                }
399            }
400            Event::Touch(touch::Event::FingerPressed { .. }) => {
401                if let Some(cursor_position) = cursor.position_in(bounds) {
402                    let text_size = self
403                        .text_size
404                        .unwrap_or_else(|| text::Renderer::default_size(renderer).0);
405
406                    let text_line_height =
407                        f32::from(self.text_line_height.to_absolute(Pixels(text_size)));
408
409                    let heights = self
410                        .options
411                        .element_heights(self.padding.vertical(), text_line_height);
412
413                    let mut current_offset = 0.0;
414
415                    let previous_hover_option = self.hovered_option.take();
416
417                    for (element, elem_height) in self.options.elements().zip(heights) {
418                        let bounds = Rectangle {
419                            x: 0.0,
420                            y: 0.0 + current_offset,
421                            width: bounds.width,
422                            height: elem_height,
423                        };
424
425                        if bounds.contains(cursor_position) {
426                            *self.hovered_option = if let OptionElement::Option((_, item)) = element
427                            {
428                                if previous_hover_option.as_ref() == Some(item) {
429                                    previous_hover_option
430                                } else {
431                                    Some(item.clone())
432                                }
433                            } else {
434                                None
435                            };
436
437                            if let Some(item) = self.hovered_option {
438                                shell.publish((self.on_selected)(item.clone()));
439                            }
440
441                            break;
442                        }
443                        current_offset += elem_height;
444                    }
445                }
446            }
447            _ => {}
448        }
449
450        event::Status::Ignored
451    }
452
453    fn mouse_interaction(
454        &self,
455        _state: &Tree,
456        layout: Layout<'_>,
457        cursor: mouse::Cursor,
458        _viewport: &Rectangle,
459        _renderer: &crate::Renderer,
460    ) -> mouse::Interaction {
461        let is_mouse_over = cursor.is_over(layout.bounds());
462
463        if is_mouse_over {
464            mouse::Interaction::Pointer
465        } else {
466            mouse::Interaction::default()
467        }
468    }
469
470    #[allow(clippy::too_many_lines)]
471    fn draw(
472        &self,
473        _state: &Tree,
474        renderer: &mut crate::Renderer,
475        theme: &crate::Theme,
476        style: &renderer::Style,
477        layout: Layout<'_>,
478        cursor: mouse::Cursor,
479        viewport: &Rectangle,
480    ) {
481        let appearance = theme.appearance(&());
482        let bounds = layout.bounds();
483
484        let text_size = self
485            .text_size
486            .unwrap_or_else(|| text::Renderer::default_size(renderer).0);
487
488        let offset = viewport.y - bounds.y;
489
490        let text_line_height = f32::from(self.text_line_height.to_absolute(Pixels(text_size)));
491
492        let visible_options = self.options.visible_options(
493            self.padding.vertical(),
494            text_line_height,
495            offset,
496            viewport.height,
497        );
498
499        let mut current_offset = 0.0;
500
501        for (elem, elem_height) in visible_options {
502            let mut bounds = Rectangle {
503                x: bounds.x,
504                y: bounds.y + current_offset,
505                width: bounds.width,
506                height: elem_height,
507            };
508
509            current_offset += elem_height;
510
511            match elem {
512                OptionElement::Option((option, item)) => {
513                    let (color, font) = if self.selected_option.as_ref() == Some(&item) {
514                        let item_x = bounds.x + appearance.border_width;
515                        let item_width = appearance.border_width.mul_add(-2.0, bounds.width);
516
517                        bounds = Rectangle {
518                            x: item_x,
519                            width: item_width,
520                            ..bounds
521                        };
522
523                        renderer.fill_quad(
524                            renderer::Quad {
525                                bounds,
526                                border: Border {
527                                    radius: appearance.border_radius,
528                                    ..Default::default()
529                                },
530                                shadow: Shadow::default(),
531                            },
532                            appearance.selected_background,
533                        );
534
535                        let svg_handle =
536                            svg::Svg::new(crate::widget::common::object_select().clone())
537                                .color(appearance.selected_text_color)
538                                .border_radius(appearance.border_radius);
539                        svg::Renderer::draw_svg(
540                            renderer,
541                            svg_handle,
542                            Rectangle {
543                                x: item_x + item_width - 16.0 - 8.0,
544                                y: bounds.y + (bounds.height / 2.0 - 8.0),
545                                width: 16.0,
546                                height: 16.0,
547                            },
548                        );
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                            },
570                            appearance.hovered_background,
571                        );
572
573                        (appearance.hovered_text_color, crate::font::default())
574                    } else {
575                        (appearance.text_color, crate::font::default())
576                    };
577
578                    let bounds = Rectangle {
579                        x: bounds.x + self.padding.left,
580                        // TODO: Figure out why it's offset by 8 pixels
581                        y: bounds.y + self.padding.top + 8.0,
582                        width: bounds.width,
583                        height: elem_height,
584                    };
585                    text::Renderer::fill_text(
586                        renderer,
587                        Text {
588                            content: option.as_ref().to_string(),
589                            bounds: bounds.size(),
590                            size: iced::Pixels(text_size),
591                            line_height: self.text_line_height,
592                            font,
593                            horizontal_alignment: alignment::Horizontal::Left,
594                            vertical_alignment: alignment::Vertical::Center,
595                            shaping: text::Shaping::Advanced,
596                            wrapping: text::Wrapping::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.vertical() / 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                            horizontal_alignment: alignment::Horizontal::Center,
643                            vertical_alignment: alignment::Vertical::Center,
644                            shaping: text::Shaping::Advanced,
645                            wrapping: text::Wrapping::default(),
646                        },
647                        bounds.position(),
648                        appearance.description_color,
649                        *viewport,
650                    );
651                }
652            }
653        }
654    }
655}
656
657impl<'a, S, Item, Message: 'a> From<InnerList<'a, S, Item, Message>>
658    for Element<'a, Message, crate::Theme, crate::Renderer>
659where
660    S: AsRef<str>,
661    Item: Clone + PartialEq,
662{
663    fn from(list: InnerList<'a, S, Item, Message>) -> Self {
664        Element::new(list)
665    }
666}
667
668pub(super) enum OptionElement<'a, S, Item> {
669    Description(&'a S),
670    Option(&'a (S, Item)),
671    Separator,
672}
673
674impl<S, Message> Model<S, Message> {
675    pub(super) fn elements(&self) -> impl Iterator<Item = OptionElement<'_, S, Message>> + '_ {
676        self.lists.iter().flat_map(|list| {
677            let description = list
678                .description
679                .as_ref()
680                .into_iter()
681                .map(OptionElement::Description);
682
683            let options = list.options.iter().map(OptionElement::Option);
684
685            description
686                .chain(options)
687                .chain(std::iter::once(OptionElement::Separator))
688        })
689    }
690
691    fn element_heights(
692        &self,
693        vertical_padding: f32,
694        text_line_height: f32,
695    ) -> impl Iterator<Item = f32> + '_ {
696        self.elements().map(move |element| match element {
697            OptionElement::Option(_) => vertical_padding + text_line_height,
698            OptionElement::Separator => (vertical_padding / 2.0) + 1.0,
699            OptionElement::Description(_) => vertical_padding + text_line_height + 4.0,
700        })
701    }
702
703    fn visible_options(
704        &self,
705        padding_vertical: f32,
706        text_line_height: f32,
707        offset: f32,
708        height: f32,
709    ) -> impl Iterator<Item = (OptionElement<'_, S, Message>, f32)> + '_ {
710        let heights = self.element_heights(padding_vertical, text_line_height);
711
712        let mut current = 0.0;
713        self.elements()
714            .zip(heights)
715            .filter(move |(_, element_height)| {
716                let end = current + element_height;
717                let visible = current >= offset && end <= offset + height;
718                current = end;
719                visible
720            })
721    }
722}
cosmic/widget/dropdown/multi/menu.rs

cosmic/widget/dropdown/multi/
menu.rs
