shadow and slider

.gitignore

@@ -1,2 +1,3 @@
 /target
 .DS_Store
+*.diff

masonry/src/action.rs

@@ -17,6 +17,8 @@ pub enum Action {
     TextChanged(String),
     TextEntered(String),
     CheckboxChecked(bool),
+    SliderValueChanged(f64),
+    SliderEditingChanged(bool),
     // FIXME - This is a huge hack
     Other(Box<dyn Any + Send>),
 }
@@ -28,6 +30,8 @@ impl PartialEq for Action {
             (Self::TextChanged(l0), Self::TextChanged(r0)) => l0 == r0,
             (Self::TextEntered(l0), Self::TextEntered(r0)) => l0 == r0,
             (Self::CheckboxChecked(l0), Self::CheckboxChecked(r0)) => l0 == r0,
+            (Self::SliderValueChanged(l0), Self::SliderValueChanged(r0)) => l0 == r0,
+            (Self::SliderEditingChanged(l0), Self::SliderEditingChanged(r0)) => l0 == r0,
             // FIXME
             // (Self::Other(val_l), Self::Other(val_r)) => false,
             _ => false,
@@ -42,6 +46,10 @@ impl std::fmt::Debug for Action {
             Self::TextChanged(text) => f.debug_tuple("TextChanged").field(text).finish(),
             Self::TextEntered(text) => f.debug_tuple("TextEntered").field(text).finish(),
             Self::CheckboxChecked(b) => f.debug_tuple("CheckboxChecked").field(b).finish(),
+            Self::SliderValueChanged(b) => f.debug_tuple("SliderValueChanged").field(b).finish(),
+            Self::SliderEditingChanged(b) => {
+                f.debug_tuple("SliderEditingChanged").field(b).finish()
+            }
             Self::Other(_) => write!(f, "Other(...)"),
         }
     }

masonry/src/widget/mod.rs

@@ -26,6 +26,7 @@ mod prose;
 mod root_widget;
 mod scroll_bar;
 mod sized_box;
+mod slider;
 mod spinner;
 mod split;
 mod text_area;
@@ -35,6 +36,7 @@ mod widget_arena;
 mod zstack;
 
 pub use self::image::Image;
+pub use slider::Slider;
 pub use align::Align;
 pub use button::Button;
 pub use checkbox::Checkbox;

masonry/src/widget/sized_box.rs

@@ -6,8 +6,9 @@
 use accesskit::{Node, Role};
 use smallvec::{smallvec, SmallVec};
 use tracing::{trace_span, warn, Span};
+use vello::kurbo::Vec2;
 use vello::kurbo::{Affine, RoundedRectRadii};
-use vello::peniko::{Brush, Fill};
+use vello::peniko::{Brush, Color, Fill};
 use vello::Scene;
 
 use crate::paint_scene_helpers::stroke;
@@ -25,6 +26,23 @@ struct BorderStyle {
     brush: Brush,
 }
 
+/// Defines the style of a shadow
+struct ShadowStyle {
+    /// Shadow color
+    color: Color,
+    /// Shadow offset from the element
+    offset: Vec2,
+    /// Shadow blur radius
+    blur_radius: f64,
+    /// Shadow spread radius
+    spread_radius: f64,
+    /// The corner radius of the shadow.
+    ///
+    /// If `None`, the shadow will use the same corner radius as the widget's background.
+    /// If `Some(radius)`, the shadow will use the specified radius for its corners.
+    corner_radius: Option<f64>,
+}
+
 /// Padding specifies the spacing between the edges of the box and the child view.
 ///
 /// A Padding can also be constructed using [`from(value: f64)`][Self::from]
@@ -62,6 +80,7 @@ pub struct SizedBox {
     height: Option<f64>,
     background: Option<Brush>,
     border: Option<BorderStyle>,
+    shadow: Option<ShadowStyle>,
     corner_radius: RoundedRectRadii,
     padding: Padding,
 }
@@ -191,6 +210,7 @@ impl SizedBox {
             height: None,
             background: None,
             border: None,
+            shadow: None,
             corner_radius: RoundedRectRadii::from_single_radius(0.0),
             padding: Padding::ZERO,
         }
@@ -204,6 +224,7 @@ impl SizedBox {
             height: None,
             background: None,
             border: None,
+            shadow: None,
             corner_radius: RoundedRectRadii::from_single_radius(0.0),
             padding: Padding::ZERO,
         }
@@ -217,6 +238,7 @@ impl SizedBox {
             height: None,
             background: None,
             border: None,
+            shadow: None,
             corner_radius: RoundedRectRadii::from_single_radius(0.0),
             padding: Padding::ZERO,
         }
@@ -234,6 +256,7 @@ impl SizedBox {
             height: None,
             background: None,
             border: None,
+            shadow: None,
             corner_radius: RoundedRectRadii::from_single_radius(0.0),
             padding: Padding::ZERO,
         }
