Add feature to use percentage as value unit

Summary:
Adds the feature to use percentage as a value unit.

You can use the function ```YGPx(float)``` and ```YGPercent(float)``` for convenience.

I did some benchmarks:

```
Without Percentage Feature - Release x86:

Stack with flex: median: 0.000000 ms, stddev: 0.146683 ms
Align stretch in undefined axis: median: 0.000000 ms, stddev: 0.136525 ms
Nested flex: median: 0.000000 ms, stddev: 0.490101 ms
Huge nested layout: median: 23.000000 ms, stddev: 0.928291 ms

Stack with flex: median: 0.000000 ms, stddev: 0.170587 ms
Align stretch in undefined axis: median: 0.000000 ms, stddev: 0.143384 ms
Nested flex: median: 0.000000 ms, stddev: 0.477791 ms
Huge nested layout: median: 22.000000 ms, stddev: 2.129779 ms

With Percentage Feature - Release x86:

Stack with flex: median: 0.000000 ms, stddev: 0.132951 ms
Align stretch in undefined axis: median: 0.000000 ms, stddev: 0.136525 ms
Nested flex: median: 0.000000 ms, stddev: 0.489570 ms
Huge nested layout: median: 21.000000 ms, stddev: 1.390476 ms
Closes https://github.com/facebook/yoga/pull/258

Reviewed By: dshahidehpour

Differential Revision: D4361945

Pulled By: emilsjolander

fbshipit-source-id: a8f5bc63ad352eb9410d792729e56664468cd76a
This commit is contained in:
Lukas Woehrl
2017-01-02 05:20:37 -08:00
committed by Facebook Github Bot
parent 6f462a72bf
commit a85bd4ad2a
48 changed files with 4948 additions and 1209 deletions

View File

@@ -7,10 +7,18 @@
* of patent rights can be found in the PATENTS file in the same directory.
*/
function toFloatString(n) {
function toValueCpp(value) {
var n = value.toString().replace('px','').replace('%','');
return n + (Number(n) == n && n % 1 !== 0 ? 'f' : '');
}
function toFunctionName(value) {
if (value.indexOf('%') >= 0){
return 'Percent';
}
return '';
}
var CPPEmitter = function() {
Emitter.call(this, 'cpp', ' ');
};
@@ -66,7 +74,7 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
}},
AssertEQ:{value:function(v0, v1) {
this.push('ASSERT_FLOAT_EQ(' + toFloatString(v0) + ', ' + v1 + ');');
this.push('ASSERT_FLOAT_EQ(' + toValueCpp(v0) + ', ' + v1 + ');');
}},
YGAlignAuto:{value:'YGAlignAuto'},
@@ -133,90 +141,90 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
}},
YGNodeStyleSetAlignContent:{value:function(nodeName, value) {
this.push('YGNodeStyleSetAlignContent(' + nodeName + ', ' + value + ');');
this.push('YGNodeStyleSetAlignContent(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetAlignItems:{value:function(nodeName, value) {
this.push('YGNodeStyleSetAlignItems(' + nodeName + ', ' + value + ');');
this.push('YGNodeStyleSetAlignItems(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetAlignSelf:{value:function(nodeName, value) {
this.push('YGNodeStyleSetAlignSelf(' + nodeName + ', ' + value + ');');
this.push('YGNodeStyleSetAlignSelf(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetBorder:{value:function(nodeName, edge, value) {
this.push('YGNodeStyleSetBorder(' + nodeName + ', ' + edge + ', ' + toFloatString(value) + ');');
this.push('YGNodeStyleSetBorder(' + nodeName + ', ' + edge + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetDirection:{value:function(nodeName, value) {
this.push('YGNodeStyleSetDirection(' + nodeName + ', ' + value + ');');
this.push('YGNodeStyleSetDirection(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetFlexBasis:{value:function(nodeName, value) {
this.push('YGNodeStyleSetFlexBasis(' + nodeName + ', ' + toFloatString(value) + ');');
this.push('YGNodeStyleSetFlexBasis' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetFlexDirection:{value:function(nodeName, value) {
this.push('YGNodeStyleSetFlexDirection(' + nodeName + ', ' + value + ');');
this.push('YGNodeStyleSetFlexDirection(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetFlexGrow:{value:function(nodeName, value) {
this.push('YGNodeStyleSetFlexGrow(' + nodeName + ', ' + toFloatString(value) + ');');
this.push('YGNodeStyleSetFlexGrow(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetFlexShrink:{value:function(nodeName, value) {
this.push('YGNodeStyleSetFlexShrink(' + nodeName + ', ' + toFloatString(value) + ');');
this.push('YGNodeStyleSetFlexShrink(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetFlexWrap:{value:function(nodeName, value) {
this.push('YGNodeStyleSetFlexWrap(' + nodeName + ', ' + value + ');');
this.push('YGNodeStyleSetFlexWrap(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetHeight:{value:function(nodeName, value) {
this.push('YGNodeStyleSetHeight(' + nodeName + ', ' + toFloatString(value) + ');');
this.push('YGNodeStyleSetHeight' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetJustifyContent:{value:function(nodeName, value) {
this.push('YGNodeStyleSetJustifyContent(' + nodeName + ', ' + value + ');');
this.push('YGNodeStyleSetJustifyContent(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetMargin:{value:function(nodeName, edge, value) {
this.push('YGNodeStyleSetMargin(' + nodeName + ', ' + edge + ', ' + toFloatString(value) + ');');
this.push('YGNodeStyleSetMargin' + toFunctionName(value) + '(' + nodeName + ', ' + edge + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetMaxHeight:{value:function(nodeName, value) {
this.push('YGNodeStyleSetMaxHeight(' + nodeName + ', ' + toFloatString(value) + ');');
this.push('YGNodeStyleSetMaxHeight' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetMaxWidth:{value:function(nodeName, value) {
this.push('YGNodeStyleSetMaxWidth(' + nodeName + ', ' + toFloatString(value) + ');');
this.push('YGNodeStyleSetMaxWidth' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetMinHeight:{value:function(nodeName, value) {
this.push('YGNodeStyleSetMinHeight(' + nodeName + ', ' + toFloatString(value) + ');');
this.push('YGNodeStyleSetMinHeight' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetMinWidth:{value:function(nodeName, value) {
this.push('YGNodeStyleSetMinWidth(' + nodeName + ', ' + toFloatString(value) + ');');
this.push('YGNodeStyleSetMinWidth' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetOverflow:{value:function(nodeName, value) {
this.push('YGNodeStyleSetOverflow(' + nodeName + ', ' + value + ');');
this.push('YGNodeStyleSetOverflow(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetPadding:{value:function(nodeName, edge, value) {
this.push('YGNodeStyleSetPadding(' + nodeName + ', ' + edge + ', ' + toFloatString(value) + ');');
this.push('YGNodeStyleSetPadding' + toFunctionName(value) + '(' + nodeName + ', ' + edge + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetPosition:{value:function(nodeName, edge, value) {
this.push('YGNodeStyleSetPosition(' + nodeName + ', ' + edge + ', ' + toFloatString(value) + ');');
this.push('YGNodeStyleSetPosition' + toFunctionName(value) + '(' + nodeName + ', ' + edge + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetPositionType:{value:function(nodeName, value) {
this.push('YGNodeStyleSetPositionType(' + nodeName + ', ' + value + ');');
this.push('YGNodeStyleSetPositionType(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
YGNodeStyleSetWidth:{value:function(nodeName, value) {
this.push('YGNodeStyleSetWidth(' + nodeName + ', ' + toFloatString(value) + ');');
this.push('YGNodeStyleSetWidth' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
}},
});