gpui-cn 0.5.0

shadcn-style components for GPUI, built on gpui-base.
Documentation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
//! A menu bar in the window: a row of titles, each opening a menu under
//! it, on the same state and panels as every other menu.

use std::{
    cell::RefCell,
    collections::{HashMap, HashSet},
    rc::Rc,
};

use gpui_kit::{
    App, AppContext as _, Bounds, Context, ElementId, Entity, EventEmitter, FocusHandle,
    InteractiveElement as _, IntoElement, MouseButton, OwnedMenu, ParentElement as _, Pixels,
    RenderOnce, Role, SharedString, StatefulInteractiveElement as _, Styled as _, Subscription,
    Window,
    base::{
        Align, Disableable, GlobalState, Selectable as _, TestSupportExt as _,
        actions::{SelectDown, SelectLeft, SelectRight},
        h_flex,
    },
    div,
    prelude::FluentBuilder as _,
};

use super::{
    BAR_CONTEXT, MenuAnchor, MenuEntry, MenuEvent, MenuState, panel::MenuPanels, panel::measure,
};
use crate::{ActiveTheme as _, Button, ButtonSize};

/// One menu of a [`MenuBar`]: its title and its rows.
#[derive(Clone)]
#[non_exhaustive]
pub struct MenuBarMenu {
    key: SharedString,
    label: SharedString,
    disabled: bool,
    entries: Vec<MenuEntry>,
}

impl MenuBarMenu {
    /// A menu with a stable key and the title it shows.
    pub fn new(key: impl Into<SharedString>, label: impl Into<SharedString>) -> Self {
        Self {
            key: key.into(),
            label: label.into(),
            disabled: false,
            entries: Vec::new(),
        }
    }

    /// The menu's rows.
    pub fn entries(mut self, entries: impl IntoIterator<Item = impl Into<MenuEntry>>) -> Self {
        self.entries.extend(entries.into_iter().map(Into::into));
        self
    }

    /// The menu's key.
    pub fn key(&self) -> &SharedString {
        &self.key
    }

    /// The title the bar shows.
    pub fn label(&self) -> &SharedString {
        &self.label
    }

    /// Whether the title ignores input.
    pub fn is_disabled(&self) -> bool {
        self.disabled
    }
}

impl Disableable for MenuBarMenu {
    fn disabled(mut self, disabled: bool) -> Self {
        self.disabled = disabled;
        self
    }
}

/// A menu of GPUI's application menu data, keyed by its name, its rows
/// keyed as [`MenuEntry::from_app_menu_item`] keys them, unique within
/// the menu. Items the system owns are left out.
impl From<OwnedMenu> for MenuBarMenu {
    fn from(menu: OwnedMenu) -> Self {
        let mut used = HashSet::new();
        let entries: Vec<MenuEntry> = menu
            .items
            .into_iter()
            .filter_map(|item| MenuEntry::from_app_item_keyed(item, &mut used))
            .collect();
        Self::new(menu.name.clone(), menu.name)
            .disabled(menu.disabled)
            .entries(entries)
    }
}

/// The menus of a [`MenuBar`] and the one open among them.
///
/// Owned by the view that shows the bar, which observes it so a change
/// renders. The open menu is a [`MenuState`], so its keyboard, dismissal,
/// and focus are every menu's: Left and Right at its root move to the
/// neighbouring menu. Items' actions go to the element that had focus
/// before the bar opened, so Edit > Copy reaches the focused field.
pub struct MenuBarState {
    menus: Vec<MenuBarMenu>,
    /// The menu that is open, by index, while the menu state is open.
    open: Option<usize>,
    menu: Entity<MenuState>,
    /// The element focused before the bar opened, which its items act on.
    context: Option<FocusHandle>,
    /// Where each title was last laid out, by key.
    titles: Rc<RefCell<HashMap<SharedString, Bounds<Pixels>>>>,
    /// Each title's focus. Tab reaches the highlighted title only, and the
    /// arrows move focus between titles.
    title_focus: Vec<FocusHandle>,
    /// The title Tab reaches and the arrows move from.
    highlighted: usize,
    _subscriptions: Vec<Subscription>,
}

