Skip to content

Added Cover and Contain scaling modes for ImageNode#24786

Open
Kees-van-Beilen wants to merge 4 commits into
bevyengine:mainfrom
Kees-van-Beilen:main
Open

Added Cover and Contain scaling modes for ImageNode#24786
Kees-van-Beilen wants to merge 4 commits into
bevyengine:mainfrom
Kees-van-Beilen:main

Conversation

@Kees-van-Beilen

@Kees-van-Beilen Kees-van-Beilen commented Jun 27, 2026

Copy link
Copy Markdown
Contributor
  • Added Cover and Contain variants in NodeImageMode
  • Modified image_scaling test to now also show Cover and Contain

Objective

Solution

  • Added Two cases Contain & Cover to NodeImageMode
  • Added bounding_rect_size in prepare_nodes for images. Which replaces rect_size in the point ans position calculation.
  • Added UiItemScaling, which is a per axis scaling mode (Stretch, Contain, Cover), to ExtractedUiItem::Node. To ensure future refactors remain easy

Testing

  • Modified the image_node_resizing example to also test the new modes, these changes have been pushed.
  • Locally tested Rect and TextureAtlas behaviour, which seems to be in order.
  • I'm unaware of more cases that could mess with this. In any case when the new feature isn't used, then the ui_rendering_system will behave like it used to before this commit.

Showcase

Click to view showcase

This PR adds the following public cases:

  • NodeImageMode::Contain
  • NodeImageMode::Cover

These do exactly the same as their css counterparts. Example showcase of the new scaling modes in action:

image showcasing the new scaling modes

- Added Cover and Contain variants in ImageScalingMode
- Modified image_scaling test to now also show Cover and Contain
@alice-i-cecile alice-i-cecile added C-Feature A new feature, making something new possible A-UI Graphical user interfaces, styles, layouts, and widgets X-Uncontroversial This work is generally agreed upon 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 labels Jun 28, 2026
@alice-i-cecile alice-i-cecile requested a review from ickshonpe June 28, 2026 18:45
@github-project-automation github-project-automation Bot moved this to Needs SME Triage in UI Jun 28, 2026

@ickshonpe ickshonpe left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Technically seems good, both Cover and Contain seem to work correctly with different aspect ratios and compose with clipping etc.

I think though the API doesn't need to be per-axis and the image rect calculations would be better placed in the image extraction function.

Border(u32), // shader flags
}

#[derive(Default, Clone, Copy, Debug, PartialEq)]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I'm not sure it makes sense for this to be a per-axis settings, aspect-ratio preservation is inherently 2d. And it'd probably clarify whatever the clamp_v_to_cover confusion is about.

atlas_scaling: Option<Vec2>,
flip_x: bool,
flip_y: bool,
scaling_mode: UiItemScaling,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I think it would make more sense to do the image fit calculations in the extraction function. The prepare function isn't the best place for logic like this.

Suggested change
scaling_mode: UiItemScaling,

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-Modest A "normal" level of difficulty; suitable for simple features or challenging fixes S-Needs-Review Needs reviewer attention (from anyone!) to move forward X-Uncontroversial This work is generally agreed upon

Projects

Status: Needs SME Triage

Development

Successfully merging this pull request may close these issues.

3 participants