feat(context_menu): add a context menu widget as menu tree alternative to the popover widget

This commit is contained in:
Michael Aaron Murphy 2024-04-19 17:12:54 +02:00 committed by Michael Murphy
parent c0b653f506
commit 9ffb87d21f
9 changed files with 465 additions and 37 deletions

276
src/widget/context_menu.rs Normal file
View file

@ -0,0 +1,276 @@
// Copyright 2024 System76 <info@system76.com>
// SPDX-License-Identifier: MPL-2.0
//! A context menu is a menu in a graphical user interface that appears upon user interaction, such as a right-click mouse operation.
use crate::widget::menu::{
self, CloseCondition, ItemHeight, ItemWidth, MenuBarState, PathHighlight,
};
use derive_setters::Setters;
use iced::touch::Finger;
use iced::Event;
use iced_core::widget::{tree, Tree, Widget};
use iced_core::{event, mouse, touch, Length, Point, Size};
use std::collections::HashSet;
/// A context menu is a menu in a graphical user interface that appears upon user interaction, such as a right-click mouse operation.
pub fn context_menu<'a, Message: 'a>(
content: impl Into<crate::Element<'a, Message>> + 'a,
// on_context: Message,
context_menu: Option<Vec<menu::Tree<'a, Message>>>,
) -> ContextMenu<'a, Message> {
let mut this = ContextMenu {
content: content.into(),
context_menu: context_menu.map(|menus| {
vec![menu::Tree::with_children(
crate::widget::row::<'static, Message>(),
menus,
)]
}),
};
if let Some(ref mut context_menu) = this.context_menu {
context_menu.iter_mut().for_each(menu::Tree::set_index);
}
this
}
/// A context menu is a menu in a graphical user interface that appears upon user interaction, such as a right-click mouse operation.
#[derive(Setters)]
#[must_use]
pub struct ContextMenu<'a, Message> {
#[setters(skip)]
content: crate::Element<'a, Message>,
#[setters(skip)]
context_menu: Option<Vec<menu::Tree<'a, Message>>>,
}
impl<'a, Message: Clone> Widget<Message, crate::Theme, crate::Renderer>
for ContextMenu<'a, Message>
{
fn tag(&self) -> tree::Tag {
tree::Tag::of::<LocalState>()
}
fn state(&self) -> tree::State {
#[allow(clippy::default_trait_access)]
tree::State::new(LocalState {
context_cursor: Point::default(),
fingers_pressed: Default::default(),
})
}
fn children(&self) -> Vec<Tree> {
let mut children = Vec::with_capacity(if self.context_menu.is_some() { 2 } else { 1 });
children.push(Tree::new(self.content.as_widget()));
// 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 diff(&mut self, tree: &mut Tree) {
self.content.as_widget_mut().diff(&mut tree.children[0]);
// if let Some(ref mut context_menus) = self.context_menu {
// for (menu, tree) in context_menus
// .iter_mut()
// .zip(tree.children[1].children.iter_mut())
// {
// menu.item.as_widget_mut().diff(tree);
// }
// }
}
fn size(&self) -> Size<Length> {
self.content.as_widget().size()
}
fn layout(
&self,
tree: &mut Tree,
renderer: &crate::Renderer,
limits: &iced_core::layout::Limits,
) -> iced_core::layout::Node {
self.content
.as_widget()
.layout(&mut tree.children[0], renderer, limits)
}
fn draw(
&self,
tree: &Tree,
renderer: &mut crate::Renderer,
theme: &crate::Theme,
style: &iced_core::renderer::Style,
layout: iced_core::Layout<'_>,
cursor: iced_core::mouse::Cursor,
viewport: &iced::Rectangle,
) {
self.content.as_widget().draw(
&tree.children[0],
renderer,
theme,
style,
layout,
cursor,
viewport,
);
}
fn operate(
&self,
tree: &mut Tree,
layout: iced_core::Layout<'_>,
renderer: &crate::Renderer,
operation: &mut dyn iced_core::widget::Operation<
iced_core::widget::OperationOutputWrapper<Message>,
>,
) {
self.content
.as_widget()
.operate(&mut tree.children[0], layout, renderer, operation);
}
fn on_event(
&mut self,
tree: &mut Tree,
event: iced::Event,
layout: iced_core::Layout<'_>,
cursor: iced_core::mouse::Cursor,
renderer: &crate::Renderer,
clipboard: &mut dyn iced_core::Clipboard,
shell: &mut iced_core::Shell<'_, Message>,
viewport: &iced::Rectangle,
) -> iced_core::event::Status {
let state = tree.state.downcast_mut::<LocalState>();
let bounds = layout.bounds();
if cursor.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);
}
_ => (),
}
// Present a context menu on a right click event.
if self.context_menu.is_some()
&& (right_button_released(&event) || (touch_lifted(&event) && fingers_pressed == 2))
{
state.context_cursor = cursor.position().unwrap_or_default();
let menu_state = tree.children[1].state.downcast_mut::<MenuBarState>();
menu_state.open = true;
menu_state.view_cursor = cursor;
return event::Status::Captured;
}
}
self.content.as_widget_mut().on_event(
&mut tree.children[0],
event,
layout,
cursor,
renderer,
clipboard,
shell,
viewport,
)
}
fn overlay<'b>(
&'b mut self,
tree: &'b mut Tree,
layout: iced_core::Layout<'_>,
_renderer: &crate::Renderer,
) -> Option<iced_core::overlay::Element<'b, Message, crate::Theme, crate::Renderer>> {
let state = tree.state.downcast_ref::<LocalState>();
let Some(context_menu) = self.context_menu.as_mut() else {
return None;
};
if !tree.children[1].state.downcast_ref::<MenuBarState>().open {
return None;
}
let mut bounds = layout.bounds();
bounds.x = state.context_cursor.x;
bounds.y = state.context_cursor.y;
Some(
crate::widget::menu::Menu {
tree: &mut tree.children[1],
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(),
)
}
}
impl<'a, Message: Clone + 'a> From<ContextMenu<'a, Message>> for crate::Element<'a, Message> {
fn from(widget: ContextMenu<'a, Message>) -> Self {
Self::new(widget)
}
}
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 { .. }))
}
pub struct LocalState {
context_cursor: Point,
fingers_pressed: HashSet<Finger>,
}

