Draw box shadows via AnyRender's box-based draw_box_shadow; pass CSS boxes as NonUniformRoundedRect

Cargo.toml

@@ -289,14 +289,15 @@ wgpu = { workspace = true }
 wgpu_context = { workspace = true }
 rustc-hash = { workspace = true }
 
-# [patch.crates-io]
-# anyrender = { path = "../anyrender/crates/anyrender" }
-# anyrender_skia = { path = "../anyrender/crates/anyrender_skia" }
-# anyrender_vello = { path = "../anyrender/crates/anyrender_vello" }
-# anyrender_vello_cpu = { path = "../anyrender/crates/anyrender_vello_cpu" }
-# anyrender_vello_hybrid = { path = "../anyrender/crates/anyrender_vello_hybrid" }
-# anyrender_svg = { path = "../anyrender/crates/anyrender_svg" }
-# wgpu_context = { path = "../anyrender/crates/wgpu_context" }
+[patch.crates-io]
+anyrender = { git = "https://github.com/DioxusLabs/anyrender", branch = "devin/1791068178-box-shadow-api" }
+anyrender_serialize = { git = "https://github.com/DioxusLabs/anyrender", branch = "devin/1791068178-box-shadow-api" }
+anyrender_skia = { git = "https://github.com/DioxusLabs/anyrender", branch = "devin/1791068178-box-shadow-api" }
+anyrender_vello = { git = "https://github.com/DioxusLabs/anyrender", branch = "devin/1791068178-box-shadow-api" }
+anyrender_vello_cpu = { git = "https://github.com/DioxusLabs/anyrender", branch = "devin/1791068178-box-shadow-api" }
+anyrender_vello_hybrid = { git = "https://github.com/DioxusLabs/anyrender", branch = "devin/1791068178-box-shadow-api" }
+anyrender_svg = { git = "https://github.com/DioxusLabs/anyrender", branch = "devin/1791068178-box-shadow-api" }
+wgpu_context = { git = "https://github.com/DioxusLabs/anyrender", branch = "devin/1791068178-box-shadow-api" }
 
 # vello = { path = "../vello/vello" }
 # vello_cpu = { path = "../vello/sparse_strips/vello_cpu" }

packages/blitz-paint/src/kurbo_css/css_box.rs

@@ -1,3 +1,4 @@
+use anyrender::NonUniformRoundedRect;
 use kurbo::{Arc, BezPath, Insets, PathEl, Point, Rect, Shape as _, Vec2};
 use std::{f64::consts::FRAC_PI_2, f64::consts::PI};
 
@@ -209,6 +210,47 @@ impl CssBox {
         path
     }
 
+    /// The frame's border box as a shape that backends can recognise as a (rounded) rect
+    pub fn border_box_shape(&self) -> NonUniformRoundedRect {
+        self.box_shape(CssBoxKind::BorderBox)
+    }
+
+    /// The frame's padding box as a shape that backends can recognise as a (rounded) rect
+    pub fn padding_box_shape(&self) -> NonUniformRoundedRect {
+        self.box_shape(CssBoxKind::PaddingBox)
+    }
+
+    /// The frame's content box as a shape that backends can recognise as a (rounded) rect
+    pub fn content_box_shape(&self) -> NonUniformRoundedRect {
+        self.box_shape(CssBoxKind::ContentBox)
+    }
+
+    fn box_shape(&self, kind: CssBoxKind) -> NonUniformRoundedRect {
+        use Corner::*;
+        let rect = match kind {
+            CssBoxKind::OutlineBox => self.outline_box,
+            CssBoxKind::BorderBox => self.border_box,
+            CssBoxKind::PaddingBox => self.padding_box,
+            CssBoxKind::ContentBox => self.content_box,
+        };
+        let radii = |corner| {
+            if self.is_sharp(corner, kind) {
+                Vec2::ZERO
+            } else {
+                self.ellipse(corner, kind).1
+            }
+        };
+        NonUniformRoundedRect::new(
+            rect,
+            anyrender::NonUniformRoundedRectRadii {
+                top_left: radii(TopLeft),
+                top_right: radii(TopRight),
+                bottom_right: radii(BottomRight),
+                bottom_left: radii(BottomLeft),
+            },
+        )
+    }
+
     /// Construct a bezpath drawing the frame border
     pub fn border_box_path(&self) -> BezPath {
         let mut path = BezPath::new();
@@ -286,42 +328,6 @@ impl CssBox {
         }
     }
 
