Skip to content

Conversation

@ickshonpe
Copy link
Contributor

@ickshonpe ickshonpe commented Dec 16, 2024

Objective

Allow users to enable or disable layout rounding for specific UI nodes and their descendants.

Fixes #16731

Solution

New component LayoutConfig that can be added to any UiNode entity. Setting the use_rounding field of LayoutConfig determines if the Node and its descendants should be given rounded or unrounded coordinates.

Testing

Not tested this extensively but it seems to work and it's not very complicated.
This really basic test app returns fractional coords:

use bevy::prelude::*;

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

fn setup(mut commands: Commands) {
    commands.spawn(Camera2d);
    commands.spawn((
        Node {
            left: Val::Px(0.1),
            width: Val::Px(100.1),
            height: Val::Px(100.1),
            ..Default::default()
        },
        LayoutConfig { use_rounding: false },
    ));
}

fn report(node: Query<(Ref<ComputedNode>, &GlobalTransform)>) {
    for (c, g) in node.iter() {
        if c.is_changed() {
            println!("{:#?}", c);
            println!("position = {:?}", g.to_scale_rotation_translation().2);
        }
    }
}

…ut rounding for a node and all its descendants.

Added `LayoutConfig` to the node query used by the recursive update function and disable/enable rounding depending on its setting.
@ickshonpe ickshonpe added C-Feature A new feature, making something new possible A-UI Graphical user interfaces, styles, layouts, and widgets D-Straightforward Simple bug fixes and API improvements, docs, test and examples S-Needs-Review Needs reviewer attention (from anyone!) to move forward labels Dec 16, 2024
@alice-i-cecile
Copy link
Member

@MatrixDev can I get your review here please?

@MatrixDev
Copy link

@MatrixDev can I get your review here please?

@alice-i-cecile, sure, I'll try to do it later today.

Copy link
Member

@alice-i-cecile alice-i-cecile left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sad to add a branch here, but the use case in the linked issue is very reasonable.

@MatrixDev
Copy link

MatrixDev commented Dec 16, 2024

@alice-i-cecile, I can confirm that it becomes significantly smoother with this change and no longer pixel-aligned.

With use_rounding: false:
sc

With use_rounding: true:
cc

There is still one problem with bars but I don't know if it is related or not. All three bars (red, blue and yellow) are inside of the column with zero row_gap/colum_gap and ideally those should always stick to each other but sometimes there are gaps shown between them (in both with or without rounding):
Screenshot 2024-12-16 at 22 20 49
Screenshot 2024-12-16 at 22 20 55
Screenshot 2024-12-16 at 22 21 01
Screenshot 2024-12-16 at 22 21 07

In any case, from my point of view, original issue is resolved now.

@alice-i-cecile alice-i-cecile added S-Waiting-on-Author The author needs to make changes or address concerns before this can be merged and removed S-Needs-Review Needs reviewer attention (from anyone!) to move forward labels Dec 16, 2024
@JeanMertz
Copy link
Contributor

Any reason to add this as a field to the new LayoutConfig struct, as opposed to a newtype struct (or enum) specifically for this purpose? Do we expect more layout options to be configurable soon?

@ickshonpe
Copy link
Contributor Author

Sad to add a branch here, but the use case in the linked issue is very reasonable.

Yeah taffy's rounding api is really unpleasant with how this setting is used both to enable or disable rounding during updates, and then afterwards to access the unrounded values. I'll make a taffy PR as well with some alternative then we'd be able to clean this up too later.

@ickshonpe
Copy link
Contributor Author

Any reason to add this as a field to the new LayoutConfig struct, as opposed to a newtype struct (or enum) specifically for this purpose? Do we expect more layout options to be configurable soon?

I'm not really sure. I'm not against using an enum or an UnroundedLayout marker component or something instead. I guess I think if we did have any other similar niche configuration options it'd be preferable to consolidate them together in a single struct like this for the sake of discoverability. If there were other settings we'd have to add an inherit from parent option to the use_rounding setting.

