Constrain context menu to the width of the widest item

Co-Authored-By: Nathan Sobo <nathan@zed.dev>

crates/context_menu/src/context_menu.rs

@@ -1,8 +1,8 @@
 use gpui::{
-    elements::*, geometry::vector::Vector2F, Action, Entity, RenderContext, View, ViewContext,
+    elements::*, geometry::vector::Vector2F, Action, Axis, Entity, RenderContext, SizeConstraint,
+    View, ViewContext,
 };
 use settings::Settings;
-use std::{marker::PhantomData, sync::Arc};
 
 pub enum ContextMenuItem {
     Item {
@@ -12,75 +12,51 @@ pub enum ContextMenuItem {
     Separator,
 }
 
-pub struct ContextMenu<T> {
+pub struct ContextMenu {
     position: Vector2F,
-    items: Arc<[ContextMenuItem]>,
+    items: Vec<ContextMenuItem>,
-    state: UniformListState,
+    widest_item_index: usize,
     selected_index: Option<usize>,
-    widest_item_index: Option<usize>,
     visible: bool,
-    _phantom: PhantomData<T>,
 }
 
-impl<T: 'static> Entity for ContextMenu<T> {
+impl Entity for ContextMenu {
     type Event = ();
 }
 
-impl<T: 'static> View for ContextMenu<T> {
+impl View for ContextMenu {
     fn ui_name() -> &'static str {
         "ContextMenu"
     }
 
     fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
+        enum Tag {}
+
         if !self.visible {
             return Empty::new().boxed();
         }
 
-        let theme = &cx.global::<Settings>().theme;
+        let style = cx.global::<Settings>().theme.context_menu.clone();
-        let menu_style = &theme.project_panel.context_menu;
+
-        let separator_style = menu_style.separator;
+        let mut widest_item = self.render_menu_item::<()>(self.widest_item_index, cx, &style);
-        let item_style = menu_style.item.clone();
+
-        let items = self.items.clone();
-        let selected_ix = self.selected_index;
         Overlay::new(
-            UniformList::new(
+            Flex::column()
-                self.state.clone(),
+                .with_children(
-                self.items.len(),
+                    (0..self.items.len()).map(|ix| self.render_menu_item::<Tag>(ix, cx, &style)),
-                move |range, elements, cx| {
-                    let start = range.start;
-                    elements.extend(items[range].iter().enumerate().map(|(ix, item)| {
-                        let item_ix = start + ix;
-                        match item {
-                            ContextMenuItem::Item { label, action } => {
-                                let action = action.boxed_clone();
-                                MouseEventHandler::new::<T, _, _>(item_ix, cx, |state, _| {
-                                    let style =
-                                        item_style.style_for(state, Some(item_ix) == selected_ix);
-                                    Flex::row()
-                                        .with_child(
-                                            Label::new(label.to_string(), style.label.clone())
-                                                .boxed(),
                 )
-                                        .boxed()
+                .constrained()
-                                })
+                .dynamically(move |constraint, cx| {
-                                .on_click(move |_, _, cx| {
+                    SizeConstraint::strict_along(
-                                    cx.dispatch_any_action(action.boxed_clone())
+                        Axis::Horizontal,
-                                })
+                        widest_item.layout(constraint, cx).x(),
-                                .boxed()
-                            }
-                            ContextMenuItem::Separator => {
-                                Empty::new().contained().with_style(separator_style).boxed()
-                            }
-                        }
-                    }))
-                },
                     )
-            .with_width_from_item(self.widest_item_index)
+                })
+                .contained()
+                .with_style(style.container)
                 .boxed(),
         )
         .with_abs_position(self.position)
-        .contained()
-        .with_style(menu_style.container)
         .boxed()
     }
 
@@ -90,16 +66,14 @@ impl<T: 'static> View for ContextMenu<T> {
     }
 }
 
-impl<T: 'static> ContextMenu<T> {
+impl ContextMenu {
     pub fn new() -> Self {
         Self {
             position: Default::default(),
-            items: Arc::from([]),
+            items: Default::default(),
-            state: Default::default(),
             selected_index: Default::default(),
             widest_item_index: Default::default(),
             visible: false,
-            _phantom: PhantomData,
         }
     }
 
@@ -109,7 +83,9 @@ impl<T: 'static> ContextMenu<T> {
         items: impl IntoIterator<Item = ContextMenuItem>,
         cx: &mut ViewContext<Self>,
     ) {
-        self.items = items.into_iter().collect();
+        let mut items = items.into_iter().peekable();
+        assert!(items.peek().is_some(), "must have at least one item");
+        self.items = items.collect();
         self.widest_item_index = self
             .items
             .iter()
@@ -118,10 +94,39 @@ impl<T: 'static> ContextMenu<T> {
                 ContextMenuItem::Item { label, .. } => label.chars().count(),
                 ContextMenuItem::Separator => 0,
             })
-            .map(|(ix, _)| ix);
+            .unwrap()
+            .0;
         self.position = position;
         self.visible = true;
         cx.focus_self();
         cx.notify();
     }
+
+    fn render_menu_item<T: 'static>(
+        &self,
+        ix: usize,
+        cx: &mut RenderContext<ContextMenu>,
+        style: &theme::ContextMenu,
+    ) -> ElementBox {
+        match &self.items[ix] {
+            ContextMenuItem::Item { label, action } => {
+                let action = action.boxed_clone();
+                MouseEventHandler::new::<T, _, _>(ix, cx, |state, _| {
+                    let style = style.item.style_for(state, Some(ix) == self.selected_index);
+                    Flex::row()
+                        .with_child(Label::new(label.to_string(), style.label.clone()).boxed())
+                        .boxed()
+                })
+                .on_click(move |_, _, cx| cx.dispatch_any_action(action.boxed_clone()))
+                .boxed()
+            }
+            ContextMenuItem::Separator => Empty::new()
+                .contained()
+                .with_style(style.separator)
+                .constrained()
+                .with_height(1.)
+                .flex(1., false)
+                .boxed(),
+        }
+    }
 }

crates/gpui/src/elements/constrained_box.rs

@@ -9,46 +9,121 @@ use crate::{
 
 pub struct ConstrainedBox {
     child: ElementBox,
-    constraint: SizeConstraint,
+    constraint: Constraint,
+}
+
+pub enum Constraint {
+    Static(SizeConstraint),
+    Dynamic(Box<dyn FnMut(SizeConstraint, &mut LayoutContext) -> SizeConstraint>),
+}
+
+impl ToJson for Constraint {
+    fn to_json(&self) -> serde_json::Value {
+        match self {
+            Constraint::Static(constraint) => constraint.to_json(),
+            Constraint::Dynamic(_) => "dynamic".into(),
+        }
+    }
 }
 
 impl ConstrainedBox {
     pub fn new(child: ElementBox) -> Self {
         Self {
             child,
-            constraint: SizeConstraint {
+            constraint: Constraint::Static(Default::default()),
-                min: Vector2F::zero(),
-                max: Vector2F::splat(f32::INFINITY),
-            },
         }
     }
 
+    pub fn dynamically(
+        mut self,
+        constraint: impl 'static + FnMut(SizeConstraint, &mut LayoutContext) -> SizeConstraint,
+    ) -> Self {
+        self.constraint = Constraint::Dynamic(Box::new(constraint));
+        self
+    }
+
     pub fn with_min_width(mut self, min_width: f32) -> Self {
-        self.constraint.min.set_x(min_width);
+        if let Constraint::Dynamic(_) = self.constraint {
+            self.constraint = Constraint::Static(Default::default());
+        }
+
+        if let Constraint::Static(constraint) = &mut self.constraint {
+            constraint.min.set_x(min_width);
+        } else {
+            unreachable!()
+        }
+
         self
     }
 
     pub fn with_max_width(mut self, max_width: f32) -> Self {
-        self.constraint.max.set_x(max_width);
+        if let Constraint::Dynamic(_) = self.constraint {
+            self.constraint = Constraint::Static(Default::default());
+        }
+
+        if let Constraint::Static(constraint) = &mut self.constraint {
+            constraint.max.set_x(max_width);
+        } else {
+            unreachable!()
+        }
+
         self
     }
 
     pub fn with_max_height(mut self, max_height: f32) -> Self {
-        self.constraint.max.set_y(max_height);
+        if let Constraint::Dynamic(_) = self.constraint {
+            self.constraint = Constraint::Static(Default::default());
+        }
+
+        if let Constraint::Static(constraint) = &mut self.constraint {
+            constraint.max.set_y(max_height);
+        } else {
+            unreachable!()
+        }
+
         self
     }
 
     pub fn with_width(mut self, width: f32) -> Self {
-        self.constraint.min.set_x(width);
+        if let Constraint::Dynamic(_) = self.constraint {
-        self.constraint.max.set_x(width);
+            self.constraint = Constraint::Static(Default::default());
+        }
+
+        if let Constraint::Static(constraint) = &mut self.constraint {
+            constraint.min.set_x(width);
+            constraint.max.set_x(width);
+        } else {
+            unreachable!()
+        }
+
         self
     }
 
     pub fn with_height(mut self, height: f32) -> Self {
-        self.constraint.min.set_y(height);
+        if let Constraint::Dynamic(_) = self.constraint {
-        self.constraint.max.set_y(height);
+            self.constraint = Constraint::Static(Default::default());
+        }
+
+        if let Constraint::Static(constraint) = &mut self.constraint {
+            constraint.min.set_y(height);
+            constraint.max.set_y(height);
+        } else {
+            unreachable!()
+        }
+
         self
     }
+
+    fn constraint(
+        &mut self,
+        input_constraint: SizeConstraint,
+        cx: &mut LayoutContext,
+    ) -> SizeConstraint {
+        match &mut self.constraint {
+            Constraint::Static(constraint) => *constraint,
+            Constraint::Dynamic(compute_constraint) => compute_constraint(input_constraint, cx),
+        }
+    }
 }
 
 impl Element for ConstrainedBox {
@@ -57,13 +132,14 @@ impl Element for ConstrainedBox {
 
     fn layout(
         &mut self,
-        mut constraint: SizeConstraint,
+        mut parent_constraint: SizeConstraint,
         cx: &mut LayoutContext,
     ) -> (Vector2F, Self::LayoutState) {
-        constraint.min = constraint.min.max(self.constraint.min);
+        let constraint = self.constraint(parent_constraint, cx);
-        constraint.max = constraint.max.min(self.constraint.max);
+        parent_constraint.min = parent_constraint.min.max(constraint.min);
-        constraint.max = constraint.max.max(constraint.min);
+        parent_constraint.max = parent_constraint.max.min(constraint.max);
-        let size = self.child.layout(constraint, cx);
+        parent_constraint.max = parent_constraint.max.max(parent_constraint.min);
+        let size = self.child.layout(parent_constraint, cx);
         (size, ())
     }
 
@@ -96,6 +172,6 @@ impl Element for ConstrainedBox {
         _: &Self::PaintState,
         cx: &DebugContext,
     ) -> json::Value {
-        json!({"type": "ConstrainedBox", "set_constraint": self.constraint.to_json(), "child": self.child.debug(cx)})
+        json!({"type": "ConstrainedBox", "assigned_constraint": self.constraint.to_json(), "child": self.child.debug(cx)})
     }
 }

crates/gpui/src/presenter.rs

@@ -524,6 +524,15 @@ impl SizeConstraint {
     }
 }
 
+impl Default for SizeConstraint {
+    fn default() -> Self {
+        SizeConstraint {
+            min: Vector2F::zero(),
+            max: Vector2F::splat(f32::INFINITY),
+        }
+    }
+}
+
 impl ToJson for SizeConstraint {
     fn to_json(&self) -> serde_json::Value {
         json!({

crates/project_panel/src/project_panel.rs

@@ -38,7 +38,7 @@ pub struct ProjectPanel {
     selection: Option<Selection>,
     edit_state: Option<EditState>,
     filename_editor: ViewHandle<Editor>,
-    context_menu: ViewHandle<ContextMenu<Self>>,
+    context_menu: ViewHandle<ContextMenu>,
     handle: WeakViewHandle<Self>,
 }
 
@@ -220,6 +220,14 @@ impl ProjectPanel {
                         action: Box::new(AddDirectory),
                     },
                     ContextMenuItem::Separator,
+                    ContextMenuItem::Item {
+                        label: "Rename".to_string(),
+                        action: Box::new(Rename),
+                    },
+                    ContextMenuItem::Item {
+                        label: "Delete".to_string(),
+                        action: Box::new(Delete),
+                    },
                 ],
                 cx,
             );

crates/theme/src/theme.rs

@@ -19,6 +19,7 @@ pub struct Theme {
     #[serde(default)]
     pub name: String,
     pub workspace: Workspace,
+    pub context_menu: ContextMenu,
     pub chat_panel: ChatPanel,
     pub contacts_panel: ContactsPanel,
     pub contact_finder: ContactFinder,
@@ -226,7 +227,6 @@ pub struct ProjectPanel {
     pub ignored_entry_fade: f32,
     pub filename_editor: FieldEditor,
     pub indent_width: f32,
-    pub context_menu: ContextMenu,
 }
 
 #[derive(Clone, Debug, Deserialize, Default)]

styles/src/styleTree/app.ts

@@ -9,6 +9,7 @@ import projectPanel from "./projectPanel";
 import search from "./search";
 import picker from "./picker";
 import workspace from "./workspace";
+import contextMenu from "./contextMenu";
 import projectDiagnostics from "./projectDiagnostics";
 import contactNotification from "./contactNotification";
 
@@ -20,6 +21,7 @@ export default function app(theme: Theme): Object {
   return {
     picker: picker(theme),
     workspace: workspace(theme),
+    contextMenu: contextMenu(theme),
     editor: editor(theme),
     projectDiagnostics: projectDiagnostics(theme),
     commandPalette: commandPalette(theme),

styles/src/styleTree/contextMenu.ts

@@ -0,0 +1,23 @@
+import Theme from "../themes/common/theme";
+import { shadow, text } from "./components";
+
+export default function contextMenu(theme: Theme) {
+  return {
+    background: "#ff0000",
+    // background: backgroundColor(theme, 300, "base"),
+    cornerRadius: 6,
+    padding: {
+      bottom: 2,
+      left: 6,
+      right: 6,
+      top: 2,
+    },
+    shadow: shadow(theme),
+    item: {
+      label: text(theme, "sans", "secondary", { size: "sm" }),
+    },
+    separator: {
+      background: "#00ff00"
+    }
+  }
+}

styles/src/styleTree/projectPanel.ts

@@ -32,21 +32,5 @@ export default function projectPanel(theme: Theme) {
       text: text(theme, "mono", "primary", { size: "sm" }),
       selection: player(theme, 1).selection,
     },
-    contextMenu: {
-      width: 100,
-      // background: "#ff0000",
-      background: backgroundColor(theme, 300, "base"),
-      cornerRadius: 6,
-      padding: {
-        bottom: 2,
-        left: 6,
-        right: 6,
-        top: 2,
-      },
-      item: {
-        label: text(theme, "sans", "secondary", { size: "sm" }),
-      },
-      shadow: shadow(theme),
-    }
   };
 }