Adds ViewportCoords Scene to examples/testbed/ui, Removes viewport_debug example

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"

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.

examples/testbed/ui.rs

@@ -23,6 +23,7 @@ fn main() {
         .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 +56,7 @@ enum Scene {
     Transformations,
     #[cfg(feature = "bevy_ui_debug")]
     DebugOutlines,
+    ViewportCoords,
 }
 
 impl Next for Scene {
@@ -76,7 +78,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 +1069,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]),
+                ));
+            });
+    }
+}