@ickshonpe ickshonpe added S-Needs-Review Needs reviewer attention (from anyone!) to move forward and removed S-Waiting-on-Author The author needs to make changes or address concerns before this can be merged labels Dec 19, 2024
Co-authored-by: UkoeHB <37489173+UkoeHB@users.noreply.github.com>
@alice-i-cecile alice-i-cecile added this to the 0.16 milestone Dec 23, 2024
Co-authored-by: UkoeHB <37489173+UkoeHB@users.noreply.github.com>
@alice-i-cecile alice-i-cecile added S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it and removed S-Needs-Review Needs reviewer attention (from anyone!) to move forward labels Dec 24, 2024
@alice-i-cecile alice-i-cecile added this pull request to the merge queue Dec 24, 2024
Merged via the queue into bevyengine:main with commit bfc2a88 Dec 24, 2024
29 checks passed
pcwalton pushed a commit to pcwalton/bevy that referenced this pull request Dec 25, 2024
# Objective

Allow users to enable or disable layout rounding for specific UI nodes
and their descendants.

Fixes bevyengine#16731

## Solution

New component `LayoutConfig` that can be added to any UiNode entity.
Setting the `use_rounding` field of `LayoutConfig` determines if the
Node and its descendants should be given rounded or unrounded
coordinates.

## Testing

Not tested this extensively but it seems to work and it's not very
complicated.
This really basic test app returns fractional coords:

```rust
use bevy::prelude::*;

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

fn setup(mut commands: Commands) {
    commands.spawn(Camera2d);
    commands.spawn((
        Node {
            left: Val::Px(0.1),
            width: Val::Px(100.1),
            height: Val::Px(100.1),
            ..Default::default()
        },
        LayoutConfig { use_rounding: false },
    ));
}

fn report(node: Query<(Ref<ComputedNode>, &GlobalTransform)>) {
    for (c, g) in node.iter() {
        if c.is_changed() {
            println!("{:#?}", c);
            println!("position = {:?}", g.to_scale_rotation_translation().2);
        }
    }
}
```

---------

Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>
Co-authored-by: UkoeHB <37489173+UkoeHB@users.noreply.github.com>
ecoskey pushed a commit to ecoskey/bevy that referenced this pull request Jan 6, 2025
# Objective

Allow users to enable or disable layout rounding for specific UI nodes
and their descendants.

Fixes bevyengine#16731

## Solution

New component `LayoutConfig` that can be added to any UiNode entity.
Setting the `use_rounding` field of `LayoutConfig` determines if the
Node and its descendants should be given rounded or unrounded
coordinates.

## Testing

Not tested this extensively but it seems to work and it's not very
complicated.
This really basic test app returns fractional coords:

```rust
use bevy::prelude::*;

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

fn setup(mut commands: Commands) {
    commands.spawn(Camera2d);
    commands.spawn((
        Node {
            left: Val::Px(0.1),
            width: Val::Px(100.1),
            height: Val::Px(100.1),
            ..Default::default()
        },
        LayoutConfig { use_rounding: false },
    ));
}

fn report(node: Query<(Ref<ComputedNode>, &GlobalTransform)>) {
    for (c, g) in node.iter() {
        if c.is_changed() {
            println!("{:#?}", c);
            println!("position = {:?}", g.to_scale_rotation_translation().2);
        }
    }
}
```

---------

Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>
Co-authored-by: UkoeHB <37489173+UkoeHB@users.noreply.github.com>
mrchantey pushed a commit to mrchantey/bevy that referenced this pull request Feb 4, 2025
# Objective

Allow users to enable or disable layout rounding for specific UI nodes
and their descendants.

Fixes bevyengine#16731

## Solution

New component `LayoutConfig` that can be added to any UiNode entity.
Setting the `use_rounding` field of `LayoutConfig` determines if the
Node and its descendants should be given rounded or unrounded
coordinates.

## Testing

Not tested this extensively but it seems to work and it's not very
complicated.
This really basic test app returns fractional coords:

```rust
use bevy::prelude::*;

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

fn setup(mut commands: Commands) {
    commands.spawn(Camera2d);
    commands.spawn((
        Node {
            left: Val::Px(0.1),
            width: Val::Px(100.1),
            height: Val::Px(100.1),
            ..Default::default()
        },
        LayoutConfig { use_rounding: false },
    ));
}

fn report(node: Query<(Ref<ComputedNode>, &GlobalTransform)>) {
    for (c, g) in node.iter() {
        if c.is_changed() {
            println!("{:#?}", c);
            println!("position = {:?}", g.to_scale_rotation_translation().2);
        }
    }
}
```

---------

Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>
Co-authored-by: UkoeHB <37489173+UkoeHB@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-UI Graphical user interfaces, styles, layouts, and widgets C-Feature A new feature, making something new possible D-Straightforward Simple bug fixes and API improvements, docs, test and examples S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bevy UI nodes are always pixel-aligned and there is no way to disable it

6 participants