Skip to content

Improved UI overflow API #15468

Closed
Closed
@ickshonpe

Description

What problem does this solve or what need does it fill?

Currently with OverflowAxis::Clip/Hidden/Scroll the node's clipping rect will be set to the node's bounds.
This isn't very natural since if you have a UI Node set to Overflow::Clip any overflowing content of its children's will spill over the node's border.

There is a PR in review #15442 that changes the clipping rect to the node's content-box (The innermost part of the node excluding the padding and border).

It's not difficult to implement support for other clipping options, so we should.

What solution would you like?

I'm not sure we can match all the CSS options anytime soon, so I suggest a simplified API:

pub enum OverflowAxis {
    /// Show overflowing items.
    Visible,
    /// Hide overflowing items by clipping.
    Clip(OverflowClipMargin),
    /// Hide overflowing items by influencing layout and then clipping.
    Hidden(OverflowClipMargin),
    /// Scroll overflowing items.
    Scroll(OverflowClipMargin),
}

pub struct OverflipClipMargin {
    /// Visible unclipped area
    pub clip_box: OverflowClipBox,
    /// Insets `clip_box` on all edges, can be negative
    pub inset: Val,
}

pub enum OverflowClipBox {
    /// Clip overflow outside the margin
    MarginBox,
    /// Clip overflow outside the border
    BorderBox,
    /// Clip overflow outside the padding
    PaddingBox,
    /// Clip any overflow outside the content box
    ContentBox,
}

With the usual const construction functions like OverflowClipMargin::padding_box() for clipping around the node's padding-box with no inset.

The Overflow struct would be unchanged but with some extra helper methods like:

impl Overflow {
    pub const fn clip_margin(clip_margin: OverflowClipMargin) -> Self {
        Self {
            x: OverflowAxis::Clip(clip_margin),
            y: OverflowAxis::Clip(clip_margin),
        }
    }
    
    // ..
}

The implementation just involves a few trivial changes to update_clipping, the only questions I have are about the API.

Notes

  • MarginBox might be tricky to support as Taffy's Layout doesn't return margin values. Probably should be left out of the initial PR.
  • Doesn't seem worth thinking about clip-path support until we have some sort of compositing.
  • OverflowClipMargin feels like it could be confusing to users. It matches the name of the similar CSS property but maybe OverflowClipBounds would be more intuitive.

Metadata

Assignees

No one assigned

    Labels

    A-RenderingDrawing game state to the screenA-UIGraphical user interfaces, styles, layouts, and widgetsC-FeatureA new feature, making something new possibleD-ModestA "normal" level of difficulty; suitable for simple features or challenging fixesS-Ready-For-ImplementationThis issue is ready for an implementation PR. Go for it!

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions