feat: Enhanced layout alignments (#330)

* feat: WIP Enhanced alignments

* improvements

* tweak

* remove display attribute, remove 'both' direction, fix tests, fix docs, fix examples, fix components

* feat: Updated examples

* tests

* fixed tests

* update table component and example

* clean up

* clean up

* improvements

* improvements

* fixes

* fix tests

* tweak

* tweaks

* unsized alignment test

* document code

* tweak

* rename attributes

* fixes and cleanup

* fixes and improvements

* typo

* feat: Easily change the cursor with use_platform (#352)

* fix: mouseenter wasn't being emitted when mouseover was emitted at the same time (#351)

* Revert "feat: Easily change the cursor with use_platform (#352)" (#357)

This reverts commit f801af8.

* Revert "fix: mouseenter wasn't being emitted when mouseover was emitted at the same time (#351)" (#358)

This reverts commit b5fb10f.

* clean up examples

book/src/guides/layout.md

@@ -2,17 +2,17 @@
 
 Learn how the layout attributes work.
 
-- [`width & height`](#width_&_height)
-- [`min_width & min_height`](#min_width_&_min_height)
-- [`max_width & max_height`](#max_width_&_max_height)
+- [`width & height`](#width--height)
+- [`min_width & min_height`](#min_width--min_height)
+- [`max_width & max_height`](#max_width--max_height)
 - [`Size units`](#size_units)
   - [`Logical pixels`](#logical-pixels)
   - [`Percentages`](#percentages)
   - [`calc()`](#calc)
 - [`direction`](#direction)
 - [`padding`](#padding)
 - [`margin`](#margin)
-- [`display`](#display)
+- [`main_align & cross_align`](#main_align--cross_align)
 
 > ⚠️ Freya's layout is still somewhat limited.
 
@@ -125,7 +125,7 @@ fn app(cx: Scope) -> Element {
 
 ### direction
 
-Control how the inner elements will be stacked, possible values are `horizontal`, `vertical` (default) or `both` (default for text elements, e.g label, paragraph, text, etc).
+Control how the inner elements will be stacked, possible values are `vertical` (default) and `horizontal`.
 
 ##### Usage
 
@@ -168,18 +168,28 @@ fn app(cx: Scope) -> Element {
 
 ```
 
-### display
+### main_align & cross_align
 
-Control how the inner elements are displayed, possible values are `normal` (default) or `center`.
+Control how the inner elements are positioned inside the element. You can combine it with the `direction` attribute to create complex flows.
+
+Possible values for both attributes are:
+- `start` (default): At the begining of the axis
+- `center`: At the center of the axis
+- `end`: At the end of the axis
+
+When using the `vertical` direction, `main_align` will be the Y axis and `cross_align` will be the X axis. But when using the `horizontal` direction, the
+`main_align` will be the X axis and the `cross_align` will be the Y axis.
+
+Example on how to center the inner elements in both axis:
 
 ```rust, no_run
 fn app(cx: Scope) -> Element {
     render!(
         rect {
             width: "100%",
             height: "100%",
-            direction: "both",
-            display: "center",
+            main_align: "center",
+            cross_align: "center",
             rect {
                 width: "50%",
                 height: "50%",

book/src/guides/testing.md

@@ -84,7 +84,6 @@ async fn event_test() {
                 width: "100%",
                 height: "100%",
                 background: "red",
-                direction: "both",
                 onclick: |_| {
                     enabled.set(true);
                 },

crates/components/src/button.rs

@@ -6,6 +6,21 @@ use freya_hooks::{use_focus, use_get_theme};
 /// [`Button`] component properties.
 #[derive(Props)]
 pub struct ButtonProps<'a> {
+    /// Padding for the Button.
+    #[props(default = "10 14".to_string(), into)]
+    pub padding: String,
+    /// Margin for the Button.
+    #[props(default = "4".to_string(), into)]
+    pub margin: String,
+    /// Corner radius for the Button.
+    #[props(default = "10".to_string(), into)]
+    pub corner_radius: String,
+    /// Width size for the Button.
+    #[props(default = "auto".to_string(), into)]
+    pub width: String,
+    /// Inner children for the Button.
+    #[props(default = "auto".to_string(), into)]
+    pub height: String,
     /// Inner children for the Button.
     pub children: Element<'a>,
     /// Handler for the `onclick` event.
@@ -75,25 +90,37 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
         ButtonStatus::Idle => theme.button.background,
     };
     let color = theme.button.font_theme.color;
+    let border_fill = theme.button.border_fill;
+    let ButtonProps {
+        width,
+        height,
+        corner_radius,
+        padding,
+        margin,
+        ..
+    } = &cx.props;
 
     render!(
         rect {
-            overflow: "clip",
-            margin: "2",
             onclick: onclick,
             onmouseenter: onmouseenter,
             onmouseleave: onmouseleave,
             focus_id: focus_id,
+            width: "{width}",
+            height: "{height}",
+            padding: "{padding}",
+            margin: "{margin}",
             focusable: "true",
+            overflow: "clip",
             role: "button",
-            width: "auto",
-            height: "auto",
-            direction: "both",
             color: "{color}",
-            shadow: "0 2 10 1 rgb(0, 0, 0, 45)",
-            corner_radius: "5",
-            padding: "8",
+            shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
+            border: "1 solid {border_fill}",
+            corner_radius: "{corner_radius}",
             background: "{background}",
+            align: "center",
+            main_align: "center",
+            cross_align: "center",
             &cx.props.children
         }
     )

crates/components/src/external_link.rs

@@ -74,7 +74,6 @@ pub fn ExternalLink<'a>(cx: Scope<'a, ExternalLinkProps<'a>>) -> Element {
 
     render!(
         rect {
-            direction: "both",
             onmouseover: onmouseover,
             onmouseleave: onmouseleave,
             onclick: onclick,

crates/components/src/input.rs

@@ -38,7 +38,7 @@ pub struct InputProps<'a> {
     #[props(default = "150".to_string(), into)]
     width: String,
     /// Height of the Input. Default 100.
-    #[props(default = "35".to_string(), into)]
+    #[props(default = "38".to_string(), into)]
     height: String,
     /// Max lines for the Input. Default 1.
     #[props(default = "1".to_string(), into)]
@@ -151,36 +151,30 @@ pub fn Input<'a>(cx: Scope<'a, InputProps<'a>>) -> Element {
             rect {
                 onkeydown: onkeydown,
                 onclick: onclick,
-                width: "auto",
-                height: "auto",
-                direction: "both",
-                padding: "1.5",
-                rect {
-                    width: "{width}",
-                    height: "{height}",
-                    direction: "vertical",
-                    display: "center",
-                    color: "{color}",
-                    background: "{background}",
-                    shadow: "0 3 15 0 rgb(0, 0, 0, 70)",
-                    corner_radius: "5",
-                    padding: "8",
-                    cursor_reference: cursor_attr,
-                    ScrollView {
-                        scroll_with_arrows: false,
-                        paragraph {
-                            width: "100%",
-                            cursor_id: "0",
-                            cursor_index: "{cursor_char}",
-                            cursor_mode: "editable",
-                            cursor_color: "{color}",
-                            max_lines: "{max_lines}",
-                            onmouseover: onmouseover,
-                            onmousedown: onmousedown,
-                            highlights: highlights_attr,
-                            text {
-                                "{text}"
-                            }
+                width: "{width}",
+                height: "{height}",
+                direction: "vertical",
+                color: "{color}",
+                background: "{background}",
+                shadow: "0 3 15 0 rgb(0, 0, 0, 70)",
+                corner_radius: "5",
+                padding: "8",
+                margin: "4",
+                cursor_reference: cursor_attr,
+                ScrollView {
+                    scroll_with_arrows: false,
+                    paragraph {
+                        width: "100%",
+                        cursor_id: "0",
+                        cursor_index: "{cursor_char}",
+                        cursor_mode: "editable",
+                        cursor_color: "{color}",
+                        max_lines: "{max_lines}",
+                        onmouseover: onmouseover,
+                        onmousedown: onmousedown,
+                        highlights: highlights_attr,
+                        text {
+                            "{text}"
                         }
                     }
                 }

crates/components/src/network_image.rs

@@ -99,8 +99,8 @@ pub fn NetworkImage<'a>(cx: Scope<'a, NetworkImageProps<'a>>) -> Element<'a> {
                 rect {
                     height: "{height}",
                     width: "{width}",
-                    display: "center",
-                    direction: "both",
+                    main_align: "center",
+                    cross_align: "center",
                     Loader {
 
                     }
@@ -115,7 +115,8 @@ pub fn NetworkImage<'a>(cx: Scope<'a, NetworkImageProps<'a>>) -> Element<'a> {
                 rect {
                     height: "{height}",
                     width: "{width}",
-                    display: "center",
+                    main_align: "center",
+                    cross_align: "center",
                     label {
                         align: "center",
                         "Error"

crates/components/src/progress_bar.rs

@@ -73,7 +73,8 @@ pub fn ProgressBar(cx: Scope<ProgressBarProps>) -> Element {
                     width: "{progress}%",
                     height: "100%",
                     background: "{progress_background}",
-                    display: "center",
+                    main_align: "center",
+                    cross_align: "center",
                     overflow: "clip",
                     if show_progress {
                         rsx!(

crates/components/src/slider.rs

@@ -122,8 +122,8 @@ pub fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
             onglobalmouseover: onmouseover,
             onmouseleave: onmouseleave,
             onwheel: onwheel,
-            display: "center",
-            direction: "both",
+            main_align: "center",
+            cross_align: "center",
             padding: "1",
             rect {
                 background: "{theme.background}",

crates/components/src/switch.rs

@@ -108,7 +108,6 @@ pub fn Switch<'a>(cx: Scope<'a, SwitchProps<'a>>) -> Element<'a> {
                 corner_radius: "50",
                 rect {
                     background: "{circle}",
-                    direction: "both",
                     width: "18",
                     height: "18",
                     corner_radius: "50",

crates/components/src/table.rs

@@ -154,7 +154,8 @@ pub fn TableCell<'a>(cx: Scope<'a, TableCellProps<'a>>) -> Element {
             overflow: "clip",
             padding: "5 25",
             width: "{width}%",
-            display: "center",
+            main_align: "center",
+            cross_align: "center",
             height: "35",
             align: "right",
             onclick: |e| {

crates/components/src/tooltip.rs

@@ -27,15 +27,14 @@ pub fn Tooltip<'a>(cx: Scope<'a, TooltipProps<'a>>) -> Element {
             height: "30",
             padding: "2",
             width: "170",
-            direction: "both",
             rect {
-                direction: "both",
                 width: "100%",
                 height: "100%",
                 shadow: "0 0 10 5 rgb(0, 0, 0, 50)",
                 corner_radius: "8",
                 background: "{background}",
-                display: "center",
+                main_align: "center",
+                cross_align: "center",
                 label {
                     max_lines: "1",
                     color: "{color}",

crates/core/src/node.rs

@@ -5,7 +5,7 @@ use freya_node_state::{
     Border, CornerRadius, CursorSettings, Fill, FontStyleState, LayoutState, References, Shadow,
     Style, Transform,
 };
-use torin::{direction::DirectionMode, display::DisplayMode, gaps::Gaps, size::Size};
+use torin::{alignment::Alignment, direction::DirectionMode, gaps::Gaps, size::Size};
 
 #[derive(Clone)]
 pub struct NodeState {
@@ -77,50 +77,57 @@ impl<'a> Iterator for NodeStateIterator<'a> {
                 AttributeType::Direction(&self.state.size.direction),
             )),
             7 => Some(("padding", AttributeType::Measures(self.state.size.padding))),
-            8 => Some(("display", AttributeType::Display(&self.state.size.display))),
-            9 => {
+            8 => Some((
+                "main_alignment",
+                AttributeType::Alignment(&self.state.size.main_alignment),
+            )),
+            9 => Some((
+                "cross_alignment",
+                AttributeType::Alignment(&self.state.size.cross_alignment),
+            )),
+            10 => {
                 let background = &self.state.style.background;
                 let fill = match *background {
                     Fill::Color(_) => AttributeType::Color(background.clone()),
                     Fill::LinearGradient(_) => AttributeType::LinearGradient(background.clone()),
                 };
                 Some(("background", fill))
             }
-            10 => Some(("border", AttributeType::Border(&self.state.style.border))),
-            11 => Some((
+            11 => Some(("border", AttributeType::Border(&self.state.style.border))),
+            12 => Some((
                 "corner_radius",
                 AttributeType::CornerRadius(self.state.style.corner_radius),
             )),
-            12 => Some((
+            13 => Some((
                 "color",
                 AttributeType::Color(self.state.font_style.color.into()),
             )),
-            13 => Some((
+            14 => Some((
                 "font_family",
                 AttributeType::Text(self.state.font_style.font_family.join(",")),
             )),
-            14 => Some((
+            15 => Some((
                 "font_size",
                 AttributeType::Measure(self.state.font_style.font_size),
             )),
-            15 => Some((
+            16 => Some((
                 "line_height",
                 AttributeType::Measure(self.state.font_style.line_height),
             )),
-            16 => Some(("offset_x", AttributeType::Measure(self.state.size.offset_x))),
-            17 => Some(("offset_y", AttributeType::Measure(self.state.size.offset_y))),
+            17 => Some(("offset_x", AttributeType::Measure(self.state.size.offset_x))),
+            18 => Some(("offset_y", AttributeType::Measure(self.state.size.offset_y))),
             n => {
                 let shadows = &self.state.style.shadows;
                 let shadow = shadows
-                    .get(n - 18)
+                    .get(n - 19)
                     .map(|shadow| ("shadow", AttributeType::Shadow(shadow)));
 
                 if shadow.is_some() {
                     shadow
                 } else {
                     let text_shadows = &self.state.font_style.text_shadows;
                     text_shadows
-                        .get(n - 18 + shadows.len())
+                        .get(n - 19 + shadows.len())
                         .map(|text_shadow| ("text_shadow", AttributeType::TextShadow(text_shadow)))
                 }
             }
@@ -143,7 +150,7 @@ pub enum AttributeType<'a> {
     Measures(Gaps),
     CornerRadius(CornerRadius),
     Direction(&'a DirectionMode),
-    Display(&'a DisplayMode),
+    Alignment(&'a Alignment),
     Shadow(&'a Shadow),
     TextShadow(&'a TextShadow),
     Text(String),

crates/core/src/render.rs

@@ -52,7 +52,7 @@ pub fn process_render<HookOptions>(
                 render_hook(
                     dom,
                     node_id,
-                    &areas.box_area(),
+                    &areas.visible_area(),
                     font_collection,
                     viewports_collection,
                     hook_options,