DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Add feature to use percentage as value unit

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

57
gentest/gentest-cs.js
View File

@@ -7,6 +7,19 @@
* of patent rights can be found in the PATENTS file in the same directory.
*/
function toValueCs(value) {
var n = value.toString().replace('px','').replace('%','');
return n + (Number(n) == n && n % 1 !== 0 ? 'f' : '');
}
function toCsUnitValue(value) {
var methodName = '';
if (value.indexOf('%') >= 0){
methodName = '.Percent()';
}
return toValueCs(value) + methodName;
}
var CSEmitter = function() {
Emitter.call(this, 'cs', ' ');
};
@@ -143,90 +156,90 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
}},
YGNodeStyleSetAlignContent:{value:function(nodeName, value) {
this.push(nodeName + '.AlignContent = ' + value + ';');
this.push(nodeName + '.AlignContent = ' + toValueCs(value) + ';');
}},
YGNodeStyleSetAlignItems:{value:function(nodeName, value) {
this.push(nodeName + '.AlignItems = ' + value + ';');
this.push(nodeName + '.AlignItems = ' + toValueCs(value) + ';');
}},
YGNodeStyleSetAlignSelf:{value:function(nodeName, value) {
this.push(nodeName + '.AlignSelf = ' + value + ';');
this.push(nodeName + '.AlignSelf = ' + toValueCs(value) + ';');
}},
YGNodeStyleSetBorder:{value:function(nodeName, edge, value) {
this.push(nodeName + '.SetBorder(' + edge + ', ' + value + 'f);');
this.push(nodeName + '.SetBorder(' + edge + ', ' + toValueCs(value) + ');');
}},
YGNodeStyleSetDirection:{value:function(nodeName, value) {
this.push(nodeName + '.StyleDirection = ' + value + ';');
this.push(nodeName + '.StyleDirection = ' + toValueCs(value) + ';');
}},
YGNodeStyleSetFlexBasis:{value:function(nodeName, value) {
this.push(nodeName + '.FlexBasis = ' + value + 'f;');
this.push(nodeName + '.FlexBasis = ' + toCsUnitValue(value) + ';');
}},
YGNodeStyleSetFlexDirection:{value:function(nodeName, value) {
this.push(nodeName + '.FlexDirection = ' + value + ';');
this.push(nodeName + '.FlexDirection = ' + toValueCs(value) + ';');
}},
YGNodeStyleSetFlexGrow:{value:function(nodeName, value) {
this.push(nodeName + '.FlexGrow = ' + value + 'f;');
this.push(nodeName + '.FlexGrow = ' + toValueCs(value) + ';');
}},
YGNodeStyleSetFlexShrink:{value:function(nodeName, value) {
this.push(nodeName + '.FlexShrink = ' + value + 'f;');
this.push(nodeName + '.FlexShrink = ' + toValueCs(value) + ';');
}},
YGNodeStyleSetFlexWrap:{value:function(nodeName, value) {
this.push(nodeName + '.Wrap = ' + value + ';');
this.push(nodeName + '.Wrap = ' + toValueCs(value) + ';');
}},
YGNodeStyleSetHeight:{value:function(nodeName, value) {
this.push(nodeName + '.Height = ' + value + 'f;');
this.push(nodeName + '.Height = ' + toCsUnitValue(value) + ';');
}},
YGNodeStyleSetJustifyContent:{value:function(nodeName, value) {
this.push(nodeName + '.JustifyContent = ' + value + ';');
this.push(nodeName + '.JustifyContent = ' + toValueCs(value) + ';');
}},
YGNodeStyleSetMargin:{value:function(nodeName, edge, value) {
this.push(nodeName + '.SetMargin(' + edge + ', ' + value + 'f);');
this.push(nodeName + '.SetMargin(' + edge + ', ' + toCsUnitValue(value) + ');');
}},
YGNodeStyleSetMaxHeight:{value:function(nodeName, value) {
this.push(nodeName + '.MaxHeight = ' + value + 'f;');
this.push(nodeName + '.MaxHeight = ' + toCsUnitValue(value) + ';');
}},
YGNodeStyleSetMaxWidth:{value:function(nodeName, value) {
this.push(nodeName + '.MaxWidth = ' + value + 'f;');
this.push(nodeName + '.MaxWidth = ' + toCsUnitValue(value) + ';');
}},
YGNodeStyleSetMinHeight:{value:function(nodeName, value) {
this.push(nodeName + '.MinHeight = ' + value + 'f;');
this.push(nodeName + '.MinHeight = ' + toCsUnitValue(value) + ';');
}},
YGNodeStyleSetMinWidth:{value:function(nodeName, value) {
this.push(nodeName + '.MinWidth = ' + value + 'f;');
this.push(nodeName + '.MinWidth = ' + toCsUnitValue(value) + ';');
}},
YGNodeStyleSetOverflow:{value:function(nodeName, value) {
this.push(nodeName + '.Overflow = ' + value + ';');
this.push(nodeName + '.Overflow = ' + toValueCs(value) + ';');
}},
YGNodeStyleSetPadding:{value:function(nodeName, edge, value) {
this.push(nodeName + '.SetPadding(' + edge + ', ' + value + 'f);');
this.push(nodeName + '.SetPadding(' + edge + ', ' + toCsUnitValue(value) + ');');
}},
YGNodeStyleSetPosition:{value:function(nodeName, edge, value) {
this.push(nodeName + '.SetPosition(' + edge + ', ' + value + 'f);');
this.push(nodeName + '.SetPosition(' + edge + ', ' + toCsUnitValue(value) + ');');
}},
YGNodeStyleSetPositionType:{value:function(nodeName, value) {
this.push(nodeName + '.PositionType = ' + value + ';');
this.push(nodeName + '.PositionType = ' + toValueCs(value) + ';');
}},
YGNodeStyleSetWidth:{value:function(nodeName, value) {
this.push(nodeName + '.Width = ' + value + 'f;');
this.push(nodeName + '.Width = ' + toCsUnitValue(value) + ';');
}},
});