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

dock: Revert panel radio size to back to use Pixels type for panel size. (#842)

Browse source 
This PR to revert previous dock changes to back to use `Pixels` type for
panel size.

- #833 
- #839 
- #840
This commit is contained in:
Jason Lee 2025-05-09 16:47:24 +08:00 committed by GitHub
parent 6caf6f95df
commit d288a51e06
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 212 additions and 204 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
crates/story/examples/dock.rs
View file

@ -279,7 +279,7 @@ impl StoryWorkspace {
cx, cx,
), ),
], ],
vec![None, Some(0.2)], vec![None, Some(px(360.))],
&dock_area, &dock_area,
window, window,
cx, cx,
@ -328,9 +328,9 @@ impl StoryWorkspace {
_ = dock_area.update(cx, |view, cx| { _ = dock_area.update(cx, |view, cx| {
view.set_version(MAIN_DOCK_AREA.version, window, cx); view.set_version(MAIN_DOCK_AREA.version, window, cx);
view.set_center(dock_item, window, cx); view.set_center(dock_item, window, cx);
view.set_left_dock(left_panels, px(300.), true, window, cx); view.set_left_dock(left_panels, Some(px(350.)), true, window, cx);
view.set_bottom_dock(bottom_panels, px(200.), true, window, cx); view.set_bottom_dock(bottom_panels, Some(px(200.)), true, window, cx);
view.set_right_dock(right_panels, px(320.), true, window, cx); view.set_right_dock(right_panels, Some(px(320.)), true, window, cx);
Self::save_state(&view.dump(cx)).unwrap(); Self::save_state(&view.dump(cx)).unwrap();
}); });

25
crates/story/src/resizable_story.rs
View file

@ -53,32 +53,36 @@ impl ResizableStory {
v_resizable() v_resizable()
.group( .group(
h_resizable() h_resizable()
.ratio(0.1) .size(px(150.))
.child( .child(
resizable_panel() resizable_panel()
.ratio(0.3) .size(px(300.))
.content(|_, cx| panel_box("Left 1 (Min 120px)", cx)), .content(|_, cx| panel_box("Left 1 (Min 120px)", cx)),
cx, cx,
) )
.child( .child(
resizable_panel().content(|_, cx| panel_box("Center 1", cx)), resizable_panel()
.size(px(400.))
.content(|_, cx| panel_box("Center 1", cx)),
cx, cx,
) )
.child( .child(
resizable_panel() resizable_panel()
.ratio(0.4) .size(px(300.))
.content(|_, cx| panel_box("Right (Grow)", cx)), .content(|_, cx| panel_box("Right (Grow)", cx)),
cx, cx,
), ),
cx, cx,
) )
.child( .child(
resizable_panel().content(|_, cx| panel_box("Center (Grow)", cx)), resizable_panel()
.size(px(150.))
.content(|_, cx| panel_box("Center (Grow)", cx)),
cx, cx,
) )
.child( .child(
resizable_panel() resizable_panel()
.ratio(0.5) .size(px(210.))
.content(|_, cx| panel_box("Bottom", cx)), .content(|_, cx| panel_box("Bottom", cx)),
cx, cx,
) )
@ -88,12 +92,14 @@ impl ResizableStory {
h_resizable() h_resizable()
.child( .child(
resizable_panel() resizable_panel()
.ratio(0.3) .size(px(300.))
.content(|_, cx| panel_box("Left 2", cx)), .content(|_, cx| panel_box("Left 2", cx)),
cx, cx,
) )
.child( .child(
resizable_panel().content(|_, cx| panel_box("Right (Grow)", cx)), resizable_panel()
.size(px(400.))
.content(|_, cx| panel_box("Right (Grow)", cx)),
cx, cx,
) )
}); });
@ -108,9 +114,8 @@ impl ResizableStory {
impl Render for ResizableStory { impl Render for ResizableStory {
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement { fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
v_flex() v_flex()
.h_full()
.gap_6() .gap_6()
.child(div().h(px(800.)).child(self.group1.clone())) .child(self.group1.clone())
.child(self.group2.clone()) .child(self.group2.clone())
} }
} }

56
crates/ui/src/dock/dock.rs
View file

