Skip to content

UI node border styles #25730

Description

@ickshonpe

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

Support rendering borders in different styles:

Image

https://iqratechnology.com/academy/css-training/css-borders/
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-style

What solution would you like?

Use a BorderStyle component API. A border_style field on Node wouldn't be right, since styling won't affect the laid out border geometry.

BorderStyle should probably be an enum, or at least have an enum field to select the style.

CSS supports the following styles:

  • none
  • hidden
  • solid
  • dotted
  • dashed
  • double
  • groove
  • ridge
  • inset
  • outset

Since we don't support tables, there's no point in having "none" and "hidden".

My suggestion would be to start with an initial PR that supports Solid, Double, Inset, OutSet, Groove and Ridge styles.

The UI renderer is already capable of drawing all of them. We just need to query for the border style in extract_uinode_borders and render it accordingly. For Inset and Outset, just use a darker shade for the opposite edges. For Double, Groove and Ridge, queue two thinner borders instead of one. To draw curved corners correctly, the BorderRadius of the inset sub-borders will need to be clamped. I would be fine though if, to keep things simple, it ignores BorderRadius and only supports right angled corners for the new border styles.

Dashed and dotted borders are much more difficult and would need some math and changes to shaders.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

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 possibleS-Ready-For-ImplementationThis issue is ready for an implementation PR. Go for it!

    Type

    No type

    Projects

    • Status
      Needs SME Triage
    • Status
      Needs SME Triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions