From 01aa9401c53f456ab923311abe94749e00f1ea25 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Mon, 29 Jul 2024 10:01:22 +0800
Subject: [PATCH] resizable: Fix resizable handle to keep showing drag style on
 dragging. (#78)

https://github.com/user-attachments/assets/a8d2abcb-9122-4060-bfd6-2673903c18a1
---
 crates/ui/src/resizable/panel.rs | 29 ++++++++++++++++++++++-------
 crates/ui/src/table.rs           |  8 ++------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/crates/ui/src/resizable/panel.rs b/crates/ui/src/resizable/panel.rs
index 8085feaf..370a0322 100644
--- a/crates/ui/src/resizable/panel.rs
+++ b/crates/ui/src/resizable/panel.rs
@@ -2,7 +2,7 @@ use std::rc::Rc;
 
 use gpui::{
     canvas, div, prelude::FluentBuilder as _, px, AnyElement, AnyView, Axis, Bounds, DragMoveEvent,
-    EntityId, InteractiveElement as _, IntoElement, ParentElement, Pixels, Render,
+    EntityId, InteractiveElement as _, IntoElement, MouseButton, ParentElement, Pixels, Render,
     StatefulInteractiveElement, Styled, View, ViewContext, VisualContext as _, WindowContext,
 };
 
@@ -18,6 +18,7 @@ pub struct ResizablePanelGroup {
     axis: Axis,
     handle_size: Pixels,
     size: Pixels,
+    resizing_panel_ix: Option<usize>,
 }
 
 impl ResizablePanelGroup {
@@ -28,6 +29,7 @@ impl ResizablePanelGroup {
             panels: Vec::new(),
             handle_size: px(3.),
             size: px(20.),
+            resizing_panel_ix: None,
         }
     }
 
@@ -77,11 +79,19 @@ impl ResizablePanelGroup {
     fn render_resize_handle(&self, ix: usize, cx: &mut ViewContext<Self>) -> impl IntoElement {
         let axis = self.axis;
         let handle_size = self.handle_size;
+        let is_resizing = self.resizing_panel_ix == Some(ix);
 
         div()
             .id(("resizable-handle", ix))
             .occlude()
             .hover(|this| this.bg(cx.theme().drag_border))
+            .when(is_resizing, |this| this.bg(cx.theme().drag_border))
+            .when(self.axis.is_horizontal(), |this| {
+                this.cursor_col_resize().top_0().h_full().w(handle_size)
+            })
+            .when(self.axis.is_vertical(), |this| {
+                this.cursor_row_resize().left_0().w_full().h(handle_size)
+            })
             .on_drag_move(cx.listener(
                 move |view, e: &DragMoveEvent<DragPanel>, cx| match e.drag(cx) {
                     DragPanel((entity_id, ix, axis)) => {
@@ -90,6 +100,7 @@ impl ResizablePanelGroup {
                         }
 
                         let ix = *ix;
+                        view.resizing_panel_ix = Some(ix);
                         let panel = view
                             .panels
                             .get(ix)
@@ -108,12 +119,16 @@ impl ResizablePanelGroup {
                     }
                 },
             ))
-            .when(self.axis.is_horizontal(), |this| {
-                this.cursor_col_resize().top_0().h_full().w(handle_size)
-            })
-            .when(self.axis.is_vertical(), |this| {
-                this.cursor_row_resize().left_0().w_full().h(handle_size)
-            })
+            .on_mouse_up_out(
+                MouseButton::Left,
+                cx.listener(|view, _, _| {
+                    if view.resizing_panel_ix.is_none() {
+                        return;
+                    }
+
+                    view.resizing_panel_ix = None;
+                }),
+            )
             .on_drag(DragPanel((cx.entity_id(), ix, axis)), |drag_panel, cx| {
                 cx.stop_propagation();
                 cx.new_view(|_| drag_panel.clone())
diff --git a/crates/ui/src/table.rs b/crates/ui/src/table.rs
index 2d4684df..eaa6daaf 100644
--- a/crates/ui/src/table.rs
+++ b/crates/ui/src/table.rs
@@ -70,7 +70,7 @@ impl Render for DragCol {
             .border_1()
             .border_color(cx.theme().border)
             .shadow_md()
-            .when_some(self.width.clone(), |this, width| this.w(width))
+            .when_some(self.width, |this, width| this.w(width))
             .min_w(px(100.))
             .max_w(px(450.))
             .child(self.name.clone())
@@ -386,11 +386,7 @@ where
                         let ix = *ix;
                         view.resizing_col = Some(ix);
 
-                        let col_group = view
-                            .col_groups
-                            .get(ix)
-                            .expect("BUG: invalid col index")
-                            .clone();
+                        let col_group = *view.col_groups.get(ix).expect("BUG: invalid col index");
 
                         view.resize_cols(
                             ix,