View file

@ -55,16 +55,19 @@
//!
pub mod action;
pub use action::MenuAction as Action;
mod flex;
pub mod key_bind;
pub mod menu_bar;
mod menu_bar;
pub use menu_bar::MenuBar;
pub(crate) use menu_bar::MenuBarState;
mod menu_inner;
pub mod menu_tree;
mod menu_tree;
pub use menu_tree::{menu_items as items, menu_root as root, MenuItem as Item, MenuTree as 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

@ -61,6 +61,9 @@ pub mod column {
pub mod layer_container;
pub use layer_container::{layer_container, LayerContainer};
pub mod context_menu;
pub use context_menu::{context_menu, ContextMenu};
pub mod dialog;
pub use dialog::{dialog, Dialog};

View file

@ -8,13 +8,12 @@
use apply::Apply;
use iced::{
clipboard::{dnd::DndAction, mime::AllowedMimeTypes},
widget::{container, scrollable},
Background, Length,
};
use iced_core::{Border, Color, Shadow};
use crate::widget::Container;
use crate::{theme, widget::segmented_button, Theme};
use crate::widget::{container, menu, scrollable, segmented_button, Container};
use crate::{theme, Theme};
use super::dnd_destination::DragId;
@ -63,10 +62,7 @@ pub struct NavBar<'a, Message> {
}
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 {
pub fn context_menu(mut self, context_menu: Option<Vec<menu::Tree<'a, Message>>>) -> Self {
self.segmented_button = self.segmented_button.context_menu(context_menu);
self
}

View file

@ -5,8 +5,9 @@ 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::menu::{
self, CloseCondition, ItemHeight, ItemWidth, MenuBarState, PathHighlight,
};
use crate::widget::{icon, Icon};
use crate::{Element, Renderer};
use derive_setters::Setters;
@ -124,8 +125,7 @@ where
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>>>,
pub(super) context_menu: Option<Vec<menu::Tree<'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>>,
@ -192,22 +192,19 @@ where
}
}
pub fn context_menu(
mut self,
context_menu: Option<Vec<MenuTree<'a, Message, crate::Renderer>>>,
) -> Self
pub fn context_menu(mut self, context_menu: Option<Vec<menu::Tree<'a, Message>>>) -> Self
where
Message: 'static,
{
self.context_menu = context_menu.map(|menus| {
vec![MenuTree::with_children(
vec![menu::Tree::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);
context_menu.iter_mut().for_each(menu::Tree::set_index);
}
self