impl EventEmitter<MenuEvent> for MenuBarState {}

impl MenuBarState {
    /// A bar over `menus`, all closed.
    pub fn new(
        menus: impl IntoIterator<Item = impl Into<MenuBarMenu>>,
        cx: &mut Context<Self>,
    ) -> Self {
        let menu = cx.new(MenuState::new);
        let this = cx.weak_entity();
        menu.update(cx, |menu, _| {
            menu.set_step_handler(Rc::new(move |delta, window, cx| {
                this.update(cx, |bar, cx| bar.step(delta, window, cx)).ok();
            }))
        });
        let subscriptions = vec![
            cx.observe(&menu, |_, _, cx| cx.notify()),
            cx.subscribe(&menu, |this, menu, event: &MenuEvent, cx| {
                // A switch closes one menu and opens the next in one turn,
                // so the close only counts when the menu stayed closed.
                if *event == MenuEvent::Closed && !menu.read(cx).is_open() {
                    this.open = None;
                    this.context = None;
                }
                cx.emit(event.clone());
                cx.notify();
            }),
        ];
        let menus: Vec<MenuBarMenu> = menus.into_iter().map(Into::into).collect();
        let title_focus = menus.iter().map(|_| cx.focus_handle()).collect();
        Self {
            menus,
            open: None,
            menu,
            context: None,
            titles: Rc::default(),
            title_focus,
            highlighted: 0,
            _subscriptions: subscriptions,
        }
    }

    /// A bar over the application's menus, as given to `App::set_menus`;
    /// empty where the platform keeps none.
    pub fn from_app_menus(cx: &mut Context<Self>) -> Self {
        let menus = cx.get_menus().unwrap_or_default();
        Self::new(menus, cx)
    }

    /// The menus, in bar order.
    pub fn menus(&self) -> &[MenuBarMenu] {
        &self.menus
    }

    /// Replaces the menus, closing the open one.
    pub fn set_menus(
        &mut self,
        menus: impl IntoIterator<Item = impl Into<MenuBarMenu>>,
        window: &mut Window,
        cx: &mut Context<Self>,
    ) {
        self.close(window, cx);
        self.menus = menus.into_iter().map(Into::into).collect();
        self.title_focus = self.menus.iter().map(|_| cx.focus_handle()).collect();
        self.highlighted = self.highlighted.min(self.menus.len().saturating_sub(1));
        cx.notify();
    }

    /// The key of the open menu.
    pub fn open_menu(&self) -> Option<&SharedString> {
        Some(self.menus.get(self.open?)?.key())
    }

    /// Whether a menu is open.
    pub fn is_open(&self) -> bool {
        self.open.is_some()
    }

    /// The open menu's state.
    pub fn menu(&self) -> &Entity<MenuState> {
        &self.menu
    }

    /// Opens the menu with `key` under its title.
    pub fn open(&mut self, key: &str, window: &mut Window, cx: &mut Context<Self>) {
        if let Some(index) = self.menus.iter().position(|menu| menu.key == key) {
            self.open_at(index, false, window, cx);
        }
    }

    /// Closes the open menu and gives focus back.
    pub fn close(&mut self, window: &mut Window, cx: &mut Context<Self>) {
        self.menu.update(cx, |menu, cx| menu.close(window, cx));
    }

    /// Opens the menu at `index`, with the keyboard on its first row when
    /// the keyboard opened it.
    fn open_at(
        &mut self,
        index: usize,
        keyboard: bool,
        window: &mut Window,
        cx: &mut Context<Self>,
    ) {
        let Some(menu) = self.menus.get(index).filter(|menu| !menu.disabled) else {
            return;
        };
        if !self.menu.read(cx).is_open() {
            self.context = window.focused(cx);
        }
        let bounds = self
            .titles
            .borrow()
            .get(&menu.key)
            .copied()
            .unwrap_or_default();
        let anchor = MenuAnchor::Trigger(bounds, Align::Start);
        let entries = menu.entries.clone();
        let context = self.context.clone();
        self.menu.update(cx, |menu, cx| {
            match &context {
                Some(context) => menu.open_for(entries, anchor, context, window, cx),
                None => menu.open(entries, anchor, window, cx),
            }
            if keyboard {
                menu.highlight_edge(false, cx);
            }
        });
        self.open = Some(index);
        self.highlighted = index;
        cx.notify();
    }