@@ -301,6 +324,25 @@ impl SizedBox {
         self
     }
 
+    /// Builder-style method for adding a shadow to the widget.
+    pub fn shadow(
+        mut self,
+        color: impl Into<Color>,
+        offset: impl Into<Vec2>,
+        blur_radius: impl Into<f64>,
+        spread_radius: impl Into<f64>,
+        corner_radius: impl Into<Option<f64>>,
+    ) -> Self {
+        self.shadow = Some(ShadowStyle {
+            color: color.into(),
+            offset: offset.into(),
+            blur_radius: blur_radius.into(),
+            spread_radius: spread_radius.into(),
+            corner_radius: corner_radius.into(),
+        });
+        self
+    }
+
     /// 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();
@@ -405,6 +447,31 @@ impl SizedBox {
         this.ctx.request_layout();
     }
 
+    /// Add a shadow to the widget.
+    pub fn set_shadow(
+        this: &mut WidgetMut<'_, Self>,
+        color: impl Into<Color>,
+        offset: impl Into<Vec2>,
+        blur_radius: impl Into<f64>,
+        spread_radius: impl Into<f64>,
+        corner_radius: impl Into<Option<f64>>,
+    ) {
+        this.widget.shadow = Some(ShadowStyle {
+            color: color.into(),
+            offset: offset.into(),
+            blur_radius: blur_radius.into(),
+            spread_radius: spread_radius.into(),
+            corner_radius: corner_radius.into(),
+        });
+        this.ctx.request_paint_only();
+    }
+
+    /// Clears shadow.
+    pub fn clear_shadow(this: &mut WidgetMut<'_, Self>) {
+        this.widget.shadow = None;
+        this.ctx.request_paint_only();
+    }
+
     /// Round off corners of this container by setting a corner radius
     pub fn set_rounded(this: &mut WidgetMut<'_, Self>, radius: impl Into<RoundedRectRadii>) {
         this.widget.corner_radius = radius.into();
@@ -520,6 +587,24 @@ impl Widget for SizedBox {
 
     fn paint(&mut self, ctx: &mut PaintCtx, scene: &mut Scene) {
         let corner_radius = self.corner_radius;
+        let size = ctx.size();
+
+        // Paint shadow if present
+        if let Some(shadow) = &self.shadow {
+            let shadow_rect = size
+                .to_rect()
+                .inset(-shadow.spread_radius)
+                .to_rounded_rect(corner_radius);
+
+            scene.draw_blurred_rounded_rect_in(
+                &shadow_rect,
+                Affine::translate(shadow.offset),
+                shadow_rect.rect(),
+                shadow.color,
+                shadow.corner_radius.unwrap_or(corner_radius.top_left),
+                shadow.blur_radius,
+            );
+        }
 
         if let Some(background) = self.background.as_mut() {
             let panel = ctx.size().to_rounded_rect(corner_radius);
@@ -716,5 +801,49 @@ mod tests {
         assert_render_snapshot!(harness, "label_box_with_outer_padding");
     }
 
+    #[test]
+    fn label_box_with_shadow() {
+        let widget = SizedBox::new(Label::new("hello"))
+            .width(40.0)
+            .height(40.0)
+            .background(palette::css::WHITE)
+            .shadow(palette::css::BLACK, (5.0, 5.0), 10.0, 0.0, None);
+
+        let mut harness = TestHarness::create(widget);
+
+        assert_debug_snapshot!(harness.root_widget());
+        assert_render_snapshot!(harness, "label_box_with_shadow");
+    }
+
+    #[test]
+    fn label_box_with_shadow_and_border() {
+        let widget = SizedBox::new(Label::new("hello"))
+            .width(40.0)
+            .height(40.0)
+            .background(palette::css::WHITE)
+            .border(palette::css::BLUE, 2.0)
+            .shadow(palette::css::BLACK, (5.0, 5.0), 10.0, 0.0, None);
+
+        let mut harness = TestHarness::create(widget);
+
+        assert_debug_snapshot!(harness.root_widget());
+        assert_render_snapshot!(harness, "label_box_with_shadow_and_border");
+    }
+
+    #[test]
+    fn label_box_with_shadow_and_rounded_corners() {
+        let widget = SizedBox::new(Label::new("hello"))
+            .width(40.0)
+            .height(40.0)
+            .background(palette::css::WHITE)
+            .rounded(10.0)
+            .shadow(palette::css::BLACK, (5.0, 5.0), 10.0, 0.0, None);
+
+        let mut harness = TestHarness::create(widget);
+
+        assert_debug_snapshot!(harness.root_widget());
+        assert_render_snapshot!(harness, "label_box_with_shadow_and_rounded_corners");
+    }
+
     // TODO - add screenshot tests for different brush types
 }