Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: Image fills aspect_ratio of texture dimensions #13381

Closed

Conversation

bugsweeper
Copy link
Contributor

@bugsweeper bugsweeper commented May 15, 2024

Objective

Solution

  • Style::aspect_ratio is filled at same time as UiImageSize

Testing

Run example game_menu
image
and overflow_debug
image

@bugsweeper
Copy link
Contributor Author

@mockersf May I ask you for a review?

@alice-i-cecile alice-i-cecile added C-Bug An unexpected or incorrect behavior A-UI Graphical user interfaces, styles, layouts, and widgets labels May 15, 2024
@@ -107,6 +108,10 @@ pub fn update_image_content_size_system(
// multiply the image size by the scale factor to get the physical size
size: size.as_vec2() * combined_scale_factor,
}));
if let Some(mut style) = style {
Copy link
Member

Choose a reason for hiding this comment

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

A comment here would make this code easier to follow.

@@ -107,6 +108,10 @@ pub fn update_image_content_size_system(
// multiply the image size by the scale factor to get the physical size
size: size.as_vec2() * combined_scale_factor,
}));
if let Some(mut style) = style {
let Vec2 { x, y } = size.as_vec2();
style.aspect_ratio = Some(x / y);
Copy link

Choose a reason for hiding this comment

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

shouldn't this be the other way around? Using the style.aspect_ratio controlling image sizing? I mean, I had the idea that the Style is always a controlling component, never controlled by other components.

Copy link
Contributor

Choose a reason for hiding this comment

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

The way the web does it is that the intrinsic aspect ratio is separate to the aspect ratio style.

Copy link
Member

Choose a reason for hiding this comment

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

same, not a fan of changing the Style component. Also, if the user set a specific aspect_ratio, we shouldn't overwrite it

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The way the web does it is that the intrinsic aspect ratio is separate to the aspect ratio style.

I didn't find other place to set correct ratio, if you know such way, please, feel free to describe it, taffy knows nothing about type of nodes, the image should keep ratio, but div has no such restrictions.

if the user set a specific aspect_ratio, we shouldn't overwrite it

I agree that there shouldn't be overwriting, I will fix this.

Copy link
Contributor

Choose a reason for hiding this comment

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

I didn't find other place to set correct ratio, if you know such way, please, feel free to describe it, taffy knows nothing about type of nodes

Taffy needs to change to fix this sensibly. Either Taffy needs to allow "measurable" items to communicate their inherent aspect ratio. Or Taffy needs to pass the styles in to the measure function to allow measurable items to apply it themselves.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Either Taffy needs to allow "measurable" items to communicate their inherent aspect ratio. Or Taffy needs to pass the styles in to the measure function to allow measurable items to apply it themselves.

Looks like any of this changes is breaking change for Taffy. So we will not fix examples until Taffy becomes ready?
In the issue I proposed easy changes in the examples instead of bevy_ui, which will make examples looks good and has no side effects.

@alice-i-cecile alice-i-cecile added S-Needs-Review Needs reviewer attention (from anyone!) to move forward D-Modest A "normal" level of difficulty; suitable for simple features or challenging fixes labels May 22, 2024
@alice-i-cecile
Copy link
Member

Going with #13555.

github-merge-queue bot pushed a commit that referenced this pull request May 30, 2024
…zes (#13555)

# Objective

- Fixes #13155
- fixes #13517
- Supercedes #13381
- Requires DioxusLabs/taffy#661

## Solution

- Taffy has been updated to:
    - Apply size styles to absolutely positioned children
    - Pass the node's `Style` through to the measure function
- Bevy's image measure function has been updated to make use of this
style information

## Notes

- This is currently using a git version of Taffy. If this is tested as
fixing the issue then we can turn that into a Taffy 0.5 release (this
would be the only change between Taffy 0.4 and Taffy 0.5 so upgrading is
not expected to be an issue)
- This implementation may not be completely correct. I would have
preferred to extend Taffy's gentest infrastructure to handle images and
used that to nail down the correct behaviour. But I don't have time for
that atm so we'll have to iterate on this in future. This PR at least
puts that under Bevy's control.

## Testing

- I manually tested the game_menu_example (from
#13155)
- More testing is probably merited

---

## Changelog

No changelog should be required as it fixes a regression on `main` that
was not present in bevy 0.13. The changelog for "Taffy upgrade" may want
to be changed from 0.4 to 0.5 if this change gets merged.

---------

Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>
Co-authored-by: François Mockers <francois.mockers@vleue.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-Bug An unexpected or incorrect behavior D-Modest A "normal" level of difficulty; suitable for simple features or challenging fixes S-Needs-Review Needs reviewer attention (from anyone!) to move forward
Projects
None yet
Development

Successfully merging this pull request may close these issues.

UI: image with Absolute position don't render correctly
5 participants