More attachment configuration for context menus

crates/gpui2/src/elements/overlay.rs

@@ -15,7 +15,7 @@ pub struct Overlay<V> {
     anchor_corner: AnchorCorner,
     fit_mode: OverlayFitMode,
     // todo!();
-    // anchor_position: Option<Vector2F>,
+    anchor_position: Option<Point<Pixels>>,
     // position_mode: OverlayPositionMode,
 }
 
@@ -26,6 +26,7 @@ pub fn overlay<V: 'static>() -> Overlay<V> {
         children: SmallVec::new(),
         anchor_corner: AnchorCorner::TopLeft,
         fit_mode: OverlayFitMode::SwitchAnchor,
+        anchor_position: None,
     }
 }
 
@@ -36,6 +37,13 @@ impl<V> Overlay<V> {
         self
     }
 
+    /// Sets the position in window co-ordinates
+    /// (otherwise the location the overlay is rendered is used)
+    pub fn position(mut self, anchor: Point<Pixels>) -> Self {
+        self.anchor_position = Some(anchor);
+        self
+    }
+
     /// Snap to window edge instead of switching anchor corner when an overflow would occur.
     pub fn snap_to_window(mut self) -> Self {
         self.fit_mode = OverlayFitMode::SnapToWindow;
@@ -102,7 +110,7 @@ impl<V: 'static> Element<V> for Overlay<V> {
             child_max = child_max.max(&child_bounds.lower_right());
         }
         let size: Size<Pixels> = (child_max - child_min).into();
