Implemented Grid/Stack baseline

Also fixed indicator baseline calculations.

Author: ecton

Cargo.toml

@@ -11,7 +11,7 @@ license = "MIT OR Apache-2.0"
 keywords = ["gui", "ui", "widgets", "reactive"]
 categories = ["gui"]
 readme = "./README.md"
-rust-version = "1.80.0"
+rust-version = "1.81.0"
 
 [features]
 default = ["tracing-output", "roboto-flex", "native-dialogs", "localization"]

examples/baseline-align.rs

@@ -0,0 +1,32 @@
+use cushy::reactive::value::Dynamic;
+use cushy::widget::MakeWidget;
+use cushy::widgets::checkbox::Checkable;
+use cushy::widgets::grid::{GridSection, GridWidgets};
+use cushy::widgets::Grid;
+use cushy::Run;
+
+fn main() -> cushy::Result {
+    "Label"
+        .and("Button".into_button())
+        .and(
+            Dynamic::<bool>::default()
+                .into_checkbox()
+                .labelled_by("Checkbox"),
+        )
+        .into_columns()
+        .contain()
+        .and(
+            Grid::from_rows(
+                GridWidgets::from(GridSection::from(("Label", "Button".into_button()))).and((
+                    "Label",
+                    Dynamic::<bool>::default()
+                        .into_checkbox()
+                        .labelled_by("Checkbox"),
+                )),
+            )
+            .contain(),
+        )
+        .into_rows()
+        .centered()
+        .run()
+}

src/styles.rs

@@ -2837,8 +2837,9 @@ impl RequireInvalidation for HorizontalAlign {
 /// Alignment along the vertical axis.
 #[derive(Default, Debug, Clone, Copy, Eq, PartialEq)]
 pub enum VerticalAlign {
-    /// Align towards the top.
+    /// Align along the top.
     Top,
+    /// Align along the baseline of the first line of text.
     #[default]
     Baseline,
     /// Align towards the center/middle.

src/widget.rs

@@ -513,12 +513,23 @@ where
 }
 // ANCHOR_END: run
 
+/// The measurement from the top of the content to the bottom of the first line
+/// of text.
+///
+/// In typography, the baseline of text is where the font rendering begins
+/// drawing characters. Portions of characters may extend belown this
+/// measurement. For example, the letters `yjg` all have portions that extend
+/// below the baseline.
 #[derive(Default, Debug, Clone, Copy, Eq, PartialEq)]
 pub struct Baseline(pub Option<UPx>);
 
 impl Baseline {
+    /// No baseline measurement.
     pub const NONE: Self = Self(None);
 
+    /// Apply `map` to the baseline, if present, and return the result.
+    ///
+    /// If this baseline is `None`, `map` will not be invoked.
     #[must_use]
     pub fn map(self, map: impl FnOnce(UPx) -> UPx) -> Self {
         Self(self.0.map(map))
@@ -594,9 +605,13 @@ impl PartialOrd for Baseline {
     }
 }
 
+/// Information about a widget's desired layout.
 #[derive(Clone, Copy, Eq, PartialEq, Debug)]
 pub struct WidgetLayout {
+    /// The size desired for this widget.
     pub size: Size<UPx>,
+    /// The baseline of the first line of text within this widget, if text is
+    /// present.
     pub baseline: Baseline,
 }
 

src/widgets/checkbox.rs

@@ -193,25 +193,29 @@ impl CheckboxColors {
     }
 }
 
+fn indicator_layout(context: &mut GraphicsContext<'_, '_, '_, '_>) -> WidgetLayout {
+    let size = Size::squared(
+        context
+            .get(&CheckboxSize)
+            .into_upx(context.gfx.scale())
+            .ceil(),
+    );
+    let icon_inset = Lp::points(3).into_upx(context.gfx.scale()).ceil();
+    let icon_height = size.height - icon_inset * 2;
+
+    let checkmark_lowest_point = (icon_inset + icon_height * 3 / 4).round();
+
+    WidgetLayout {
+        size,
+        baseline: Baseline::from(checkmark_lowest_point),
+    }
+}
+
 impl IndicatorBehavior for CheckboxIndicator {
     type Colors = CheckboxColors;
 
     fn size(&self, context: &mut GraphicsContext<'_, '_, '_, '_>) -> WidgetLayout {
-        let size = Size::squared(
-            context
-                .get(&CheckboxSize)
-                .into_upx(context.gfx.scale())
-                .ceil(),
-        );
-        let icon_inset = Lp::points(3).into_upx(context.gfx.scale()).ceil();
-        let icon_height = size.height - icon_inset * 2;
-
-        let checkmark_lowest_point = (icon_inset + icon_height * 3 / 4).round();
-
-        WidgetLayout {
-            size,
-            baseline: Baseline::from(checkmark_lowest_point),
-        }
+        indicator_layout(context)
     }
 
     fn desired_colors(
@@ -378,7 +382,7 @@ fn draw_filled_checkbox(
                 .line_to(
                     Point::new(
                         icon_area.origin.x + icon_area.size.width,
-                        icon_area.origin.y,
+                        icon_area.origin.y + icon_area.size.height / 4,
                     )
                     .round(),
                 )
@@ -531,11 +535,7 @@ impl Widget for CheckboxOrnament {
         _available_space: Size<ConstraintLimit>,
         context: &mut LayoutContext<'_, '_, '_, '_>,
     ) -> WidgetLayout {
-        let checkbox_size = context
-            .get(&CheckboxSize)
-            .into_upx(context.gfx.scale())
-            .ceil();
-        Size::squared(checkbox_size).into()
+        indicator_layout(context)
     }
 }