From 2dbd18c212a2dd92f4fbb63be169619c30adcf5e Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Fri, 25 Oct 2024 09:55:29 +0100 Subject: [PATCH 1/5] Added `layout_rounding_debug` example --- Cargo.toml | 11 ++++++ examples/README.md | 1 + examples/ui/layout_rounding_debug.rs | 56 ++++++++++++++++++++++++++++ 3 files changed, 68 insertions(+) create mode 100644 examples/ui/layout_rounding_debug.rs diff --git a/Cargo.toml b/Cargo.toml index 8ae8758696e14..379fe8013a6ff 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -3100,6 +3100,17 @@ description = "An example for CSS Grid layout" category = "UI (User Interface)" wasm = true +[[example]] +name = "layout_rounding_debug" +path = "examples/ui/layout_rounding_debug.rs" +doc-scrape-examples = true + +[package.metadata.example.layout_rounding_debug] +name = "layout_rounding_debug" +description = "An example for debugging layout rounding errors" +category = "UI (User Interface)" +wasm = true + [[example]] name = "scroll" path = "examples/ui/scroll.rs" diff --git a/examples/README.md b/examples/README.md index 3b6359ad71032..6662c044ca904 100644 --- a/examples/README.md +++ b/examples/README.md @@ -505,6 +505,7 @@ Example | Description [Flex Layout](../examples/ui/flex_layout.rs) | Demonstrates how the AlignItems and JustifyContent properties can be composed to layout nodes and position text [Font Atlas Debug](../examples/ui/font_atlas_debug.rs) | Illustrates how FontAtlases are populated (used to optimize text rendering internally) [Ghost Nodes](../examples/ui/ghost_nodes.rs) | Demonstrates the use of Ghost Nodes to skip entities in the UI layout hierarchy +[Layout Rounding Debug](../examples/ui/layout_rounding_debug.rs) | An example for debugging layout rounding errors [Overflow](../examples/ui/overflow.rs) | Simple example demonstrating overflow behavior [Overflow Clip Margin](../examples/ui/overflow_clip_margin.rs) | Simple example demonstrating the OverflowClipMargin style property [Overflow and Clipping Debug](../examples/ui/overflow_debug.rs) | An example to debug overflow and clipping behavior diff --git a/examples/ui/layout_rounding_debug.rs b/examples/ui/layout_rounding_debug.rs new file mode 100644 index 0000000000000..4d82e33fd3c27 --- /dev/null +++ b/examples/ui/layout_rounding_debug.rs @@ -0,0 +1,56 @@ +//! Spawns a simple grid layout with nodes laid out covering a white background useful for catching layout rounding errors. +//! Any white lines seen are gaps in the layout are caused by coordinate rounding errors. + +use bevy::{ + color::palettes::css::{DARK_BLUE, MAROON}, + prelude::*, + ui::UiScale, + winit::WinitSettings, +}; + +fn main() { + App::new() + .add_plugins(DefaultPlugins) + .insert_resource(WinitSettings::desktop_app()) + .insert_resource(UiScale(1.5)) + .add_systems(Startup, setup) + .run(); +} + +fn setup(mut commands: Commands) { + commands.spawn((Camera2d, UiAntiAlias::Off)); + + commands + .spawn(( + Node { + display: Display::Grid, + width: Val::Percent(100.), + height: Val::Percent(100.), + grid_template_rows: vec![RepeatedGridTrack::fr(7, 1.)], + ..Default::default() + }, + BackgroundColor(Color::WHITE), + )) + .with_children(|commands| { + for i in 2..9 { + commands + .spawn(Node { + display: Display::Grid, + grid_template_columns: vec![RepeatedGridTrack::fr(i, 1.)], + ..Default::default() + }) + .with_children(|commands| { + for _ in 0..i { + commands.spawn(( + Node { + border: UiRect::all(Val::Px(10.)), + ..Default::default() + }, + BackgroundColor(MAROON.into()), + BorderColor(DARK_BLUE.into()), + )); + } + }); + } + }); +} From c75fc3625cd5e5085530f1c7d11e50859f4d81ec Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Fri, 25 Oct 2024 09:58:31 +0100 Subject: [PATCH 2/5] Adjust description --- examples/ui/layout_rounding_debug.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/ui/layout_rounding_debug.rs b/examples/ui/layout_rounding_debug.rs index 4d82e33fd3c27..41339e4f88b78 100644 --- a/examples/ui/layout_rounding_debug.rs +++ b/examples/ui/layout_rounding_debug.rs @@ -1,5 +1,5 @@ //! Spawns a simple grid layout with nodes laid out covering a white background useful for catching layout rounding errors. -//! Any white lines seen are gaps in the layout are caused by coordinate rounding errors. +//! Any white lines seen are gaps in the layout are caused by coordinate rounding bugs. use bevy::{ color::palettes::css::{DARK_BLUE, MAROON}, From 25b19ecfa8080673c5c93b7b03ce4fe72d164ef5 Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Fri, 25 Oct 2024 10:05:49 +0100 Subject: [PATCH 3/5] cargo run -p build-templated-pages -- update examples --- examples/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/README.md b/examples/README.md index 6662c044ca904..7c980ee8c3aa1 100644 --- a/examples/README.md +++ b/examples/README.md @@ -505,7 +505,6 @@ Example | Description [Flex Layout](../examples/ui/flex_layout.rs) | Demonstrates how the AlignItems and JustifyContent properties can be composed to layout nodes and position text [Font Atlas Debug](../examples/ui/font_atlas_debug.rs) | Illustrates how FontAtlases are populated (used to optimize text rendering internally) [Ghost Nodes](../examples/ui/ghost_nodes.rs) | Demonstrates the use of Ghost Nodes to skip entities in the UI layout hierarchy -[Layout Rounding Debug](../examples/ui/layout_rounding_debug.rs) | An example for debugging layout rounding errors [Overflow](../examples/ui/overflow.rs) | Simple example demonstrating overflow behavior [Overflow Clip Margin](../examples/ui/overflow_clip_margin.rs) | Simple example demonstrating the OverflowClipMargin style property [Overflow and Clipping Debug](../examples/ui/overflow_debug.rs) | An example to debug overflow and clipping behavior @@ -527,6 +526,7 @@ Example | Description [UI Z-Index](../examples/ui/z_index.rs) | Demonstrates how to control the relative depth (z-position) of UI elements [Viewport Debug](../examples/ui/viewport_debug.rs) | An example for debugging viewport coordinates [Window Fallthrough](../examples/ui/window_fallthrough.rs) | Illustrates how to access `winit::window::Window`'s `hittest` functionality. +[layout_rounding_debug](../examples/ui/layout_rounding_debug.rs) | An example for debugging layout rounding errors ## Window From 3294035be161b8de1d21f1752334308d950027ed Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Fri, 25 Oct 2024 10:32:12 +0100 Subject: [PATCH 4/5] Increased number of nodes --- examples/ui/layout_rounding_debug.rs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/ui/layout_rounding_debug.rs b/examples/ui/layout_rounding_debug.rs index 41339e4f88b78..fc59e7c6cb138 100644 --- a/examples/ui/layout_rounding_debug.rs +++ b/examples/ui/layout_rounding_debug.rs @@ -26,13 +26,13 @@ fn setup(mut commands: Commands) { display: Display::Grid, width: Val::Percent(100.), height: Val::Percent(100.), - grid_template_rows: vec![RepeatedGridTrack::fr(7, 1.)], + grid_template_rows: vec![RepeatedGridTrack::fr(10, 1.)], ..Default::default() }, BackgroundColor(Color::WHITE), )) .with_children(|commands| { - for i in 2..9 { + for i in 2..12 { commands .spawn(Node { display: Display::Grid, @@ -43,7 +43,7 @@ fn setup(mut commands: Commands) { for _ in 0..i { commands.spawn(( Node { - border: UiRect::all(Val::Px(10.)), + border: UiRect::all(Val::Px(5.)), ..Default::default() }, BackgroundColor(MAROON.into()), From c1a2e81df46eecb35bdcc5db25c1ddab90f75e1a Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Sun, 27 Oct 2024 19:52:46 +0000 Subject: [PATCH 5/5] moved rounding example to testbed dir --- Cargo.toml | 20 +++++++++---------- examples/README.md | 1 - .../ui_layout_rounding.rs} | 0 3 files changed, 9 insertions(+), 12 deletions(-) rename examples/{ui/layout_rounding_debug.rs => testbed/ui_layout_rounding.rs} (100%) diff --git a/Cargo.toml b/Cargo.toml index 379fe8013a6ff..773bca40ed5de 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -3100,17 +3100,6 @@ description = "An example for CSS Grid layout" category = "UI (User Interface)" wasm = true -[[example]] -name = "layout_rounding_debug" -path = "examples/ui/layout_rounding_debug.rs" -doc-scrape-examples = true - -[package.metadata.example.layout_rounding_debug] -name = "layout_rounding_debug" -description = "An example for debugging layout rounding errors" -category = "UI (User Interface)" -wasm = true - [[example]] name = "scroll" path = "examples/ui/scroll.rs" @@ -3863,3 +3852,12 @@ doc-scrape-examples = true [package.metadata.example.testbed_3d] hidden = true + + +[[example]] +name = "testbed_ui_layout_rounding" +path = "examples/testbed/ui_layout_rounding.rs" +doc-scrape-examples = true + +[package.metadata.example.testbed_ui_layout_rounding] +hidden = true diff --git a/examples/README.md b/examples/README.md index 7c980ee8c3aa1..3b6359ad71032 100644 --- a/examples/README.md +++ b/examples/README.md @@ -526,7 +526,6 @@ Example | Description [UI Z-Index](../examples/ui/z_index.rs) | Demonstrates how to control the relative depth (z-position) of UI elements [Viewport Debug](../examples/ui/viewport_debug.rs) | An example for debugging viewport coordinates [Window Fallthrough](../examples/ui/window_fallthrough.rs) | Illustrates how to access `winit::window::Window`'s `hittest` functionality. -[layout_rounding_debug](../examples/ui/layout_rounding_debug.rs) | An example for debugging layout rounding errors ## Window diff --git a/examples/ui/layout_rounding_debug.rs b/examples/testbed/ui_layout_rounding.rs similarity index 100% rename from examples/ui/layout_rounding_debug.rs rename to examples/testbed/ui_layout_rounding.rs