Allow dragging tabs (#3616)

crates/collab_ui2/src/chat_panel.rs

@@ -288,7 +288,11 @@ impl ChatPanel {
                             ),
                     ),
             )
-            .child(div().grow().child(self.render_active_channel_messages(cx)))
+            .child(
+                div()
+                    .flex_grow()
+                    .child(self.render_active_channel_messages(cx)),
+            )
             .child(
                 div()
                     .z_index(1)

crates/gpui2/src/elements/div.rs

@@ -29,7 +29,7 @@ pub struct GroupStyle {
     pub style: Box<StyleRefinement>,
 }
 
-pub trait InteractiveElement: Sized + Element {
+pub trait InteractiveElement: Sized {
     fn interactivity(&mut self) -> &mut Interactivity;
 
     fn group(mut self, group: impl Into<SharedString>) -> Self {
@@ -61,6 +61,10 @@ pub trait InteractiveElement: Sized + Element {
     }
 
     fn hover(mut self, f: impl FnOnce(StyleRefinement) -> StyleRefinement) -> Self {
+        debug_assert!(
+            self.interactivity().hover_style.is_none(),
+            "hover style already set"
+        );
         self.interactivity().hover_style = Some(Box::new(f(StyleRefinement::default())));
         self
     }
@@ -436,7 +440,6 @@ pub trait StatefulInteractiveElement: InteractiveElement {
             "calling tooltip more than once on the same element is not supported"
         );
         self.interactivity().tooltip_builder = Some(Rc::new(build_tooltip));
-
         self
     }
 }
@@ -1013,6 +1016,10 @@ impl Interactivity {
 
         let overflow = style.overflow;
         if overflow.x == Overflow::Scroll || overflow.y == Overflow::Scroll {
+            if let Some(scroll_handle) = &self.scroll_handle {
+                scroll_handle.0.borrow_mut().overflow = overflow;
+            }
+
             let scroll_offset = element_state
                 .scroll_offset
                 .get_or_insert_with(Rc::default)
@@ -1314,16 +1321,16 @@ where
 
 impl<E> IntoElement for Focusable<E>
 where
-    E: Element,
+    E: IntoElement,
 {
-    type Element = E;
+    type Element = E::Element;
 
     fn element_id(&self) -> Option<ElementId> {
         self.element.element_id()
     }
 
     fn into_element(self) -> Self::Element {
-        self.element
+        self.element.into_element()
     }
 }
 
@@ -1417,6 +1424,7 @@ struct ScrollHandleState {
     bounds: Bounds<Pixels>,
     child_bounds: Vec<Bounds<Pixels>>,
     requested_scroll_top: Option<(usize, Pixels)>,
+    overflow: Point<Overflow>,
 }
 
 #[derive(Clone)]
@@ -1462,12 +1470,22 @@ impl ScrollHandle {
             return;
         };
 
-        let scroll_offset = state.offset.borrow().y;
+        let mut scroll_offset = state.offset.borrow_mut();
 
-        if bounds.top() + scroll_offset < state.bounds.top() {
-            state.offset.borrow_mut().y = state.bounds.top() - bounds.top();
-        } else if bounds.bottom() + scroll_offset > state.bounds.bottom() {
-            state.offset.borrow_mut().y = state.bounds.bottom() - bounds.bottom();
+        if state.overflow.y == Overflow::Scroll {
+            if bounds.top() + scroll_offset.y < state.bounds.top() {
+                scroll_offset.y = state.bounds.top() - bounds.top();
+            } else if bounds.bottom() + scroll_offset.y > state.bounds.bottom() {
+                scroll_offset.y = state.bounds.bottom() - bounds.bottom();
+            }
+        }
+
+        if state.overflow.x == Overflow::Scroll {
+            if bounds.left() + scroll_offset.x < state.bounds.left() {
+                scroll_offset.x = state.bounds.left() - bounds.left();
+            } else if bounds.right() + scroll_offset.x > state.bounds.right() {
+                scroll_offset.x = state.bounds.right() - bounds.right();
+            }
         }
     }
 

crates/gpui2/src/styled.rs

@@ -303,7 +303,7 @@ pub trait Styled: Sized {
 
     /// Sets the element to allow a flex item to grow to fill any available space.
     /// [Docs](https://tailwindcss.com/docs/flex-grow)
-    fn grow(mut self) -> Self {
+    fn flex_grow(mut self) -> Self {
         self.style().flex_grow = Some(1.);
         self
     }

crates/picker2/src/picker2.rs

@@ -228,7 +228,7 @@ impl<D: PickerDelegate> Render for Picker<D> {
             .when(self.delegate.match_count() > 0, |el| {
                 el.child(
                     v_stack()
-                        .grow()
+                        .flex_grow()
                         .child(
                             uniform_list(
                                 cx.view().clone(),

crates/storybook2/src/story_selector.rs

@@ -61,7 +61,7 @@ impl ComponentStory {
             Self::Scroll => ScrollStory::view(cx).into(),
             Self::Text => TextStory::view(cx).into(),
             Self::Tab => cx.build_view(|_| ui::TabStory).into(),
-            Self::TabBar => cx.build_view(|cx| ui::TabBarStory::new(cx)).into(),
+            Self::TabBar => cx.build_view(|_| ui::TabBarStory).into(),
             Self::ViewportUnits => cx.build_view(|_| crate::stories::ViewportUnitsStory).into(),
             Self::ZIndex => cx.build_view(|_| ZIndexStory).into(),
             Self::Picker => PickerStory::new(cx).into(),

crates/ui2/src/components/list/list_item.rs

@@ -54,14 +54,6 @@ impl ListItem {
         self
     }
 
-    pub fn on_drag(
-        mut self,
-        handler: impl Fn(&MouseDownEvent, &mut WindowContext) + 'static,
-    ) -> Self {
-        self.on_secondary_mouse_down = Some(Box::new(handler));
-        self
-    }
-
     pub fn tooltip(mut self, tooltip: impl Fn(&mut WindowContext) -> AnyView + 'static) -> Self {
         self.tooltip = Some(Box::new(tooltip));
         self

crates/ui2/src/components/stories/tab_bar.rs

@@ -1,19 +1,9 @@
-use gpui::{Div, FocusHandle, Render};
+use gpui::{Div, Render};
 use story::Story;
 
 use crate::{prelude::*, Tab, TabBar, TabPosition};
 
-pub struct TabBarStory {
-    tab_bar_focus_handle: FocusHandle,
-}
-
-impl TabBarStory {
-    pub fn new(cx: &mut ViewContext<Self>) -> Self {
-        Self {
-            tab_bar_focus_handle: cx.focus_handle(),
-        }
-    }
-}
+pub struct TabBarStory;
 
 impl Render for TabBarStory {
     type Element = Div;
@@ -48,7 +38,7 @@ impl Render for TabBarStory {
             .child(Story::label("Default"))
             .child(
                 h_stack().child(
-                    TabBar::new("tab_bar_1", self.tab_bar_focus_handle.clone())
+                    TabBar::new("tab_bar_1")
                         .start_child(
                             IconButton::new("navigate_backward", Icon::ArrowLeft)
                                 .icon_size(IconSize::Small),

crates/ui2/src/components/tab.rs

@@ -1,10 +1,7 @@
-use std::cmp::Ordering;
-use std::rc::Rc;
-
-use gpui::{AnyElement, AnyView, ClickEvent, IntoElement, MouseButton};
-use smallvec::SmallVec;
-
 use crate::prelude::*;
+use gpui::{AnyElement, IntoElement, Stateful};
+use smallvec::SmallVec;
+use std::cmp::Ordering;
 
 /// The position of a [`Tab`] within a list of tabs.
 #[derive(Debug, PartialEq, Eq, Clone, Copy)]
@@ -29,12 +26,10 @@ pub enum TabCloseSide {
 
 #[derive(IntoElement)]
 pub struct Tab {
-    id: ElementId,
+    div: Stateful<Div>,
     selected: bool,
     position: TabPosition,
     close_side: TabCloseSide,
-    on_click: Option<Rc<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>>,
-    tooltip: Option<Box<dyn Fn(&mut WindowContext) -> AnyView + 'static>>,
     start_slot: Option<AnyElement>,
     end_slot: Option<AnyElement>,
     children: SmallVec<[AnyElement; 2]>,
@@ -43,12 +38,10 @@ pub struct Tab {
 impl Tab {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
-            id: id.into(),
+            div: div().id(id),
             selected: false,
             position: TabPosition::First,
             close_side: TabCloseSide::End,
-            on_click: None,
-            tooltip: None,
             start_slot: None,
             end_slot: None,
             children: SmallVec::new(),
@@ -65,16 +58,6 @@ impl Tab {
         self
     }
 
-    pub fn on_click(mut self, handler: impl Fn(&ClickEvent, &mut WindowContext) + 'static) -> Self {
-        self.on_click = Some(Rc::new(handler));
-        self
-    }
-
-    pub fn tooltip(mut self, tooltip: impl Fn(&mut WindowContext) -> AnyView + 'static) -> Self {
-        self.tooltip = Some(Box::new(tooltip));
-        self
-    }
-
     pub fn start_slot<E: IntoElement>(mut self, element: impl Into<Option<E>>) -> Self {
         self.start_slot = element.into().map(IntoElement::into_any_element);
         self
@@ -86,6 +69,14 @@ impl Tab {
     }
 }
 
+impl InteractiveElement for Tab {
+    fn interactivity(&mut self) -> &mut gpui::Interactivity {
+        self.div.interactivity()
+    }
+}
+
+impl StatefulInteractiveElement for Tab {}
+
 impl Selectable for Tab {
     fn selected(mut self, selected: bool) -> Self {
         self.selected = selected;
@@ -100,7 +91,7 @@ impl ParentElement for Tab {
 }
 
 impl RenderOnce for Tab {
-    type Rendered = Div;
+    type Rendered = Stateful<Div>;
 
     fn render(self, cx: &mut WindowContext) -> Self::Rendered {
         const HEIGHT_IN_REMS: f32 = 30. / 16.;
@@ -120,7 +111,7 @@ impl RenderOnce for Tab {
             ),
         };
 
-        div()
+        self.div
             .h(rems(HEIGHT_IN_REMS))
             .bg(tab_bg)
             .border_color(cx.theme().colors().border)
@@ -146,26 +137,13 @@ impl RenderOnce for Tab {
             .child(
                 h_stack()
                     .group("")
-                    .id(self.id)
                     .relative()
                     .h_full()
                     .px_5()
                     .gap_1()
                     .text_color(text_color)
                     // .hover(|style| style.bg(tab_hover_bg))
                     // .active(|style| style.bg(tab_active_bg))
-                    .when_some(self.on_click, |tab, on_click| {
-                        tab.cursor_pointer().on_click(move |event, cx| {
-                            // HACK: GPUI currently fires `on_click` with any mouse button,
-                            // but we only care about the left button.
-                            if event.down.button == MouseButton::Left {
-                                (on_click)(event, cx)
-                            }
-                        })
-                    })
-                    .when_some(self.tooltip, |tab, tooltip| {
-                        tab.tooltip(move |cx| tooltip(cx))
-                    })
                     .child(
                         h_stack()
                             .w_3()

crates/ui2/src/components/tab_bar.rs

@@ -1,28 +1,33 @@
-use gpui::{AnyElement, FocusHandle, Focusable, Stateful};
+use gpui::{AnyElement, ScrollHandle, Stateful};
 use smallvec::SmallVec;
 
 use crate::prelude::*;
 
 #[derive(IntoElement)]
 pub struct TabBar {
     id: ElementId,
-    focus_handle: FocusHandle,
     start_children: SmallVec<[AnyElement; 2]>,
     children: SmallVec<[AnyElement; 2]>,
     end_children: SmallVec<[AnyElement; 2]>,
+    scroll_handle: Option<ScrollHandle>,
 }
 
 impl TabBar {
-    pub fn new(id: impl Into<ElementId>, focus_handle: FocusHandle) -> Self {
+    pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
             id: id.into(),
-            focus_handle,
             start_children: SmallVec::new(),
             children: SmallVec::new(),
             end_children: SmallVec::new(),
+            scroll_handle: None,
         }
     }
 
+    pub fn track_scroll(mut self, scroll_handle: ScrollHandle) -> Self {
+        self.scroll_handle = Some(scroll_handle);
+        self
+    }
+
     pub fn start_children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]> {
         &mut self.start_children
     }
@@ -84,15 +89,14 @@ impl ParentElement for TabBar {
 }
 
 impl RenderOnce for TabBar {
-    type Rendered = Focusable<Stateful<Div>>;
+    type Rendered = Stateful<Div>;
 
     fn render(self, cx: &mut WindowContext) -> Self::Rendered {
         const HEIGHT_IN_REMS: f32 = 30. / 16.;
 
         div()
             .id(self.id)
             .group("tab_bar")
-            .track_focus(&self.focus_handle)
             .flex()
             .flex_none()
             .w_full()
@@ -128,7 +132,11 @@ impl RenderOnce for TabBar {
                         h_stack()
                             .id("tabs")
                             .z_index(2)
+                            .flex_grow()
                             .overflow_x_scroll()
+                            .when_some(self.scroll_handle, |cx, scroll_handle| {
+                                cx.track_scroll(&scroll_handle)
+                            })
                             .children(self.children),
                     ),
             )