Option to support only rounded values #184

New Issue

2016-04-25T02:50:11-07:00

neophob commented

2016-04-25 02:50:11 -07:00

(Migrated from github.com)

I would like to support an option that the calculated values support only rounded value, e.g. instead "206.5" returned "207".

vjeux commented

2016-05-25 13:06:38 -07:00

(Migrated from github.com)

See fe5c0d2d06/React/Views/RCTShadowView.m (L95-L161) for how it is done in React Native in order to not suffer from precision loss.

See https://github.com/facebook/react-native/blob/fe5c0d2d0696b4fc5cdd65f1f2198c4f4363e543/React/Views/RCTShadowView.m#L95-L161 for how it is done in React Native in order to not suffer from precision loss.

woehrl01 commented

2016-11-18 02:57:09 -08:00

(Migrated from github.com)

I didn't have great success in using the code vom React Native.

I'm trying to move to the current code base.

I have added some rounding code to our own code some months ago (old code base).
Do you mind adding a flag (as "experimental feature" is now added), to have rounding code inside css-layout?

This is the changes I added to support rounding to full numbers and distribute the remaining space over the childs. The things added are rest, add and the Math.Floor. This is C# code if you're wondering.

if (!FloatUtil.floatsEqual(totalFlexible, 0))
{
    flexibleMainDim = (float)Math.Floor(remainingMainDim / totalFlexible);
}
else
{
    flexibleMainDim = remainingMainDim;
}

float rest = remainingMainDim - (flexibleMainDim * totalFlexible);

// The non flexible children can overflow the container, in this case
// we should just assume that there is no space available.
if (flexibleMainDim < 0)
{
    flexibleMainDim = 0;
}

currentFlexChild = firstFlexChild;
while (currentFlexChild != null)
{
  float add = 0;
  if (rest > 0 && float.IsNaN(currentFlexChild.MaxWidth))
  {
        add = Math.Min(1.0f, rest--);
  }

  // At this point we know the final size of the element in the main
  // dimension
  currentFlexChild.layout.dimensions[dim[mainAxis]] = boundAxis(currentFlexChild, mainAxis,
    flexibleMainDim * currentFlexChild.style.flex + add +
        ((currentFlexChild.style.padding.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + currentFlexChild.style.border.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis])) + (currentFlexChild.style.padding.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) + currentFlexChild.style.border.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis])))
  );
[...]

I didn't have great success in using the code vom React Native. I'm trying to move to the current code base. I have added some rounding code to our own code some months ago (old code base). Do you mind adding a flag (as "experimental feature" is now added), to have rounding code inside css-layout? This is the changes I added to support rounding to full numbers and distribute the remaining space over the childs. The things added are `rest`, `add` and the `Math.Floor`. This is C# code if you're wondering. ``` csharp if (!FloatUtil.floatsEqual(totalFlexible, 0)) { flexibleMainDim = (float)Math.Floor(remainingMainDim / totalFlexible); } else { flexibleMainDim = remainingMainDim; } float rest = remainingMainDim - (flexibleMainDim * totalFlexible); // The non flexible children can overflow the container, in this case // we should just assume that there is no space available. if (flexibleMainDim < 0) { flexibleMainDim = 0; } currentFlexChild = firstFlexChild; while (currentFlexChild != null) { float add = 0; if (rest > 0 && float.IsNaN(currentFlexChild.MaxWidth)) { add = Math.Min(1.0f, rest--); } // At this point we know the final size of the element in the main // dimension currentFlexChild.layout.dimensions[dim[mainAxis]] = boundAxis(currentFlexChild, mainAxis, flexibleMainDim * currentFlexChild.style.flex + add + ((currentFlexChild.style.padding.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + currentFlexChild.style.border.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis])) + (currentFlexChild.style.padding.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) + currentFlexChild.style.border.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]))) ); [...] ```

emilsjolander commented

2016-11-18 03:01:17 -08:00

(Migrated from github.com)

Thanks @woehrl01 I'm interested in pursuing this but don't have the time currently. If you submit a pull request i'm more than happy to have a look.

woehrl01 commented

2016-11-18 03:15:07 -08:00

(Migrated from github.com)

@emilsjolander yeah, I would provide a PR. Just want to ask in front, if there is a veto against ;)

emilsjolander commented

2016-11-18 03:27:16 -08:00

(Migrated from github.com)

@woehrl01 Nope! I really want this feature. I might have objections and questions to the exact implementation and I expect it may take a bit to review but the core concept is good. Looking forward to your contributions 👍

👍 1

woehrl01 commented

2016-11-18 08:12:40 -08:00

(Migrated from github.com)

Just had a look at the new layout code, I forgot that it that it changed fundamentaly due to the more W3C compliant implementation 😆 . Give me a few days, until I can dig a little deeper to find the necessary spots. 😉

Just had a look at the new layout code, I forgot that it that it changed fundamentaly due to the more W3C compliant implementation 😆 . Give me a few days, until I can dig a little deeper to find the necessary spots. :wink:

❤️ 1

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#184