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,6 +7,18 @@
* of patent rights can be found in the PATENTS file in the same directory.
*/
function toValueJava(value) {
var n = value.toString().replace('px','').replace('%','');
return n + (Number(n) == n && n % 1 !== 0 ? '' : '');
}
function toMethodName(value) {
if (value.indexOf('%') >= 0){
return 'Percent';
}
return '';
}
var JavaEmitter = function() {
Emitter.call(this, 'java', ' ');
};
@@ -148,90 +160,90 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
}},
YGNodeStyleSetAlignContent:{value:function(nodeName, value) {
this.push(nodeName + '.setAlignContent(' + value + ');');
this.push(nodeName + '.setAlignContent(' + toValueJava(value) + ');');
}},
YGNodeStyleSetAlignItems:{value:function(nodeName, value) {
this.push(nodeName + '.setAlignItems(' + value + ');');
this.push(nodeName + '.setAlignItems(' + toValueJava(value) + ');');
}},
YGNodeStyleSetAlignSelf:{value:function(nodeName, value) {
this.push(nodeName + '.setAlignSelf(' + value + ');');
this.push(nodeName + '.setAlignSelf(' + toValueJava(value) + ');');
}},
YGNodeStyleSetBorder:{value:function(nodeName, edge, value) {
this.push(nodeName + '.setBorder(' + edge + ', ' + value + 'f);');
this.push(nodeName + '.setBorder(' + edge + ', ' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetDirection:{value:function(nodeName, value) {
this.push(nodeName + '.setDirection(' + value + ');');
this.push(nodeName + '.setDirection(' + toValueJava(value) + ');');
}},
YGNodeStyleSetFlexBasis:{value:function(nodeName, value) {
this.push(nodeName + '.setFlexBasis(' + value + 'f);');
this.push(nodeName + '.setFlexBasis' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetFlexDirection:{value:function(nodeName, value) {
this.push(nodeName + '.setFlexDirection(' + value + ');');
this.push(nodeName + '.setFlexDirection(' + toValueJava(value) + ');');
}},
YGNodeStyleSetFlexGrow:{value:function(nodeName, value) {
this.push(nodeName + '.setFlexGrow(' + value + 'f);');
this.push(nodeName + '.setFlexGrow(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetFlexShrink:{value:function(nodeName, value) {
this.push(nodeName + '.setFlexShrink(' + value + 'f);');
this.push(nodeName + '.setFlexShrink(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetFlexWrap:{value:function(nodeName, value) {
this.push(nodeName + '.setWrap(' + value + ');');
this.push(nodeName + '.setWrap(' + toValueJava(value) + ');');
}},
YGNodeStyleSetHeight:{value:function(nodeName, value) {
this.push(nodeName + '.setHeight(' + value + 'f);');
this.push(nodeName + '.setHeight' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetJustifyContent:{value:function(nodeName, value) {
this.push(nodeName + '.setJustifyContent(' + value + ');');
this.push(nodeName + '.setJustifyContent(' + toValueJava(value) + ');');
}},
YGNodeStyleSetMargin:{value:function(nodeName, edge, value) {
this.push(nodeName + '.setMargin(' + edge + ', ' + value + 'f);');
this.push(nodeName + '.setMargin' + toMethodName(value) + '(' + edge + ', ' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetMaxHeight:{value:function(nodeName, value) {
this.push(nodeName + '.setMaxHeight(' + value + 'f);');
this.push(nodeName + '.setMaxHeight' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetMaxWidth:{value:function(nodeName, value) {
this.push(nodeName + '.setMaxWidth(' + value + 'f);');
this.push(nodeName + '.setMaxWidth' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetMinHeight:{value:function(nodeName, value) {
this.push(nodeName + '.setMinHeight(' + value + 'f);');
this.push(nodeName + '.setMinHeight' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetMinWidth:{value:function(nodeName, value) {
this.push(nodeName + '.setMinWidth(' + value + 'f);');
this.push(nodeName + '.setMinWidth' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetOverflow:{value:function(nodeName, value) {
this.push(nodeName + '.setOverflow(' + value + ');');
this.push(nodeName + '.setOverflow(' + toValueJava(value) + ');');
}},
YGNodeStyleSetPadding:{value:function(nodeName, edge, value) {
this.push(nodeName + '.setPadding(' + edge + ', ' + value + ');');
this.push(nodeName + '.setPadding' + toMethodName(value) + '(' + edge + ', ' + toValueJava(value) + ');');
}},
YGNodeStyleSetPosition:{value:function(nodeName, edge, value) {
this.push(nodeName + '.setPosition(' + edge + ', ' + value + 'f);');
this.push(nodeName + '.setPosition' + toMethodName(value) + '(' + edge + ', ' + toValueJava(value) + 'f);');
}},
YGNodeStyleSetPositionType:{value:function(nodeName, value) {
this.push(nodeName + '.setPositionType(' + value + ');');
this.push(nodeName + '.setPositionType(' + toValueJava(value) + ');');
}},
YGNodeStyleSetWidth:{value:function(nodeName, value) {
this.push(nodeName + '.setWidth(' + value + 'f);');
this.push(nodeName + '.setWidth' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
}},
});