Add padding attribute to sized_box view

masonry/src/widget/sized_box.rs

@@ -6,7 +6,7 @@
 use accesskit::{NodeBuilder, Role};
 use smallvec::{smallvec, SmallVec};
 use tracing::{trace_span, warn, Span};
-use vello::kurbo::{Affine, RoundedRectRadii};
+use vello::kurbo::{Affine, Insets, RoundedRectRadii};
 use vello::peniko::{Brush, Color, Fill};
 use vello::Scene;
 
@@ -26,7 +26,6 @@ struct BorderStyle {
 }
 
 // TODO - Have Widget type as generic argument
-// TODO - Add Padding
 
 /// A widget with predefined size.
 ///
@@ -44,6 +43,7 @@ pub struct SizedBox {
     background: Option<Brush>,
     border: Option<BorderStyle>,
     corner_radius: RoundedRectRadii,
+    padding: Insets,
 }
 
 // --- MARK: BUILDERS ---
@@ -57,6 +57,7 @@ impl SizedBox {
             background: None,
             border: None,
             corner_radius: RoundedRectRadii::from_single_radius(0.0),
+            padding: Insets::ZERO,
         }
     }
 
@@ -69,6 +70,7 @@ impl SizedBox {
             background: None,
             border: None,
             corner_radius: RoundedRectRadii::from_single_radius(0.0),
+            padding: Insets::ZERO,
         }
     }
 
@@ -81,6 +83,7 @@ impl SizedBox {
             background: None,
             border: None,
             corner_radius: RoundedRectRadii::from_single_radius(0.0),
+            padding: Insets::ZERO,
         }
     }
 
@@ -97,6 +100,7 @@ impl SizedBox {
             background: None,
             border: None,
             corner_radius: RoundedRectRadii::from_single_radius(0.0),
+            padding: Insets::ZERO,
         }
     }
 
@@ -180,6 +184,11 @@ impl SizedBox {
         self
     }
 
+    pub fn padding(mut self, padding: impl Into<Insets>) -> Self {
+        self.padding = padding.into();
+        self
+    }
+
     // TODO - child()
 }
 
@@ -266,6 +275,18 @@ impl SizedBox {
         this.ctx.request_paint_only();
     }
 
+    /// Clears padding.
+    pub fn clear_padding(this: &mut WidgetMut<'_, Self>) {
+        this.widget.padding = Insets::ZERO;
+        this.ctx.request_paint_only();
+    }
+
+    /// Set the padding around this widget.
+    pub fn set_padding(this: &mut WidgetMut<'_, Self>, padding: impl Into<Insets>) {
+        this.widget.padding = padding.into();
+        this.ctx.request_paint_only();
+    }
+
     // TODO - Doc
     pub fn child_mut<'t>(
         this: &'t mut WidgetMut<'_, Self>,