-    /// Construct a bezpath drawing the frame
-    pub fn shadow_clip(&self, shadow_rect: Rect) -> BezPath {
-        let mut path = BezPath::new();
-        self.shadow_clip_shape(&mut path, shadow_rect);
-        path
-    }
-
-    fn shadow_clip_shape(&self, path: &mut BezPath, shadow_rect: Rect) {
-        use Corner::*;
-
-        for corner in [TopLeft, TopRight, BottomRight, BottomLeft] {
-            path.insert_point(self.shadow_clip_corner(corner, shadow_rect));
-        }
-
-        if self.is_sharp(TopLeft, CssBoxKind::BorderBox) {
-            path.move_to(self.corner(TopLeft, CssBoxKind::BorderBox));
-        } else {
-            const TOLERANCE: f64 = 0.1;
-            let arc = self.corner_arc(TopLeft, CssBoxKind::BorderBox, Direction::Anticlockwise);
-            let elements = arc.path_elements(TOLERANCE);
-            path.extend(elements);
-        }
-
-        for corner in [/*TopLeft, */ BottomLeft, BottomRight, TopRight] {
-            if self.is_sharp(corner, CssBoxKind::BorderBox) {
-                path.insert_point(self.corner(corner, CssBoxKind::BorderBox));
-            } else {
-                path.insert_arc(self.corner_arc(
-                    corner,
-                    CssBoxKind::BorderBox,
-                    Direction::Anticlockwise,
-                ));
-            }
-        }
-    }
-
     fn corner(&self, corner: Corner, css_box: CssBoxKind) -> Point {
         let Rect { x0, y0, x1, y1 } = match css_box {
             CssBoxKind::OutlineBox => self.outline_box,
@@ -337,17 +343,6 @@ impl CssBox {
         }
     }
 
-    fn shadow_clip_corner(&self, corner: Corner, shadow_rect: Rect) -> Point {
-        let (x, y) = match corner {
-            Corner::TopLeft => (shadow_rect.x0, shadow_rect.y0),
-            Corner::TopRight => (shadow_rect.x1, shadow_rect.y0),
-            Corner::BottomRight => (shadow_rect.x1, shadow_rect.y1),
-            Corner::BottomLeft => (shadow_rect.x0, shadow_rect.y1),
-        };
-
-        Point { x, y }
-    }
-
     /// Check if the corner width is smaller than the radius.
     /// If it is, we need to fill in the gap with an arc
     fn corner_needs_infill(&self, corner: Corner) -> bool {

packages/blitz-paint/src/kurbo_css/non_uniform_radii.rs

@@ -23,20 +23,6 @@ pub struct NonUniformRoundedRectRadii {
     pub bottom_left: Vec2,
 }
 
-impl NonUniformRoundedRectRadii {
-    pub fn average(&self) -> f64 {
-        (self.top_left.x
-            + self.top_left.y
-            + self.top_right.x
-            + self.top_right.y
-            + self.bottom_left.x
-            + self.bottom_left.y
-            + self.bottom_right.x
-            + self.bottom_right.y)
-            / 8.0
-    }
-}
-
 impl Mul<f64> for NonUniformRoundedRectRadii {
     type Output = Self;
 

packages/blitz-paint/src/render.rs

@@ -535,9 +535,9 @@ impl<'dom, 'a> BlitzDomPainter<'dom, 'a> {
 
                         // TODO: allow layers with opacity to be unclipped (overflow: visible)
                         let clip = if is_text_input {
-                            &cx.frame.content_box_path()
+                            &cx.frame.content_box_shape()
                         } else {
-                            &cx.frame.padding_box_path()
+                            &cx.frame.padding_box_shape()
                         };
 
                         // Clip layer if box requires clipping. Opacity set to 1.0

packages/blitz-paint/src/render/background.rs

@@ -1,10 +1,10 @@
 use super::{ElementCx, to_image_quality, to_peniko_image};
 use crate::color::{Color, ToColorColor};
 use crate::gradient::to_peniko_gradient;
-use anyrender::PaintScene;
+use anyrender::{NonUniformRoundedRect, PaintScene};
 use blitz_dom::NodeId;
 use blitz_dom::node::{ImageData, ImageResourceData, SpecialElementData};
-use kurbo::{self, Affine, BezPath, Point, Rect, Shape, Size, Vec2};
+use kurbo::{self, Affine, Point, Rect, Shape, Size, Vec2};
 use peniko::{self, Fill};
 use style::{
     computed_values::border_collapse::T as BorderCollapse,
@@ -169,11 +169,11 @@ impl ElementCx<'_, '_> {
     }
 
     /// The path of the given CSS box model box for this element
-    pub(super) fn box_path(&self, css_box: BoxModelBox) -> BezPath {
+    pub(super) fn box_path(&self, css_box: BoxModelBox) -> NonUniformRoundedRect {
         match css_box {
-            BoxModelBox::BorderBox => self.frame.border_box_path(),
-            BoxModelBox::PaddingBox => self.frame.padding_box_path(),
-            BoxModelBox::ContentBox => self.frame.content_box_path(),
+            BoxModelBox::BorderBox => self.frame.border_box_shape(),
+            BoxModelBox::PaddingBox => self.frame.padding_box_shape(),
+            BoxModelBox::ContentBox => self.frame.content_box_shape(),
         }
     }
 
@@ -330,7 +330,7 @@ impl ElementCx<'_, '_> {
         }
     }
 
-    fn draw_solid_bg(&self, scene: &mut impl PaintScene, shape: &BezPath) {
+    fn draw_solid_bg(&self, scene: &mut impl PaintScene, shape: &impl Shape) {
         let current_color = self.style.clone_color();
         let background_color = &self.style.get_background().background_color;
         let bg_color = background_color