diff --git a/Cargo.toml b/Cargo.toml index ce3b87468e628..910f31b5321b4 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -3814,17 +3814,6 @@ description = "Demonstrates how to use `UiTargetCamera` and camera ordering." category = "UI (User Interface)" wasm = true -[[example]] -name = "viewport_debug" -path = "examples/ui/viewport_debug.rs" -doc-scrape-examples = true - -[package.metadata.example.viewport_debug] -name = "Viewport Debug" -description = "An example for debugging viewport coordinates" -category = "UI (User Interface)" -wasm = false - [[example]] name = "viewport_node" path = "examples/ui/viewport_node.rs" diff --git a/examples/README.md b/examples/README.md index 324fac7163be3..f3714151fdd61 100644 --- a/examples/README.md +++ b/examples/README.md @@ -598,7 +598,6 @@ Example | Description [UI Transform](../examples/ui/ui_transform.rs) | An example demonstrating how to translate, rotate and scale UI elements. [UI Z-Index](../examples/ui/z_index.rs) | Demonstrates how to control the relative depth (z-position) of UI elements [Vertical Slider](../examples/ui/vertical_slider.rs) | Simple example showing vertical and horizontal slider widgets with snap behavior and value labels -[Viewport Debug](../examples/ui/viewport_debug.rs) | An example for debugging viewport coordinates [Viewport Node](../examples/ui/viewport_node.rs) | Demonstrates how to create a viewport node with picking support [Virtual Keyboard](../examples/ui/virtual_keyboard.rs) | Example demonstrating a virtual keyboard widget [Window Fallthrough](../examples/ui/window_fallthrough.rs) | Illustrates how to access `winit::window::Window`'s `hittest` functionality. diff --git a/examples/testbed/ui.rs b/examples/testbed/ui.rs index 652408632e727..edba5ce0803bc 100644 --- a/examples/testbed/ui.rs +++ b/examples/testbed/ui.rs @@ -9,21 +9,31 @@ use helpers::Next; fn main() { let mut app = App::new(); - app.add_plugins((DefaultPlugins,)) - .init_state::() - .add_systems(OnEnter(Scene::Image), image::setup) - .add_systems(OnEnter(Scene::Text), text::setup) - .add_systems(OnEnter(Scene::Grid), grid::setup) - .add_systems(OnEnter(Scene::Borders), borders::setup) - .add_systems(OnEnter(Scene::BoxShadow), box_shadow::setup) - .add_systems(OnEnter(Scene::TextWrap), text_wrap::setup) - .add_systems(OnEnter(Scene::Overflow), overflow::setup) - .add_systems(OnEnter(Scene::Slice), slice::setup) - .add_systems(OnEnter(Scene::LayoutRounding), layout_rounding::setup) - .add_systems(OnEnter(Scene::LinearGradient), linear_gradient::setup) - .add_systems(OnEnter(Scene::RadialGradient), radial_gradient::setup) - .add_systems(OnEnter(Scene::Transformations), transformations::setup) - .add_systems(Update, switch_scene); + app.add_plugins(DefaultPlugins.set(WindowPlugin { + primary_window: Some(Window { + // The ViewportCoords scene relies on these specific viewport dimensions, + // so let's explicitly define them and set resizable to false + resolution: (1280, 720).into(), + resizable: false, + ..Default::default() + }), + ..Default::default() + })) + .init_state::() + .add_systems(OnEnter(Scene::Image), image::setup) + .add_systems(OnEnter(Scene::Text), text::setup) + .add_systems(OnEnter(Scene::Grid), grid::setup) + .add_systems(OnEnter(Scene::Borders), borders::setup) + .add_systems(OnEnter(Scene::BoxShadow), box_shadow::setup) + .add_systems(OnEnter(Scene::TextWrap), text_wrap::setup) + .add_systems(OnEnter(Scene::Overflow), overflow::setup) + .add_systems(OnEnter(Scene::Slice), slice::setup) + .add_systems(OnEnter(Scene::LayoutRounding), layout_rounding::setup) + .add_systems(OnEnter(Scene::LinearGradient), linear_gradient::setup) + .add_systems(OnEnter(Scene::RadialGradient), radial_gradient::setup) + .add_systems(OnEnter(Scene::Transformations), transformations::setup) + .add_systems(OnEnter(Scene::ViewportCoords), viewport_coords::setup) + .add_systems(Update, switch_scene); #[cfg(feature = "bevy_ui_debug")] { @@ -55,6 +65,7 @@ enum Scene { Transformations, #[cfg(feature = "bevy_ui_debug")] DebugOutlines, + ViewportCoords, } impl Next for Scene { @@ -76,7 +87,8 @@ impl Next for Scene { Scene::DebugOutlines => Scene::Transformations, #[cfg(not(feature = "bevy_ui_debug"))] Scene::RadialGradient => Scene::Transformations, - Scene::Transformations => Scene::Image, + Scene::Transformations => Scene::ViewportCoords, + Scene::ViewportCoords => Scene::Image, } } } @@ -1066,3 +1078,88 @@ mod debug_outlines { *debug_options = UiDebugOptions::default(); } } + +mod viewport_coords { + use bevy::{color::palettes::css::*, prelude::*}; + + const PALETTE: [Srgba; 9] = [RED, WHITE, BEIGE, AQUA, CRIMSON, NAVY, AZURE, LIME, BLACK]; + + pub fn setup(mut commands: Commands) { + commands.spawn((Camera2d, DespawnOnExit(super::Scene::ViewportCoords))); + commands + .spawn(( + Node { + width: vw(100), + height: vh(100), + border: UiRect::axes(vw(5), vh(5)), + flex_wrap: FlexWrap::Wrap, + ..default() + }, + BorderColor::all(PALETTE[0]), + DespawnOnExit(super::Scene::ViewportCoords), + )) + .with_children(|builder| { + builder.spawn(( + Node { + width: vw(30), + height: vh(30), + border: UiRect::all(vmin(5)), + ..default() + }, + BackgroundColor(PALETTE[1].into()), + BorderColor::all(PALETTE[8]), + )); + + builder.spawn(( + Node { + width: vw(60), + height: vh(30), + ..default() + }, + BackgroundColor(PALETTE[2].into()), + )); + + builder.spawn(( + Node { + width: vw(45), + height: vh(30), + border: UiRect::left(vmax(45. / 2.)), + ..default() + }, + BackgroundColor(PALETTE[3].into()), + BorderColor::all(PALETTE[7]), + )); + + builder.spawn(( + Node { + width: vw(45), + height: vh(30), + border: UiRect::right(vmax(45. / 2.)), + ..default() + }, + BackgroundColor(PALETTE[4].into()), + BorderColor::all(PALETTE[7]), + )); + + builder.spawn(( + Node { + width: vw(60), + height: vh(30), + ..default() + }, + BackgroundColor(PALETTE[5].into()), + )); + + builder.spawn(( + Node { + width: vw(30), + height: vh(30), + border: UiRect::all(vmin(5)), + ..default() + }, + BackgroundColor(PALETTE[6].into()), + BorderColor::all(PALETTE[8]), + )); + }); + } +} diff --git a/examples/ui/viewport_debug.rs b/examples/ui/viewport_debug.rs deleted file mode 100644 index 98b56449146f8..0000000000000 --- a/examples/ui/viewport_debug.rs +++ /dev/null @@ -1,222 +0,0 @@ -//! A simple example for debugging viewport coordinates -//! -//! This example creates two UI node trees, one using viewport coordinates and one using pixel coordinates, -//! and then switches between them once per second using the `Display` style property. -//! If there are no problems both layouts should be identical, except for the color of the margin changing which is used to signal that the displayed UI node tree has changed -//! (red for viewport, yellow for pixel). -use bevy::{color::palettes::css::*, prelude::*}; - -const PALETTE: [Srgba; 10] = [ - RED, YELLOW, WHITE, BEIGE, AQUA, CRIMSON, NAVY, AZURE, LIME, BLACK, -]; - -#[derive(Component, Default, PartialEq)] -enum Coords { - #[default] - Viewport, - Pixel, -} - -fn main() { - App::new() - .insert_resource(UiScale(2.0)) - .add_plugins(DefaultPlugins.set(WindowPlugin { - primary_window: Some(Window { - title: "Viewport Coordinates Debug".to_string(), - // This example relies on these specific viewport dimensions, so let's explicitly - // define them. - resolution: (1280, 720).into(), - resizable: false, - ..Default::default() - }), - ..Default::default() - })) - .add_systems(Startup, setup) - .add_systems(Update, update) - .run(); -} - -fn update( - mut timer: Local, - mut visible_tree: Local, - time: Res