Merge main into net

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/form.rs

@@ -0,0 +1,80 @@
+//! Drive the renderer from Dioxus
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus_blitz::launch(app);
+}
+
+fn app() -> Element {
+    let mut checkbox_checked = use_signal(|| false);
+
+    rsx! {
+        div {
+            class: "container",
+            style { {CSS} }
+            form {
+                div {
+                    input {
+                        type: "checkbox",
+                        id: "check1",
+                        name: "check1",
+                        value: "check1",
+                        checked: Some("").filter(|_| checkbox_checked()),
+                        oninput: move |ev| {
+                            dbg!(ev);
+                            checkbox_checked.set(!checkbox_checked());
+                        },
+                    }
+                    label {
+                        r#for: "check1",
+                        "Checkbox 1 (controlled)"
+                    }
+                }
+            div {
+                label {
+                    input {
+                        type: "checkbox",
+                        name: "check2",
+                        value: "check2",
+                    }
+                    "Checkbox 2 (uncontrolled)"
+                }
+            }
+        }
+            div { "Checkbox 1 checked: {checkbox_checked}" }
+        }
+    }
+}
+
+const CSS: &str = r#"
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100vw;
+}
+
+
+form {
+    margin: 12px 0;
+    display: block;
+}
+
+form > div {
+    margin: 8px 0;
+}
+
+label {
+    display: inline-block;
+}
+
+input {
+    /* Should be accent-color */
+    color: #0000cc;
+}
+
+"#;

examples/markdown.rs

@@ -39,7 +39,7 @@ fn main() {
                 .tagfilter(false)
                 .table(true)
                 .autolink(true)
-                .tasklist(false)
+                .tasklist(true)
                 .superscript(false)
                 .header_ids(None)
                 .footnotes(false)
@@ -69,6 +69,8 @@ fn main() {
         body_html
     );
 
+    println!("{html}");
+
     dioxus_blitz::launch_static_html_cfg(
         &html,
         Config {

examples/scroll.rs

@@ -0,0 +1,55 @@
+// Example: scrolling.
+// Creates a scrollable element to demo being able to scroll elements when their content size
+// exceeds their layout size
+use dioxus::prelude::*;
+
+fn root() -> Element {
+    let css = r#"
+        .scrollable {
+            background-color: green;
+            overflow: scroll;
+            height: 200px;
+        }
+
+        .gap {
+            height: 300px;
+            margin: 8px;
+            background: #11ff11;
+            display: flex;
+            align-items: center;
+            color: white;
+        }
+        
+        .gap:hover {
+            background: red;
+        }
+
+        .not-scrollable {
+            background-color: yellow;
+            padding-top: 16px;
+            padding-bottom: 16px;
+        "#;
+
+    rsx! {
+        style { {css} }
+        div { class: "not-scrollable", "Not scrollable" }
+        div { class: "scrollable",
+            div {
+                "Scroll me"
+            }
+            div {
+                class: "gap",
+                onclick: |_| println!("Gap clicked!"),
+                "gap"
+            }
+            div {
+                "Hello"
+            }
+        }
+        div { class: "not-scrollable", "Not scrollable" }
+    }
+}
+
+fn main() {
+    dioxus_blitz::launch(root);
+}

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/multicolor_rounded_rect.rs

@@ -208,6 +208,38 @@ impl ElementFrame {
         }
     }
 
+    /// Construct a bezpath drawing the frame
+    pub fn shadow_clip(&self) -> BezPath {
+        let mut path = BezPath::new();
+        self.shadow_clip_shape(&mut path);
+        path
+    }
+
+    fn shadow_clip_shape(&self, path: &mut BezPath) {
+        use Corner::*;
+
+        for corner in [TopLeft, TopRight, BottomRight, BottomLeft] {
+            path.insert_point(self.shadow_clip_corner(corner, 100.0));
+        }
+
+        if self.is_sharp(TopLeft) {
+            path.move_to(self.corner(TopLeft, ArcSide::Outer));
+        } else {
+            const TOLERANCE: f64 = 0.1;
+            let arc = self.full_arc(TopLeft, ArcSide::Outer, Direction::Anticlockwise);
+            let elements = arc.path_elements(TOLERANCE);
+            path.extend(elements);
+        }
+
+        for corner in [/*TopLeft, */ BottomLeft, BottomRight, TopRight] {
+            if self.is_sharp(corner) {
+                path.insert_point(self.corner(corner, ArcSide::Outer));
+            } else {
+                path.insert_arc(self.full_arc(corner, ArcSide::Outer, Direction::Anticlockwise));
+            }
+        }
+    }
+
     fn corner(&self, corner: Corner, side: ArcSide) -> Point {
         let Rect { x0, y0, x1, y1 } = self.outer_rect;
 
@@ -241,6 +273,19 @@ impl ElementFrame {
         Point { x, y }
     }
 
+    fn shadow_clip_corner(&self, corner: Corner, offset: f64) -> Point {
+        let Rect { x0, y0, x1, y1 } = self.outer_rect;
+
+        let (x, y) = match corner {
+            Corner::TopLeft => (x0 - offset, y0 - offset),
+            Corner::TopRight => (x1 + offset, y0 - offset),
+            Corner::BottomRight => (x1 + offset, y1 + offset),
+            Corner::BottomLeft => (x0 - offset, y1 + offset),
+        };
+
+        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 {