    /// Moves focus to the next (or previous) title that takes input,
    /// wrapping.
    fn move_highlight(&mut self, delta: isize, window: &mut Window, cx: &mut Context<Self>) {
        if let Some(index) = self.neighbour(self.highlighted, delta) {
            self.highlighted = index;
            self.title_focus[index].focus(window, cx);
            cx.notify();
        }
    }

    /// Opens the title the keyboard is on, with the keyboard on its first
    /// row.
    fn open_highlighted(&mut self, window: &mut Window, cx: &mut Context<Self>) {
        self.open_at(self.highlighted, true, window, cx);
    }

    /// The next title from `from` that takes input, `delta` steps at a
    /// time, wrapping; none when every other title is disabled.
    fn neighbour(&self, from: usize, delta: isize) -> Option<usize> {
        let count = self.menus.len() as isize;
        let mut index = from as isize;
        for _ in 0..count {
            index = (index + delta).rem_euclid(count);
            if !self.menus[index as usize].disabled {
                return Some(index as usize);
            }
        }
        None
    }

    /// Moves to the next (or previous) menu that takes input, wrapping.
    fn step(&mut self, delta: isize, window: &mut Window, cx: &mut Context<Self>) {
        let Some(open) = self.open else {
            return;
        };
        if let Some(index) = self.neighbour(open, delta).filter(|index| *index != open) {
            self.open_at(index, true, window, cx);
        }
    }
}

/// A row of menu titles in the window, as a desktop application's menu
/// bar, for a platform or a layout without the native one.
///
/// A press or a tap on a title opens its menu under it and a second one
/// closes it; while a menu is open, the pointer moving onto another
/// title opens that one instead. The open menu is every menu: arrows,
/// Enter, Escape, submenus, and a press outside behave as in a
/// [`DropdownMenu`](super::DropdownMenu).
///
/// ```
/// use gpui_cn::{MenuBar, MenuBarMenu, MenuBarState, MenuItem};
/// use gpui_kit::{AppContext as _, Context, Entity, IntoElement};
///
/// fn bar(cx: &mut Context<()>) -> Entity<MenuBarState> {
///     cx.new(|cx| {
///         MenuBarState::new(
///             [MenuBarMenu::new("file", "File").entries([MenuItem::new("new", "New File")])],
///             cx,
///         )
///     })
/// }
///
/// fn render(state: &Entity<MenuBarState>) -> impl IntoElement {
///     MenuBar::new("menu-bar", state)
/// }
/// ```
///
/// The id keys the titles and the rows: a title is its menu's key under
/// the id, and the rows are under `"menus"` under the id.
#[derive(IntoElement)]
pub struct MenuBar {
    id: ElementId,
    state: Entity<MenuBarState>,
    plain: bool,
}

impl MenuBar {
    /// A menu bar on `state`, with a stable id.
    pub fn new(id: impl Into<ElementId>, state: &Entity<MenuBarState>) -> Self {
        Self {
            id: id.into(),
            state: state.clone(),
            plain: false,
        }
    }

    /// Drops the frame (the fill, the hairline, and the inset) for a bar
    /// in a title bar or a toolbar that gives it a surface already.
    pub fn plain(mut self) -> Self {
        self.plain = true;
        self
    }
}

