Enable dragging from project panel to panes (#3658)

Max Brunsfeld created

Rework gpui2 drag API so that receivers need not specify the dragged
view type.

Change summary

crates/collab_ui2/src/collab_panel.rs         |  11 
crates/gpui2/src/app.rs                       |   7 
crates/gpui2/src/elements/div.rs              |  89 ++++++++-----
crates/gpui2/src/window.rs                    |   3 
crates/project_panel2/src/project_panel.rs    |  37 ++---
crates/terminal_view2/src/terminal_element.rs |   1 
crates/workspace2/src/dock.rs                 |   4 
crates/workspace2/src/pane.rs                 | 134 +++++++++++++++-----
crates/workspace2/src/workspace2.rs           |   4 
9 files changed, 190 insertions(+), 100 deletions(-)

Detailed changes

crates/collab_ui2/src/collab_panel.rs 🔗

@@ -2552,12 +2552,11 @@ impl CollabPanel {
             .group("")
             .flex()
             .w_full()
-            .on_drag({
-                let channel = channel.clone();
-                move |cx| {
-                    let channel = channel.clone();
-                    cx.build_view(|cx| DraggedChannelView { channel, width })
-                }
+            .on_drag(channel.clone(), move |channel, cx| {
+                cx.build_view(|cx| DraggedChannelView {
+                    channel: channel.clone(),
+                    width,
+                })
             })
             .drag_over::<DraggedChannelView>(|style| {
                 style.bg(cx.theme().colors().ghost_element_hover)

crates/gpui2/src/app.rs 🔗

@@ -1139,8 +1139,10 @@ impl AppContext {
         self.active_drag.is_some()
     }
 
-    pub fn active_drag(&self) -> Option<AnyView> {
-        self.active_drag.as_ref().map(|drag| drag.view.clone())
+    pub fn active_drag<T: 'static>(&self) -> Option<&T> {
+        self.active_drag
+            .as_ref()
+            .and_then(|drag| drag.value.downcast_ref())
     }
 }
 
@@ -1296,6 +1298,7 @@ impl<G: 'static> DerefMut for GlobalLease<G> {
 /// within the window or by dragging into the app from the underlying platform.
 pub struct AnyDrag {
     pub view: AnyView,
+    pub value: Box<dyn Any>,
     pub cursor_offset: Point<Pixels>,
 }
 

crates/gpui2/src/elements/div.rs 🔗

@@ -15,6 +15,7 @@ use std::{
     cell::RefCell,
     cmp::Ordering,
     fmt::Debug,
+    marker::PhantomData,
     mem,
     rc::Rc,
     time::Duration,
@@ -30,9 +31,18 @@ pub struct GroupStyle {
     pub style: Box<StyleRefinement>,
 }
 
-pub struct DragMoveEvent<W: Render> {
+pub struct DragMoveEvent<T> {
     pub event: MouseMoveEvent,
-    pub drag: View<W>,
+    drag: PhantomData<T>,
+}
+
+impl<T: 'static> DragMoveEvent<T> {
+    pub fn drag<'b>(&self, cx: &'b AppContext) -> &'b T {
+        cx.active_drag
+            .as_ref()
+            .and_then(|drag| drag.value.downcast_ref::<T>())
+            .expect("DragMoveEvent is only valid when the stored active drag is of the same type.")
+    }
 }
 
 pub trait InteractiveElement: Sized {
@@ -198,24 +208,27 @@ pub trait InteractiveElement: Sized {
         self
     }
 
-    fn on_drag_move<W>(
+    fn on_drag_move<T>(
         mut self,
-        listener: impl Fn(&DragMoveEvent<W>, &mut WindowContext) + 'static,
+        listener: impl Fn(&DragMoveEvent<T>, &mut WindowContext) + 'static,
     ) -> Self
     where
-        W: Render,
+        T: Render,
     {
         self.interactivity().mouse_move_listeners.push(Box::new(
             move |event, bounds, phase, cx| {
                 if phase == DispatchPhase::Capture
                     && bounds.drag_target_contains(&event.position, cx)
                 {
-                    if let Some(view) = cx.active_drag().and_then(|view| view.downcast::<W>().ok())
+                    if cx
+                        .active_drag
+                        .as_ref()
+                        .is_some_and(|drag| drag.value.type_id() == TypeId::of::<T>())
                     {
                         (listener)(
                             &DragMoveEvent {
                                 event: event.clone(),
-                                drag: view,
+                                drag: PhantomData,
                             },
                             cx,
                         );
@@ -363,14 +376,11 @@ pub trait InteractiveElement: Sized {
         self
     }
 
-    fn on_drop<W: 'static>(
-        mut self,
-        listener: impl Fn(&View<W>, &mut WindowContext) + 'static,
-    ) -> Self {
+    fn on_drop<T: 'static>(mut self, listener: impl Fn(&T, &mut WindowContext) + 'static) -> Self {
         self.interactivity().drop_listeners.push((
-            TypeId::of::<W>(),
-            Box::new(move |dragged_view, cx| {
-                listener(&dragged_view.downcast().unwrap(), cx);
+            TypeId::of::<T>(),
+            Box::new(move |dragged_value, cx| {
+                listener(dragged_value.downcast_ref().unwrap(), cx);
             }),
         ));
         self
@@ -437,19 +447,24 @@ pub trait StatefulInteractiveElement: InteractiveElement {
         self
     }
 
-    fn on_drag<W>(mut self, constructor: impl Fn(&mut WindowContext) -> View<W> + 'static) -> Self
+    fn on_drag<T, W>(
+        mut self,
+        value: T,
+        constructor: impl Fn(&T, &mut WindowContext) -> View<W> + 'static,
+    ) -> Self
     where
         Self: Sized,
+        T: 'static,
         W: 'static + Render,
     {
         debug_assert!(
             self.interactivity().drag_listener.is_none(),
             "calling on_drag more than once on the same element is not supported"
         );
-        self.interactivity().drag_listener = Some(Box::new(move |cursor_offset, cx| AnyDrag {
-            view: constructor(cx).into(),
-            cursor_offset,
-        }));
+        self.interactivity().drag_listener = Some((
+            Box::new(value),
+            Box::new(move |value, cx| constructor(value.downcast_ref().unwrap(), cx).into()),
+        ));
         self
     }
 
@@ -513,9 +528,9 @@ pub type ScrollWheelListener =
 
 pub type ClickListener = Box<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>;
 
-pub type DragListener = Box<dyn Fn(Point<Pixels>, &mut WindowContext) -> AnyDrag + 'static>;
+pub type DragListener = Box<dyn Fn(&dyn Any, &mut WindowContext) -> AnyView + 'static>;
 
-type DropListener = dyn Fn(AnyView, &mut WindowContext) + 'static;
+type DropListener = Box<dyn Fn(&dyn Any, &mut WindowContext) + 'static>;
 
 pub type TooltipBuilder = Rc<dyn Fn(&mut WindowContext) -> AnyView + 'static>;
 
@@ -708,9 +723,9 @@ pub struct Interactivity {
     pub key_down_listeners: Vec<KeyDownListener>,
     pub key_up_listeners: Vec<KeyUpListener>,
     pub action_listeners: Vec<(TypeId, ActionListener)>,
-    pub drop_listeners: Vec<(TypeId, Box<DropListener>)>,
+    pub drop_listeners: Vec<(TypeId, DropListener)>,
     pub click_listeners: Vec<ClickListener>,
-    pub drag_listener: Option<DragListener>,
+    pub drag_listener: Option<(Box<dyn Any>, DragListener)>,
     pub hover_listener: Option<Box<dyn Fn(&bool, &mut WindowContext)>>,
     pub tooltip_builder: Option<TooltipBuilder>,
 
@@ -998,8 +1013,10 @@ impl Interactivity {
                     if phase == DispatchPhase::Bubble
                         && interactive_bounds.drag_target_contains(&event.position, cx)
                     {
-                        if let Some(drag_state_type) =
-                            cx.active_drag.as_ref().map(|drag| drag.view.entity_type())
+                        if let Some(drag_state_type) = cx
+                            .active_drag
+                            .as_ref()
+                            .map(|drag| drag.value.as_ref().type_id())
                         {
                             for (drop_state_type, listener) in &drop_listeners {
                                 if *drop_state_type == drag_state_type {
@@ -1008,7 +1025,7 @@ impl Interactivity {
                                         .take()
                                         .expect("checked for type drag state type above");
 
-                                    listener(drag.view.clone(), cx);
+                                    listener(drag.value.as_ref(), cx);
                                     cx.notify();
                                     cx.stop_propagation();
                                 }
@@ -1022,13 +1039,13 @@ impl Interactivity {
         }
 
         let click_listeners = mem::take(&mut self.click_listeners);
-        let drag_listener = mem::take(&mut self.drag_listener);
+        let mut drag_listener = mem::take(&mut self.drag_listener);
 
         if !click_listeners.is_empty() || drag_listener.is_some() {
             let pending_mouse_down = element_state.pending_mouse_down.clone();
             let mouse_down = pending_mouse_down.borrow().clone();
             if let Some(mouse_down) = mouse_down {
-                if let Some(drag_listener) = drag_listener {
+                if drag_listener.is_some() {
                     let active_state = element_state.clicked_state.clone();
                     let interactive_bounds = interactive_bounds.clone();
 
@@ -1041,10 +1058,18 @@ impl Interactivity {
                             && interactive_bounds.visibly_contains(&event.position, cx)
                             && (event.position - mouse_down.position).magnitude() > DRAG_THRESHOLD
                         {
+                            let (drag_value, drag_listener) = drag_listener
+                                .take()
+                                .expect("The notify below should invalidate this callback");
+
                             *active_state.borrow_mut() = ElementClickedState::default();
                             let cursor_offset = event.position - bounds.origin;
-                            let drag = drag_listener(cursor_offset, cx);
-                            cx.active_drag = Some(drag);
+                            let drag = (drag_listener)(drag_value.as_ref(), cx);
+                            cx.active_drag = Some(AnyDrag {
+                                view: drag,
+                                value: drag_value,
+                                cursor_offset,
+                            });
                             cx.notify();
                             cx.stop_propagation();
                         }
@@ -1312,7 +1337,7 @@ impl Interactivity {
                 if let Some(drag) = cx.active_drag.take() {
                     for (state_type, group_drag_style) in &self.group_drag_over_styles {
                         if let Some(group_bounds) = GroupBounds::get(&group_drag_style.group, cx) {
-                            if *state_type == drag.view.entity_type()
+                            if *state_type == drag.value.as_ref().type_id()
                                 && group_bounds.contains(&mouse_position)
                             {
                                 style.refine(&group_drag_style.style);
@@ -1321,7 +1346,7 @@ impl Interactivity {
                     }
 
                     for (state_type, drag_over_style) in &self.drag_over_styles {
-                        if *state_type == drag.view.entity_type()
+                        if *state_type == drag.value.as_ref().type_id()
                             && bounds
                                 .intersect(&cx.content_mask().bounds)
                                 .contains(&mouse_position)

crates/gpui2/src/window.rs 🔗

@@ -806,7 +806,7 @@ impl<'a> WindowContext<'a> {
     /// a specific need to register a global listener.
     pub fn on_mouse_event<Event: 'static>(
         &mut self,
-        handler: impl Fn(&Event, DispatchPhase, &mut WindowContext) + 'static,
+        mut handler: impl FnMut(&Event, DispatchPhase, &mut WindowContext) + 'static,
     ) {
         let order = self.window.next_frame.z_index_stack.clone();
         self.window
@@ -1379,6 +1379,7 @@ impl<'a> WindowContext<'a> {
                     self.window.mouse_position = position;
                     if self.active_drag.is_none() {
                         self.active_drag = Some(AnyDrag {
+                            value: Box::new(files.clone()),
                             view: self.build_view(|_| files).into(),
                             cursor_offset: position,
                         });

crates/project_panel2/src/project_panel.rs 🔗

@@ -1377,33 +1377,28 @@ impl ProjectPanel {
             })
             .unwrap_or(theme.status().info);
 
+        let file_name = details.filename.clone();
+        let icon = details.icon.clone();
+        let depth = details.depth;
         div()
             .id(entry_id.to_proto() as usize)
-            .on_drag({
-                let details = details.clone();
-                move |cx| {
-                    let details = details.clone();
-                    cx.build_view(|_| DraggedProjectEntryView {
-                        details,
-                        width,
-                        entry_id,
-                    })
-                }
-            })
-            .drag_over::<DraggedProjectEntryView>(|style| {
-                style.bg(cx.theme().colors().ghost_element_hover)
+            .on_drag(entry_id, move |entry_id, cx| {
+                cx.build_view(|_| DraggedProjectEntryView {
+                    details: details.clone(),
+                    width,
+                    entry_id: *entry_id,
+                })
             })
-            .on_drop(cx.listener(
-                move |this, dragged_view: &View<DraggedProjectEntryView>, cx| {
-                    this.move_entry(dragged_view.read(cx).entry_id, entry_id, kind.is_file(), cx);
-                },
-            ))
+            .drag_over::<ProjectEntryId>(|style| style.bg(cx.theme().colors().ghost_element_hover))
+            .on_drop(cx.listener(move |this, dragged_id: &ProjectEntryId, cx| {
+                this.move_entry(*dragged_id, entry_id, kind.is_file(), cx);
+            }))
             .child(
                 ListItem::new(entry_id.to_proto() as usize)
-                    .indent_level(details.depth)
+                    .indent_level(depth)
                     .indent_step_size(px(settings.indent_size))
                     .selected(is_selected)
-                    .child(if let Some(icon) = &details.icon {
+                    .child(if let Some(icon) = &icon {
                         div().child(IconElement::from_path(icon.to_string()))
                     } else {
                         div()
@@ -1414,7 +1409,7 @@ impl ProjectPanel {
                         } else {
                             div()
                                 .text_color(filename_text_color)
-                                .child(Label::new(details.filename.clone()))
+                                .child(Label::new(file_name))
                         }
                         .ml_1(),
                     )

crates/terminal_view2/src/terminal_element.rs 🔗

@@ -792,7 +792,6 @@ impl Element for TerminalElement {
             .on_drop::<ExternalPaths>(move |external_paths, cx| {
                 cx.focus(&terminal_focus_handle);
                 let mut new_text = external_paths
-                    .read(cx)
                     .paths()
                     .iter()
                     .map(|path| format!(" {path:?}"))

crates/workspace2/src/dock.rs 🔗

@@ -493,7 +493,9 @@ impl Render for Dock {
             let handler = div()
                 .id("resize-handle")
                 .bg(cx.theme().colors().border)
-                .on_drag(move |cx| cx.build_view(|_| DraggedDock(position)))
+                .on_drag(DraggedDock(position), |dock, cx| {
+                    cx.build_view(|_| dock.clone())
+                })
                 .on_click(cx.listener(|v, e: &ClickEvent, cx| {
                     if e.down.button == MouseButton::Left && e.down.click_count == 2 {
                         v.resize_active_panel(None, cx)

crates/workspace2/src/pane.rs 🔗

@@ -231,6 +231,7 @@ pub struct NavigationEntry {
     pub timestamp: usize,
 }
 
+#[derive(Clone)]
 struct DraggedTab {
     pub pane: View<Pane>,
     pub ix: usize,
@@ -1514,24 +1515,25 @@ impl Pane {
                 .on_click(cx.listener(move |pane: &mut Self, event, cx| {
                     pane.activate_item(ix, true, true, cx)
                 }))
-                .on_drag({
-                    let pane = cx.view().clone();
-                    move |cx| {
-                        cx.build_view(|cx| DraggedTab {
-                            pane: pane.clone(),
-                            detail,
-                            item_id,
-                            is_active,
-                            ix,
-                        })
-                    }
-                })
-                .drag_over::<DraggedTab>(|tab| tab.bg(cx.theme().colors().tab_active_background))
-                .on_drop(
-                    cx.listener(move |this, dragged_tab: &View<DraggedTab>, cx| {
-                        this.handle_tab_drop(dragged_tab, ix, cx)
-                    }),
+                .on_drag(
+                    DraggedTab {
+                        pane: cx.view().clone(),
+                        detail,
+                        item_id,
+                        is_active,
+                        ix,
+                    },
+                    |tab, cx| cx.build_view(|cx| tab.clone()),
                 )
+                .drag_over::<DraggedTab>(|tab| tab.bg(cx.theme().colors().tab_active_background))
+                .drag_over::<ProjectEntryId>(|tab| tab.bg(gpui::red()))
+                .on_drop(cx.listener(move |this, dragged_tab: &DraggedTab, cx| {
+                    this.handle_tab_drop(dragged_tab, ix, cx)
+                }))
+                .on_drop(cx.listener(move |this, entry_id: &ProjectEntryId, cx| {
+                    dbg!(entry_id);
+                    this.handle_project_entry_drop(entry_id, ix, cx)
+                }))
                 .when_some(item.tab_tooltip_text(cx), |tab, text| {
                     tab.tooltip(move |cx| Tooltip::text(text.clone(), cx))
                 })
@@ -1677,11 +1679,13 @@ impl Pane {
                     .drag_over::<DraggedTab>(|bar| {
                         bar.bg(cx.theme().colors().tab_active_background)
                     })
-                    .on_drop(
-                        cx.listener(move |this, dragged_tab: &View<DraggedTab>, cx| {
-                            this.handle_tab_drop(dragged_tab, this.items.len(), cx)
-                        }),
-                    ),
+                    .drag_over::<ProjectEntryId>(|bar| bar.bg(gpui::red()))
+                    .on_drop(cx.listener(move |this, dragged_tab: &DraggedTab, cx| {
+                        this.handle_tab_drop(dragged_tab, this.items.len(), cx)
+                    }))
+                    .on_drop(cx.listener(move |this, entry_id: &ProjectEntryId, cx| {
+                        this.handle_project_entry_drop(entry_id, this.items.len(), cx)
+                    })),
             )
     }
 
@@ -1743,11 +1747,10 @@ impl Pane {
 
     fn handle_tab_drop(
         &mut self,
-        dragged_tab: &View<DraggedTab>,
+        dragged_tab: &DraggedTab,
         ix: usize,
         cx: &mut ViewContext<'_, Pane>,
     ) {
-        let dragged_tab = dragged_tab.read(cx);
         let item_id = dragged_tab.item_id;
         let from_pane = dragged_tab.pane.clone();
         let to_pane = cx.view().clone();
@@ -1760,13 +1763,37 @@ impl Pane {
             .log_err();
     }
 
+    fn handle_project_entry_drop(
+        &mut self,
+        project_entry_id: &ProjectEntryId,
+        ix: usize,
+        cx: &mut ViewContext<'_, Pane>,
+    ) {
+        let to_pane = cx.view().downgrade();
+        let project_entry_id = *project_entry_id;
+        self.workspace
+            .update(cx, |workspace, cx| {
+                cx.defer(move |workspace, cx| {
+                    if let Some(path) = workspace
+                        .project()
+                        .read(cx)
+                        .path_for_entry(project_entry_id, cx)
+                    {
+                        workspace
+                            .open_path(path, Some(to_pane), true, cx)
+                            .detach_and_log_err(cx);
+                    }
+                });
+            })
+            .log_err();
+    }
+
     fn handle_split_tab_drop(
         &mut self,
-        dragged_tab: &View<DraggedTab>,
+        dragged_tab: &DraggedTab,
         split_direction: SplitDirection,
         cx: &mut ViewContext<'_, Pane>,
     ) {
-        let dragged_tab = dragged_tab.read(cx);
         let item_id = dragged_tab.item_id;
         let from_pane = dragged_tab.pane.clone();
         let to_pane = cx.view().clone();
@@ -1780,13 +1807,40 @@ impl Pane {
                         .map(|item| item.boxed_clone());
                     if let Some(item) = item {
                         if let Some(item) = item.clone_on_split(workspace.database_id(), cx) {
-                            workspace.split_item(split_direction, item, cx);
+                            let pane = workspace.split_pane(to_pane, split_direction, cx);
+                            workspace.move_item(from_pane, pane, item_id, 0, cx);
                         }
                     }
                 });
             })
             .log_err();
     }
+
+    fn handle_split_project_entry_drop(
+        &mut self,
+        project_entry_id: &ProjectEntryId,
+        split_direction: SplitDirection,
+        cx: &mut ViewContext<'_, Pane>,
+    ) {
+        let project_entry_id = *project_entry_id;
+        let current_pane = cx.view().clone();
+        self.workspace
+            .update(cx, |workspace, cx| {
+                cx.defer(move |workspace, cx| {
+                    if let Some(path) = workspace
+                        .project()
+                        .read(cx)
+                        .path_for_entry(project_entry_id, cx)
+                    {
+                        let pane = workspace.split_pane(current_pane, split_direction, cx);
+                        workspace
+                            .open_path(path, Some(pane.downgrade()), true, cx)
+                            .detach_and_log_err(cx);
+                    }
+                });
+            })
+            .log_err();
+    }
 }
 
 impl FocusableView for Pane {
@@ -1894,11 +1948,17 @@ impl Render for Pane {
                             .full()
                             .z_index(1)
                             .drag_over::<DraggedTab>(|style| style.bg(drag_target_color))
-                            .on_drop(cx.listener(
-                                move |this, dragged_tab: &View<DraggedTab>, cx| {
-                                    this.handle_tab_drop(dragged_tab, this.active_item_index(), cx)
-                                },
-                            )),
+                            .drag_over::<ProjectEntryId>(|style| style.bg(gpui::red()))
+                            .on_drop(cx.listener(move |this, dragged_tab: &DraggedTab, cx| {
+                                this.handle_tab_drop(dragged_tab, this.active_item_index(), cx)
+                            }))
+                            .on_drop(cx.listener(move |this, entry_id: &ProjectEntryId, cx| {
+                                this.handle_project_entry_drop(
+                                    entry_id,
+                                    this.active_item_index(),
+                                    cx,
+                                )
+                            })),
                     )
                     .children(
                         [
@@ -1915,9 +1975,15 @@ impl Render for Pane {
                                 .invisible()
                                 .bg(drag_target_color)
                                 .drag_over::<DraggedTab>(|style| style.visible())
+                                .drag_over::<ProjectEntryId>(|style| style.visible())
+                                .on_drop(cx.listener(move |this, dragged_tab: &DraggedTab, cx| {
+                                    this.handle_split_tab_drop(dragged_tab, direction, cx)
+                                }))
                                 .on_drop(cx.listener(
-                                    move |this, dragged_tab: &View<DraggedTab>, cx| {
-                                        this.handle_split_tab_drop(dragged_tab, direction, cx)
+                                    move |this, entry_id: &ProjectEntryId, cx| {
+                                        this.handle_split_project_entry_drop(
+                                            entry_id, direction, cx,
+                                        )
                                     },
                                 ));
                             match direction {

crates/workspace2/src/workspace2.rs 🔗

@@ -3580,7 +3580,7 @@ impl FocusableView for Workspace {
 
 struct WorkspaceBounds(Bounds<Pixels>);
 
-#[derive(Render)]
+#[derive(Clone, Render)]
 struct DraggedDock(DockPosition);
 
 impl Render for Workspace {
@@ -3636,7 +3636,7 @@ impl Render for Workspace {
                     )
                     .on_drag_move(
                         cx.listener(|workspace, e: &DragMoveEvent<DraggedDock>, cx| {
-                            match e.drag.read(cx).0 {
+                            match e.drag(cx).0 {
                                 DockPosition::Left => {
                                     let size = workspace.bounds.left() + e.event.position.x;
                                     workspace.left_dock.update(cx, |left_dock, cx| {