mirror of
https://github.com/bevyengine/bevy
synced 2024-11-22 12:43:34 +00:00
b78a060af2
# Objective Change UI clipping to respect borders and padding. Fixes #15335 ## Solution Based on #15163 1. Add a `padding` field to `Node`. 2. In `ui_layout_size` copy the padding values from taffy to `Node::padding`. 4. Determine the node's content box (The innermost part of the node excluding the padding and border). 5. In `update_clipping` perform the clipping intersection with the node's content box. ## Notes * `Rect` probably needs some helper methods for working with insets but because `Rect` and `BorderRect` are in different crates it's awkward to add them. Left for a follow up. * We could have another `Overflow` variant (probably called `Overflow::Hidden`) to that clips inside of the border box instead of the content box. Left it out here as I'm not certain about the naming or behaviour though. If this PR is adopted, it would be trivial to add a `Hidden` variant in a follow up. * Depending on UI scaling there are sometimes gaps in the layout: <img width="532" alt="rounding-bug" src="https://github.com/user-attachments/assets/cc29aa0d-44fe-403f-8f0e-cd28a8b1d1b3"> This is caused by existing bugs in `ui_layout_system`'s coordinates rounding and not anything to do with the changes in this PR. ## Testing This PR also changes the `overflow` example to display borders on the overflow nodes so you can see how this works: #### main (The image is clipped at the edges of the node, overwriting the border). <img width="722" alt="main_overflow" src="https://github.com/user-attachments/assets/eb316cd0-fff8-46ee-b481-e0cd6bab3f5c"> #### this PR (The image is clipped at the edges of the node's border). <img width="711" alt="content-box-clip" src="https://github.com/user-attachments/assets/fb302e56-9302-47b9-9a29-ec3e15fe9a9f"> ## Migration Guide Migration guide is on #15561 --------- Co-authored-by: UkoeHB <37489173+UkoeHB@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| borders.rs | ||
| box_shadow.rs | ||
| button.rs | ||
| display_and_visibility.rs | ||
| flex_layout.rs | ||
| font_atlas_debug.rs | ||
| ghost_nodes.rs | ||
| grid.rs | ||
| overflow.rs | ||
| overflow_debug.rs | ||
| relative_cursor_position.rs | ||
| render_ui_to_texture.rs | ||
| scroll.rs | ||
| size_constraints.rs | ||
| text.rs | ||
| text_debug.rs | ||
| text_wrap_debug.rs | ||
| transparency_ui.rs | ||
| ui.rs | ||
| ui_material.rs | ||
| ui_scaling.rs | ||
| ui_texture_atlas.rs | ||
| ui_texture_atlas_slice.rs | ||
| ui_texture_slice.rs | ||
| ui_texture_slice_flip_and_tile.rs | ||
| viewport_debug.rs | ||
| window_fallthrough.rs | ||
| z_index.rs | ||