@@ -333,6 +354,14 @@ impl Widget for SizedBox {
         let child_bc = child_bc.shrink((2.0 * border_width, 2.0 * border_width));
         let origin = Point::new(border_width, border_width);
 
+        // Shrink constraints by padding inset
+        let padding_size = Size::new(
+            self.padding.x0 + self.padding.x1,
+            self.padding.y0 + self.padding.y1,
+        );
+        let child_bc = child_bc.shrink(padding_size);
+        let origin = origin + (self.padding.x0, self.padding.y0);
+
         let mut size;
         match self.child.as_mut() {
             Some(child) => {
@@ -341,7 +370,7 @@ impl Widget for SizedBox {
                 size = Size::new(
                     size.width + 2.0 * border_width,
                     size.height + 2.0 * border_width,
-                );
+                ) + padding_size;
             }
             None => size = bc.constrain((self.width.unwrap_or(0.0), self.height.unwrap_or(0.0))),
         };
@@ -476,6 +505,19 @@ mod tests {
         assert_render_snapshot!(harness, "label_box_with_size");
     }
 
+    #[test]
+    fn label_box_with_padding() {
+        let widget = SizedBox::new(Label::new("hello"))
+            .border(Color::BLUE, 5.0)
+            .rounded(5.0)
+            .padding((60., 40.));
+
+        let mut harness = TestHarness::create(widget);
+
+        assert_debug_snapshot!(harness.root_widget());
+        assert_render_snapshot!(harness, "label_box_with_padding");
+    }
+
     #[test]
     fn label_box_with_solid_background() {
         let widget = SizedBox::new(Label::new("hello"))
@@ -512,5 +554,37 @@ mod tests {
         assert_render_snapshot!(harness, "empty_box_with_gradient_background");
     }
 
+    #[test]
+    fn label_box_with_padding_and_background() {
+        let widget = SizedBox::new(Label::new("hello"))
+            .width(40.0)
+            .height(40.0)
+            .background(Color::PLUM)
+            .border(Color::LIGHT_SKY_BLUE, 5.)
+            .padding(100.);
+
+        let mut harness = TestHarness::create(widget);
+
+        assert_debug_snapshot!(harness.root_widget());
+        assert_render_snapshot!(harness, "label_box_with_background_and_padding");
+    }
+
+    #[test]
+    fn label_box_with_padding_outside() {
+        let widget = SizedBox::new(
+            SizedBox::new(Label::new("hello"))
+                .width(40.0)
+                .height(40.0)
+                .background(Color::PLUM)
+                .border(Color::LIGHT_SKY_BLUE, 5.),
+        )
+        .padding(100.);
+
+        let mut harness = TestHarness::create(widget);
+
+        assert_debug_snapshot!(harness.root_widget());
+        assert_render_snapshot!(harness, "label_box_with_outer_padding");
+    }
+
     // TODO - add screenshot tests for different brush types
 }

masonry/src/widget/snapshots/masonry__widget__sized_box__tests__label_box_with_padding.snap

@@ -0,0 +1,7 @@
+---
+source: masonry/src/widget/sized_box.rs
+expression: harness.root_widget()
+---
+SizedBox(
+    Label<hello>,
+)

masonry/src/widget/snapshots/masonry__widget__sized_box__tests__label_box_with_padding_and_background.snap

@@ -0,0 +1,7 @@
+---
+source: masonry/src/widget/sized_box.rs
+expression: harness.root_widget()
+---
+SizedBox(
+    Label<hello>,
+)

masonry/src/widget/snapshots/masonry__widget__sized_box__tests__label_box_with_padding_outside.snap

@@ -0,0 +1,9 @@
+---
+source: masonry/src/widget/sized_box.rs
+expression: harness.root_widget()
+---
+SizedBox(
+    SizedBox(
+        Label<hello>,
+    ),
+)

xilem/examples/http_cats.rs

@@ -18,7 +18,7 @@ use xilem::core::fork;
 use xilem::core::one_of::OneOf3;
 use xilem::view::{
     button, flex, image, inline_prose, portal, prose, sized_box, spinner, worker, Axis, FlexExt,
-    FlexSpacer,
+    FlexSpacer, Padding,
 };
 use xilem::{Color, EventLoop, EventLoopBuilder, TextAlignment, WidgetView, Xilem};
 
@@ -47,13 +47,15 @@ enum ImageState {
 
 impl HttpCats {
     fn view(&mut self) -> impl WidgetView<HttpCats> {
-        let left_column = portal(flex((
+        let left_column = sized_box(portal(flex((
             prose("Status"),
             self.statuses
                 .iter_mut()
                 .map(Status::list_view)
                 .collect::<Vec<_>>(),
-        )));
+        ))))
+        .padding(Padding::leading(20.));
+
         let (info_area, worker_value) = if let Some(selected_code) = self.selected_code {
             if let Some(selected_status) =
                 self.statuses.iter_mut().find(|it| it.code == selected_code)
@@ -197,8 +199,8 @@ impl Status {
             FlexSpacer::Fixed(10.),
             image,
             // TODO: Overlay on top of the image?
-            // HACK: Trailing spaces workaround scrollbar covering content
-            prose("Copyright ©️ https://http.cat      ").alignment(TextAlignment::End),
+            sized_box(prose("Copyright ©️ https://http.cat").alignment(TextAlignment::End))
+                .padding(Padding::trailing(20.)),
         ))
         .main_axis_alignment(xilem::view::MainAxisAlignment::Start)
     }

xilem/src/view/sized_box.rs

@@ -3,7 +3,7 @@
 
 use std::marker::PhantomData;
 
-use masonry::widget;
+use masonry::{widget, Insets};
 use vello::kurbo::RoundedRectRadii;
 use vello::peniko::{Brush, Color};
 
@@ -26,6 +26,7 @@ where
         background: None,
         border: None,
         corner_radius: RoundedRectRadii::from_single_radius(0.0),
+        padding: Padding::ZERO,
         phantom: PhantomData,
     }
 }
@@ -37,6 +38,7 @@ pub struct SizedBox<V, State, Action = ()> {
     background: Option<Brush>,
     border: Option<BorderStyle>,
     corner_radius: RoundedRectRadii,
+    padding: Padding,
     phantom: PhantomData<fn() -> (State, Action)>,
 }
 
@@ -103,11 +105,17 @@ impl<V, State, Action> SizedBox<V, State, Action> {
         self
     }
 
-    /// Builder style method for rounding off corners of this container by setting a corner radius
+    /// Builder style method for rounding off corners of this container by setting a corner radius.
     pub fn rounded(mut self, radius: impl Into<RoundedRectRadii>) -> Self {
         self.corner_radius = radius.into();
         self
     }
+
+    /// Builder style method for adding a padding around the widget.
+    pub fn padding(mut self, padding: impl Into<Padding>) -> Self {
+        self.padding = padding.into();
+        self
+    }
 }
 
 impl<V, State, Action> ViewMarker for SizedBox<V, State, Action> {}
