From 6a4b48ba6b18b342d18f84418f8e39b2b612dd00 Mon Sep 17 00:00:00 2001
From: Nihilistas <69765352+Nihilistas@users.noreply.github.com>
Date: Fri, 16 Aug 2024 23:22:44 +0200
Subject: [PATCH] #14143 - fix bevy_ui padding (#14777)

# 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>
---
 crates/bevy_ui/src/layout/convert.rs | 16 +++++-----------
 crates/bevy_ui/src/layout/mod.rs     | 14 ++++++++++----
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/crates/bevy_ui/src/layout/convert.rs b/crates/bevy_ui/src/layout/convert.rs
index 2cc7c3b32c..8a4a1ae95e 100644
--- a/crates/bevy_ui/src/layout/convert.rs
+++ b/crates/bevy_ui/src/layout/convert.rs
@@ -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
diff --git a/crates/bevy_ui/src/layout/mod.rs b/crates/bevy_ui/src/layout/mod.rs
index 11cacda069..cfc325b3e2 100644
--- a/crates/bevy_ui/src/layout/mod.rs
+++ b/crates/bevy_ui/src/layout/mod.rs
@@ -254,10 +254,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;