-        let origin = bounds.origin;
+        let origin = self.anchor_position.unwrap_or(bounds.origin);
 
         let mut desired = self.anchor_corner.get_bounds(origin, size);
         let limits = Bounds {
@@ -196,6 +204,15 @@ impl AnchorCorner {
         Bounds { origin, size }
     }
 
+    pub fn corner(&self, bounds: Bounds<Pixels>) -> Point<Pixels> {
+        match self {
+            Self::TopLeft => bounds.origin,
+            Self::TopRight => bounds.upper_right(),
+            Self::BottomLeft => bounds.lower_left(),
+            Self::BottomRight => bounds.lower_right(),
+        }
+    }
+
     fn switch_axis(self, axis: Axis) -> Self {
         match axis {
             Axis::Vertical => match self {

crates/gpui2/src/window.rs

@@ -1151,6 +1151,14 @@ impl<'a> WindowContext<'a> {
                 self.window.mouse_position = mouse_move.position;
                 InputEvent::MouseMove(mouse_move)
             }
+            InputEvent::MouseDown(mouse_down) => {
+                self.window.mouse_position = mouse_down.position;
+                InputEvent::MouseDown(mouse_down)
+            }
+            InputEvent::MouseUp(mouse_up) => {
+                self.window.mouse_position = mouse_up.position;
+                InputEvent::MouseUp(mouse_up)
+            }
             // Translate dragging and dropping of external files from the operating system
             // to internal drag and drop events.
             InputEvent::FileDrop(file_drop) => match file_drop {

crates/terminal_view2/src/terminal_view.rs

@@ -32,7 +32,7 @@ use workspace::{
     notifications::NotifyResultExt,
     register_deserializable_item,
     searchable::{SearchEvent, SearchOptions, SearchableItem},
-    ui::{ContextMenu, ContextMenuItem, Label},
+    ui::{ContextMenu, Label},
     CloseActiveItem, NewCenterTerminal, Pane, ToolbarItemLocation, Workspace, WorkspaceId,
 };
 

crates/ui2/src/components/context_menu.rs

@@ -1,56 +1,14 @@
 use std::cell::RefCell;
 use std::rc::Rc;
 
-use crate::{prelude::*, ListItemVariant};
+use crate::prelude::*;
 use crate::{v_stack, Label, List, ListEntry, ListItem, ListSeparator, ListSubHeader};
 use gpui::{
-    overlay, px, Action, AnyElement, Bounds, DispatchPhase, EventEmitter, FocusHandle,
+    overlay, px, Action, AnchorCorner, AnyElement, Bounds, DispatchPhase, Div, EventEmitter,
-    FocusableView, LayoutId, MouseButton, MouseDownEvent, Overlay, Render, View,
+    FocusHandle, FocusableView, LayoutId, MouseButton, MouseDownEvent, Pixels, Point, Render, View,
 };
 use smallvec::SmallVec;
 
-pub enum ContextMenuItem {
-    Header(SharedString),
-    Entry(Label, Box<dyn gpui::Action>),
-    Separator,
-}
-
-impl Clone for ContextMenuItem {
-    fn clone(&self) -> Self {
-        match self {
-            ContextMenuItem::Header(name) => ContextMenuItem::Header(name.clone()),
-            ContextMenuItem::Entry(label, action) => {
-                ContextMenuItem::Entry(label.clone(), action.boxed_clone())
-            }
-            ContextMenuItem::Separator => ContextMenuItem::Separator,
-        }
-    }
-}
-impl ContextMenuItem {
-    fn to_list_item(self) -> ListItem {
-        match self {
-            ContextMenuItem::Header(label) => ListSubHeader::new(label).into(),
-            ContextMenuItem::Entry(label, action) => ListEntry::new(label)
-                .variant(ListItemVariant::Inset)
-                .action(action)
-                .into(),
-            ContextMenuItem::Separator => ListSeparator::new().into(),
-        }
-    }
-
-    pub fn header(label: impl Into<SharedString>) -> Self {
-        Self::Header(label.into())
-    }
-
-    pub fn separator() -> Self {
-        Self::Separator
-    }
-
-    pub fn entry(label: Label, action: impl Action) -> Self {
-        Self::Entry(label, Box::new(action))
-    }
-}
-
 pub struct ContextMenu {
     items: Vec<ListItem>,
     focus_handle: FocusHandle,
@@ -101,17 +59,14 @@ impl ContextMenu {
 }
 
 impl Render for ContextMenu {
-    type Element = Overlay<Self>;
+    type Element = Div<Self>;
     // todo!()
     fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
-        overlay().child(
         div().elevation_2(cx).flex().flex_row().child(
             v_stack()
                 .min_w(px(200.))
                 .track_focus(&self.focus_handle)
-                    .on_mouse_down_out(|this: &mut Self, _, cx| {
+                .on_mouse_down_out(|this: &mut Self, _, cx| this.cancel(&Default::default(), cx))
-                        this.cancel(&Default::default(), cx)
-                    })
                 // .on_action(ContextMenu::select_first)
                 // .on_action(ContextMenu::select_last)
                 // .on_action(ContextMenu::select_next)
@@ -123,45 +78,74 @@ impl Render for ContextMenu {
                 // .border()
                 // .border_color(cx.theme().colors().border)
                 .child(List::new(self.items.clone())),
-            ),
         )
     }
 }
 
 pub struct MenuHandle<V: 'static> {
-    id: ElementId,
+    id: Option<ElementId>,
-    children: SmallVec<[AnyElement<V>; 2]>,
+    child_builder: Option<Box<dyn FnOnce(bool) -> AnyElement<V> + 'static>>,
-    builder: Rc<dyn Fn(&mut V, &mut ViewContext<V>) -> View<ContextMenu> + 'static>,
+    menu_builder: Option<Rc<dyn Fn(&mut V, &mut ViewContext<V>) -> View<ContextMenu> + 'static>>,
-}
 
-impl<V: 'static> ParentComponent<V> for MenuHandle<V> {
+    anchor: Option<AnchorCorner>,
-    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<V>; 2]> {
+    attach: Option<AnchorCorner>,
-        &mut self.children
-    }
 }
 
 impl<V: 'static> MenuHandle<V> {
-    pub fn new(
+    pub fn id(mut self, id: impl Into<ElementId>) -> Self {
-        id: impl Into<ElementId>,
+        self.id = Some(id.into());
-        builder: impl Fn(&mut V, &mut ViewContext<V>) -> View<ContextMenu> + 'static,
+        self
-    ) -> Self {
-        Self {
-            id: id.into(),
-            children: SmallVec::new(),
-            builder: Rc::new(builder),
     }
+
+    pub fn menu(
+        mut self,
+        f: impl Fn(&mut V, &mut ViewContext<V>) -> View<ContextMenu> + 'static,
+    ) -> Self {
+        self.menu_builder = Some(Rc::new(f));
+        self
+    }
+
+    pub fn child<R: Component<V>>(mut self, f: impl FnOnce(bool) -> R + 'static) -> Self {
+        self.child_builder = Some(Box::new(|b| f(b).render()));
+        self
+    }
+
+    /// anchor defines which corner of the menu to anchor to the attachment point
+    /// (by default the cursor position, but see attach)
+    pub fn anchor(mut self, anchor: AnchorCorner) -> Self {
+        self.anchor = Some(anchor);
+        self
+    }
+
+    /// attach defines which corner of the handle to attach the menu's anchor to
+    pub fn attach(mut self, attach: AnchorCorner) -> Self {
+        self.attach = Some(attach);
+        self
+    }
+}
+
+pub fn menu_handle<V: 'static>() -> MenuHandle<V> {
+    MenuHandle {
+        id: None,
+        child_builder: None,
+        menu_builder: None,
+        anchor: None,
+        attach: None,
     }
 }
 
 pub struct MenuHandleState<V> {
     menu: Rc<RefCell<Option<View<ContextMenu>>>>,
+    position: Rc<RefCell<Point<Pixels>>>,
+    child_layout_id: Option<LayoutId>,
+    child_element: Option<AnyElement<V>>,
     menu_element: Option<AnyElement<V>>,
 }
 impl<V: 'static> Element<V> for MenuHandle<V> {
     type ElementState = MenuHandleState<V>;
 
     fn element_id(&self) -> Option<gpui::ElementId> {
-        Some(self.id.clone())
+        Some(self.id.clone().expect("menu_handle must have an id()"))
     }
 
     fn layout(
@@ -170,27 +154,50 @@ impl<V: 'static> Element<V> for MenuHandle<V> {
         element_state: Option<Self::ElementState>,
         cx: &mut crate::ViewContext<V>,
     ) -> (gpui::LayoutId, Self::ElementState) {
-        let mut child_layout_ids = self
+        let (menu, position) = if let Some(element_state) = element_state {
-            .children
+            (element_state.menu, element_state.position)
-            .iter_mut()
-            .map(|child| child.layout(view_state, cx))
-            .collect::<SmallVec<[LayoutId; 2]>>();
-
-        let menu = if let Some(element_state) = element_state {
-            element_state.menu
         } else {
-            Rc::new(RefCell::new(None))
+            (Rc::default(), Rc::default())
         };
 
+        let mut menu_layout_id = None;
+
         let menu_element = menu.borrow_mut().as_mut().map(|menu| {
-            let mut view = menu.clone().render();
+            let mut overlay = overlay::<V>().snap_to_window();
-            child_layout_ids.push(view.layout(view_state, cx));
+            if let Some(anchor) = self.anchor {
+                overlay = overlay.anchor(anchor);
+            }
+            overlay = overlay.position(*position.borrow());
+
+            let mut view = overlay.child(menu.clone()).render();
+            menu_layout_id = Some(view.layout(view_state, cx));
             view
         });
 
-        let layout_id = cx.request_layout(&gpui::Style::default(), child_layout_ids.into_iter());
+        let mut child_element = self
+            .child_builder
+            .take()
+            .map(|child_builder| (child_builder)(menu.borrow().is_some()));
 
-        (layout_id, MenuHandleState { menu, menu_element })
+        let child_layout_id = child_element
+            .as_mut()
+            .map(|child_element| child_element.layout(view_state, cx));
+
+        let layout_id = cx.request_layout(
+            &gpui::Style::default(),
+            menu_layout_id.into_iter().chain(child_layout_id),
+        );
+
+        (
+            layout_id,
+            MenuHandleState {
+                menu,
+                position,
+                child_element,
+                child_layout_id,
+                menu_element,
+            },
+        )
     }
 
     fn paint(
@@ -200,7 +207,7 @@ impl<V: 'static> Element<V> for MenuHandle<V> {
         element_state: &mut Self::ElementState,
         cx: &mut crate::ViewContext<V>,
     ) {
-        for child in &mut self.children {
+        if let Some(child) = element_state.child_element.as_mut() {
             child.paint(view_state, cx);
         }
 
@@ -209,8 +216,14 @@ impl<V: 'static> Element<V> for MenuHandle<V> {
             return;
         }
 
+        let Some(builder) = self.menu_builder.clone() else {
+            return;
+        };
         let menu = element_state.menu.clone();
-        let builder = self.builder.clone();
+        let position = element_state.position.clone();
+        let attach = self.attach.clone();
+        let child_layout_id = element_state.child_layout_id.clone();
+
         cx.on_mouse_event(move |view_state, event: &MouseDownEvent, phase, cx| {
             if phase == DispatchPhase::Bubble
                 && event.button == MouseButton::Right
@@ -229,6 +242,14 @@ impl<V: 'static> Element<V> for MenuHandle<V> {
                 })
                 .detach();
                 *menu.borrow_mut() = Some(new_menu);
+
+                *position.borrow_mut() = if attach.is_some() && child_layout_id.is_some() {
+                    attach
+                        .unwrap()
+                        .corner(cx.layout_bounds(child_layout_id.unwrap()))
+                } else {
+                    cx.mouse_position()
+                };
                 cx.notify();
             }
         });
@@ -250,35 +271,101 @@ mod stories {
     use crate::story::Story;
     use gpui::{action, Div, Render, VisualContext};
 
+    #[action]
+    struct PrintCurrentDate {}
+
+    fn build_menu(cx: &mut WindowContext, header: impl Into<SharedString>) -> View<ContextMenu> {
+        cx.build_view(|cx| {
+            ContextMenu::new(cx).header(header).separator().entry(
+                Label::new("Print current time"),
+                PrintCurrentDate {}.boxed_clone(),
+            )
+        })
+    }
+
     pub struct ContextMenuStory;
 
     impl Render for ContextMenuStory {
         type Element = Div<Self>;
 
         fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
-            #[action]
-            struct PrintCurrentDate {}
-
             Story::container(cx)
-                .child(Story::title_for::<_, ContextMenu>(cx))
                 .on_action(|_, _: &PrintCurrentDate, _| {
                     if let Ok(unix_time) = std::time::UNIX_EPOCH.elapsed() {
                         println!("Current Unix time is {:?}", unix_time.as_secs());
                     }
                 })
+                .flex()
+                .flex_row()
+                .justify_between()
                 .child(
-                    MenuHandle::new("test", move |_, cx| {
+                    div()
-                        cx.build_view(|cx| {
+                        .flex()
-                            ContextMenu::new(cx)
+                        .flex_col()
-                                .header("Section header")
+                        .justify_between()
-                                .separator()
+                        .child(
-                                .entry(
+                            menu_handle()
-                                    Label::new("Print current time"),
+                                .id("test2")
-                                    PrintCurrentDate {}.boxed_clone(),
+                                .child(|is_open| {
+                                    Label::new(if is_open {
+                                        "TOP LEFT"
+                                    } else {
+                                        "RIGHT CLICK ME"
+                                    })
+                                    .render()
+                                })
+                                .menu(move |_, cx| build_menu(cx, "top left")),
                         )
+                        .child(
+                            menu_handle()
+                                .id("test1")
+                                .child(|is_open| {
+                                    Label::new(if is_open {
+                                        "BOTTOM LEFT"
+                                    } else {
+                                        "RIGHT CLICK ME"
                                     })
+                                    .render()
                                 })
-                    .child(Label::new("RIGHT CLICK ME")),
+                                .anchor(AnchorCorner::BottomLeft)
+                                .attach(AnchorCorner::TopLeft)
+                                .menu(move |_, cx| build_menu(cx, "bottom left")),
+                        ),
+                )
+                .child(
+                    div()
+                        .flex()
+                        .flex_col()
+                        .justify_between()
+                        .child(
+                            menu_handle()
+                                .id("test3")
+                                .child(|is_open| {
+                                    Label::new(if is_open {
+                                        "TOP RIGHT"
+                                    } else {
+                                        "RIGHT CLICK ME"
+                                    })
+                                    .render()
+                                })
+                                .anchor(AnchorCorner::TopRight)
+                                .menu(move |_, cx| build_menu(cx, "top right")),
+                        )
+                        .child(
+                            menu_handle()
+                                .id("test4")
+                                .child(|is_open| {
+                                    Label::new(if is_open {
+                                        "BOTTOM RIGHT"
+                                    } else {
+                                        "RIGHT CLICK ME"
+                                    })
+                                    .render()
+                                })
+                                .anchor(AnchorCorner::BottomRight)
+                                .attach(AnchorCorner::TopRight)
+                                .menu(move |_, cx| build_menu(cx, "bottom right")),
+                        ),
                 )
         }
     }

crates/ui2/src/components/icon_button.rs

@@ -19,6 +19,7 @@ pub struct IconButton<V: 'static> {
     color: TextColor,
     variant: ButtonVariant,
     state: InteractionState,
+    selected: bool,
     tooltip: Option<Box<dyn Fn(&mut V, &mut ViewContext<V>) -> AnyView + 'static>>,
     handlers: IconButtonHandlers<V>,
 }
@@ -31,6 +32,7 @@ impl<V: 'static> IconButton<V> {
             color: TextColor::default(),
             variant: ButtonVariant::default(),
             state: InteractionState::default(),
+            selected: false,
             tooltip: None,
             handlers: IconButtonHandlers::default(),
         }
@@ -56,6 +58,11 @@ impl<V: 'static> IconButton<V> {
         self
     }
 
+    pub fn selected(mut self, selected: bool) -> Self {
+        self.selected = selected;
+        self
+    }
+
     pub fn tooltip(
         mut self,
         tooltip: impl Fn(&mut V, &mut ViewContext<V>) -> AnyView + 'static,
@@ -80,7 +87,7 @@ impl<V: 'static> IconButton<V> {
             _ => self.color,
         };
 
-        let (bg_color, bg_hover_color, bg_active_color) = match self.variant {
+        let (mut bg_color, bg_hover_color, bg_active_color) = match self.variant {
             ButtonVariant::Filled => (
                 cx.theme().colors().element_background,
                 cx.theme().colors().element_hover,
@@ -93,6 +100,10 @@ impl<V: 'static> IconButton<V> {
             ),
         };
 
+        if self.selected {
+            bg_color = bg_hover_color;
+        }
+
         let mut button = h_stack()
             .id(self.id.clone())
             .justify_center()
@@ -113,8 +124,10 @@ impl<V: 'static> IconButton<V> {
         }
 
         if let Some(tooltip) = self.tooltip.take() {
+            if !self.selected {
                 button = button.tooltip(move |view: &mut V, cx| (tooltip)(view, cx))
             }
+        }
 
         button
     }

crates/workspace2/src/dock.rs

@@ -1,18 +1,18 @@
 use crate::{status_bar::StatusItemView, Axis, Workspace};
 use gpui::{
-    div, overlay, point, px, Action, AnyElement, AnyView, AppContext, Component, DispatchPhase,
+    div, overlay, point, px, Action, AnchorCorner, AnyElement, AnyView, AppContext, Component,
-    Div, Element, ElementId, Entity, EntityId, EventEmitter, FocusHandle, FocusableView,
+    DispatchPhase, Div, Element, ElementId, Entity, EntityId, EventEmitter, FocusHandle,
-    InteractiveComponent, LayoutId, MouseButton, MouseDownEvent, ParentComponent, Pixels, Point,
+    FocusableView, InteractiveComponent, LayoutId, MouseButton, MouseDownEvent, ParentComponent,
-    Render, SharedString, Style, Styled, Subscription, View, ViewContext, VisualContext, WeakView,
+    Pixels, Point, Render, SharedString, Style, Styled, Subscription, View, ViewContext,
-    WindowContext,
+    VisualContext, WeakView, WindowContext,
 };
 use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};
 use smallvec::SmallVec;
 use std::{cell::RefCell, rc::Rc, sync::Arc};
 use ui::{
-    h_stack, ContextMenu, ContextMenuItem, IconButton, InteractionState, Label, MenuEvent,
+    h_stack, menu_handle, ContextMenu, IconButton, InteractionState, Label, MenuEvent, MenuHandle,
-    MenuHandle, Tooltip,
+    Tooltip,
 };
 
 pub enum PanelEvent {
@@ -672,6 +672,13 @@ impl Render for PanelButtons {
         let active_index = dock.active_panel_index;
         let is_open = dock.is_open;
 
+        let (menu_anchor, menu_attach) = match dock.position {
+            DockPosition::Left => (AnchorCorner::BottomLeft, AnchorCorner::TopLeft),
+            DockPosition::Bottom | DockPosition::Right => {
+                (AnchorCorner::BottomRight, AnchorCorner::TopRight)
+            }
+        };
+
         let buttons = dock
             .panel_entries
             .iter()
@@ -697,11 +704,14 @@ impl Render for PanelButtons {
                 };
 
                 Some(
-                    MenuHandle::new(
+                    menu_handle()
-                        SharedString::from(format!("{} tooltip", name)),
+                        .id(name)
-                        move |_, cx| cx.build_view(|cx| ContextMenu::new(cx).header("SECTION")),
+                        .menu(move |_, cx| {
-                    )
+                            cx.build_view(|cx| ContextMenu::new(cx).header("SECTION"))
-                    .child(button),
+                        })
+                        .anchor(menu_anchor)
+                        .attach(menu_attach)
+                        .child(|is_open| button.selected(is_open)),
                 )
             });