impl RenderOnce for MenuBar {
    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
        let theme = cx.theme();
        let (frame_fill, frame_border, frame_radius, touch) = (
            theme.select_trigger,
            theme.select_trigger_border,
            ButtonSize::Default.geometry(theme).radius,
            theme.touch,
        );
        // Not a ghost button's muted rest, which reads as disabled; and
        // not its selected fill, which vanishes on the dark bar.
        let (title_ink, open_fill) = (theme.foreground(), theme.popover_accent);
        let (menus, open, menu, titles, title_focus, highlighted) = {
            let state = self.state.read(cx);
            let open = state.open.filter(|_| state.menu.read(cx).is_open());
            (
                state.menus.clone(),
                open,
                state.menu.clone(),
                state.titles.clone(),
                state.title_focus.clone(),
                state.highlighted,
            )
        };
        let bar_id = self.id.clone();
        let on = |f: fn(&mut MenuBarState, &mut Window, &mut Context<MenuBarState>)| {
            let state = self.state.clone();
            move |window: &mut Window, cx: &mut App| {
                state.update(cx, |state, cx| f(state, window, cx))
            }
        };
        let (left, right, down) = (
            on(|state, window, cx| state.move_highlight(-1, window, cx)),
            on(|state, window, cx| state.move_highlight(1, window, cx)),
            on(|state, window, cx| state.open_highlighted(window, cx)),
        );
        h_flex()
            .id(self.id.clone())
            .test_support()
            .key_context(BAR_CONTEXT)
            .role(Role::MenuBar)
            .when(open.is_none(), |this| {
                this.on_action(move |_: &SelectLeft, window, cx| left(window, cx))
                    .on_action(move |_: &SelectRight, window, cx| right(window, cx))
                    .on_action(move |_: &SelectDown, window, cx| down(window, cx))
            })
            .flex_shrink_0()
            .items_center()
            .when(!self.plain, |this| {
                this.p_1()
                    .rounded(frame_radius)
                    .bg(frame_fill)
                    .border_1()
                    .border_color(frame_border)
            })
            .children(menus.into_iter().enumerate().map(|(index, entry)| {
                let is_open = open == Some(index);
                let disabled = entry.disabled;
                let key = entry.key.clone();
                let titles = titles.clone();
                let press = self.state.clone();
                let hover = self.state.clone();
                let keyboard = self.state.clone();
                // Opens on the press, so a press can drag on into the
                // menu; the click comes on release and acts only for Enter
                // and Space.
                let title = Button::new(ElementId::NamedChild(bar_id.clone().into(), key.clone()))
                    .ghost()
                    .size(ButtonSize::Default)
                    .label(entry.label.clone())
                    .accessibility_label(entry.label)
                    .with_role(Role::MenuItem)
                    .with_expanded(is_open)
                    .open(is_open)
                    .disabled(disabled)
                    .when(!disabled, |this| this.text_color(title_ink))
                    .when(is_open, |this| this.bg(open_fill))
                    .track_focus(&title_focus[index])
                    .tab_stop(index == highlighted)
                    .on_click(move |event, window, cx| {
                        if event.is_keyboard() {
                            keyboard.update(cx, |state, cx| {
                                state.highlighted = index;
                                state.open_at(index, true, window, cx)
                            });
                        }
                    })
                    .when(!disabled, |this| {
                        this.on_mouse_down(MouseButton::Left, move |_, window, cx| {
                            // The press is the title's: focus stays where it
                            // is, so the items act on it.
                            window.prevent_default();
                            cx.stop_propagation();
                            GlobalState::suppress_text_selection(cx);
                            // An open menu's outside press closed it already;
                            // a press on its own title leaves it closed.
                            if open == Some(index) {
                                press.update(cx, |state, cx| state.close(window, cx));
                            } else {
                                press.update(cx, |state, cx| {
                                    state.open_at(index, false, window, cx)
                                });
                            }
                        })
                        .when(!touch, |this| {
                            this.on_mouse_move(move |_, window, cx| {
                                let switch = {
                                    let state = hover.read(cx);
                                    state.menu.read(cx).is_open() && state.open != Some(index)
                                };
                                if switch {
                                    hover.update(cx, |state, cx| {
                                        state.open_at(index, false, window, cx)
                                    });
                                }
                            })
                        })
                    });
                // The title's bounds, which its menu opens under, come from
                // a box around the button, the button's own size.
                div()
                    .relative()
                    .flex_shrink_0()
                    .child(title)
                    .child(measure(move |bounds| {
                        titles.borrow_mut().insert(key, bounds);
                    }))
            }))
            .child(MenuPanels::new(
                ElementId::NamedChild(self.id.into(), "menus".into()),
                &menu,
            ))
    }
}