Implement box-shadow drawing

Cargo.toml

@@ -15,14 +15,14 @@ selectors = { git = "https://github.com/dioxuslabs/stylo", branch = "enable-tabl
 html5ever = "0.27" # needs to match stylo markup5ever version
 taffy = { git = "https://github.com/dioxuslabs/taffy", rev = "950a0eb1322f15e5d1083f4793b55d52061718de" }
 parley = { git = "https://github.com/nicoburns/parley", rev = "029bf1df3e1829935fa6d25b875d3138f79a62c1" }
-dioxus = { git = "https://github.com/dioxuslabs/dioxus", rev = "a3aa6ae771a2d0a4d8cb6055c41efc0193b817ef"}
+dioxus = { git = "https://github.com/dioxuslabs/dioxus", rev = "a3aa6ae771a2d0a4d8cb6055c41efc0193b817ef" }
 dioxus-ssr = { git = "https://github.com/dioxuslabs/dioxus", rev = "a3aa6ae771a2d0a4d8cb6055c41efc0193b817ef" }
 tokio = { version = "1.25.0", features = ["full"] }
 tracing = "0.1.40"
-vello = { version = "0.2", features = ["wgpu"] }
+vello = { git = "https://github.com/linebender/vello", rev = "aaa9f5f2d0f21f3d038501ea0cf32c989d97aab3", package = "vello", features = [ "wgpu" ] }
 peniko = { version = "0.1" }
 # fello = { git = "https://github.com/linebender/vello" }
-wgpu = "0.20"
+wgpu = "22.1.0"
 
 # This is a "virtual package"
 # It is not meant to be published, but is used so "cargo run --example XYZ" works properly

examples/tailwind.rs

@@ -16,6 +16,7 @@ fn app() -> Element {
         for _row in 0..3 {
                 div { class: "flex flex-row",
                 div { id: "cool", "h123456789asdjkahskj\nhiiiii" }
+                div { id: "cool-inset", "h123456789asdjkahskj\nhiiiii" }
                 p { class: "cool", "hi" }
                 for x in 1..=9 {
                     div { class: "bg-red-{x}00 border", "{x}" }
@@ -30,6 +31,13 @@ p.cool { background-color: purple; }
 #cool {
     background-color: blue;
     font-size: 32px;
+    box-shadow: 16px 16px 16px rgba(0,0,0,0.6);
+}
+#cool-inset {
+    margin-top: 16px;
+    background-color: purple;
+    font-size: 32px;
+    box-shadow: inset 16px 16px 16px rgba(255,255,255,0.6);
 }
 .bg-red-100	{ background-color: rgb(254 226 226); }
 .bg-red-200	{ background-color: rgb(254 202 202); }

packages/blitz/Cargo.toml

@@ -17,5 +17,5 @@ vello = { workspace = true }
 wgpu = { workspace = true }
 raw-window-handle = "0.6.0"
 image = "0.25"
-vello_svg = { git = "https://github.com/DioxusLabs/vello_svg", rev = "6a8bf4abd1ad053431253964d1b62ad4427f4311" }
+vello_svg = { git = "https://github.com/cfraz89/vello_svg", rev = "fc29d4ebf8d6aaee980b203f39ef2c73fe43c017" }
 futures-intrusive = "0.5.0"

packages/blitz/src/renderer.rs

@@ -140,6 +140,7 @@ where
             width: state.surface.config.width,
             height: state.surface.config.height,
             antialiasing_method: vello::AaConfig::Msaa16,
+            debug: vello::DebugLayers::none(),
         };
 
         // Regenerate the vello scene
@@ -215,7 +216,7 @@ pub async fn render_to_buffer(dom: &Document, viewport: Viewport) -> Vec<u8> {
         width,
         height,
         antialiasing_method: vello::AaConfig::Area,
-        // debug: vello::DebugLayers::none(),
+        debug: vello::DebugLayers::none(),
     };
     renderer
         .render_to_texture(device, queue, &scene, &view, &render_params)

packages/blitz/src/renderer/render.rs

@@ -357,7 +357,9 @@ impl<'dom> VelloSceneGenerator<'dom> {
         let cx = self.element_cx(element, location);
         cx.stroke_effects(scene);
         cx.stroke_outline(scene);
+        cx.draw_outset_box_shadow(scene);
         cx.stroke_frame(scene);
+        cx.draw_inset_box_shadow(scene);
         cx.stroke_border(scene);
         cx.stroke_devtools(scene);
         cx.draw_image(scene);
@@ -931,6 +933,87 @@ impl ElementCx<'_> {
 
     // fn draw_image_frame(&self, scene: &mut Scene) {}
 
+    fn draw_outset_box_shadow(&self, scene: &mut Scene) {
+        let box_shadow = &self.style.get_effects().box_shadow.0;
+        for shadow in box_shadow.iter().filter(|s| !s.inset) {
+            let shadow_color = shadow.base.color.as_vello();
+            if shadow_color != Color::TRANSPARENT {
+                let transform = self.transform.then_translate(Vec2 {
+                    x: shadow.base.horizontal.px() as f64,
+                    y: shadow.base.vertical.px() as f64,
+                });
+
+                //TODO draw shadows with matching individual radii instead of averaging
+                let radius = (self.frame.border_top_left_radius_height
+                    + self.frame.border_bottom_left_radius_width
+                    + self.frame.border_bottom_left_radius_height
+                    + self.frame.border_bottom_left_radius_width
+                    + self.frame.border_bottom_right_radius_height
+                    + self.frame.border_bottom_right_radius_width
+                    + self.frame.border_top_right_radius_height
+                    + self.frame.border_top_right_radius_width)
+                    / 8.0;
+
+                // Fill the color
+                scene.draw_blurred_rounded_rect(
+                    transform,
+                    self.frame.outer_rect,
+                    shadow_color,
+                    radius,
+                    shadow.base.blur.px() as f64,
+                );
+            }
+        }
+    }
+
+    fn draw_inset_box_shadow(&self, scene: &mut Scene) {
+        let box_shadow = &self.style.get_effects().box_shadow.0;
+        let has_inset_shadow = box_shadow.iter().any(|s| s.inset);
+        if has_inset_shadow {
+            CLIPS_WANTED.fetch_add(1, atomic::Ordering::SeqCst);
+            let clips_available = CLIPS_USED.load(atomic::Ordering::SeqCst) <= CLIP_LIMIT;
+            if clips_available {
+                scene.push_layer(Mix::Clip, 1.0, self.transform, &self.frame.frame());
+                CLIPS_USED.fetch_add(1, atomic::Ordering::SeqCst);
+                let depth = CLIP_DEPTH.fetch_add(1, atomic::Ordering::SeqCst) + 1;
+                CLIP_DEPTH_USED.fetch_max(depth, atomic::Ordering::SeqCst);
+            }
+        }
+        for shadow in box_shadow.iter().filter(|s| s.inset) {
+            let shadow_color = shadow.base.color.as_vello();
+            if shadow_color != Color::TRANSPARENT {
+                let transform = self.transform.then_translate(Vec2 {
+                    x: shadow.base.horizontal.px() as f64,
+                    y: shadow.base.vertical.px() as f64,
+                });
+
+                //TODO draw shadows with matching individual radii instead of averaging
+                let radius = (self.frame.border_top_left_radius_height
+                    + self.frame.border_bottom_left_radius_width
+                    + self.frame.border_bottom_left_radius_height
+                    + self.frame.border_bottom_left_radius_width
+                    + self.frame.border_bottom_right_radius_height
+                    + self.frame.border_bottom_right_radius_width
+                    + self.frame.border_top_right_radius_height
+                    + self.frame.border_top_right_radius_width)
+                    / 8.0;
+
+                // Fill the color
+                scene.draw_blurred_rounded_rect(
+                    transform,
+                    self.frame.outer_rect,
+                    shadow_color,
+                    radius,
+                    shadow.base.blur.px() as f64,
+                );
+            }
+        }
+        if has_inset_shadow {
+            scene.pop_layer();
+            CLIP_DEPTH.fetch_sub(1, atomic::Ordering::SeqCst);
+        }
+    }
+
     fn draw_solid_frame(&self, scene: &mut Scene) {
         let background_color = &self.style.get_background().background_color;
         let bg_color = background_color.as_vello();