Add h_stack and v_stack variants of stack. Make static_list d…

…efault to `FlexDirection::Column`.

src/inspector.rs

@@ -5,7 +5,7 @@ use crate::id::Id;
 use crate::style::{Style, StyleMapValue};
 use crate::view::View;
 use crate::views::{
-    dyn_container, empty, img_dynamic, scroll, stack, static_list, text, Decorators, Label,
+    dyn_container, empty, img_dynamic, scroll, stack, static_list, text, v_stack, Decorators, Label,
 };
 use crate::window::WindowConfig;
 use crate::{new_window, style};
@@ -253,16 +253,16 @@ fn captured_view_with_children(
     });
 
     let list = static_list(children).style(move |s| {
-        s.flex_col().display(if expanded.get() {
+        s.display(if expanded.get() {
             style::Display::Flex
         } else {
             style::Display::None
         })
     });
 
-    let list = stack((line, list)).style(|s| s.flex_col());
+    let list = v_stack((line, list));
 
-    Box::new(stack((row, list)).style(|s| s.flex_col().min_width_full()))
+    Box::new(v_stack((row, list)).style(|s| s.min_width_full()))
 }
 
 fn captured_view(
@@ -339,7 +339,7 @@ fn stats(capture: &Capture) -> impl View {
     );
     let w = info("Window Width", format!("{}", capture.window_size.width));
     let h = info("Window Height", format!("{}", capture.window_size.height));
-    stack((
+    v_stack((
         style_time,
         layout_time,
         taffy_time,
@@ -349,7 +349,6 @@ fn stats(capture: &Capture) -> impl View {
         w,
         h,
     ))
-    .style(|s| s.flex_col())
 }
 
 fn selected_view(capture: &Rc<Capture>, selected: RwSignal<Option<Id>>) -> impl View {
@@ -528,7 +527,7 @@ fn selected_view(capture: &Rc<Capture>, selected: RwSignal<Option<Id>>) -> impl
                                 text(format!("{transition:?}")),
                             ))
                             .style(|s| s.items_center());
-                            v = Box::new(stack((v, transition)).style(|s| s.flex_col()));
+                            v = Box::new(v_stack((v, transition)));
                         }
                         stack((
                             stack((name.style(|s| {
@@ -546,10 +545,10 @@ fn selected_view(capture: &Rc<Capture>, selected: RwSignal<Option<Id>>) -> impl
                                 .hover(|s| s.background(Color::rgba8(228, 237, 216, 160)))
                         })
                     }))
-                    .style(|s| s.flex_col().width_full());
+                    .style(|s| s.width_full());
 
                 Box::new(
-                    stack((
+                    v_stack((
                         name,
                         count,
                         x,
@@ -564,7 +563,7 @@ fn selected_view(capture: &Rc<Capture>, selected: RwSignal<Option<Id>>) -> impl
                         style_header,
                         style_list,
                     ))
-                    .style(|s| s.flex_col().width_full()),
+                    .style(|s| s.width_full()),
                 )
             } else {
                 Box::new(text("No selection".to_string()).style(|s| s.padding(5.0)))
@@ -666,13 +665,13 @@ fn capture_view(capture: &Rc<Capture>) -> impl View {
     let image = stack((image, selected_overlay, highlighted_overlay));
 
     let left_scroll = scroll(
-        stack((
+        v_stack((
             header("Selected View"),
             selected_view(capture, selected),
             header("Stats"),
             stats(capture),
         ))
-        .style(|s| s.flex_col().width_full()),
+        .style(|s| s.width_full()),
     )
     .style(|s| s.width_full().flex_basis(0).min_height(0).flex_grow(1.0));
 
@@ -682,22 +681,16 @@ fn capture_view(capture: &Rc<Capture>) -> impl View {
             .background(Color::BLACK.with_alpha_factor(0.2))
     });
 
-    let left = stack((
+    let left = v_stack((
         header("Captured Window"),
         scroll(image).style(|s| s.max_height_pct(60.0)),
         seperator,
         left_scroll,
     ))
-    .style(|s| s.flex_col().max_width_pct(60.0));
+    .style(|s| s.max_width_pct(60.0));
 
     let tree = scroll(captured_view(&capture.root, 0, selected, highlighted))
-        .style(|s| {
-            s.flex_col()
-                .width_full()
-                .min_height(0)
-                .flex_basis(0)
-                .flex_grow(1.0)
-        })
+        .style(|s| s.width_full().min_height(0).flex_basis(0).flex_grow(1.0))
         .on_event(EventListener::PointerLeave, move |_| {
             highlighted.set(None);
             false
@@ -708,18 +701,12 @@ fn capture_view(capture: &Rc<Capture>) -> impl View {
         });
 
     let tree: Box<dyn View> = if capture.root.warnings() {
-        Box::new(stack((header("Warnings"), header("View Tree"), tree)))
+        Box::new(v_stack((header("Warnings"), header("View Tree"), tree)))
     } else {
-        Box::new(stack((header("View Tree"), tree)))
+        Box::new(v_stack((header("View Tree"), tree)))
     };
 
-    let tree = tree.style(|s| {
-        s.flex_col()
-            .height_full()
-            .min_width(0)
-            .flex_basis(0)
-            .flex_grow(1.0)
-    });
+    let tree = tree.style(|s| s.height_full().min_width(0).flex_basis(0).flex_grow(1.0));
 
     let seperator = empty().style(move |s| {
         s.height_full()

src/views/stack.rs

@@ -1,27 +1,59 @@
 use kurbo::Rect;
+use taffy::style::FlexDirection;
 
 use crate::{
     context::{EventCx, UpdateCx},
     id::Id,
+    style::Style,
     view::{ChangeFlags, View},
     view_tuple::ViewTuple,
 };
 
 pub struct Stack<VT> {
     id: Id,
     children: VT,
+    direction: Option<FlexDirection>,
 }
 
 pub fn stack<VT: ViewTuple + 'static>(children: VT) -> Stack<VT> {
     let id = Id::next();
-    Stack { id, children }
+    Stack {
+        id,
+        children,
+        direction: None,
+    }
+}
+
+/// A stack which defaults to `FlexDirection::Row`.
+pub fn h_stack<VT: ViewTuple + 'static>(children: VT) -> Stack<VT> {
+    let id = Id::next();
+    Stack {
+        id,
+        children,
+        direction: Some(FlexDirection::Row),
+    }
+}
+
+/// A stack which defaults to `FlexDirection::Column`.
+pub fn v_stack<VT: ViewTuple + 'static>(children: VT) -> Stack<VT> {
+    let id = Id::next();
+    Stack {
+        id,
+        children,
+        direction: Some(FlexDirection::Column),
+    }
 }
 
 impl<VT: ViewTuple + 'static> View for Stack<VT> {
     fn id(&self) -> Id {
         self.id
     }
 
+    fn view_style(&self) -> Option<crate::style::Style> {
+        self.direction
+            .map(|direction| Style::new().flex_direction(direction))
+    }
+
     fn child(&self, id: Id) -> Option<&dyn View> {
         self.children.child(id)
     }
@@ -39,7 +71,11 @@ impl<VT: ViewTuple + 'static> View for Stack<VT> {
     }
 
     fn debug_name(&self) -> std::borrow::Cow<'static, str> {
-        "Stack".into()
+        match self.direction {
+            Some(FlexDirection::Column) => "Vertical Stack".into(),
+            Some(FlexDirection::Row) => "Horizontal Stack".into(),
+            _ => "Stack".into(),
+        }
     }
 
     fn update(&mut self, cx: &mut UpdateCx, state: Box<dyn std::any::Any>) -> ChangeFlags {

src/views/static_list.rs

@@ -1,9 +1,11 @@
 use crate::{
     context::{EventCx, UpdateCx},
     id::Id,
+    style::Style,
     view::{ChangeFlags, View},
 };
 use kurbo::Rect;
+use taffy::style::FlexDirection;
 
 pub struct StaticList<V>
 where
@@ -28,6 +30,10 @@ impl<V: View> View for StaticList<V> {
         self.id
     }
 
+    fn view_style(&self) -> Option<crate::style::Style> {
+        Some(Style::new().flex_direction(FlexDirection::Column))
+    }
+
     fn child(&self, id: Id) -> Option<&dyn View> {
         self.children
             .iter()