remove display attribute, remove 'both' direction, fix tests, fix doc…

…s, fix examples, fix components

book/src/guides/layout.md

@@ -12,7 +12,7 @@ Learn how the layout attributes work.
 - [`direction`](#direction)
 - [`padding`](#padding)
 - [`margin`](#margin)
-- [`display`](#display)
+- [`main_alignment & cross_alignment`](#main_alignment_&_cross_alignment)
 
 > ⚠️ Freya's layout is still somewhat limited.
 
@@ -168,18 +168,27 @@ fn app(cx: Scope) -> Element {
 
 ```
 
-### display
+### main_alignment & cross_alignment
 
-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 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_alignment` will be the Y axis and `cross_alignment` will be the X axis. But when using the `horizontal` direction, the
+`main_alignment` will be the X axis and the `cross_alignment` 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_alignment: "center",
+            cross_alignment: "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/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

@@ -156,13 +156,11 @@ pub fn Input<'a>(cx: Scope<'a, InputProps<'a>>) -> Element {
                 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)",

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_alignment: "center",
+                    cross_alignment: "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_alignment: "center",
+                    cross_alignment: "center",
                     label {
                         align: "center",
                         "Error"

crates/components/src/progress_bar.rs

@@ -72,7 +72,8 @@ pub fn ProgressBar(cx: Scope<ProgressBarProps>) -> Element {
                     width: "{progress}%",
                     height: "100%",
                     background: "{progress_background}",
-                    display: "center",
+                    main_alignment: "center",
+                    cross_alignment: "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_alignment: "center",
+            cross_alignment: "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/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_alignment: "center",
+                cross_alignment: "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/devtools/src/tabs/layout.rs

@@ -42,17 +42,17 @@ pub fn NodeInspectorLayout(cx: Scope, node_id: NodeId) -> Element {
                         rect {
                             width: "100%",
                             height: "calc(100% - 25)",
-                            display: "center",
-                            direction: "both",
+                            main_alignment: "center",
+                            cross_alignment: "center",
                             background: "rgb(40, 40, 40)",
                             rect {
                                 width: "100%",
                                 height: "100%",
                                 background: "rgb(71, 180, 240)",
                                 corner_radius: "5",
                                 rect {
-                                    direction: "both",
-                                    display: "center",
+                                    main_alignment: "center",
+                                    cross_alignment: "center",
                                     width: "100%",
                                     height: "25",
                                     label {
@@ -66,8 +66,8 @@ pub fn NodeInspectorLayout(cx: Scope, node_id: NodeId) -> Element {
                                     height: "calc(100% - 50)",
                                     direction: "horizontal",
                                     rect {
-                                        direction: "vertical",
-                                        display: "center",
+                                        main_alignment: "center",
+                                        cross_alignment: "center",
                                         width: "25",
                                         height: "100%",
                                         label {
@@ -79,17 +79,17 @@ pub fn NodeInspectorLayout(cx: Scope, node_id: NodeId) -> Element {
                                     rect {
                                         width: "calc(100% - 50)",
                                         height: "100%",
-                                        display: "center",
-                                        direction: "both",
+                                        main_alignment: "center",
+                                        cross_alignment: "center",
                                         background: "rgb(40, 40, 40)",
                                         corner_radius: "5",
                                         label {
                                             "{inner_area}"
                                         }
                                     }
                                     rect {
-                                        direction: "vertical",
-                                        display: "center",
+                                        main_alignment: "center",
+                                        cross_alignment: "center",
                                         width: "25",
                                         height: "100%",
                                         label {
@@ -100,8 +100,8 @@ pub fn NodeInspectorLayout(cx: Scope, node_id: NodeId) -> Element {
                                     }
                                 }
                                 rect {
-                                    direction: "both",
-                                    display: "center",
+                                    main_alignment: "center",
+                                    cross_alignment: "center",
                                     width: "100%",
                                     height: "25",
                                     label {

crates/devtools/src/tabs/style.rs

@@ -114,12 +114,12 @@ pub fn NodeInspectorStyle(cx: Scope, node_id: NodeId) -> Element {
                                     }
                                 }
                             }
-                            AttributeType::Display(display) => {
+                            AttributeType::Alignment(alignment) => {
                                 rsx!{
                                     Property {
                                         key: "{i}",
                                         name: "{name}",
-                                        value: display.pretty()
+                                        value: alignment.pretty()
                                     }
                                 }
                             }

crates/dom/src/dom_adapter.rs

@@ -49,7 +49,6 @@ impl DOMAdapter<NodeId> for DioxusDOMAdapter<'_> {
             direction: size.direction,
             padding: size.padding,
             margin: size.margin,
-            display: size.display,
             main_alignment: size.main_alignment,
             cross_alignment: size.cross_alignment,
             offset_x: Length::new(size.offset_x),

crates/elements/src/elements.rs

@@ -177,7 +177,6 @@ builder_constructors! {
         font_style: String,
         font_weight: String,
         font_width: String,
-        display: String,
         main_alignment: String,
         cross_alignment: String,
         reference: Reference,

crates/state/src/layout.rs

@@ -28,7 +28,6 @@ pub struct LayoutState {
     pub node_id: NodeId,
     pub offset_y: f32,
     pub offset_x: f32,
-    pub display: DisplayMode,
     pub main_alignment: Alignment,
     pub cross_alignment: Alignment,
     pub node_ref: Option<UnboundedSender<NodeReferenceLayout>>,
@@ -54,7 +53,6 @@ impl State<CustomAttributeValues> for LayoutState {
             "direction",
             "offset_y",
             "offset_x",
-            "display",
             "main_alignment",
             "cross_alignment",
             "reference",
@@ -160,7 +158,6 @@ impl State<CustomAttributeValues> for LayoutState {
                         if let Some(value) = attr.value.as_text() {
                             layout.direction = match value {
                                 "horizontal" => DirectionMode::Horizontal,
-                                "both" => DirectionMode::Both,
                                 _ => DirectionMode::Vertical,
                             }
                         }
@@ -179,13 +176,6 @@ impl State<CustomAttributeValues> for LayoutState {
                             }
                         }
                     }
-                    "display" => {
-                        if let Some(value) = attr.value.as_text() {
-                            if let Ok(display) = DisplayMode::parse(value) {
-                                layout.display = display;
-                            }
-                        }
-                    }
                     "main_alignment" => {
                         if let Some(value) = attr.value.as_text() {
                             if let Ok(alignment) = Alignment::parse(value) {
@@ -226,7 +216,8 @@ impl State<CustomAttributeValues> for LayoutState {
             || (layout.direction != self.direction)
             || (layout.offset_x != self.offset_x)
             || (layout.offset_y != self.offset_y)
-            || (layout.display != self.display);
+            || (layout.main_alignment != self.main_alignment)
+            || (layout.cross_alignment != self.cross_alignment);
 
         if changed {
             torin_layout.lock().unwrap().invalidate(node_view.node_id());