feat!(segmented_button): Add context menu support and integrations

This commit is contained in:
Michael Aaron Murphy 2024-04-09 16:54:50 +02:00 committed by Michael Murphy
parent d54af65a2a
commit 59a913c15d
13 changed files with 612 additions and 118 deletions

View file

@ -64,6 +64,7 @@ pub mod menu_tree;
pub use crate::style::menu_bar::{Appearance, StyleSheet};
/// A `MenuBar` collects `MenuTree`s and handles
pub type MenuBar<'a, Message, Renderer> = menu_bar::MenuBar<'a, Message, Renderer>;
pub(crate) use menu_inner::Menu;
pub use menu_inner::{CloseCondition, ItemHeight, ItemWidth, PathHighlight};
/// Nested menu is essentially a tree of items, a menu is a collection of items
pub type MenuTree<'a, Message, Renderer> = menu_tree::MenuTree<'a, Message, Renderer>;

View file

@ -19,14 +19,14 @@ use iced_widget::core::{
Alignment, Clipboard, Element, Layout, Length, Padding, Rectangle, Shell, Widget,
};
pub(super) struct MenuBarState {
pub(super) pressed: bool,
pub(super) view_cursor: Cursor,
pub(super) open: bool,
pub(super) active_root: Option<usize>,
pub(super) horizontal_direction: Direction,
pub(super) vertical_direction: Direction,
pub(super) menu_states: Vec<MenuState>,
pub(crate) struct MenuBarState {
pub(crate) pressed: bool,
pub(crate) view_cursor: Cursor,
pub(crate) open: bool,
pub(crate) active_root: Option<usize>,
pub(crate) horizontal_direction: Direction,
pub(crate) vertical_direction: Direction,
pub(crate) menu_states: Vec<MenuState>,
}
impl MenuBarState {
pub(super) fn get_trimmed_indices(&self) -> impl Iterator<Item = usize> + '_ {
@ -422,6 +422,7 @@ where
tree,
menu_roots: &mut self.menu_roots,
bounds_expand: self.bounds_expand,
menu_overlays_parent: false,
close_condition: self.close_condition,
item_width: self.item_width,
item_height: self.item_height,

View file

@ -221,11 +221,11 @@ impl Aod {
/// only items inside the viewport will be displayed,
/// when scrolling happens, this should be updated
#[derive(Debug, Clone, Copy)]
struct MenuSlice {
start_index: usize,
end_index: usize,
lower_bound_rel: f32,
upper_bound_rel: f32,
pub(super) struct MenuSlice {
pub(super) start_index: usize,
pub(super) end_index: usize,
pub(super) lower_bound_rel: f32,
pub(super) upper_bound_rel: f32,
}
/// Menu bounds in overlay space
@ -295,7 +295,7 @@ pub(super) struct MenuState {
menu_bounds: MenuBounds,
}
impl MenuState {
fn layout<Message, Renderer>(
pub(super) fn layout<Message, Renderer>(
&self,
overlay_offset: Vector,
slice: MenuSlice,
@ -373,7 +373,7 @@ impl MenuState {
))
}
fn slice(
pub(super) fn slice(
&self,
viewport_size: Size,
overlay_offset: Vector,
@ -427,28 +427,30 @@ impl MenuState {
}
}
pub(super) struct Menu<'a, 'b, Message, Renderer>
pub(crate) struct Menu<'a, 'b, Message, Renderer>
where
Renderer: renderer::Renderer,
{
pub(super) tree: &'b mut Tree,
pub(super) menu_roots: &'b mut Vec<MenuTree<'a, Message, Renderer>>,
pub(super) bounds_expand: u16,
pub(super) close_condition: CloseCondition,
pub(super) item_width: ItemWidth,
pub(super) item_height: ItemHeight,
pub(super) bar_bounds: Rectangle,
pub(super) main_offset: i32,
pub(super) cross_offset: i32,
pub(super) root_bounds_list: Vec<Rectangle>,
pub(super) path_highlight: Option<PathHighlight>,
pub(super) style: &'b <crate::Theme as StyleSheet>::Style,
pub(crate) tree: &'b mut Tree,
pub(crate) menu_roots: &'b mut Vec<MenuTree<'a, Message, Renderer>>,
pub(crate) bounds_expand: u16,
/// Allows menu overlay items to overlap the parent
pub(crate) menu_overlays_parent: bool,
pub(crate) close_condition: CloseCondition,
pub(crate) item_width: ItemWidth,
pub(crate) item_height: ItemHeight,
pub(crate) bar_bounds: Rectangle,
pub(crate) main_offset: i32,
pub(crate) cross_offset: i32,
pub(crate) root_bounds_list: Vec<Rectangle>,
pub(crate) path_highlight: Option<PathHighlight>,
pub(crate) style: &'b <crate::Theme as StyleSheet>::Style,
}
impl<'a, 'b, Message, Renderer> Menu<'a, 'b, Message, Renderer>
where
Renderer: renderer::Renderer,
{
pub(super) fn overlay(self) -> overlay::Element<'b, Message, crate::Theme, Renderer> {
pub(crate) fn overlay(self) -> overlay::Element<'b, Message, crate::Theme, Renderer> {
overlay::Element::new(Point::ORIGIN, Box::new(self))
}
}
@ -746,7 +748,7 @@ fn pad_rectangle(rect: Rectangle, padding: Padding) -> Rectangle {
}
}
fn init_root_menu<Message, Renderer>(
pub(super) fn init_root_menu<Message, Renderer>(
menu: &mut Menu<'_, '_, Message, Renderer>,
renderer: &Renderer,
shell: &mut Shell<'_, Message>,
@ -986,7 +988,7 @@ where
let last_parent_bounds = last_menu_bounds.parent_bounds;
let last_children_bounds = last_menu_bounds.children_bounds;
if last_parent_bounds.contains(overlay_cursor)
if (!menu.menu_overlays_parent && last_parent_bounds.contains(overlay_cursor))
// cursor is in the parent part
|| !last_children_bounds.contains(overlay_cursor)
// cursor is outside

View file

@ -25,16 +25,16 @@ use crate::{theme, widget};
pub struct MenuTree<'a, Message, Renderer = crate::Renderer> {
/// The menu tree will be flatten into a vector to build a linear widget tree,
/// the `index` field is the index of the item in that vector
pub(super) index: usize,
pub(crate) index: usize,
/// The item of the menu tree
pub(super) item: Element<'a, Message, crate::Theme, Renderer>,
pub(crate) item: Element<'a, Message, crate::Theme, Renderer>,
/// The children of the menu tree
pub(super) children: Vec<MenuTree<'a, Message, Renderer>>,
pub(crate) children: Vec<MenuTree<'a, Message, Renderer>>,
/// The width of the menu tree
pub(super) width: Option<u16>,
pub(crate) width: Option<u16>,
/// The height of the menu tree
pub(super) height: Option<u16>,
pub(crate) height: Option<u16>,
}
impl<'a, Message, Renderer> MenuTree<'a, Message, Renderer>
@ -89,7 +89,7 @@ where
/* Keep `set_index()` and `flattern()` recurse in the same order */
/// Set the index of each item
pub(super) fn set_index(&mut self) {
pub(crate) fn set_index(&mut self) {
/// inner counting function.
fn rec<Message, Renderer>(mt: &mut MenuTree<'_, Message, Renderer>, count: &mut usize) {
// keep items under the same menu line up
@ -108,7 +108,7 @@ where
}
/// Flatten the menu tree
pub(super) fn flattern(&'a self) -> Vec<&Self> {
pub(crate) fn flattern(&'a self) -> Vec<&Self> {
/// Inner flattening function
fn rec<'a, Message, Renderer>(
mt: &'a MenuTree<'a, Message, Renderer>,

View file

@ -13,6 +13,7 @@ use iced::{
};
use iced_core::{Border, Color, Shadow};
use crate::widget::Container;
use crate::{theme, widget::segmented_button, Theme};
use super::dnd_destination::DragId;
@ -23,30 +24,13 @@ pub type Model = segmented_button::SingleSelectModel;
/// Navigation side panel for switching between views.
///
/// For details on the model, see the [`segmented_button`] module for more details.
pub fn nav_bar<Message>(
pub fn nav_bar<Message: Clone + 'static>(
model: &segmented_button::SingleSelectModel,
on_activate: fn(segmented_button::Entity) -> Message,
) -> iced::widget::Container<Message, crate::Theme, crate::Renderer>
where
Message: Clone + 'static,
{
let theme = crate::theme::active();
let space_s = theme.cosmic().space_s();
let space_xxs = theme.cosmic().space_xxs();
segmented_button::vertical(model)
.button_height(32)
.button_padding([space_s, space_xxs, space_s, space_xxs])
.button_spacing(space_xxs)
.spacing(space_xxs)
.on_activate(on_activate)
.style(crate::theme::SegmentedButton::TabBar)
.apply(scrollable)
.height(Length::Fill)
.apply(container)
.padding(space_xxs)
.height(Length::Fill)
.style(theme::Container::custom(nav_bar_style))
) -> NavBar<Message> {
NavBar {
segmented_button: segmented_button::vertical(model).on_activate(on_activate),
}
}
/// Navigation side panel for switching between views.
@ -58,33 +42,104 @@ pub fn nav_bar_dnd<Message, D: AllowedMimeTypes>(
on_dnd_leave: impl Fn(segmented_button::Entity) -> Message + 'static,
on_dnd_drop: impl Fn(segmented_button::Entity, Option<D>, DndAction) -> Message + 'static,
id: DragId,
) -> iced::widget::Container<Message, crate::Theme, crate::Renderer>
) -> NavBar<Message>
where
Message: Clone + 'static,
{
let theme = crate::theme::active();
let space_s = theme.cosmic().space_s();
let space_xxs = theme.cosmic().space_xxs();
NavBar {
segmented_button: segmented_button::vertical(model)
.on_activate(on_activate)
.on_dnd_enter(on_dnd_enter)
.on_dnd_leave(on_dnd_leave)
.on_dnd_drop(on_dnd_drop)
.drag_id(id),
}
}
let nav_buttons = segmented_button::vertical(model)
.button_height(32)
.button_padding([space_s, space_xxs, space_s, space_xxs])
.button_spacing(space_xxs)
.spacing(space_xxs)
.on_activate(on_activate)
.style(crate::theme::SegmentedButton::TabBar)
.on_dnd_enter(on_dnd_enter)
.on_dnd_leave(on_dnd_leave)
.on_dnd_drop(on_dnd_drop)
.drag_id(id);
#[must_use]
pub struct NavBar<'a, Message> {
segmented_button:
segmented_button::VerticalSegmentedButton<'a, segmented_button::SingleSelect, Message>,
}
nav_buttons
.apply(scrollable)
.height(Length::Fill)
.apply(container)
.padding(space_xxs)
.height(Length::Fill)
.style(theme::Container::custom(nav_bar_style))
impl<'a, Message: Clone + 'static> NavBar<'a, Message> {
pub fn context_menu(
mut self,
context_menu: Option<Vec<crate::widget::menu::MenuTree<'a, Message, crate::Renderer>>>,
) -> Self {
self.segmented_button = self.segmented_button.context_menu(context_menu);
self
}
pub fn drag_id(mut self, id: DragId) -> Self {
self.segmented_button = self.segmented_button.drag_id(id);
self
}
/// Pre-convert this widget into the [`Container`] widget that it becomes.
#[must_use]
pub fn into_container(self) -> Container<'a, Message, crate::Theme, crate::Renderer> {
Container::from(self)
}
/// Emitted when a button is right-clicked.
pub fn on_context<T>(mut self, on_context: T) -> Self
where
T: Fn(Id) -> Message + 'static,
{
self.segmented_button = self.segmented_button.on_context(on_context);
self
}
/// Handle the dnd drop event.
pub fn on_dnd_drop<D: AllowedMimeTypes>(
mut self,
handler: impl Fn(Id, Option<D>, DndAction) -> Message + 'static,
) -> Self {
self.segmented_button = self.segmented_button.on_dnd_drop(handler);
self
}
/// Handle the dnd enter event.
pub fn on_dnd_enter(mut self, handler: impl Fn(Id, Vec<String>) -> Message + 'static) -> Self {
self.segmented_button = self.segmented_button.on_dnd_enter(handler);
self
}
/// Handle the dnd leave event.
pub fn on_dnd_leave(mut self, handler: impl Fn(Id) -> Message + 'static) -> Self {
self.segmented_button = self.segmented_button.on_dnd_leave(handler);
self
}
}
impl<'a, Message: Clone + 'static> From<NavBar<'a, Message>>
for Container<'a, Message, crate::Theme, crate::Renderer>
{
fn from(this: NavBar<'a, Message>) -> Self {
let theme = crate::theme::active();
let space_s = theme.cosmic().space_s();
let space_xxs = theme.cosmic().space_xxs();
this.segmented_button
.button_height(32)
.button_padding([space_s, space_xxs, space_s, space_xxs])
.button_spacing(space_xxs)
.spacing(space_xxs)
.style(crate::theme::SegmentedButton::TabBar)
.apply(scrollable)
.height(Length::Fill)
.apply(container)
.padding(space_xxs)
.height(Length::Fill)
.style(theme::Container::custom(nav_bar_style))
}
}
impl<'a, Message: Clone + 'static> From<NavBar<'a, Message>> for crate::Element<'a, Message> {
fn from(this: NavBar<'a, Message>) -> Self {
Container::from(this).into()
}
}
#[must_use]

View file

@ -5,11 +5,14 @@ use super::model::{Entity, Model, Selectable};
use crate::iced_core::id::Internal;
use crate::theme::{SegmentedButton as Style, THEME};
use crate::widget::dnd_destination::DragId;
use crate::widget::menu::menu_bar::{MenuBar, MenuBarState};
use crate::widget::menu::{CloseCondition, ItemHeight, ItemWidth, MenuTree, PathHighlight};
use crate::widget::{icon, Icon};
use crate::{Element, Renderer};
use derive_setters::Setters;
use iced::clipboard::dnd::{self, DndAction, DndDestinationRectangle, DndEvent, OfferEvent};
use iced::clipboard::mime::AllowedMimeTypes;
use iced::touch::Finger;
use iced::{
alignment, event, keyboard, mouse, touch, Alignment, Background, Color, Command, Event, Length,
Padding, Rectangle, Size,
@ -22,6 +25,7 @@ use iced_core::{Border, Gradient, Point, Renderer as IcedRenderer, Shadow, Text}
use slotmap::{Key, SecondaryMap};
use std::borrow::Cow;
use std::collections::hash_map::DefaultHasher;
use std::collections::HashSet;
use std::hash::{Hash, Hasher};
use std::marker::PhantomData;
use std::mem;
@ -118,12 +122,18 @@ where
/// Style to draw the widget in.
#[setters(into)]
pub(super) style: Style,
/// The context menu to display when a context is activated
#[setters(skip)]
pub(super) context_menu:
Option<Vec<crate::widget::menu::MenuTree<'a, Message, crate::Renderer>>>,
/// Emits the ID of the item that was activated.
#[setters(skip)]
pub(super) on_activate: Option<Box<dyn Fn(Entity) -> Message + 'static>>,
#[setters(skip)]
pub(super) on_close: Option<Box<dyn Fn(Entity) -> Message + 'static>>,
#[setters(skip)]
pub(super) on_context: Option<Box<dyn Fn(Entity) -> Message + 'static>>,
#[setters(skip)]
pub(super) on_dnd_drop:
Option<Box<dyn Fn(Entity, Vec<u8>, String, DndAction) -> Message + 'static>>,
pub(super) mimes: Vec<String>,
@ -169,8 +179,10 @@ where
spacing: 0,
line_height: LineHeight::default(),
style: Style::default(),
context_menu: None,
on_activate: None,
on_close: None,
on_context: None,
on_dnd_drop: None,
on_dnd_enter: None,
on_dnd_leave: None,
@ -180,6 +192,27 @@ where
}
}
pub fn context_menu(
mut self,
context_menu: Option<Vec<MenuTree<'a, Message, crate::Renderer>>>,
) -> Self
where
Message: 'static,
{
self.context_menu = context_menu.map(|menus| {
vec![MenuTree::with_children(
crate::widget::row::<'static, Message>(),
menus,
)]
});
if let Some(ref mut context_menu) = self.context_menu {
context_menu.iter_mut().for_each(MenuTree::set_index);
}
self
}
/// Emitted when a tab is pressed.
pub fn on_activate<T>(mut self, on_activate: T) -> Self
where
@ -198,6 +231,15 @@ where
self
}
/// Emitted when a button is right-clicked.
pub fn on_context<T>(mut self, on_context: T) -> Self
where
T: Fn(Entity) -> Message + 'static,
{
self.on_context = Some(Box::new(on_context));
self
}
/// Check if an item is enabled.
fn is_enabled(&self, key: Entity) -> bool {
self.model.items.get(key).map_or(false, |item| item.enabled)
@ -211,7 +253,7 @@ where
self.on_dnd_drop = Some(Box::new(move |entity, data, mime, action| {
dnd_drop_handler(entity, D::try_from((data, mime)).ok(), action)
}));
self.mimes = D::allowed().iter().map(|mime| mime.to_string()).collect();
self.mimes = D::allowed().iter().cloned().collect();
self
}
@ -501,20 +543,61 @@ where
SelectionMode: Default,
Message: 'static + Clone,
{
fn children(&self) -> Vec<Tree> {
let mut children = Vec::new();
// Assign the context menu's elements as this widget's children.
if let Some(ref context_menu) = self.context_menu {
let mut tree = Tree::empty();
tree.state = tree::State::new(MenuBarState::default());
tree.children = context_menu
.iter()
.map(|root| {
let mut tree = Tree::empty();
let flat = root
.flattern()
.iter()
.map(|mt| Tree::new(mt.item.as_widget()))
.collect();
tree.children = flat;
tree
})
.collect();
children.push(tree);
}
children
}
fn tag(&self) -> tree::Tag {
tree::Tag::of::<LocalState>()
}
fn state(&self) -> tree::State {
#[allow(clippy::default_trait_access)]
tree::State::new(LocalState {
paragraphs: SecondaryMap::new(),
text_hashes: SecondaryMap::new(),
..LocalState::default()
buttons_visible: Default::default(),
buttons_offset: Default::default(),
collapsed: Default::default(),
focused: Default::default(),
focused_item: Default::default(),
hovered: Default::default(),
known_length: Default::default(),
internal_layout: Default::default(),
context_cursor: Point::default(),
show_context: Default::default(),
wheel_timestamp: Default::default(),
dnd_state: Default::default(),
fingers_pressed: Default::default(),
})
}
fn diff(&mut self, tree: &mut Tree) {
let state = tree.state.downcast_mut::<LocalState>();
for key in self.model.order.iter().copied() {
if let Some(text) = self.model.text.get(key) {
let (font, button_state) =
@ -557,6 +640,8 @@ where
}
}
}
// TODO: diff the context menu
}
fn size(&self) -> Size<Length> {
@ -708,6 +793,20 @@ where
}
if cursor_position.is_over(bounds) {
let fingers_pressed = state.fingers_pressed.len();
match event {
Event::Touch(touch::Event::FingerPressed { id, .. }) => {
state.fingers_pressed.insert(id);
}
Event::Touch(touch::Event::FingerLifted { id, .. }) => {
state.fingers_pressed.remove(&id);
}
_ => (),
}
// Check for clicks on the previous and next tab buttons, when tabs are collapsed.
if state.collapsed {
// Check if the prev tab button was clicked.
@ -756,15 +855,11 @@ where
if let Some(on_close) = self.on_close.as_ref() {
if cursor_position
.is_over(close_bounds(bounds, f32::from(self.close_icon.size)))
&& (left_button_released(&event)
|| (touch_lifted(&event) && fingers_pressed == 1))
{
if let Event::Mouse(mouse::Event::ButtonReleased(
mouse::Button::Left,
))
| Event::Touch(touch::Event::FingerLifted { .. }) = event
{
shell.publish(on_close(key));
return event::Status::Captured;
}
shell.publish(on_close(key));
return event::Status::Captured;
}
// Emit close message if the tab is middle clicked.
@ -786,6 +881,27 @@ where
return event::Status::Captured;
}
}
// Present a context menu on a right click event.
if let Some(on_context) = self.on_context.as_ref() {
if right_button_released(&event)
|| (touch_lifted(&event) && fingers_pressed == 2)
{
state.show_context = Some(key);
state.context_cursor =
cursor_position.position().unwrap_or_default();
state.focused = true;
state.focused_item = Item::Tab(key);
let menu_state =
tree.children[0].state.downcast_mut::<MenuBarState>();
menu_state.open = true;
menu_state.view_cursor = cursor_position;
shell.publish(on_context(key));
return event::Status::Captured;
}
}
}
break;
@ -1355,11 +1471,59 @@ where
fn overlay<'b>(
&'b mut self,
_tree: &'b mut Tree,
_layout: iced_core::Layout<'_>,
tree: &'b mut Tree,
layout: iced_core::Layout<'_>,
_renderer: &Renderer,
) -> Option<iced_core::overlay::Element<'b, Message, crate::Theme, Renderer>> {
None
let state = tree.state.downcast_ref::<LocalState>();
let Some(entity) = state.show_context else {
return None;
};
let bounds = self
.variant_bounds(state, layout.bounds())
.find_map(|item| match item {
ItemBounds::Button(e, bounds) if e == entity => Some(bounds),
_ => None,
});
let Some(mut bounds) = bounds else {
return None;
};
let Some(context_menu) = self.context_menu.as_mut() else {
return None;
};
if !tree.children[0].state.downcast_ref::<MenuBarState>().open {
return None;
}
bounds.x = state.context_cursor.x;
bounds.y = state.context_cursor.y;
Some(
crate::widget::menu::Menu {
tree: &mut tree.children[0],
menu_roots: context_menu,
bounds_expand: 16,
menu_overlays_parent: true,
close_condition: CloseCondition {
leave: false,
click_outside: true,
click_inside: true,
},
item_width: ItemWidth::Uniform(240),
item_height: ItemHeight::Dynamic(40),
bar_bounds: bounds,
main_offset: -(bounds.height as i32),
cross_offset: 0,
root_bounds_list: vec![bounds],
path_highlight: Some(PathHighlight::MenuActive),
style: &crate::theme::menu_bar::MenuBarStyle::Default,
}
.overlay(),
)
}
fn drag_destinations(
@ -1406,7 +1570,6 @@ where
}
/// State that is maintained by each individual widget.
#[derive(Default)]
pub struct LocalState {
/// Defines how many buttons to show at a time.
pub(super) buttons_visible: usize,
@ -1428,10 +1591,16 @@ pub struct LocalState {
paragraphs: SecondaryMap<Entity, crate::Paragraph>,
/// Used to detect changes in text.
text_hashes: SecondaryMap<Entity, u64>,
/// Location of cursor when context menu was opened.
context_cursor: Point,
/// Track whether an item is currently showing a context menu.
show_context: Option<Entity>,
/// Time since last tab activation from wheel movements.
wheel_timestamp: Option<Instant>,
/// Dnd state
pub dnd_state: crate::widget::dnd_destination::State<Entity>,
/// Tracks multi-touch events
fingers_pressed: HashSet<Finger>,
}
#[derive(Debug, Default, PartialEq)]
@ -1457,6 +1626,7 @@ impl operation::Focusable for LocalState {
fn unfocus(&mut self) {
self.focused = false;
self.focused_item = Item::None;
self.show_context = None;
}
}
@ -1550,3 +1720,21 @@ fn draw_icon<Message: 'static>(
viewport,
);
}
fn left_button_released(event: &Event) -> bool {
matches!(
event,
Event::Mouse(mouse::Event::ButtonReleased(mouse::Button::Left,))
)
}
fn right_button_released(event: &Event) -> bool {
matches!(
event,
Event::Mouse(mouse::Event::ButtonReleased(mouse::Button::Right,))
)
}
fn touch_lifted(event: &Event) -> bool {
matches!(event, Event::Touch(touch::Event::FingerLifted { .. }))
}