Mirrors/bevy
2
0
Fork 0
mirror of https://github.com/bevyengine/bevy synced 2024-11-25 06:00:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

#14143 - fix bevy_ui padding (#14777)

Browse source 
# Objective

fixes #14143

## Solution

- removed the temporary blocker if statement when setting padding in
`Style`
- adjusted the `layout_location` and `layout_size` so they use
`layout.padding` which we already get from Taffy

## Testing

- this is the test code I used:
```rust
use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .run();
}

fn setup(
    mut commands: Commands,
    asset_server: Res<AssetServer>,
){
    let font = asset_server.load("fonts/FiraSans-Bold.ttf");
    commands.spawn(Camera2dBundle::default());

    commands
        .spawn(NodeBundle {
            style: Style {
                width: Val::Px(200.),
                height: Val::Px(100.),
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                align_self: AlignSelf::Center,
                justify_self: JustifySelf::Center,
                ..Default::default()
            },
            background_color: BackgroundColor(Color::srgb(0.,1., 1.)),
            ..Default::default()
        })
        .with_children(|builder| {
            builder.spawn((TextBundle::from_section(
                    "Hello World",
                    TextStyle {
                        font,
                        font_size: 32.0,
                        color: Color::WHITE,
                        },
                ).with_style(Style {
                    padding: UiRect::all(Val::Px(10.)),
                    width: Val::Px(100.),
                    height: Val::Px(100.),
                    ..Default::default()
                }).with_background_color(Color::srgb(1.,0., 0.)),
            ));
            // spawn an image bundle
            builder.spawn(ImageBundle {
                style: Style {
                    padding: UiRect::all(Val::Px(10.)),
                    width: Val::Px(100.),
                    height: Val::Px(100.),
                    ..Default::default()
                },
                image: asset_server.load("square.png").into(),
                ..Default::default()
            });
        });
}
```

- I tested 5 cases: 10px padding from all sides, and 10px padding from
left, right, bottom, and top separately

- **For reviewers**: please check more cases or try to run it on some
more complicated real-world UI

## Showcase

<img width="374" alt="Screenshot 2024-08-16 at 09 28 04"
src="https://github.com/user-attachments/assets/59b85b00-e255-4669-be13-a287ef35d4d9">
<img width="288" alt="Screenshot 2024-08-16 at 09 28 47"
src="https://github.com/user-attachments/assets/170a79b1-ec9c-45f9-82f5-ba7fa4029334">
<img width="274" alt="Screenshot 2024-08-16 at 09 45 16"
src="https://github.com/user-attachments/assets/e3fd9b59-b41f-427d-8c07-5acdf1dc5ecf">
<img width="292" alt="Screenshot 2024-08-16 at 09 45 36"
src="https://github.com/user-attachments/assets/c4f708aa-3f0d-4ff3-b779-0d4ed5f6ba73">
<img width="261" alt="Screenshot 2024-08-16 at 09 45 58"
src="https://github.com/user-attachments/assets/eba1e26f-04ca-4178-87c8-3a79daff3a9a">

---------

Co-authored-by: dpeke <dpekelis@funstage.com>
This commit is contained in:
Nihilistas 2024-08-16 23:22:44 +02:00 committed by GitHub
parent f88ab5a1f2
commit ae74df3464
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
crates/bevy_ui/src/layout/convert.rs
View file

@ -66,7 +66,7 @@ impl UiRect {
pub fn from_style(
context: &LayoutContext,
style: &Style,
ignore_padding_and_border: bool,
ignore_border: bool,
) -> taffy::style::Style {
taffy::style::Style {
display: style.display.into(),
@ -93,18 +93,12 @@ pub fn from_style(
margin: style
.margin
.map_to_taffy_rect(|m| m.into_length_percentage_auto(context)),
// Ignore padding for leaf nodes as it isn't implemented in the rendering engine.
// TODO: Implement rendering of padding for leaf nodes
padding: if ignore_padding_and_border {
taffy::Rect::zero()
} else {
style
.padding
.map_to_taffy_rect(|m| m.into_length_percentage(context))
},
padding: style
.padding
.map_to_taffy_rect(|m| m.into_length_percentage(context)),
// Ignore border for leaf nodes as it isn't implemented in the rendering engine.
// TODO: Implement rendering of border for leaf nodes
border: if ignore_padding_and_border {
border: if ignore_border {
taffy::Rect::zero()
} else {
style

14
crates/bevy_ui/src/layout/mod.rs
View file

@ -264,10 +264,16 @@ pub fn ui_layout_system(
let Ok(layout) = ui_surface.get_layout(entity) else {
return;
};
let layout_size =
inverse_target_scale_factor * Vec2::new(layout.size.width, layout.size.height);
let layout_location =
inverse_target_scale_factor * Vec2::new(layout.location.x, layout.location.y);
let layout_size = inverse_target_scale_factor
* Vec2::new(
layout.size.width - layout.padding.left - layout.padding.right,
layout.size.height - layout.padding.top - layout.padding.bottom,
);
let layout_location = inverse_target_scale_factor
* Vec2::new(
layout.location.x + layout.padding.left,
layout.location.y + layout.padding.top,
);
absolute_location += layout_location;