From f6b4e5a591cf2fd5f44a4f423aff63a94ff760ad Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Wed, 4 Sep 2024 00:35:51 +0800 Subject: [PATCH] dock: Fix add_panel with placement to split size. (#212) https://github.com/user-attachments/assets/7177bd8f-5b19-4959-8d60-cae583173e73 --- crates/app/src/story_workspace.rs | 37 +++++++++++++------------------ crates/ui/src/dock/stack_panel.rs | 2 +- crates/ui/src/resizable/panel.rs | 24 +++++++++++--------- 3 files changed, 31 insertions(+), 32 deletions(-) diff --git a/crates/app/src/story_workspace.rs b/crates/app/src/story_workspace.rs index ffcb318b..823118b5 100644 --- a/crates/app/src/story_workspace.rs +++ b/crates/app/src/story_workspace.rs @@ -55,34 +55,29 @@ impl StoryWorkspace { let dock_area = cx.new_view(|cx| DockArea::new("main-dock", stack_panel.clone(), cx)); let weak_dock_area = dock_area.downgrade(); - let center_tab_panel = - cx.new_view(|cx| TabPanel::new(Some(stack_panel.clone()), weak_dock_area.clone(), cx)); - let left_tab_panel = - cx.new_view(|cx| TabPanel::new(Some(stack_panel.clone()), weak_dock_area.clone(), cx)); - let right_tab_panel = - cx.new_view(|cx| TabPanel::new(Some(stack_panel.clone()), weak_dock_area.clone(), cx)); + let center_tab_panel = cx.new_view(|cx| TabPanel::new(None, weak_dock_area.clone(), cx)); + let left_tab_panel = cx.new_view(|cx| { + let stack_panel = cx.new_view(|cx| StackPanel::new(Axis::Vertical, cx)); + TabPanel::new(Some(stack_panel), weak_dock_area.clone(), cx) + }); + + let right_tab_panel = cx.new_view(|cx| { + let stack_panel = cx.new_view(|cx| StackPanel::new(Axis::Vertical, cx)); + TabPanel::new(Some(stack_panel), weak_dock_area.clone(), cx) + }); stack_panel.update(cx, |view, cx| { - let left_stack_panel = cx.new_view(|cx| StackPanel::new(Axis::Vertical, cx)); - left_stack_panel.update(cx, |view, cx| { - view.add_panel(left_tab_panel.clone(), None, weak_dock_area.clone(), cx); - }); view.add_panel( - left_stack_panel.clone(), + left_tab_panel.clone(), Some(px(300.)), weak_dock_area.clone(), cx, ); view.add_panel(center_tab_panel.clone(), None, weak_dock_area.clone(), cx); - - let right_stack_panel = cx.new_view(|cx| StackPanel::new(Axis::Vertical, cx)); - right_stack_panel.update(cx, |view, cx| { - view.add_panel(right_tab_panel.clone(), None, weak_dock_area.clone(), cx); - }); view.add_panel( - right_stack_panel.clone(), - Some(px(340.)), + right_tab_panel.clone(), + Some(px(350.)), weak_dock_area.clone(), cx, ); @@ -213,7 +208,7 @@ impl StoryWorkspace { "Render SVG image and Chart", ImageStory::view(cx).into(), right_tab_panel.clone(), - None, + Some(Placement::Bottom), None, true, cx, @@ -280,8 +275,8 @@ impl StoryWorkspace { "Calendar", "A calendar component.", CalendarStory::view(cx).into(), - center_tab_panel.clone(), - None, + right_tab_panel.clone(), + Some(Placement::Bottom), None, true, cx, diff --git a/crates/ui/src/dock/stack_panel.rs b/crates/ui/src/dock/stack_panel.rs index 4466445a..3595d52d 100644 --- a/crates/ui/src/dock/stack_panel.rs +++ b/crates/ui/src/dock/stack_panel.rs @@ -146,7 +146,7 @@ impl StackPanel { P: Panel, { resizable_panel() - .content_view(panel.view()) + .content_view(panel.into()) .when_some(size, |this, size| this.size(size)) } diff --git a/crates/ui/src/resizable/panel.rs b/crates/ui/src/resizable/panel.rs index e6687ec1..5c6facd7 100644 --- a/crates/ui/src/resizable/panel.rs +++ b/crates/ui/src/resizable/panel.rs @@ -93,7 +93,7 @@ impl ResizablePanelGroup { let mut panel = panel; panel.axis = self.axis; panel.group = Some(cx.view().clone()); - self.sizes.push(panel.size.unwrap_or_default()); + self.sizes.push(panel.initial_size.unwrap_or_default()); self.panels.push(cx.new_view(|_| panel)); } @@ -101,7 +101,9 @@ impl ResizablePanelGroup { let mut panel = panel; panel.axis = self.axis; panel.group = Some(cx.view().clone()); - self.sizes.insert(ix, panel.size.unwrap_or_default()); + + self.sizes + .insert(ix, panel.initial_size.unwrap_or_default()); self.panels.insert(ix, cx.new_view(|_| panel)); cx.notify() } @@ -114,9 +116,14 @@ impl ResizablePanelGroup { cx: &mut ViewContext, ) { let mut panel = panel; + + let old_panel = self.panels[ix].clone(); + let old_panel_initial_size = old_panel.read(cx).initial_size; + + panel.initial_size = old_panel_initial_size; panel.axis = self.axis; panel.group = Some(cx.view().clone()); - self.sizes[ix] = panel.size.unwrap_or_default(); + self.sizes[ix] = panel.initial_size.unwrap_or_default(); self.panels[ix] = cx.new_view(|_| panel); cx.notify() } @@ -327,6 +334,7 @@ impl ResizablePanel { self } + /// Set the initial size of the panel. pub fn size(mut self, size: Pixels) -> Self { self.initial_size = Some(size); self @@ -369,16 +377,12 @@ impl Render for ResizablePanel { .when(self.axis.is_vertical(), |this| this.min_h(PANEL_MIN_SIZE)) .when(self.axis.is_horizontal(), |this| this.min_w(PANEL_MIN_SIZE)) .when_some(self.initial_size, |this, size| { - // The changed_size is None, that mean the initial size for the panel, so we need set flex_shrink_0 + // The `self.size` is None, that mean the initial size for the panel, so we need set flex_shrink_0 // To let it keep the initial size. this.when(self.size.is_none(), |this| this.flex_shrink_0()) - .when(self.axis.is_vertical(), |this| this.h(size)) - .when(self.axis.is_horizontal(), |this| this.w(size)) - }) - .when_some(self.size, |this, size| { - this.when(self.axis.is_vertical(), |this| this.h(size)) - .when(self.axis.is_horizontal(), |this| this.w(size)) + .flex_basis(size) }) + .when_some(self.size, |this, size| this.flex_basis(size)) .child({ canvas( move |bounds, cx| view.update(cx, |r, cx| r.update_size(bounds, cx)),