feat: wgpu quad shadows

core/src/element.rs

@@ -558,6 +558,7 @@ where
                     border_color: color,
                     border_width: 1.0,
                     border_radius: 0.0.into(),
+                    shadow: Default::default(),
                 },
                 Color::TRANSPARENT,
             );

core/src/lib.rs

@@ -35,6 +35,7 @@ pub mod layout;
 pub mod mouse;
 pub mod overlay;
 pub mod renderer;
+pub mod shadow;
 pub mod svg;
 pub mod text;
 pub mod time;
@@ -78,6 +79,7 @@ pub use pixels::Pixels;
 pub use point::Point;
 pub use rectangle::Rectangle;
 pub use renderer::Renderer;
+pub use shadow::Shadow;
 pub use shell::Shell;
 pub use size::Size;
 pub use text::Text;

core/src/renderer.rs

@@ -6,7 +6,7 @@ mod null;
 pub use null::Null;
 
 use crate::layout;
-use crate::{Background, BorderRadius, Color, Element, Rectangle, Vector};
+use crate::{Background, BorderRadius, Color, Element, Rectangle, Vector, Shadow};
 
 /// A component that can be used by widgets to draw themselves on a screen.
 pub trait Renderer: Sized {
@@ -58,6 +58,9 @@ pub struct Quad {
 
     /// The border color of the [`Quad`].
     pub border_color: Color,
+
+    /// The shadow of the [`Quad`].
+    pub shadow: Shadow
 }
 
 /// The styling attributes of a [`Renderer`].

core/src/shadow.rs

@@ -0,0 +1,15 @@
+//! Shadow
+use crate::{Color, Vector};
+
+/// A shadow
+#[derive(Debug, Clone, Copy, PartialEq, Default)]
+pub struct Shadow {
+    /// The color of the shadow
+    pub color: Color,
+
+    /// The offset of the shadow
+    pub offset: Vector,
+
+    /// The softness of the shadow
+    pub softness: f32
+}

examples/custom_quad/src/main.rs

@@ -3,7 +3,7 @@ mod quad {
     use iced::advanced::layout::{self, Layout};
     use iced::advanced::renderer;
     use iced::advanced::widget::{self, Widget};
-    use iced::{Color, Element, Length, Point, Rectangle, Size};
+    use iced::{Color, Element, Length, Point, Rectangle, Shadow, Size, Vector};
 
     pub struct CustomQuad {
         size: f32,
@@ -57,6 +57,11 @@ mod quad {
                     border_radius: self.radius.into(),
                     border_width: self.border_width,
                     border_color: Color::from_rgb(1.0, 0.0, 0.0),
+                    shadow: Shadow {
+                        color: Color::BLACK,
+                        offset: Vector::new(0.0, 8.0),
+                        softness: 16.0,
+                    },
                 },
                 Color::BLACK,
             );

examples/custom_widget/src/main.rs

@@ -64,6 +64,7 @@ mod circle {
                     border_radius: self.radius.into(),
                     border_width: 0.0,
                     border_color: Color::TRANSPARENT,
+                    shadow: Default::default(),
                 },
                 Color::BLACK,
             );

examples/modal/src/main.rs

@@ -421,6 +421,7 @@ mod modal {
                     border_radius: Default::default(),
                     border_width: 0.0,
                     border_color: Color::TRANSPARENT,
+                    shadow: Default::default(),
                 },
                 Color {
                     a: 0.80,

graphics/src/primitive.rs

@@ -45,6 +45,12 @@ pub enum Primitive {
         border_width: f32,
         /// The border color of the quad
         border_color: Color,
+        /// The shadow color of the quad
+        shadow_color: Color,
+        /// The shadow offset of the quad
+        shadow_offset: Vector,
+        /// The shadow softness of the quad
+        shadow_softness: f32,
     },
     /// An image primitive
     Image {

graphics/src/renderer.rs

@@ -106,6 +106,9 @@ where
             border_radius: quad.border_radius.into(),
             border_width: quad.border_width,
             border_color: quad.border_color,
+            shadow_color: quad.shadow.color,
+            shadow_offset: quad.shadow.offset,
+            shadow_softness: quad.shadow.softness,
         });
     }
 

src/lib.rs

@@ -191,7 +191,7 @@ pub use crate::core::event;
 pub use crate::core::gradient;
 pub use crate::core::{
     color, Alignment, Background, Color, ContentFit, Degrees, Gradient, Length,
-    Padding, Pixels, Point, Radians, Rectangle, Size, Vector,
+    Padding, Pixels, Point, Radians, Rectangle, Shadow, Size, Vector,
 };
 pub use crate::runtime::Command;
 

tiny_skia/src/backend.rs

