feat: visible_width & visible_height

crates/components/src/accordion.rs

@@ -103,7 +103,7 @@ pub fn Accordion(props: AccordionProps) -> Element {
             rect {
                 overflow: "clip",
                 width: "100%",
-                height: "{animation_value}a",
+                visible_height: "{animation_value}%",
                 {&props.children}
             }
         }

crates/core/src/dom/dom_adapter.rs

@@ -51,6 +51,8 @@ impl DOMAdapter<NodeId> for DioxusDOMAdapter<'_> {
             minimum_height: layout.minimum_height,
             maximum_width: layout.maximum_width,
             maximum_height: layout.maximum_height,
+            visible_width: layout.visible_width,
+            visible_height: layout.visible_height,
             direction: layout.direction,
             padding: layout.padding,
             margin: layout.margin,

crates/core/src/node.rs

@@ -21,6 +21,7 @@ use torin::{
     prelude::{
         Content,
         Position,
+        VisibleSize,
     },
     size::Size,
 };
@@ -95,6 +96,14 @@ impl NodeState {
             ("min_height", AttributeType::Size(&self.size.minimum_height)),
             ("max_width", AttributeType::Size(&self.size.maximum_width)),
             ("max_height", AttributeType::Size(&self.size.maximum_height)),
+            (
+                "visible_width",
+                AttributeType::VisibleSize(&self.size.visible_width),
+            ),
+            (
+                "visible_height",
+                AttributeType::VisibleSize(&self.size.visible_height),
+            ),
             ("direction", AttributeType::Direction(&self.size.direction)),
             ("padding", AttributeType::Measures(self.size.padding)),
             ("margin", AttributeType::Measures(self.size.margin)),
@@ -180,6 +189,7 @@ pub enum AttributeType<'a> {
     OptionalColor(Option<Fill>),
     Gradient(Fill),
     Size(&'a Size),
+    VisibleSize(&'a VisibleSize),
     Measure(f32),
     OptionalMeasure(Option<f32>),
     Measures(Gaps),

crates/devtools/src/tabs/style.rs

@@ -85,6 +85,15 @@ pub fn NodeInspectorStyle(node_id: String) -> Element {
                             }
                         }
                     }
+                    AttributeType::VisibleSize(visible_size) => {
+                        rsx!{
+                            Property {
+                                key: "{i}",
+                                name: "{name}",
+                                value: visible_size.pretty()
+                            }
+                        }
+                    }
                     AttributeType::Color(fill) => {
                         rsx!{
                             ColorProperty {

crates/elements/src/attributes/layout_attributes.rs

@@ -129,6 +129,44 @@ def_attribute!(
     /// ```
     max_height,
 
+    /// Specify the percentage of width to be visible.
+    ///
+    /// ##### Usage
+    ///
+    /// ```rust, no_run
+    /// # use freya::prelude::*;
+    /// fn app() -> Element {
+    ///     rsx!(
+    ///         rect {
+    ///             background: "red",
+    ///             visible_width: "50%", // 250
+    ///             width: "500",
+    ///             height: "500",
+    ///         }
+    ///     )
+    /// }
+    /// ```
+    visible_width,
+
+    /// Specify the percentage of height to be visible.
+    ///
+    /// ##### Usage
+    ///
+    /// ```rust, no_run
+    /// # use freya::prelude::*;
+    /// fn app() -> Element {
+    ///     rsx!(
+    ///         rect {
+    ///             background: "red",
+    ///             visible_height: "50%", // 250
+    ///             width: "500",
+    ///             height: "500",
+    ///         }
+    ///     )
+    /// }
+    /// ```
+    visible_height,
+
     /// Specify the margin of an element.
     /// You can do so by four different ways, just like in CSS.
     ///

crates/elements/src/elements.rs

@@ -27,6 +27,8 @@ def_element!(
         min_width,
         max_height,
         max_width,
+        visible_width,
+        visible_height,
         margin,
         padding,
         position,

crates/native-core/src/attributes.rs

@@ -8,6 +8,8 @@ pub enum AttributeName {
     MinHeight,
     MaxWidth,
     MaxHeight,
+    VisibleWidth,
+    VisibleHeight,
     Padding,
     Background,
     Border,
@@ -234,6 +236,8 @@ impl FromStr for AttributeName {
             "min_height" => Ok(AttributeName::MinHeight),
             "max_width" => Ok(AttributeName::MaxWidth),
             "max_height" => Ok(AttributeName::MaxHeight),
+            "visible_width" => Ok(AttributeName::VisibleWidth),
+            "visible_height" => Ok(AttributeName::VisibleHeight),
             "padding" => Ok(AttributeName::Padding),
             "background" => Ok(AttributeName::Background),
             "border" => Ok(AttributeName::Border),

crates/state/src/layout.rs

@@ -38,6 +38,8 @@ pub struct LayoutState {
     pub minimum_height: Size,
     pub maximum_height: Size,
     pub maximum_width: Size,
+    pub visible_width: VisibleSize,
+    pub visible_height: VisibleSize,
     pub padding: Gaps,
     pub margin: Gaps,
     pub direction: DirectionMode,
@@ -88,6 +90,16 @@ impl ParseAttribute for LayoutState {
                     self.maximum_width = Size::parse(value)?;
                 }
             }
+            AttributeName::VisibleWidth => {
+                if let Some(value) = attr.value.as_text() {
+                    self.visible_width = VisibleSize::parse(value)?;
+                }
+            }
+            AttributeName::VisibleHeight => {
+                if let Some(value) = attr.value.as_text() {
+                    self.visible_height = VisibleSize::parse(value)?;
+                }
+            }
             AttributeName::Padding => {
                 if let Some(value) = attr.value.as_text() {
                     self.padding = Gaps::parse(value)?;
@@ -196,6 +208,8 @@ impl State<CustomAttributeValues> for LayoutState {
             AttributeName::MinHeight,
             AttributeName::MaxWidth,
             AttributeName::MaxHeight,
+            AttributeName::VisibleWidth,
+            AttributeName::VisibleHeight,
             AttributeName::Padding,
             AttributeName::Direction,
             AttributeName::OffsetX,

crates/state/src/values/mod.rs

@@ -19,6 +19,7 @@ mod shadow;
 mod size;
 mod text_height;
 mod text_shadow;
+mod visible_size;
 
 pub use aspect_ratio::*;
 pub use border::*;

crates/state/src/values/size.rs

@@ -58,13 +58,6 @@ impl Parse for Size {
                     .parse::<f32>()
                     .map_err(|_| ParseError)?,
             )))
-        } else if value.contains('a') {
-            Ok(Size::InnerPercentage(Length::new(
-                value
-                    .replace('a', "")
-                    .parse::<f32>()
-                    .map_err(|_| ParseError)?,
-            )))
         } else {
             Ok(Size::Pixels(Length::new(
                 value.parse::<f32>().map_err(|_| ParseError)?,

crates/state/src/values/visible_size.rs

@@ -0,0 +1,24 @@
+use torin::prelude::{
+    Length,
+    VisibleSize,
+};
+
+use crate::{
+    Parse,
+    ParseError,
+};
+
+impl Parse for VisibleSize {
+    fn parse(value: &str) -> Result<Self, ParseError> {
+        if value.contains('%') {
+            Ok(VisibleSize::InnerPercentage(Length::new(
+                value
+                    .replace('%', "")
+                    .parse::<f32>()
+                    .map_err(|_| ParseError)?,
+            )))
+        } else {
+            Err(ParseError)
+        }
+    }
+}

crates/torin/src/geometry.rs

@@ -5,7 +5,7 @@ use crate::{
     prelude::{
         DirectionMode,
         Gaps,
-        Size,
+        VisibleSize,
     },
 };
 
@@ -54,10 +54,10 @@ impl AreaModel for Area {
     }
 
     fn adjust_size(&mut self, node: &Node) {
-        if let Size::InnerPercentage(p) = node.width {
+        if let VisibleSize::InnerPercentage(p) = node.visible_width {
             self.size.width *= p.get() / 100.;
         }
-        if let Size::InnerPercentage(p) = node.height {
+        if let VisibleSize::InnerPercentage(p) = node.visible_height {
             self.size.height *= p.get() / 100.;
         }
     }

crates/torin/src/node.rs

@@ -8,6 +8,7 @@ use crate::{
     prelude::{
         Content,
         Position,
+        VisibleSize,
     },
     scaled::Scaled,
     size::Size,
@@ -28,6 +29,10 @@ pub struct Node {
     pub maximum_width: Size,
     pub maximum_height: Size,
 
+    // Visible dimensions
+    pub visible_width: VisibleSize,
+    pub visible_height: VisibleSize,
+
     // Axis alignments for the children
     pub main_alignment: Alignment,
     pub cross_alignment: Alignment,
@@ -91,6 +96,22 @@ impl Node {
         }
     }
 
+    /// Construct a new Node given a size and a visible size
+    pub fn from_size_and_visible_size(
+        width: Size,
+        height: Size,
+        visible_width: VisibleSize,
+        visible_height: VisibleSize,
+    ) -> Self {
+        Self {
+            width,
+            height,
+            visible_width,
+            visible_height,
+            ..Default::default()
+        }
+    }
+
     /// Construct a new Node given a size and a scroll
     pub fn from_size_and_scroll(
         width: Size,

crates/torin/src/values/mod.rs

@@ -4,6 +4,7 @@ pub mod direction;
 pub mod gaps;
 pub mod position;
 pub mod size;
+pub mod visible_size;
 
 pub mod prelude {
     pub use crate::{
@@ -13,5 +14,6 @@ pub mod prelude {
         gaps::*,
         position::*,
         size::*,
+        visible_size::*,
     };
 }

crates/torin/src/values/size.rs

@@ -19,7 +19,6 @@ pub enum Size {
     Percentage(Length),
     Pixels(Length),
     RootPercentage(Length),
-    InnerPercentage(Length),
     DynamicCalculations(Box<Vec<DynamicCalculation>>),
     Flex(Length),
 }
@@ -43,14 +42,7 @@ impl Size {
     }
 
     pub fn inner_sized(&self) -> bool {
-        matches!(
-            self,
-            Self::Inner | Self::FillMinimum | Self::InnerPercentage(_)
-        )
-    }
-
-    pub fn inner_percentage_sized(&self) -> bool {
-        matches!(self, Self::InnerPercentage(_))
+        matches!(self, Self::Inner | Self::FillMinimum)
     }
 
     pub fn pretty(&self) -> String {
@@ -69,7 +61,6 @@ impl Size {
             Size::Fill => "fill".to_string(),
             Size::FillMinimum => "fill-min".to_string(),
             Size::RootPercentage(p) => format!("{}% of root", p.get()),
-            Size::InnerPercentage(p) => format!("{}% of auto", p.get()),
             Size::Flex(f) => format!("flex({})", f.get()),
         }
     }
@@ -155,7 +146,7 @@ impl Size {
 
     pub fn most_fitting_size<'a>(&self, size: &'a f32, available_size: &'a f32) -> &'a f32 {
         match self {
-            Self::Inner | Self::InnerPercentage(_) => available_size,
+            Self::Inner => available_size,
             _ => size,
         }
     }

crates/torin/src/values/visible_size.rs

@@ -0,0 +1,22 @@
+use crate::prelude::Length;
+
+#[derive(PartialEq, Clone, Debug)]
+pub enum VisibleSize {
+    Full,
+    InnerPercentage(Length),
+}
+
+impl Default for VisibleSize {
+    fn default() -> Self {
+        Self::Full
+    }
+}
+
+impl VisibleSize {
+    pub fn pretty(&self) -> String {
+        match self {
+            Self::Full => "full".to_string(),
+            Self::InnerPercentage(p) => format!("{}%", p.get()),
+        }
+    }
+}

crates/torin/tests/flex.rs

@@ -349,10 +349,11 @@ pub fn flex_with_inner_percentage() {
         2,
         Some(0),
         vec![3],
-        Node::from_size_and_direction(
+        Node::from_size_and_visible_size(
             Size::Pixels(Length::new(100.0)),
-            Size::InnerPercentage(Length::new(50.0)),
-            DirectionMode::Vertical,
+            Size::Inner,
+            VisibleSize::Full,
+            VisibleSize::InnerPercentage(Length::new(50.0)),
         ),
     );
     mocked_dom.add(

crates/torin/tests/size.rs

@@ -728,10 +728,11 @@ pub fn inner_percentage() {
         0,
         None,
         vec![1, 2],
-        Node::from_size_and_direction(
+        Node::from_size_and_visible_size(
             Size::Inner,
-            Size::InnerPercentage(Length::new(50.0)),
-            DirectionMode::Vertical,
+            Size::Inner,
+            VisibleSize::Full,
+            VisibleSize::InnerPercentage(Length::new(50.0)),
         ),
     );
     mocked_dom.add(