bevy/examples/ui
ickshonpe 6d3965f520
Overflow clip margin (#15561)
# Objective

Limited implementation of the CSS property `overflow-clip-margin`
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-margin

Allows you to control the visible area for clipped content when using
overfllow-clip, -hidden, or -scroll and expand it with a margin.

Based on #15442

Fixes #15468

## Solution

Adds a new field to Style: `overflow_clip_margin: OverflowClipMargin`.
The field is ignored unless overflow-clip, -hidden or -scroll is set on
at least one axis.

`OverflowClipMargin` has these associated constructor functions:
```
pub const fn content_box() -> Self;
pub const fn padding_box() -> Self;
pub const fn border_box() -> Self;
```
You can also use the method `with_margin` to increases the size of the
visible area:
```
commands
  .spawn(NodeBundle {
      style: Style {
          width: Val::Px(100.),
          height: Val::Px(100.),
          padding: UiRect::all(Val::Px(20.)),
          border: UiRect::all(Val::Px(5.)),
          overflow: Overflow::clip(),
          overflow_clip_margin: OverflowClipMargin::border_box().with_margin(25.),
          ..Default::default()
      },
      border_color: Color::BLACK.into(),
      background_color: GRAY.into(),
      ..Default::default()
  })
```
`with_margin` expects a length in logical pixels, negative values are
clamped to zero.

## Notes
* To keep this PR as simple as possible I omitted responsive margin
values support. This could be added in a follow up if we want it.
* CSS also supports a `margin-box` option but we don't have access to
the margin values in `Node` so it's probably not feasible to implement
atm.

## Testing

```cargo run --example overflow_clip_margin```

<img width="396" alt="overflow-clip-margin" src="https://github.com/user-attachments/assets/07b51cd6-a565-4451-87a0-fa079429b04b">

## Migration Guide

Style has a new field `OverflowClipMargin`.  It allows users to set the visible area for clipped content when using overflow-clip, -hidden, or -scroll and expand it with a margin.

There are three associated constructor functions `content_box`, `padding_box` and `border_box`:
* `content_box`: elements painted outside of the content box area (the innermost part of the node excluding the padding and border) of the node are clipped. This is the new default behaviour.
* `padding_box`: elements painted outside outside of the padding area of the node are clipped. 
* `border_box`:  elements painted outside of the bounds of the node are clipped. This matches the behaviour from Bevy 0.14.

There is also a `with_margin` method that increases the size of the visible area by the given number in logical pixels, negative margin values are clamped to zero.

`OverflowClipMargin` is ignored unless overflow-clip, -hidden or -scroll is also set on at least one axis of the UI node.

---------

Co-authored-by: UkoeHB <37489173+UkoeHB@users.noreply.github.com>
2024-10-16 13:17:49 +00:00
..
borders.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
box_shadow.rs box shadow (#15204) 2024-10-08 16:26:17 +00:00
button.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
display_and_visibility.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
flex_layout.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
font_atlas_debug.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
ghost_nodes.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
grid.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
overflow.rs Clip to the UI node's content box (#15442) 2024-10-15 02:05:08 +00:00
overflow_clip_margin.rs Overflow clip margin (#15561) 2024-10-16 13:17:49 +00:00
overflow_debug.rs Text Rework cleanup (#15887) 2024-10-15 02:32:34 +00:00
relative_cursor_position.rs Migrate from Query::single and friends to Single (#15872) 2024-10-13 20:32:06 +00:00
render_ui_to_texture.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
scroll.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
size_constraints.rs Migrate from Query::single and friends to Single (#15872) 2024-10-13 20:32:06 +00:00
text.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
text_debug.rs Text Rework cleanup (#15887) 2024-10-15 02:32:34 +00:00
text_wrap_debug.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
transparency_ui.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
ui.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
ui_material.rs Replace Handle<M: UiMaterial> component with UiMaterialHandle wrapper (#15740) 2024-10-08 19:07:58 +00:00
ui_scaling.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
ui_texture_atlas.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
ui_texture_atlas_slice.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
ui_texture_slice.rs split up TextStyle (#15857) 2024-10-13 17:06:22 +00:00
ui_texture_slice_flip_and_tile.rs Migrate cameras to required components (#15641) 2024-10-05 01:59:52 +00:00
viewport_debug.rs Migrate cameras to required components (#15641) 2024-10-05 01:59:52 +00:00
window_fallthrough.rs Migrate from Query::single and friends to Single (#15872) 2024-10-13 20:32:06 +00:00
z_index.rs Migrate cameras to required components (#15641) 2024-10-05 01:59:52 +00:00