@@ -125,7 +133,8 @@ where
         let mut widget = widget::SizedBox::new_pod(child.inner.boxed())
             .raw_width(self.width)
             .raw_height(self.height)
-            .rounded(self.corner_radius);
+            .rounded(self.corner_radius)
+            .padding(self.padding);
         if let Some(background) = &self.background {
             widget = widget.background(background.clone());
         }
@@ -173,6 +182,9 @@ where
         if self.corner_radius != prev.corner_radius {
             widget::SizedBox::set_rounded(&mut element, self.corner_radius);
         }
+        if self.padding != prev.padding {
+            widget::SizedBox::set_padding(&mut element, self.padding);
+        }
         {
             let mut child = widget::SizedBox::child_mut(&mut element)
                 .expect("We only create SizedBox with a child");
@@ -209,3 +221,84 @@ struct BorderStyle {
     width: f64,
     color: Color,
 }
+
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct Padding {
+    top: f64,
+    trailing: f64,
+    bottom: f64,
+    leading: f64,
+}
+
+impl Padding {
+    pub const fn new(top: f64, trailing: f64, bottom: f64, leading: f64) -> Self {
+        Self {
+            top,
+            trailing,
+            bottom,
+            leading,
+        }
+    }
+
+    pub const ZERO: Padding = Padding::all(0.);
+
+    pub const fn all(padding: f64) -> Self {
+        Self::new(padding, padding, padding, padding)
+    }
+
+    pub const fn horizontal(padding: f64) -> Self {
+        Self::new(0., padding, 0., padding)
+    }
+
+    pub const fn vertical(padding: f64) -> Self {
+        Self::new(padding, 0., padding, 0.)
+    }
+
+    pub const fn top(padding: f64) -> Self {
+        Self::new(padding, 0., 0., 0.)
+    }
+
+    pub const fn trailing(padding: f64) -> Self {
+        Self::new(0., padding, 0., 0.)
+    }
+
+    pub const fn bottom(padding: f64) -> Self {
+        Self::new(0., 0., padding, 0.)
+    }
+
+    pub const fn leading(padding: f64) -> Self {
+        Self::new(0., 0., 0., padding)
+    }
+}
+
+impl From<f64> for Padding {
+    fn from(value: f64) -> Self {
+        Self::all(value)
+    }
+}
+
+// Follows CSS padding order for 4 values (top, trailing, bottom, leading)
+impl From<(f64, f64, f64, f64)> for Padding {
+    fn from(value: (f64, f64, f64, f64)) -> Self {
+        Self::new(value.0, value.1, value.2, value.3)
+    }
+}
+
+// Follows CSS padding order for 2 values (vertical, horizontal)
+impl From<(f64, f64)> for Padding {
+    fn from(value: (f64, f64)) -> Self {
+        Self::new(value.0, value.1, value.0, value.1)
+    }
+}
+
+impl From<Insets> for Padding {
+    fn from(value: Insets) -> Self {
+        Self::new(value.y0, value.x1, value.y1, value.x0)
+    }
+}
+
+impl From<Padding> for Insets {
+    fn from(value: Padding) -> Self {
+        Insets::new(value.leading, value.top, value.trailing, value.bottom)
+    }
+}