Skip to content

Commit

Permalink
Merge main into net
Browse files Browse the repository at this point in the history
  • Loading branch information
kokoISnoTarget committed Sep 7, 2024
2 parents f5a65ea + 8a5bd35 commit 0977cef
Show file tree
Hide file tree
Showing 19 changed files with 849 additions and 120 deletions.
6 changes: 3 additions & 3 deletions Cargo.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
80 changes: 80 additions & 0 deletions examples/form.rs
Original file line number Diff line number Diff line change
@@ -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;
}
"#;
4 changes: 3 additions & 1 deletion examples/markdown.rs
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ fn main() {
.tagfilter(false)
.table(true)
.autolink(true)
.tasklist(false)
.tasklist(true)
.superscript(false)
.header_ids(None)
.footnotes(false)
Expand Down Expand Up @@ -69,6 +69,8 @@ fn main() {
body_html
);

println!("{html}");

dioxus_blitz::launch_static_html_cfg(
&html,
Config {
Expand Down
55 changes: 55 additions & 0 deletions examples/scroll.rs
Original file line number Diff line number Diff line change
@@ -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);
}
8 changes: 8 additions & 0 deletions examples/tailwind.rs
Original file line number Diff line number Diff line change
Expand Up @@ -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}" }
Expand All @@ -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); }
Expand Down
2 changes: 1 addition & 1 deletion packages/blitz/Cargo.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
3 changes: 2 additions & 1 deletion packages/blitz/src/renderer.rs
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand Down
45 changes: 45 additions & 0 deletions packages/blitz/src/renderer/multicolor_rounded_rect.rs
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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 {
Expand Down
Loading

0 comments on commit 0977cef

Please sign in to comment.