UI leaf node styling and scrollbars #19344

andrewzhurov · 2025-05-23T10:18:17Z

Objective

Enable layout and rendering of padding and border on UI leaf nodes.
As presently they're being ignored.

Fixes #6879
Fixes #11557
Fixes #17300 (duplicate of the above)

Scale-to-fit leaf node images.
As padding and border on these nodes "eat" available for image space.

Adds layout and render of scrollbars.

Solution

Provide Taffy with border and scrollbar sizes. (previously, border is set to Zero for leaf nodes, scrollbar_size always 0)
Measure text and images with regard to available_width. (needs an eye on it)
measure_fns make use of Taffy's available_size, which comes with borders, scrollbars and padding stripped out, so available_size for pure content.
known_sizes are disregarded as they include those (so it's a size of border box).
Previously they've been fine to use, as leaf nodes meant to have border_box = pure content size.
Also, images follow CSS's object-fit: contain; and that's not a default behavior in CSS. Default is to stretch. So perhaps that's something to change?
Adjust clip calculation for node's content to account for scrollbar sizes.
Cache it as ComputedContentClip (as content's clip, and not inherited from parent clip is now necessary for rendering UI leaf nodes)
Add scrollbar rendering (of track and thumb). (eyes wanted on whether that's efficient)
Scrollbar sizes are consts. (as CSS does not allow for Px val customization of scrollbar sizes, only coarse "auto" "thin" via scrollbar-width, so Px vals are not exposed to be configurable e.g., via a component)
ScrollbarColor component, required from Node can be used to specify track and thumb colors for node's scrollbars.
Switch from Node requiring ScrollPosition to manually enabling it for nodes with overflow scroll on any axis.
Preliminary work on enabling scroll for a reverse-ordered flexbox, where scroll position is meant to be in negative values - clamp scroll with this in mind. Yet present version of Taffy reports content_size that = layout_size for reverse-ordered flexboxes, so that does not fixes ScrollPositions does not work on Node with flex_direction set to RowReverse #17129 atm.

For rendering of a scale-to-fit image I've explored two approaches:

Modify it's Affine transform with scale, at extraction step. Worked. Seems simple.
But then I discovered the caveat, when clip cuts some part of an image (e.g., only top part of image is seen when scrolling), GLSL's UVs are not modified, so whole image texture is rendered on top-half rect, resulting in a "squashed" look.
Modify image's UV's to account for clipping. This way we have e.g., vertexes and UVs for top-half of the image.
That's the way it's done in PR. Images get clipped correctly (incl. flipped ones, as can be seen in borders example)
Eyes wanted on performance of the approach.

Testing

I performed visual testing on borders scroll and game_menu examples.
Ubuntu 25.04, X11

Showcase

Before / After

Screencast.From.2025-05-23.13-06-47.mp4

Screencast.From.2025-05-23.13-13-02.mp4

Can be run with cargo run --example borders on commits:
24cc495 (Extend borders example with text and images)
e976b54 (UI: add support for padding...)

Content now is rather lengthy, so it's put in a sclobbale container. typo

As presently the meant-to-be-scrollable list displays in full on a not-that-large screen. tweak scroll

github-actions · 2025-05-23T10:18:31Z

Welcome, new contributor!

Please make sure you've read our contributing guide and we look forward to reviewing your pull request shortly ✨

…; scrollbars! switch from internal import

github-actions · 2025-05-23T10:25:33Z

Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke!
You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-19344

If it's expected, please add the M-Deliberate-Rendering-Change label.

If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.

github-actions · 2025-05-23T10:29:02Z

Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke!
You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-19344

If it's expected, please add the M-Deliberate-Rendering-Change label.

If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.

Tuffy provides us content size that is stripped from border scroll padding sizes - available_width available_height. We need to figure out whether it's a hard constraint or not. If size styles are Auto - image need not scale to fit if it's less than available_size. So rendered size is min of image size and available size. If size is explicitly set via styles, then we scale image accordingly. This is similar to CSS's object-fit: contain; Which may not be expected as default, as I think of it.

ickshonpe

I haven't had a look at this properly yet and it might be better than I think.

IMO I'm probably against this though, I think it's much simpler to just disallow styling on leaf nodes containing content completely. If users want text or an image with borders and padding they can just wrap them in an intermediate parent Node.

Maybe if we could have some sort of common interface for content that handles recalculating the coordinates that's invisable to the update, clipping, interaction and extraction logics for each content type it might be okay, but that's still a lot of effort and extra complexity that seems unnecessary.

andrewzhurov · 2025-05-24T11:39:27Z

crates/bevy_ui/src/update.rs

-    if let Some(mut calculated_clip) = maybe_calculated_clip {
-        if let Some(inherited_clip) = maybe_inherited_clip {
-            // Replace the previous calculated clip with the inherited clipping rect
+    match (maybe_inherited_clip, maybe_calculated_clip) {
+        (Some(inherited_clip), None) => {
+            commands.entity(entity).try_insert(CalculatedClip {
+                clip: inherited_clip,
+            });
+        }
+        (Some(inherited_clip), Some(mut calculated_clip)) => {
            if calculated_clip.clip != inherited_clip {
                *calculated_clip = CalculatedClip {
                    clip: inherited_clip,
                };
            }
-        } else {
-            // No inherited clipping rect, remove the component
+        }
+        (None, Some(_)) => {
            commands.entity(entity).remove::<CalculatedClip>();
        }
-    } else if let Some(inherited_clip) = maybe_inherited_clip {
-        // No previous calculated clip, add a new CalculatedClip component with the inherited clipping rect
-        commands.entity(entity).try_insert(CalculatedClip {
-            clip: inherited_clip,
-        });
-    }
+        _ => {}
+    };


Just switches from nested ifs to a match

andrewzhurov · 2025-05-24T12:01:13Z

IMO I'm probably against this though, I think it's much simpler to just disallow styling on leaf nodes containing content completely. If users want text or an image with borders and padding they can just wrap them in an intermediate parent Node.

Yeah, that approach seems appealing.
May be confusing for those coming from HTML CSS world to not be able to slam padding border on images.
But is simpler. Both internally (no need to account for styles on every kind of content node on render) and externally, I kinda like the decoupling of box and content from the data point of view. May be a bit cumbersome to type though..

(no need to account for styles on every kind of content node on render)

Although that boils down to "add content_inset to content's tf".
And pass to prepare ComputedContentClip instead of ComputedClip (which is of parent).
In hindsight, I thought to +1 on having no styles on leaf nodes to save on complexity, but as I gave another look on the cost^.. have mixed feelings now. :) Curious about your opinion.

I modified the borders example to see how it'll look with children![content] (branch)
(without any style tweaks of this PR)

Screencast.From.2025-05-24.14-13-30.mp4

What seems broken:

scroll overscrolls
images seem to be measured and rendered improperly

But that would be relatively easy to fix, I guess.

…d-scrollbars

github-actions · 2025-05-26T02:36:21Z

It looks like your PR has been selected for a highlight in the next release blog post, but you didn't provide a release note.

Please review the instructions for writing release notes, then expand or revise the content in the release notes directory to showcase your changes.

JMS55 · 2025-05-26T18:18:59Z

I don't have the knowledge to review this PR, but I'm excited that we can finally add layout styling to text nodes!

andrewzhurov added 4 commits May 22, 2025 20:45

Add overflow scroll helper methods

ad0f423

Extend borders example with text and images

24cc495

Content now is rather lengthy, so it's put in a sclobbale container. typo

Increase the number of elements in scroll example & some misc

eeecd97

As presently the meant-to-be-scrollable list displays in full on a not-that-large screen. tweak scroll

Add BorderRect helper methods

c468312

UI: add support for padding and borders on leaf nodes; scaling images…

e976b54

…; scrollbars! switch from internal import

andrewzhurov force-pushed the ui-leaf-node-styling-and-scrollbars branch from a6a3dd4 to e976b54 Compare May 23, 2025 10:22

github-actions bot mentioned this pull request May 23, 2025

19344 bevyengine/bevy-example-runner#141

Closed

github-actions bot mentioned this pull request May 23, 2025

19344 bevyengine/bevy-example-runner#142

Closed

Rm forgotten to be removed arg in a test

1c2a6ad

ickshonpe reviewed May 24, 2025

View reviewed changes

andrewzhurov commented May 24, 2025

View reviewed changes

andrewzhurov added 5 commits May 24, 2025 15:21

Wrap doc link in <>

9398f09

Fix forgotten params change

629a3f4

Rm forgotten accidentally re-added ScrollPosition required comp

3dcf94e

Make lint happy

84d30de

Merge remote-tracking branch 'bevy/main' into ui-leaf-node-styling-an…

473ca4f

…d-scrollbars

alice-i-cecile added this to Alice's Work Planning May 26, 2025

alice-i-cecile moved this to Widget-ready in Alice's Work Planning May 26, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

UI leaf node styling and scrollbars #19344

UI leaf node styling and scrollbars #19344

Uh oh!

andrewzhurov commented May 23, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 23, 2025

Uh oh!

github-actions bot commented May 23, 2025

Uh oh!

github-actions bot commented May 23, 2025

Uh oh!

ickshonpe left a comment

Uh oh!

andrewzhurov May 24, 2025

Uh oh!

andrewzhurov commented May 24, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 26, 2025

Uh oh!

JMS55 commented May 26, 2025

Uh oh!

Uh oh!

Uh oh!

UI leaf node styling and scrollbars #19344

Are you sure you want to change the base?

UI leaf node styling and scrollbars #19344

Uh oh!

Conversation

andrewzhurov commented May 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Objective

Solution

Testing

Showcase

Uh oh!

github-actions bot commented May 23, 2025

Uh oh!

github-actions bot commented May 23, 2025

Uh oh!

github-actions bot commented May 23, 2025

Uh oh!

ickshonpe left a comment

Choose a reason for hiding this comment

Uh oh!

andrewzhurov May 24, 2025

Choose a reason for hiding this comment

Uh oh!

andrewzhurov commented May 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented May 26, 2025

Uh oh!

JMS55 commented May 26, 2025

Uh oh!

Uh oh!

andrewzhurov commented May 23, 2025 •

edited

Loading

andrewzhurov commented May 24, 2025 •

edited

Loading