@ -66,7 +66,7 @@ pub struct Dock {
pub(super) placement: DockPlacement, pub(super) placement: DockPlacement,
dock_area: WeakEntity<DockArea>, dock_area: WeakEntity<DockArea>,
pub(crate) panel: DockItem, pub(crate) panel: DockItem,
/// The size of the dock. /// The size is means the width or height of the Dock, if the placement is left or right, the size is width, otherwise the size is height.
pub(super) size: Pixels, pub(super) size: Pixels,
pub(super) open: bool, pub(super) open: bool,
/// Whether the Dock is collapsible, default: true /// Whether the Dock is collapsible, default: true
@ -104,7 +104,7 @@ impl Dock {
panel, panel,
open: true, open: true,
collapsible: true, collapsible: true,
size: px(200.), size: px(200.0),
resizing: false, resizing: false,
} }
} }
@ -147,7 +147,7 @@ impl Dock {
pub(super) fn from_state( pub(super) fn from_state(
dock_area: WeakEntity<DockArea>, dock_area: WeakEntity<DockArea>,
placement: DockPlacement, placement: DockPlacement,
size: impl Into<Pixels>, size: Pixels,
panel: DockItem, panel: DockItem,
open: bool, open: bool,
window: &mut Window, window: &mut Window,
@ -176,7 +176,7 @@ impl Dock {
dock_area, dock_area,
panel, panel,
open, open,
size: size.into(), size,
collapsible: true, collapsible: true,
resizing: false, resizing: false,
} }
@ -249,8 +249,8 @@ impl Dock {
} }
/// Set the size of the Dock. /// Set the size of the Dock.
pub fn set_size(&mut self, size: impl Into<Pixels>, _: &mut Window, cx: &mut Context<Self>) { pub fn set_size(&mut self, size: Pixels, _: &mut Window, cx: &mut Context<Self>) {
self.size = size.into(); self.size = size.max(PANEL_MIN_SIZE);
cx.notify(); cx.notify();
} }
@ -301,7 +301,6 @@ impl Dock {
cx.new(|_| info.deref().clone()) cx.new(|_| info.deref().clone())
}) })
} }
fn resize(&mut self, mouse_position: Point<Pixels>, _: &mut Window, cx: &mut Context<Self>) { fn resize(&mut self, mouse_position: Point<Pixels>, _: &mut Window, cx: &mut Context<Self>) {
if !self.resizing { if !self.resizing {
return; return;
@ -313,6 +312,28 @@ impl Dock {
.expect("DockArea is missing") .expect("DockArea is missing")
.read(cx); .read(cx);
let area_bounds = dock_area.bounds; let area_bounds = dock_area.bounds;
let mut left_dock_size = Pixels(0.0);
let mut right_dock_size = Pixels(0.0);
// Get the size of the left dock if it's open and not the current dock
if let Some(left_dock) = &dock_area.left_dock {
if left_dock.entity_id() != cx.entity().entity_id() {
let left_dock_read = left_dock.read(cx);
if left_dock_read.is_open() {
left_dock_size = left_dock_read.size;
}
}
}
// Get the size of the right dock if it's open and not the current dock
if let Some(right_dock) = &dock_area.right_dock {
if right_dock.entity_id() != cx.entity().entity_id() {
let right_dock_read = right_dock.read(cx);
if right_dock_read.is_open() {
right_dock_size = right_dock_read.size;
}
}
}
let size = match self.placement { let size = match self.placement {
DockPlacement::Left => mouse_position.x - area_bounds.left(), DockPlacement::Left => mouse_position.x - area_bounds.left(),
@ -320,7 +341,21 @@ impl Dock {
DockPlacement::Bottom => area_bounds.bottom() - mouse_position.y, DockPlacement::Bottom => area_bounds.bottom() - mouse_position.y,
DockPlacement::Center => unreachable!(), DockPlacement::Center => unreachable!(),
}; };
self.size = size.max(PANEL_MIN_SIZE); match self.placement {
DockPlacement::Left => {
let max_size = area_bounds.size.width - PANEL_MIN_SIZE - right_dock_size;
self.size = size.clamp(PANEL_MIN_SIZE, max_size);
}
DockPlacement::Right => {
let max_size = area_bounds.size.width - PANEL_MIN_SIZE - left_dock_size;
self.size = size.clamp(PANEL_MIN_SIZE, max_size);
}
DockPlacement::Bottom => {
let max_size = area_bounds.size.height - PANEL_MIN_SIZE;
self.size = size.clamp(PANEL_MIN_SIZE, max_size);
}
DockPlacement::Center => unreachable!(),
}
cx.notify(); cx.notify();
} }
@ -337,14 +372,13 @@ impl Render for Dock {
} }
let cache_style = StyleRefinement::default().absolute().size_full(); let cache_style = StyleRefinement::default().absolute().size_full();
let dock_size = self.size;
div() div()
.relative() .relative()
.overflow_hidden() .overflow_hidden()
.map(|this| match self.placement { .map(|this| match self.placement {
DockPlacement::Left | DockPlacement::Right => this.h_flex().h_full().w(dock_size), DockPlacement::Left | DockPlacement::Right => this.h_flex().h_full().w(self.size),
DockPlacement::Bottom => this.w_full().h(dock_size), DockPlacement::Bottom => this.w_full().h(self.size),
DockPlacement::Center => unreachable!(), DockPlacement::Center => unreachable!(),
}) })
// Bottom Dock should keep the title bar, then user can click the Toggle button // Bottom Dock should keep the title bar, then user can click the Toggle button

45
crates/ui/src/dock/mod.rs
View file

@ -8,7 +8,7 @@ mod tiles;
use anyhow::Result; use anyhow::Result;
use gpui::{ use gpui::{
actions, canvas, div, prelude::FluentBuilder, px, AnyElement, AnyView, App, AppContext, Axis, actions, canvas, div, prelude::FluentBuilder, AnyElement, AnyView, App, AppContext, Axis,
Bounds, Context, Edges, Entity, EntityId, EventEmitter, InteractiveElement as _, IntoElement, Bounds, Context, Edges, Entity, EntityId, EventEmitter, InteractiveElement as _, IntoElement,
ParentElement as _, Pixels, Render, SharedString, Styled, Subscription, WeakEntity, Window, ParentElement as _, Pixels, Render, SharedString, Styled, Subscription, WeakEntity, Window,
}; };
@ -78,7 +78,7 @@ pub enum DockItem {
Split { Split {
axis: Axis, axis: Axis,
items: Vec<DockItem>, items: Vec<DockItem>,
ratios: Vec<Option<f32>>, sizes: Vec<Option<Pixels>>,
view: Entity<StackPanel>, view: Entity<StackPanel>,
}, },
/// Tab layout /// Tab layout
@ -100,15 +100,12 @@ impl std::fmt::Debug for DockItem {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result { fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
match self { match self {
DockItem::Split { DockItem::Split {
axis, axis, items, sizes, ..
items,
ratios,
..
} => f } => f
.debug_struct("Split") .debug_struct("Split")
.field("axis", axis) .field("axis", axis)
.field("items", &items.len()) .field("items", &items.len())
.field("ratios", ratios) .field("sizes", sizes)
.finish(), .finish(),
DockItem::Tabs { DockItem::Tabs {
items, active_ix, .. items, active_ix, ..
@ -138,12 +135,12 @@ impl DockItem {
/// Create DockItem with split layout, each item of panel have specified size. /// Create DockItem with split layout, each item of panel have specified size.
/// ///
/// Please note that the `items` and `ratios` must have the same length. /// Please note that the `items` and `sizes` must have the same length.
/// Set `None` in `sizes` to make the index of panel have auto size. /// Set `None` in `sizes` to make the index of panel have auto size.
pub fn split_with_sizes( pub fn split_with_sizes(
axis: Axis, axis: Axis,
items: Vec<DockItem>, items: Vec<DockItem>,
ratios: Vec<Option<f32>>, sizes: Vec<Option<Pixels>>,
dock_area: &WeakEntity<DockArea>, dock_area: &WeakEntity<DockArea>,
window: &mut Window, window: &mut Window,
cx: &mut App, cx: &mut App,
@ -153,14 +150,14 @@ impl DockItem {
let mut stack_panel = StackPanel::new(axis, window, cx); let mut stack_panel = StackPanel::new(axis, window, cx);
for (i, item) in items.iter_mut().enumerate() { for (i, item) in items.iter_mut().enumerate() {
let view = item.view(); let view = item.view();
let ratio = ratios.get(i).copied().flatten(); let size = sizes.get(i).copied().flatten();
stack_panel.add_panel(view.clone(), ratio, dock_area.clone(), window, cx) stack_panel.add_panel(view.clone(), size, dock_area.clone(), window, cx)
} }
for (i, item) in items.iter().enumerate() { for (i, item) in items.iter().enumerate() {
let view = item.view(); let view = item.view();
let ratio = ratios.get(i).copied().flatten(); let size = sizes.get(i).copied().flatten();
stack_panel.add_panel(view.clone(), ratio, dock_area.clone(), window, cx) stack_panel.add_panel(view.clone(), size, dock_area.clone(), window, cx)
} }
stack_panel stack_panel
@ -179,7 +176,7 @@ impl DockItem {
Self::Split { Self::Split {
axis, axis,
items, items,
ratios, sizes,
view: stack_panel, view: stack_panel,
} }
} }
@ -450,7 +447,7 @@ impl DockArea {
let dock_item = DockItem::Split { let dock_item = DockItem::Split {
axis: Axis::Horizontal, axis: Axis::Horizontal,
items: vec![], items: vec![],
ratios: vec![], sizes: vec![],
view: stack_panel.clone(), view: stack_panel.clone(),
}; };
@ -530,7 +527,7 @@ impl DockArea {
pub fn set_left_dock( pub fn set_left_dock(
&mut self, &mut self,
panel: DockItem, panel: DockItem,
size: impl Into<Pixels>, size: Option<Pixels>,
open: bool, open: bool,
window: &mut Window, window: &mut Window,
cx: &mut Context<Self>, cx: &mut Context<Self>,
@ -539,7 +536,9 @@ impl DockArea {
let weak_self = cx.entity().downgrade(); let weak_self = cx.entity().downgrade();
self.left_dock = Some(cx.new(|cx| { self.left_dock = Some(cx.new(|cx| {
let mut dock = Dock::left(weak_self.clone(), window, cx); let mut dock = Dock::left(weak_self.clone(), window, cx);
if let Some(size) = size {
dock.set_size(size, window, cx); dock.set_size(size, window, cx);
}
dock.set_panel(panel, window, cx); dock.set_panel(panel, window, cx);
dock.set_open(open, window, cx); dock.set_open(open, window, cx);
dock dock
@ -550,7 +549,7 @@ impl DockArea {
pub fn set_bottom_dock( pub fn set_bottom_dock(
&mut self, &mut self,
panel: DockItem, panel: DockItem,
size: impl Into<Pixels>, size: Option<Pixels>,
open: bool, open: bool,
window: &mut Window, window: &mut Window,
cx: &mut Context<Self>, cx: &mut Context<Self>,
@ -559,7 +558,9 @@ impl DockArea {
let weak_self = cx.entity().downgrade(); let weak_self = cx.entity().downgrade();
self.bottom_dock = Some(cx.new(|cx| { self.bottom_dock = Some(cx.new(|cx| {
let mut dock = Dock::bottom(weak_self.clone(), window, cx); let mut dock = Dock::bottom(weak_self.clone(), window, cx);
if let Some(size) = size {
dock.set_size(size, window, cx); dock.set_size(size, window, cx);
}
dock.set_panel(panel, window, cx); dock.set_panel(panel, window, cx);
dock.set_open(open, window, cx); dock.set_open(open, window, cx);
dock dock
@ -570,7 +571,7 @@ impl DockArea {
pub fn set_right_dock( pub fn set_right_dock(
&mut self, &mut self,
panel: DockItem, panel: DockItem,
size: impl Into<Pixels>, size: Option<Pixels>,
open: bool, open: bool,
window: &mut Window, window: &mut Window,
cx: &mut Context<Self>, cx: &mut Context<Self>,
@ -579,7 +580,9 @@ impl DockArea {
let weak_self = cx.entity().downgrade(); let weak_self = cx.entity().downgrade();
self.right_dock = Some(cx.new(|cx| { self.right_dock = Some(cx.new(|cx| {
let mut dock = Dock::right(weak_self.clone(), window, cx); let mut dock = Dock::right(weak_self.clone(), window, cx);
if let Some(size) = size {
dock.set_size(size, window, cx); dock.set_size(size, window, cx);
}
dock.set_panel(panel, window, cx); dock.set_panel(panel, window, cx);
dock.set_open(open, window, cx); dock.set_open(open, window, cx);
dock dock
@ -723,7 +726,7 @@ impl DockArea {
} else { } else {
self.set_left_dock( self.set_left_dock(
DockItem::tabs(vec![panel], None, &weak_self, window, cx), DockItem::tabs(vec![panel], None, &weak_self, window, cx),
px(200.), None,
true, true,
window, window,
cx, cx,
@ -736,7 +739,7 @@ impl DockArea {
} else { } else {
self.set_bottom_dock( self.set_bottom_dock(
DockItem::tabs(vec![panel], None, &weak_self, window, cx), DockItem::tabs(vec![panel], None, &weak_self, window, cx),
px(200.), None,
true, true,
window, window,
cx, cx,
@ -749,7 +752,7 @@ impl DockArea {
} else { } else {
self.set_right_dock( self.set_right_dock(
DockItem::tabs(vec![panel], None, &weak_self, window, cx), DockItem::tabs(vec![panel], None, &weak_self, window, cx),
px(200.), None,
true, true,
window, window,
cx, cx,

38
crates/ui/src/dock/stack_panel.rs
View file

@ -13,8 +13,8 @@ use crate::{
use super::{DockArea, Panel, PanelEvent, PanelState, PanelView, TabPanel}; use super::{DockArea, Panel, PanelEvent, PanelState, PanelView, TabPanel};
use gpui::{ use gpui::{
prelude::FluentBuilder as _, App, AppContext, Axis, Context, DismissEvent, Entity, prelude::FluentBuilder as _, App, AppContext, Axis, Context, DismissEvent, Entity,
EventEmitter, FocusHandle, Focusable, IntoElement, ParentElement, Render, Styled, Subscription, EventEmitter, FocusHandle, Focusable, IntoElement, ParentElement, Pixels, Render, Styled,
WeakEntity, Window, Subscription, WeakEntity, Window,
}; };
use smallvec::SmallVec; use smallvec::SmallVec;
@ -41,11 +41,11 @@ impl Panel for StackPanel {
} }
} }
fn dump(&self, cx: &App) -> PanelState { fn dump(&self, cx: &App) -> PanelState {
let flexes = self.panel_group.read(cx).ratios(); let sizes = self.panel_group.read(cx).sizes();
let mut state = PanelState::new(self); let mut state = PanelState::new(self);
for panel in &self.panels { for panel in &self.panels {
state.add_child(panel.dump(cx)); state.add_child(panel.dump(cx));
state.info = PanelInfo::stack(flexes.clone(), self.axis); state.info = PanelInfo::stack(sizes.clone(), self.axis);
} }
state state
@ -111,19 +111,19 @@ impl StackPanel {
pub fn add_panel( pub fn add_panel(
&mut self, &mut self,
panel: Arc<dyn PanelView>, panel: Arc<dyn PanelView>,
ratio: Option<f32>, size: Option<Pixels>,
dock_area: WeakEntity<DockArea>, dock_area: WeakEntity<DockArea>,
window: &mut Window, window: &mut Window,
cx: &mut Context<Self>, cx: &mut Context<Self>,
) { ) {
self.insert_panel(panel, self.panels.len(), ratio, dock_area, window, cx); self.insert_panel(panel, self.panels.len(), size, dock_area, window, cx);
} }
pub fn add_panel_at( pub fn add_panel_at(
&mut self, &mut self,
panel: Arc<dyn PanelView>, panel: Arc<dyn PanelView>,
placement: Placement, placement: Placement,
ratio: Option<f32>, size: Option<Pixels>,
dock_area: WeakEntity<DockArea>, dock_area: WeakEntity<DockArea>,
window: &mut Window, window: &mut Window,
cx: &mut Context<Self>, cx: &mut Context<Self>,
@ -132,7 +132,7 @@ impl StackPanel {
panel, panel,
self.panels_len(), self.panels_len(),
placement, placement,
ratio, size,
dock_area, dock_area,
window, window,
cx, cx,
@ -145,17 +145,17 @@ impl StackPanel {
panel: Arc<dyn PanelView>, panel: Arc<dyn PanelView>,
ix: usize, ix: usize,
placement: Placement, placement: Placement,
ratio: Option<f32>, size: Option<Pixels>,
dock_area: WeakEntity<DockArea>, dock_area: WeakEntity<DockArea>,
window: &mut Window, window: &mut Window,
cx: &mut Context<Self>, cx: &mut Context<Self>,
) { ) {
match placement { match placement {
Placement::Top | Placement::Left => { Placement::Top | Placement::Left => {
self.insert_panel_before(panel, ix, ratio, dock_area, window, cx) self.insert_panel_before(panel, ix, size, dock_area, window, cx)
} }
Placement::Right | Placement::Bottom => { Placement::Right | Placement::Bottom => {
self.insert_panel_after(panel, ix, ratio, dock_area, window, cx) self.insert_panel_after(panel, ix, size, dock_area, window, cx)
} }
} }
} }
@ -165,12 +165,12 @@ impl StackPanel {
&mut self, &mut self,
panel: Arc<dyn PanelView>, panel: Arc<dyn PanelView>,
ix: usize, ix: usize,
ratio: Option<f32>, size: Option<Pixels>,
dock_area: WeakEntity<DockArea>, dock_area: WeakEntity<DockArea>,
window: &mut Window, window: &mut Window,
cx: &mut Context<Self>, cx: &mut Context<Self>,
) { ) {
self.insert_panel(panel, ix, ratio, dock_area, window, cx); self.insert_panel(panel, ix, size, dock_area, window, cx);
} }
/// Insert a panel after the index. /// Insert a panel after the index.
@ -178,26 +178,26 @@ impl StackPanel {
&mut self, &mut self,
panel: Arc<dyn PanelView>, panel: Arc<dyn PanelView>,
ix: usize, ix: usize,
ratio: Option<f32>, size: Option<Pixels>,
dock_area: WeakEntity<DockArea>, dock_area: WeakEntity<DockArea>,
window: &mut Window, window: &mut Window,
cx: &mut Context<Self>, cx: &mut Context<Self>,
) { ) {
self.insert_panel(panel, ix + 1, ratio, dock_area, window, cx); self.insert_panel(panel, ix + 1, size, dock_area, window, cx);
} }
fn new_resizable_panel(panel: Arc<dyn PanelView>, ratio: Option<f32>) -> ResizablePanel { fn new_resizable_panel(panel: Arc<dyn PanelView>, size: Option<Pixels>) -> ResizablePanel {
resizable_panel() resizable_panel()
.content_view(panel.view()) .content_view(panel.view())
.content_visible(move |_, cx| panel.visible(cx)) .content_visible(move |_, cx| panel.visible(cx))
.when_some(ratio, |this, ratio| this.ratio(ratio)) .when_some(size, |this, size| this.size(size))
} }
fn insert_panel( fn insert_panel(
&mut self, &mut self,
panel: Arc<dyn PanelView>, panel: Arc<dyn PanelView>,
ix: usize, ix: usize,
ratio: Option<f32>, size: Option<Pixels>,
dock_area: WeakEntity<DockArea>, dock_area: WeakEntity<DockArea>,
window: &mut Window, window: &mut Window,
cx: &mut Context<Self>, cx: &mut Context<Self>,
@ -241,7 +241,7 @@ impl StackPanel {
self.panels.insert(ix, panel.clone()); self.panels.insert(ix, panel.clone());
self.panel_group.update(cx, |view, cx| { self.panel_group.update(cx, |view, cx| {
view.insert_child( view.insert_child(
Self::new_resizable_panel(panel.clone(), ratio), Self::new_resizable_panel(panel.clone(), size),
ix, ix,
window, window,
cx, cx,

25
crates/ui/src/dock/state.rs
View file

@ -100,8 +100,7 @@ impl From<Bounds<Pixels>> for TileMeta {
pub enum PanelInfo { pub enum PanelInfo {
#[serde(rename = "stack")] #[serde(rename = "stack")]
Stack { Stack {
#[serde(default)] sizes: Vec<Pixels>,
ratios: Vec<f32>,
axis: usize, // 0 for horizontal, 1 for vertical axis: usize, // 0 for horizontal, 1 for vertical
}, },
#[serde(rename = "tabs")] #[serde(rename = "tabs")]
@ -113,9 +112,9 @@ pub enum PanelInfo {
} }
impl PanelInfo { impl PanelInfo {
pub fn stack(ratios: Vec<f32>, axis: Axis) -> Self { pub fn stack(sizes: Vec<Pixels>, axis: Axis) -> Self {
Self::Stack { Self::Stack {
ratios, sizes,
axis: if axis == Axis::Horizontal { 0 } else { 1 }, axis: if axis == Axis::Horizontal { 0 } else { 1 },
} }
} }
@ -143,9 +142,9 @@ impl PanelInfo {
} }
} }
pub fn ratios(&self) -> Option<&Vec<f32>> { pub fn sizes(&self) -> Option<&Vec<Pixels>> {
match self { match self {
Self::Stack { ratios, .. } => Some(ratios), Self::Stack { sizes, .. } => Some(sizes),
_ => None, _ => None,
} }
} }
@ -195,14 +194,14 @@ impl PanelState {
.collect(); .collect();
match info { match info {
PanelInfo::Stack { ratios, axis } => { PanelInfo::Stack { sizes, axis } => {
let axis = if axis == 0 { let axis = if axis == 0 {
Axis::Horizontal Axis::Horizontal
} else { } else {
Axis::Vertical Axis::Vertical
}; };
let ratios = ratios.iter().map(|&ratio| Some(ratio)).collect(); let sizes = sizes.iter().map(|s| Some(*s)).collect_vec();
DockItem::split_with_sizes(axis, items, ratios, &dock_area, window, cx) DockItem::split_with_sizes(axis, items, sizes, &dock_area, window, cx)
} }
PanelInfo::Tabs { active_index } => { PanelInfo::Tabs { active_index } => {
if items.len() == 1 { if items.len() == 1 {
@ -240,6 +239,8 @@ impl PanelState {
#[cfg(test)] #[cfg(test)]
mod tests { mod tests {
use gpui::px;
use super::*; use super::*;
#[test] #[test]
fn test_deserialize_item_state() { fn test_deserialize_item_state() {
@ -258,7 +259,7 @@ mod tests {
let left_dock = state.left_dock.unwrap(); let left_dock = state.left_dock.unwrap();
assert_eq!(left_dock.open, true); assert_eq!(left_dock.open, true);
assert_eq!(left_dock.size, px(350.)); assert_eq!(left_dock.size, px(350.0));
assert_eq!(left_dock.placement, DockPlacement::Left); assert_eq!(left_dock.placement, DockPlacement::Left);
assert_eq!(left_dock.panel.panel_name, "TabPanel"); assert_eq!(left_dock.panel.panel_name, "TabPanel");
assert_eq!(left_dock.panel.children.len(), 1); assert_eq!(left_dock.panel.children.len(), 1);
@ -266,14 +267,14 @@ mod tests {
let bottom_dock = state.bottom_dock.unwrap(); let bottom_dock = state.bottom_dock.unwrap();
assert_eq!(bottom_dock.open, true); assert_eq!(bottom_dock.open, true);
assert_eq!(bottom_dock.size, px(200.)); assert_eq!(bottom_dock.size, px(200.0));
assert_eq!(bottom_dock.panel.panel_name, "TabPanel"); assert_eq!(bottom_dock.panel.panel_name, "TabPanel");
assert_eq!(bottom_dock.panel.children.len(), 2); assert_eq!(bottom_dock.panel.children.len(), 2);
assert_eq!(bottom_dock.panel.children[0].panel_name, "StoryContainer"); assert_eq!(bottom_dock.panel.children[0].panel_name, "StoryContainer");
let right_dock = state.right_dock.unwrap(); let right_dock = state.right_dock.unwrap();
assert_eq!(right_dock.open, true); assert_eq!(right_dock.open, true);
assert_eq!(right_dock.size, px(320.)); assert_eq!(right_dock.size, px(320.0));
assert_eq!(right_dock.panel.panel_name, "TabPanel"); assert_eq!(right_dock.panel.panel_name, "TabPanel");
assert_eq!(right_dock.panel.children.len(), 1); assert_eq!(right_dock.panel.children.len(), 1);
assert_eq!(right_dock.panel.children[0].panel_name, "StoryContainer"); assert_eq!(right_dock.panel.children[0].panel_name, "StoryContainer");

34
crates/ui/src/dock/tab_panel.rs
View file

@ -1,10 +1,10 @@
use std::sync::Arc; use std::sync::Arc;
use gpui::{ use gpui::{
div, prelude::FluentBuilder, px, relative, rems, App, AppContext, Context, Corner, div, prelude::FluentBuilder, px, rems, App, AppContext, Context, Corner, DefiniteLength,
DismissEvent, DragMoveEvent, Empty, Entity, EventEmitter, FocusHandle, Focusable, DismissEvent, DragMoveEvent, Empty, Entity, EventEmitter, FocusHandle, Focusable,
InteractiveElement as _, IntoElement, ParentElement, Render, ScrollHandle, SharedString, InteractiveElement as _, IntoElement, ParentElement, Pixels, Render, ScrollHandle,
StatefulInteractiveElement, StyleRefinement, Styled, WeakEntity, Window, SharedString, StatefulInteractiveElement, StyleRefinement, Styled, WeakEntity, Window,
}; };
use rust_i18n::t; use rust_i18n::t;
@ -264,7 +264,7 @@ impl TabPanel {
&mut self, &mut self,
panel: Arc<dyn PanelView>, panel: Arc<dyn PanelView>,
placement: Placement, placement: Placement,
ratio: Option<f32>, size: Option<Pixels>,
window: &mut Window, window: &mut Window,
cx: &mut Context<Self>, cx: &mut Context<Self>,
) { ) {
@ -272,7 +272,7 @@ impl TabPanel {
cx.update(|window, cx| { cx.update(|window, cx| {
view.update(cx, |view, cx| { view.update(cx, |view, cx| {
view.will_split_placement = Some(placement); view.will_split_placement = Some(placement);
view.split_panel(panel, placement, ratio, window, cx) view.split_panel(panel, placement, size, window, cx)
}) })
.ok() .ok()
}) })
@ -823,7 +823,7 @@ impl TabPanel {
.bg(cx.theme().drop_target) .bg(cx.theme().drop_target)
.map(|this| match self.will_split_placement { .map(|this| match self.will_split_placement {
Some(placement) => { Some(placement) => {
let size = relative(0.35); let size = DefiniteLength::Fraction(0.35);
match placement { match placement {
Placement::Left => this.left_0().top_0().bottom_0().w(size), Placement::Left => this.left_0().top_0().bottom_0().w(size),
Placement::Right => { Placement::Right => {
@ -930,7 +930,7 @@ impl TabPanel {
&self, &self,
panel: Arc<dyn PanelView>, panel: Arc<dyn PanelView>,
placement: Placement, placement: Placement,
ratio: Option<f32>, size: Option<Pixels>,
window: &mut Window, window: &mut Window,
cx: &mut Context<Self>, cx: &mut Context<Self>,
) { ) {
@ -959,7 +959,7 @@ impl TabPanel {
Arc::new(new_tab_panel), Arc::new(new_tab_panel),
ix, ix,
placement, placement,
ratio, size,
dock_area.clone(), dock_area.clone(),
window, window,
cx, cx,
@ -971,7 +971,7 @@ impl TabPanel {
Arc::new(new_tab_panel), Arc::new(new_tab_panel),
ix, ix,
placement, placement,
ratio, size,
dock_area.clone(), dock_area.clone(),
window, window,
cx, cx,
@ -1001,13 +1001,7 @@ impl TabPanel {
new_stack_panel.update(cx, |view, cx| match placement { new_stack_panel.update(cx, |view, cx| match placement {
Placement::Left | Placement::Top => { Placement::Left | Placement::Top => {
view.add_panel( view.add_panel(Arc::new(new_tab_panel), size, dock_area.clone(), window, cx);
Arc::new(new_tab_panel),
ratio,
dock_area.clone(),
window,
cx,
);
view.add_panel( view.add_panel(
Arc::new(tab_panel.clone()), Arc::new(tab_panel.clone()),
None, None,
@ -1024,13 +1018,7 @@ impl TabPanel {
window, window,
cx, cx,
); );
view.add_panel( view.add_panel(Arc::new(new_tab_panel), size, dock_area.clone(), window, cx);
Arc::new(new_tab_panel),
ratio,
dock_area.clone(),
window,
cx,
);
} }
}); });

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

@ -2,7 +2,7 @@ use std::{ops::Deref, rc::Rc};
use gpui::{ use gpui::{
canvas, div, prelude::FluentBuilder, px, relative, Along, AnyElement, AnyView, App, AppContext, canvas, div, prelude::FluentBuilder, px, relative, Along, AnyElement, AnyView, App, AppContext,
Axis, Bounds, Context, Element, Empty, Entity, EntityId, EventEmitter, IntoElement, Axis, Bounds, Context, Element, Empty, Entity, EntityId, EventEmitter, IntoElement, IsZero,
MouseMoveEvent, MouseUpEvent, ParentElement, Pixels, Render, Style, Styled, WeakEntity, Window, MouseMoveEvent, MouseUpEvent, ParentElement, Pixels, Render, Style, Styled, WeakEntity, Window,
}; };
@ -28,9 +28,9 @@ impl Render for DragPanel {
#[derive(Clone)] #[derive(Clone)]
pub struct ResizablePanelGroup { pub struct ResizablePanelGroup {
panels: Vec<Entity<ResizablePanel>>, panels: Vec<Entity<ResizablePanel>>,
ratios: Vec<f32>, sizes: Vec<Pixels>,
axis: Axis, axis: Axis,
ratio: Option<f32>, size: Option<Pixels>,
bounds: Bounds<Pixels>, bounds: Bounds<Pixels>,
resizing_panel_ix: Option<usize>, resizing_panel_ix: Option<usize>,
} }
@ -39,16 +39,16 @@ impl ResizablePanelGroup {
pub(super) fn new() -> Self { pub(super) fn new() -> Self {
Self { Self {
axis: Axis::Horizontal, axis: Axis::Horizontal,
ratios: Vec::new(), sizes: Vec::new(),
panels: Vec::new(), panels: Vec::new(),
ratio: None, size: None,
bounds: Bounds::default(), bounds: Bounds::default(),
resizing_panel_ix: None, resizing_panel_ix: None,
} }
} }
pub fn load(&mut self, ratios: Vec<f32>, panels: Vec<Entity<ResizablePanel>>) { pub fn load(&mut self, sizes: Vec<Pixels>, panels: Vec<Entity<ResizablePanel>>) {
self.ratios = ratios; self.sizes = sizes;
self.panels = panels; self.panels = panels;
} }
@ -72,10 +72,10 @@ impl ResizablePanelGroup {
/// Add a ResizablePanelGroup as a child to the group. /// Add a ResizablePanelGroup as a child to the group.
pub fn group(self, group: ResizablePanelGroup, cx: &mut Context<Self>) -> Self { pub fn group(self, group: ResizablePanelGroup, cx: &mut Context<Self>) -> Self {
let group: ResizablePanelGroup = group; let group: ResizablePanelGroup = group;
let ratio = group.ratio; let size = group.size;
let panel = ResizablePanel::new() let panel = ResizablePanel::new()
.content_view(cx.new(|_| group).into()) .content_view(cx.new(|_| group).into())
.when_some(ratio, |this, ratio| this.ratio(ratio)); .when_some(size, |this, size| this.size(size));
self.child(panel, cx) self.child(panel, cx)
} }
@ -83,31 +83,26 @@ impl ResizablePanelGroup {
/// ///
/// - When the axis is horizontal, the size is the height of the group. /// - When the axis is horizontal, the size is the height of the group.
/// - When the axis is vertical, the size is the width of the group. /// - When the axis is vertical, the size is the width of the group.
pub fn ratio(mut self, ratio: f32) -> Self { pub fn size(mut self, size: Pixels) -> Self {
self.ratio = Some(ratio); self.size = Some(size);
self self
} }
/// Returns the ratios of the panels. /// Returns the sizes of the resizable panels.
pub(crate) fn ratios(&self) -> &Vec<f32> { pub(crate) fn sizes(&self) -> Vec<Pixels> {
&self.ratios self.sizes.clone()
} }
/// Calculates the sum of all panel sizes within the group. /// Calculates the sum of all panel sizes within the group.
pub fn total_size(&self) -> Pixels { pub fn total_size(&self) -> Pixels {
self.bounds.size.along(self.axis) self.sizes.iter().fold(px(0.0), |acc, &size| acc + size)
} }
pub fn add_child(&mut self, panel: ResizablePanel, cx: &mut Context<Self>) { pub fn add_child(&mut self, panel: ResizablePanel, cx: &mut Context<Self>) {
let mut panel = panel; let mut panel = panel;
panel.axis = self.axis; panel.axis = self.axis;
panel.group = Some(cx.entity().downgrade()); panel.group = Some(cx.entity().downgrade());
let ratio = match panel.ratio { self.sizes.push(panel.initial_size.unwrap_or_default());
Some(ratio) => ratio,
None => panel.initial_radio.unwrap_or_default(),
};
self.ratios.push(ratio);
self.panels.push(cx.new(|_| panel)); self.panels.push(cx.new(|_| panel));
} }
@ -121,11 +116,9 @@ impl ResizablePanelGroup {
let mut panel = panel; let mut panel = panel;
panel.axis = self.axis; panel.axis = self.axis;
panel.group = Some(cx.entity().downgrade()); panel.group = Some(cx.entity().downgrade());
let ratio = match panel.ratio {
Some(ratio) => ratio, self.sizes
None => panel.initial_radio.unwrap_or_default(), .insert(ix, panel.initial_size.unwrap_or_default());
};
self.ratios.insert(ix, ratio);
self.panels.insert(ix, cx.new(|_| panel)); self.panels.insert(ix, cx.new(|_| panel));
cx.notify() cx.notify()
} }
@ -141,32 +134,26 @@ impl ResizablePanelGroup {
let mut panel = panel; let mut panel = panel;
let old_panel = self.panels[ix].clone(); let old_panel = self.panels[ix].clone();
let old_panel_initial_ratio = old_panel.read(cx).initial_radio; let old_panel_initial_size = old_panel.read(cx).initial_size;
let old_panel_ratio = old_panel.read(cx).ratio; let old_panel_size_ratio = old_panel.read(cx).size_ratio;
panel.initial_radio = old_panel_initial_ratio; panel.initial_size = old_panel_initial_size;
panel.ratio = old_panel_ratio; panel.size_ratio = old_panel_size_ratio;
panel.axis = self.axis; panel.axis = self.axis;
panel.group = Some(cx.entity().downgrade()); panel.group = Some(cx.entity().downgrade());
self.sizes[ix] = panel.initial_size.unwrap_or_default();
let ratio = match panel.ratio {
Some(ratio) => ratio,
None => panel.initial_radio.unwrap_or_default(),
};
self.ratios[ix] = ratio;
self.panels[ix] = cx.new(|_| panel); self.panels[ix] = cx.new(|_| panel);
cx.notify() cx.notify()
} }
pub fn remove_child(&mut self, ix: usize, _: &mut Window, cx: &mut Context<Self>) { pub fn remove_child(&mut self, ix: usize, _: &mut Window, cx: &mut Context<Self>) {
self.ratios.remove(ix); self.sizes.remove(ix);
self.panels.remove(ix); self.panels.remove(ix);
cx.notify() cx.notify()
} }
pub(crate) fn remove_all_children(&mut self, _: &mut Window, cx: &mut Context<Self>) { pub(crate) fn remove_all_children(&mut self, _: &mut Window, cx: &mut Context<Self>) {
self.ratios.clear(); self.sizes.clear();
self.panels.clear(); self.panels.clear();
cx.notify() cx.notify()
} }
@ -196,10 +183,9 @@ impl ResizablePanelGroup {
self.resizing_panel_ix = None; self.resizing_panel_ix = None;
} }
fn sync_real_panel_sizes(&mut self, _: &Window, cx: &mut App) { fn sync_real_panel_sizes(&mut self, _: &Window, cx: &App) {
let total_size = self.total_size();
for (i, panel) in self.panels.iter().enumerate() { for (i, panel) in self.panels.iter().enumerate() {
self.ratios[i] = panel.read(cx).bounds.size.along(self.axis) / total_size; self.sizes[i] = panel.read(cx).bounds.size.along(self.axis)
} }
} }
@ -222,54 +208,53 @@ impl ResizablePanelGroup {
self.sync_real_panel_sizes(window, cx); self.sync_real_panel_sizes(window, cx);
let new_ratio = size / container_size; let mut changed = size - self.sizes[ix];
let mut changed = new_ratio - self.ratios[ix]; let is_expand = changed > px(0.);
let is_expand = changed > 0.;
let main_ix = ix; let main_ix = ix;
let mut new_ratios = self.ratios.clone(); let mut new_sizes = self.sizes.clone();
let min_ratio = PANEL_MIN_SIZE / container_size;
if is_expand { if is_expand {
new_ratios[ix] = new_ratio; new_sizes[ix] = size;
// Now to expand logic is correct. // Now to expand logic is correct.
while changed > 0. && ix < self.panels.len() - 1 { while changed > px(0.) && ix < self.panels.len() - 1 {
ix += 1; ix += 1;
let available_ratio = (new_ratios[ix] - min_ratio).max(0.); let available_size = (new_sizes[ix] - PANEL_MIN_SIZE).max(px(0.));
let to_reduce = changed.min(available_ratio); let to_reduce = changed.min(available_size);
new_ratios[ix] -= to_reduce; new_sizes[ix] -= to_reduce;
changed -= to_reduce; changed -= to_reduce;
} }
} else { } else {
let new_size = new_ratio.max(min_ratio); let new_size = size.max(PANEL_MIN_SIZE);
new_ratios[ix] = new_size; new_sizes[ix] = new_size;
changed = new_ratio - min_ratio; changed = size - PANEL_MIN_SIZE;
new_ratios[ix + 1] += self.ratios[ix] - new_size; new_sizes[ix + 1] += self.sizes[ix] - new_size;
while changed < 0. && ix > 0 { while changed < px(0.) && ix > 0 {
ix -= 1; ix -= 1;
let available_ratio = self.ratios[ix] - min_ratio; let available_size = self.sizes[ix] - PANEL_MIN_SIZE;
let to_increase = (changed).min(available_ratio); let to_increase = (changed).min(available_size);
new_ratios[ix] += to_increase; new_sizes[ix] += to_increase;
changed += to_increase; changed += to_increase;
} }
} }
// If total size exceeds container size, adjust the main panel // If total size exceeds container size, adjust the main panel
let total_ratio: f32 = new_ratios.iter().sum(); let total_size: Pixels = new_sizes.iter().map(|s| s.0).sum::<f32>().into();
if total_ratio > 1. { if total_size > container_size {
let overflow = 1.0 - total_ratio; let overflow = total_size - container_size;
new_ratios[main_ix] = (new_ratios[main_ix] - overflow).max(min_ratio); new_sizes[main_ix] = (new_sizes[main_ix] - overflow).max(PANEL_MIN_SIZE);
} }
self.ratios = new_ratios; let total_size = new_sizes.iter().fold(px(0.0), |acc, &size| acc + size);
self.sizes = new_sizes;
for (i, panel) in self.panels.iter().enumerate() { for (i, panel) in self.panels.iter().enumerate() {
let ratio = self.ratios[i]; let size = self.sizes[i];
if ratio > 0. { if size > px(0.) {
panel.update(cx, |this, _| { panel.update(cx, |this, _| {
this.size = Some(container_size * ratio); this.size = Some(size);
this.ratio = Some(ratio); this.size_ratio = Some(size / total_size);
}); });
} }
} }
@ -315,11 +300,11 @@ impl Render for ResizablePanelGroup {
pub struct ResizablePanel { pub struct ResizablePanel {
group: Option<WeakEntity<ResizablePanelGroup>>, group: Option<WeakEntity<ResizablePanelGroup>>,
/// Initial size is the size that the panel has when it is created. /// Initial size is the size that the panel has when it is created.
initial_radio: Option<f32>, initial_size: Option<Pixels>,
/// size is the size that the panel has when it is resized or adjusted by flex layout. /// size is the size that the panel has when it is resized or adjusted by flex layout.
size: Option<Pixels>, size: Option<Pixels>,
/// the size ratio that the panel has relative to its group /// the size ratio that the panel has relative to its group
ratio: Option<f32>, size_ratio: Option<f32>,
axis: Axis, axis: Axis,
content_builder: Option<Rc<dyn Fn(&mut Window, &mut App) -> AnyElement>>, content_builder: Option<Rc<dyn Fn(&mut Window, &mut App) -> AnyElement>>,
content_view: Option<AnyView>, content_view: Option<AnyView>,
@ -333,9 +318,9 @@ impl ResizablePanel {
pub(super) fn new() -> Self { pub(super) fn new() -> Self {
Self { Self {
group: None, group: None,
initial_radio: None, initial_size: None,
size: None, size: None,
ratio: None, size_ratio: None,
axis: Axis::Horizontal, axis: Axis::Horizontal,
content_builder: None, content_builder: None,
content_view: None, content_view: None,
@ -366,36 +351,28 @@ impl ResizablePanel {
self self
} }
// /// Set the initial size of the panel. /// Set the initial size of the panel.
// pub fn size(mut self, size: Pixels) -> Self { pub fn size(mut self, size: Pixels) -> Self {
// self.initial_size = Some(size); self.initial_size = Some(size);
// self
// }
/// Set the flex ratio of the panel, the ratio is relative to the total size of the group.
///
/// The `ratio` is 0.0 to 1.0.
pub fn ratio(mut self, ratio: f32) -> Self {
self.initial_radio = Some(ratio);
self.ratio = Some(ratio);
self self
} }
/// Save the real panel size, and update group sizes /// Save the real panel size, and update group sizes
fn update_size(&mut self, bounds: Bounds<Pixels>, window: &mut Window, cx: &mut Context<Self>) { fn update_size(&mut self, bounds: Bounds<Pixels>, _: &mut Window, cx: &mut Context<Self>) {
let new_size = bounds.size.along(self.axis); let new_size = bounds.size.along(self.axis);
self.bounds = bounds; self.bounds = bounds;
self.ratio = None; self.size_ratio = None;
self.size = Some(new_size); self.size = Some(new_size);
cx.notify();
if let Some(group) = self.group.clone() { let entity_id = cx.entity().entity_id();
window.defer(cx, move |window, cx| { if let Some(group) = self.group.as_ref() {
_ = group.update(cx, |view, cx| { _ = group.update(cx, |view, _| {
view.sync_real_panel_sizes(window, cx); if let Some(ix) = view.panels.iter().position(|v| v.entity_id() == entity_id) {
}); view.sizes[ix] = new_size;
}
}); });
} }
cx.notify();
} }
} }
@ -405,7 +382,7 @@ impl Render for ResizablePanel {
fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement { fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
if !(self.content_visible)(window, cx) { if !(self.content_visible)(window, cx) {
// To keep size as initial size, to make sure the size will not be changed. // To keep size as initial size, to make sure the size will not be changed.
self.initial_radio = self.ratio; self.initial_size = self.size;
self.size = None; self.size = None;
return div(); return div();
} }
@ -422,23 +399,23 @@ impl Render for ResizablePanel {
.flex_grow() .flex_grow()
.size_full() .size_full()
.relative() .relative()
.when(self.initial_radio.is_none(), |this| this.flex_shrink()) .when(self.initial_size.is_none(), |this| this.flex_shrink())
.when(self.axis.is_vertical(), |this| this.min_h(PANEL_MIN_SIZE)) .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(self.axis.is_horizontal(), |this| this.min_w(PANEL_MIN_SIZE))
.when_some(self.initial_radio, |this, radio| { .when_some(self.initial_size, |this, size| {
if radio == 0. { if size.is_zero() {
this this
} else { } else {
// The `self.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. // To let it keep the initial size.
this.when(self.size.is_none() && radio > 0., |this| { this.when(self.size.is_none() && size > px(0.), |this| {
this.flex_shrink_0() this.flex_shrink_0()
}) })
.flex_basis(relative(radio)) .flex_basis(size)
} }
}) })
.map(|this| match (self.ratio, self.size, total_size) { .map(|this| match (self.size_ratio, self.size, total_size) {
(Some(ratio), _, _) => this.flex_basis(relative(ratio)), (Some(size_ratio), _, _) => this.flex_basis(relative(size_ratio)),
(None, Some(size), Some(total_size)) => { (None, Some(size), Some(total_size)) => {
this.flex_basis(relative(size / total_size)) this.flex_basis(relative(size / total_size))
} }