bevy_ui: Implement CSS-like calculations for Style API

[vveisard]

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

When styling UI elements we often need to calculate styles properties using multiple values with mixed units (eg, a mixture of percents and pixels).

What solution would you like?

I propose implementing Val::Calc for bevy_ui::geometry::Val which represents a calculation to be evaluated. This should resemble the calc API in the web: https://developer.mozilla.org/en-US/docs/Web/CSS/calc

I would like to use plain arithmetic operators to create such calculations.

Usage of this API would look like:

NodeBundle {
  style: Style {
    position_type: PositionType::Absolute,
    height: Val::Percent(100.0) - Val::Px(10.0),
    ..default()
  },
  ..default()
},

What alternative(s) have you considered?

Workarounds without calculations resemble workarounds present in the web before calc: ie, dummy elements, manual calculation by measuring using JavaScript (which means you have to do your layout twice), etc. All poor solutions.

[alice-i-cecile]

Changes to layout like this first need to be implemented upstream in taffy, then exposed to users in Bevy :)

[nicoburns]

Taffy issue for this feature is DioxusLabs/taffy#225

[vveisard]

I see.

This issue is a duplicate of #5893, closing.