Incremental UI layout updates

Cargo.toml

@@ -729,9 +729,6 @@ reflect_auto_register_static = ["bevy_internal/reflect_auto_register_static"]
 # Enable winit custom cursor support
 custom_cursor = ["bevy_internal/custom_cursor"]
 
-# Experimental support for nodes that are ignored for UI layouting
-ghost_nodes = ["bevy_internal/ghost_nodes"]
-
 # Uses `async-executor` as a task execution backend.
 async_executor = ["std", "bevy_internal/async_executor"]
 
@@ -4170,7 +4167,6 @@ wasm = true
 name = "ghost_nodes"
 path = "examples/ui/layout/ghost_nodes.rs"
 doc-scrape-examples = true
-required-features = ["ghost_nodes"]
 
 [package.metadata.example.ghost_nodes]
 name = "Ghost Nodes"

_release-content/migration-guides/ghostnodes_reimplementation.md

@@ -0,0 +1,14 @@
+---
+title: "`GhostNode` reimplementation"
+pull_requests: [25653]
+---
+
+The `ghost_nodes` feature gate has been removed. The `experimental` module and its `ghost_nodes` submodule have been removed.
+
+`GhostNode`s are now always enabled, in the UI prelude, require `Node` and act more like regular UI nodes. The `UiChildren` and `UiRootNodes` system parameters have been removed.
+
+During layout updates a `GhostNode` is replaced by its children recursively, so that its nearest non-ghost descendants become children of its nearest non-ghost ancestor. The `GhostNode` entity itself is set to zero-size. `UiTransform` is propagated through `GhostNode`s normally, except that for percentage translations the closest non-ghost ancestor's base size is used. Otherwise, since GhostNodes always have a size of zero, percentage translations would always resolve to zero.
+
+`GhostNode` transitively requires `ComputedStackIndex`, so `GhostNode`s are included in the `UiStack`, which will shift the stack indices of existing UI layouts.
+
+If a UI node has both the `GhostNode` and `FixedNode` components, `FixedNode` is ignored.

_release-content/migration-guides/measure_and_node_measure_changes.md

@@ -0,0 +1,8 @@
+---
+title: "`Measure` and `NodeMeasure` changes"
+pull_requests: [25653]
+---
+
+Previously, `NodeMeasure`s were moved out of the `ContentSize` components during layout. Now they are accessed directly by querying for `Ref<ContentSize>`.
+
+As a result, the receiver for the `Measure` trait and its implementation for `NodeMeasure` no longer needs to be mutable, instead `&self` is sufficient.

_release-content/migration-guides/removed_uisurface.md

@@ -0,0 +1,8 @@
+---
+title: "Removed the `UiSurface` resource and `ui_surface` module."
+pull_requests: [25653]
+---
+
+Instead of maintaining a separate `TaffyTree` in the `UiSurface` resource, `bevy_ui` now has a new `UiLayoutTree` adapter that allows Taffy to access the ECS component data directly. As a consequence, `UiSurface` is no longer needed and it has been removed, along with the `ui_surface` module.
+
+`print_ui_layout_tree` now takes a `&World` instead of a `&UiSurface`.

_release-content/migration-guides/ui_layout_system_has_been_split_up.md

@@ -0,0 +1,8 @@
+---
+title: "`ui_layout_system` has been split up."
+pull_requests: [25653]
+---
+
+`ui_layout_system` has been split into `update_ui_roots`, `sync_taffy_styles_with_nodes`, `mark_dirty_ui_trees`, `ui_layout_system`, `update_computed_nodes` and `update_border_radius`.
+
+Code that was ordered against `ui_layout_system` should be ordered against the `UiSystems::Layout` system set instead.

_release-content/release-notes/incremental_ui_layout_updates.md

@@ -0,0 +1,7 @@
+---
+title: Incremental UI layout updates
+authors: ["@ickshonpe"]
+pull_requests: [25653]
+---
+
+UI layout has been reimplemented so that updates are more incremental. Instead of maintaining a separate `TaffyTree` in `UiSurface`, the new `UiLayoutTree` adapter allows Taffy to access the ECS component data directly. The layout geometry in `ComputedNode` is now updated only in response to changes in the input layout data.

benches/benches/bevy_ui/layout.rs

@@ -17,12 +17,18 @@ use bevy_ecs::schedule::IntoScheduleConfigs;
 use bevy_ecs::utils::default;
 use bevy_ecs::world::World;
 use bevy_text::FontCx;
+use bevy_ui::clear_transient_dirty_flags;
+use bevy_ui::clipping::update_clipping_system;
+use bevy_ui::mark_dirty_ui_trees;
 use bevy_ui::prelude::*;
 use bevy_ui::sync_font_size_to_em_size;
+use bevy_ui::sync_taffy_styles_with_nodes;
 use bevy_ui::ui_layout_system;
-use bevy_ui::ui_surface::UiSurface;
 use bevy_ui::update::propagate_ui_target_cameras;
-use bevy_ui::update::update_clipping_system;
+use bevy_ui::update_border_radius;
+use bevy_ui::update_computed_nodes;
+use bevy_ui::update_ui_roots;
+use bevy_ui::UiRoots;
 use criterion::criterion_group;
 use criterion::BenchmarkId;
 use criterion::Criterion;
@@ -80,15 +86,21 @@ fn setup_app() -> App {
             PostUpdate,
         ))
         .init_resource::<UiScale>()
-        .init_resource::<UiSurface>()
+        .init_resource::<UiRoots>()
         .init_resource::<FontCx>()
         .init_resource::<RemSize>()
         .add_systems(
             PostUpdate,
             (
                 propagate_ui_target_cameras,
+                clear_transient_dirty_flags,
+                update_ui_roots,
                 sync_font_size_to_em_size,
+                sync_taffy_styles_with_nodes,
+                mark_dirty_ui_trees,
                 ui_layout_system,
+                update_computed_nodes,
+                update_border_radius,
                 update_clipping_system,
             )
                 .chain(),
@@ -97,13 +109,13 @@ fn setup_app() -> App {
             PostUpdate,
             PropagateSet::<ComputedUiTargetCamera>::default()
                 .after(propagate_ui_target_cameras)
-                .before(ui_layout_system),
+                .before(sync_font_size_to_em_size),
         )
         .configure_sets(
             PostUpdate,
             PropagateSet::<ComputedUiRenderTargetInfo>::default()
                 .after(propagate_ui_target_cameras)
-                .before(ui_layout_system),
+                .before(sync_font_size_to_em_size),
         );
 
     let size = UVec2::new(10000, 10000);

crates/bevy_feathers/src/controls/scrollbar.rs

@@ -172,8 +172,7 @@ impl Plugin for ScrollbarPlugin {
         app.add_systems(
             PostUpdate,
             update_scrollbar_visibility
-                .after(UiSystems::Layout)
-                .before(UiSystems::Clipping)
+                .in_set(UiSystems::PostLayout)
                 .ambiguous_with(TransformGizmoRenderStep),
         );
     }

crates/bevy_internal/Cargo.toml

@@ -425,9 +425,6 @@ custom_cursor = [
   "bevy_picking/custom_cursor",
 ]
 
-# Experimental support for nodes that are ignored for UI layouting
-ghost_nodes = ["bevy_ui/ghost_nodes"]
-
 # Allows access to the `std` crate. Enabling this feature will prevent compilation
 # on `no_std` targets, but provides access to certain additional features on
 # supported platforms.

crates/bevy_internal/src/default_plugins.rs

@@ -147,12 +147,12 @@ impl Plugin for IgnoreAmbiguitiesPlugin {
             app.ignore_ambiguity(
                 bevy_app::PostUpdate,
                 bevy_animation::advance_animations,
-                bevy_ui::ui_layout_system,
+                bevy_ui::UiSystems::Layout,
             );
             app.ignore_ambiguity(
                 bevy_app::PostUpdate,
                 bevy_animation::animate_targets,
-                bevy_ui::ui_layout_system,
+                bevy_ui::UiSystems::Layout,
             );
         }
     }

crates/bevy_text/src/pipeline.rs

@@ -605,7 +605,7 @@ pub struct TextMeasureInfo {
 impl TextMeasureInfo {
     /// Computes the size of the text area within the provided bounds.
     pub fn compute_size(
-        &mut self,
+        &self,
         bounds: TextBounds,
         computed: &mut ComputedTextBlock,
         _font_system: &mut FontCx,

crates/bevy_text/src/text_access.rs

@@ -100,7 +100,6 @@ impl<'w, 's, R: TextSection> TextReader<'w, 's, R> {
 ///
 /// Iterates all spans in a text block according to hierarchy traversal order.
 /// Does *not* flatten interspersed ghost nodes. Only contiguous spans are traversed.
-// TODO: Use this iterator design in UiChildrenIter to reduce allocations.
 pub struct TextSpanIter<'a, R: TextSection> {
     scratch: &'a mut TextIterScratch,
     inline_boxes: &'a Query<'a, 'a, &'static InlineBox>,

crates/bevy_ui/Cargo.toml

@@ -43,7 +43,6 @@ taffy = { version = "0.14", default-features = false, features = [
   "flexbox",
   "grid",
   "content_size",
-  "taffy_tree",
 ] }
 serde = { version = "1", features = ["derive"], optional = true }
 uuid = { version = "1.21.0", features = ["v4"], optional = true }
@@ -68,9 +67,6 @@ serialize = [
 ]
 bevy_picking = ["dep:bevy_picking", "dep:uuid"]
 
-# Experimental features
-ghost_nodes = []
-
 [lints]
 workspace = true
 

crates/bevy_ui/src/accessibility.rs

@@ -4,7 +4,6 @@
 )]
 use crate::prelude::Button;
 use crate::{
-    experimental::UiChildren,
     prelude::Label,
     ui_transform::UiGlobalTransform,
     widget::{ImageNode, TextUiReader},
@@ -15,7 +14,7 @@ use bevy_app::{App, Plugin, PostUpdate};
 use bevy_ecs::{
     change_detection::DetectChanges,
     component::Component,
-    hierarchy::ChildOf,
+    hierarchy::{ChildOf, Children},
     lifecycle::HookContext,
     prelude::Entity,
     query::{Changed, With, Without},
@@ -98,11 +97,14 @@ fn sync_bounds_and_transforms(
 fn button_changed(
     mut commands: Commands,
     mut query: Query<(Entity, Option<&mut AccessibilityNode>), Changed<Button>>,
-    ui_children: UiChildren,
+    ui_children: Query<&Children, With<crate::Node>>,
     mut text_reader: TextUiReader,
 ) {
     for (entity, accessible) in &mut query {
-        let label = calc_label(&mut text_reader, ui_children.iter_ui_children(entity));
+        let label = calc_label(
+            &mut text_reader,
+            ui_children.get(entity).into_iter().flatten().copied(),
+        );
         if let Some(mut accessible) = accessible {
             accessible.set_role(Role::Button);
             if let Some(name) = label {
@@ -132,11 +134,14 @@ fn image_changed(
         (Entity, Option<&mut AccessibilityNode>),
         (Changed<ImageNode>, Without<Button>),
     >,
-    ui_children: UiChildren,
+    ui_children: Query<&Children, With<crate::Node>>,
     mut text_reader: TextUiReader,
 ) {
     for (entity, accessible) in &mut query {
-        let label = calc_label(&mut text_reader, ui_children.iter_ui_children(entity));
+        let label = calc_label(
+            &mut text_reader,
+            ui_children.get(entity).into_iter().flatten().copied(),
+        );
         if let Some(mut accessible) = accessible {
             accessible.set_role(Role::Image);
             if let Some(label) = label {