dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

resizable: Fix resizable handle to keep showing drag style on dragging. (#78)

Browse source 
https://github.com/user-attachments/assets/a8d2abcb-9122-4060-bfd6-2673903c18a1
This commit is contained in:
Jason Lee 2024-07-29 10:01:22 +08:00 committed by GitHub
parent 15e9804f08
commit 01aa9401c5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 24 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
crates/ui/src/resizable/panel.rs
View file

@ -2,7 +2,7 @@ use std::rc::Rc;
use gpui::{ use gpui::{
canvas, div, prelude::FluentBuilder as _, px, AnyElement, AnyView, Axis, Bounds, DragMoveEvent, 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, StatefulInteractiveElement, Styled, View, ViewContext, VisualContext as _, WindowContext,
}; };
@ -18,6 +18,7 @@ pub struct ResizablePanelGroup {
axis: Axis, axis: Axis,
handle_size: Pixels, handle_size: Pixels,
size: Pixels, size: Pixels,
resizing_panel_ix: Option<usize>,
} }
impl ResizablePanelGroup { impl ResizablePanelGroup {
@ -28,6 +29,7 @@ impl ResizablePanelGroup {
panels: Vec::new(), panels: Vec::new(),
handle_size: px(3.), handle_size: px(3.),
size: px(20.), 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 { fn render_resize_handle(&self, ix: usize, cx: &mut ViewContext<Self>) -> impl IntoElement {
let axis = self.axis; let axis = self.axis;
let handle_size = self.handle_size; let handle_size = self.handle_size;
let is_resizing = self.resizing_panel_ix == Some(ix);
div() div()
.id(("resizable-handle", ix)) .id(("resizable-handle", ix))
.occlude() .occlude()
.hover(|this| this.bg(cx.theme().drag_border)) .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( .on_drag_move(cx.listener(
move |view, e: &DragMoveEvent<DragPanel>, cx| match e.drag(cx) { move |view, e: &DragMoveEvent<DragPanel>, cx| match e.drag(cx) {
DragPanel((entity_id, ix, axis)) => { DragPanel((entity_id, ix, axis)) => {
@ -90,6 +100,7 @@ impl ResizablePanelGroup {
} }
let ix = *ix; let ix = *ix;
view.resizing_panel_ix = Some(ix);
let panel = view let panel = view
.panels .panels
.get(ix) .get(ix)
@ -108,12 +119,16 @@ impl ResizablePanelGroup {
} }
}, },
)) ))
.when(self.axis.is_horizontal(), |this| { .on_mouse_up_out(
this.cursor_col_resize().top_0().h_full().w(handle_size) MouseButton::Left,
}) cx.listener(|view, _, _| {
.when(self.axis.is_vertical(), |this| { if view.resizing_panel_ix.is_none() {
this.cursor_row_resize().left_0().w_full().h(handle_size) return;
}) }
view.resizing_panel_ix = None;
}),
)
.on_drag(DragPanel((cx.entity_id(), ix, axis)), |drag_panel, cx| { .on_drag(DragPanel((cx.entity_id(), ix, axis)), |drag_panel, cx| {
cx.stop_propagation(); cx.stop_propagation();
cx.new_view(|_| drag_panel.clone()) cx.new_view(|_| drag_panel.clone())

8
crates/ui/src/table.rs
View file

@ -70,7 +70,7 @@ impl Render for DragCol {
.border_1() .border_1()
.border_color(cx.theme().border) .border_color(cx.theme().border)
.shadow_md() .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.)) .min_w(px(100.))
.max_w(px(450.)) .max_w(px(450.))
.child(self.name.clone()) .child(self.name.clone())
@ -386,11 +386,7 @@ where
let ix = *ix; let ix = *ix;
view.resizing_col = Some(ix); view.resizing_col = Some(ix);
let col_group = view let col_group = *view.col_groups.get(ix).expect("BUG: invalid col index");
.col_groups
.get(ix)
.expect("BUG: invalid col index")
.clone();
view.resize_cols( view.resize_cols(
ix, ix,