@@ -158,6 +158,7 @@ impl Backend {
                 border_radius,
                 border_width,
                 border_color,
+                ..
             } => {
                 let physical_bounds = (*bounds + translation) * scale_factor;
 

wgpu/src/layer.rs

@@ -7,7 +7,7 @@ pub mod quad;
 
 pub use image::Image;
 pub use mesh::Mesh;
-pub use quad::Quad;
+pub use quad::solid::Quad;
 pub use text::Text;
 
 use crate::core;
@@ -159,6 +159,9 @@ impl<'a> Layer<'a> {
                 border_radius,
                 border_width,
                 border_color,
+                shadow_color,
+                shadow_offset,
+                shadow_softness,
             } => {
                 let layer = &mut layers[current_layer];
 
@@ -171,6 +174,9 @@ impl<'a> Layer<'a> {
                     border_color: border_color.into_linear(),
                     border_radius: *border_radius,
                     border_width: *border_width,
+                    shadow_color: shadow_color.into_linear(),
+                    shadow_offset: (*shadow_offset).into(),
+                    shadow_softness: *shadow_softness,
                 };
 
                 match background {
@@ -189,7 +195,13 @@ impl<'a> Layer<'a> {
                                     quad.size.into(),
                                 ),
                             ),
-                            quad,
+                            quad: quad::gradient::Quad {
+                                position: quad.position,
+                                size: quad.size,
+                                border_color: quad.border_color,
+                                border_radius: quad.border_radius,
+                                border_width: quad.border_width
+                            },
                         };
 
                         layer.quads.gradients.push(quad);

wgpu/src/layer/quad.rs

@@ -2,26 +2,6 @@
 
 use bytemuck::{Pod, Zeroable};
 
-/// The properties of a quad.
-#[derive(Clone, Copy, Debug, Pod, Zeroable)]
-#[repr(C)]
-pub struct Quad {
-    /// The position of the [`Quad`].
-    pub position: [f32; 2],
-
-    /// The size of the [`Quad`].
-    pub size: [f32; 2],
-
-    /// The border color of the [`Quad`], in __linear RGB__.
-    pub border_color: [f32; 4],
-
-    /// The border radii of the [`Quad`].
-    pub border_radius: [f32; 4],
-
-    /// The border width of the [`Quad`].
-    pub border_width: f32,
-}
-
 /// A quad filled with a solid color.
 #[derive(Clone, Copy, Debug, Pod, Zeroable)]
 #[repr(C)]
@@ -30,7 +10,41 @@ pub struct Solid {
     pub color: [f32; 4],
 
     /// The [`Quad`] data of the [`Solid`].
-    pub quad: Quad,
+    pub quad: solid::Quad,
+}
+
+/// Solid quad
+pub mod solid {
+    use bytemuck::{Pod, Zeroable};
+
+    /// The properties of a quad.
+    #[derive(Clone, Copy, Debug, Pod, Zeroable)]
+    #[repr(C)]
+    pub struct Quad {
+        /// The position of the [`Quad`].
+        pub position: [f32; 2],
+
+        /// The size of the [`Quad`].
+        pub size: [f32; 2],
+
+        /// The border color of the [`Quad`], in __linear RGB__.
+        pub border_color: [f32; 4],
+
+        /// The border radii of the [`Quad`].
+        pub border_radius: [f32; 4],
+
+        /// The border width of the [`Quad`].
+        pub border_width: f32,
+
+        /// The shadow color of the [`Quad`].
+        pub shadow_color: [f32; 4],
+
+        /// The shadow offset of the [`Quad`].
+        pub shadow_offset: [f32; 2],
+
+        /// The shadow softness of the [`Quad`].
+        pub shadow_softness: f32,
+    }
 }
 
 /// A quad filled with interpolated colors.
@@ -41,11 +55,36 @@ pub struct Gradient {
     pub gradient: [f32; 44],
 
     /// The [`Quad`] data of the [`Gradient`].
-    pub quad: Quad,
+    pub quad: gradient::Quad,
 }
 
 #[allow(unsafe_code)]
 unsafe impl Pod for Gradient {}
 
 #[allow(unsafe_code)]
 unsafe impl Zeroable for Gradient {}
+
+/// Gradient quad
+pub mod gradient {
+    use bytemuck::{Pod, Zeroable};
+
+    /// The properties of a quad.
+    #[derive(Clone, Copy, Debug, Pod, Zeroable)]
+    #[repr(C)]
+    pub struct Quad {
+        /// The position of the [`Quad`].
+        pub position: [f32; 2],
+
+        /// The size of the [`Quad`].
+        pub size: [f32; 2],
+
+        /// The border color of the [`Quad`], in __linear RGB__.
+        pub border_color: [f32; 4],
+
+        /// The border radii of the [`Quad`].
+        pub border_radius: [f32; 4],
+
+        /// The border width of the [`Quad`].
+        pub border_width: f32,
+    }
+}

wgpu/src/quad.rs

@@ -294,6 +294,12 @@ mod solid {
                                     5 => Float32x4,
                                     // Border width
                                     6 => Float32,
+                                    // Shadow color
+                                    7 => Float32x4,
+                                    // Shadow offset
+                                    8 => Float32x2,
+                                    // Shadow softness
+                                    9 => Float32,
                                 ),
                             },
                         ],