Add overflow_debug example

[doup]

Objective

• Add a new example that helps debug different UI overflow scenarios
• This example tests the clipping behavior for images and text when the node is moved, scaled or rotated.

Solution

• Add a new overflow_debug example

Preview

Note: Only top-left is working properly right now.

bevy-overflow-debug.mp4

---

Related #8095, #8167

[ickshonpe]

Maybe needs some comments here because the plan has been to move away from using the Transform hierarchy for UI nodes. Also, the layout only supports rectangular axis-aligned UI nodes so modifying the Transform on nodes with children especially can just end up in a mess. So users need to be warned against naively applying arbitrary rotations and scaling like they would with sprites and expecting it to just work.

[doup]

Yup, I know transform should be derived from style… but didn't find any other way to change scale/rotation. I wanted to force scale/rotation (translation it's used to update top/left) to see how it behaves.

Although, now that I think about it… maybe it doesn't make any sense to put these in the example if it's not a current feature. Or… it could be used to fix scale/rotation? Although, probably this should be done at shader/stencil/mask/whatever… level; using textures and composition and not by cutting geometry. (?)

[ickshonpe]

I've been working on #8240 which fixes some of the problems, but I'm not too sure about the API though.
It's not necessarily a problem that the example cases don't all display correctly, we could just put a WIP label or something. Users need to be aware that the clipping is very basic.

[ickshonpe]

Actually thinking about it this will be really good to adapt to use as a test case for the UI Transform PR if you don't mind 😄

[doup]

Hey, I had a surgery a couple of days ago, I don't think I'll check the PRs anytime soon. Please fork it and do as you wish.

[cart]

I think its reasonable to merge this as-is. Just make whatever changes are needed in #8240.