javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-17 21:01:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

FlexboxLayout profiling and improvements (#3173)

Browse Source 
* It looks like inline styles are making the flexbox example slow

* FlexboxLayout createReorderIndices proper overload

* Remove the getLayoutParams

* Removed unnecessary reorder methods

* Fix tslint errors
This commit is contained in:
Panayot Cankov
2016-11-30 11:30:02 +02:00
committed by Vladimir Enchev
parent d43dd159c2
commit 56cd220c17
2 changed files with 88 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/app/ui-tests-app/flexbox/flexbox-perf-comparison.xml
View File

@ -7,17 +7,18 @@
<TabView.items> <TabView.items>
<TabViewItem title="flex-grid"> <TabViewItem title="flex-grid">
<TabViewItem.view> <TabViewItem.view>
<ScrollView style="flex: 1 0; height: 0;"> <ScrollView>
<!-- Fix this: style="flex: 1 0; height: 0;"-->
<Repeater id="repeaterFlexGrid" items="{{ $value }}"> <Repeater id="repeaterFlexGrid" items="{{ $value }}">
<Repeater.itemTemplate> <Repeater.itemTemplate>
<FlexboxLayout style="flex-flow: row wrap; align-items: center; border-width: 0 0 1 0; border-color: #EEEEEE"> <FlexboxLayout flexDirection="row" flexWrap="wrap" alignItems="center" borderWidth="0 0 1 0" borderColor="#EEEEEE">
<Image src="{{ icon }}" style="flex: 0 1; margin: 6 4 4 4; border-width: 1; border-color: gray; border-radius: 16; width: 32; height: 32;" /> <Image src="{{ icon }}" flexGrow="0" flexShrink="1" margin="6 4 4 4" borderWidth="1" borderColor="gray" borderRadius="16" width="32" height="32" />
<Label text="{{ title }}" style="flex: 1 0; width: 0; margin: 1 4 0 0;" /> <Label text="{{ title }}" flexGrow="1" flexShrink="0" width="0" margin="1 4 0 0" />
<Label text="{{ body }}" textWrap="true" style="width: 100%; margin: 4 4 6 4; font-size: 11;" /> <Label text="{{ body }}" textWrap="true" width="100%" margin="4 4 6 4" fontSize="11" />
<Image src="~/ui-tests-app/flexbox/icons/thumbsdown.png" style="width: 18; height: 18; margin: 4;" /> <Image src="~/ui-tests-app/flexbox/icons/thumbsdown.png" width="18" height="18" margin="4" />
<Label text="{{ up }}" style="flex: 1 0; width: 0; font-size: 13;" /> <Label text="{{ up }}" flexGrow="1" flexShrink="0" width="0" fontSize="13" />
<Image src="~/ui-tests-app/flexbox/icons/thumbsup.png" style="width: 18; height: 18; margin: 4;" /> <Image src="~/ui-tests-app/flexbox/icons/thumbsup.png" width="18" height="18" margin="4" />
<Label text="{{ down }}" style="flex: 1 0; width: 0; font-size: 13;" /> <Label text="{{ down }}" flexGrow="1" flexShrink="0" width="0" fontSize="13" />
</FlexboxLayout> </FlexboxLayout>
</Repeater.itemTemplate> </Repeater.itemTemplate>
</Repeater> </Repeater>
@ -45,7 +46,7 @@
</TabViewItem> </TabViewItem>
<TabViewItem title="flex-stack"> <TabViewItem title="flex-stack">
<TabViewItem.view> <TabViewItem.view>
<ScrollView style="flex: 1 0; height: 0;"> <ScrollView>
<Repeater id="repeaterFlexStack" items="{{ $value }}"> <Repeater id="repeaterFlexStack" items="{{ $value }}">
<Repeater.itemTemplate> <Repeater.itemTemplate>
<FlexboxLayout flexDirection="column"> <FlexboxLayout flexDirection="column">
@ -64,7 +65,7 @@
</TabViewItem> </TabViewItem>
<TabViewItem title="stack"> <TabViewItem title="stack">
<TabViewItem.view> <TabViewItem.view>
<ScrollView style="flex: 1 0; height: 0;"> <ScrollView>
<Repeater id="repeaterStack" items="{{ $value }}"> <Repeater id="repeaterStack" items="{{ $value }}">
<Repeater.itemTemplate> <Repeater.itemTemplate>
<StackLayout> <StackLayout>

230
tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts
View File

@ -158,48 +158,10 @@ export class FlexboxLayout extends FlexboxLayoutBase {
return child; return child;
} }
public addChild(child: View) { private _createReorderedIndices(): number[] {
let index = this.getChildrenCount(); // Goes last let childCount = this.getChildrenCount();
this._reorderedIndices = this._createReorderedIndices(child, index, FlexboxLayout.getLayoutParams(child)); let orders = this._createOrders(childCount);
super.addChild(child); return this._sortOrdersIntoReorderedIndices(childCount, orders);
}
public insertChild(child: View, index: number): void {
this._reorderedIndices = this._createReorderedIndices(child, index, FlexboxLayout.getLayoutParams(child));
super.addChild(child);
}
private _createReorderedIndices(viewBeforeAdded: View, indexForViewBeforeAdded: number, paramsForViewBeforeAdded: FlexboxLayout.LayoutParams): number[];
private _createReorderedIndices(): number[];
private _createReorderedIndices(viewBeforeAdded?: View, indexForViewBeforeAdded?: number, paramsForViewBeforeAdded?: FlexboxLayout.LayoutParams) {
if (arguments.length === 0) {
let childCount = this.getChildrenCount();
let orders = this._createOrders(childCount);
return this._sortOrdersIntoReorderedIndices(childCount, orders);
} else {
let childCount: number = this.getChildrenCount();
let orders = this._createOrders(childCount);
let orderForViewToBeAdded = new Order();
if (viewBeforeAdded !== null) {
orderForViewToBeAdded.order = paramsForViewBeforeAdded.order;
} else {
orderForViewToBeAdded.order = 1 /* Default order */;
}
if (indexForViewBeforeAdded === -1 || indexForViewBeforeAdded === childCount) {
orderForViewToBeAdded.index = childCount;
} else if (indexForViewBeforeAdded) {
orderForViewToBeAdded.index = indexForViewBeforeAdded;
for (let i = indexForViewBeforeAdded; i < childCount; i++) {
orders[i].index++;
}
} else {
orderForViewToBeAdded.index = childCount;
}
orders.push(orderForViewToBeAdded);
return this._sortOrdersIntoReorderedIndices(childCount + 1, orders);
}
} }
private _sortOrdersIntoReorderedIndices(childCount: number, orders: Order[]): number[] { private _sortOrdersIntoReorderedIndices(childCount: number, orders: Order[]): number[] {
@ -221,9 +183,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
let orders: Order[] = []; let orders: Order[] = [];
for (let i = 0; i < childCount; i++) { for (let i = 0; i < childCount; i++) {
let child = this.getChildAt(i); let child = this.getChildAt(i);
let params = FlexboxLayout.getLayoutParams(child);
let order = new Order(); let order = new Order();
order.order = params.order; order.order = FlexboxLayout.getOrder(child);
order.index = i; order.index = i;
orders.push(order); orders.push(order);
} }
@ -243,8 +204,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
if (view === null) { if (view === null) {
continue; continue;
} }
let lp = FlexboxLayout.getLayoutParams(view);
if (lp.order !== this._orderCache[i]) { if (FlexboxLayout.getOrder(view) !== this._orderCache[i]) {
return true; return true;
} }
} }
@ -278,14 +239,14 @@ export class FlexboxLayout extends FlexboxLayoutBase {
continue; continue;
} }
let lp: FlexboxLayout.LayoutParams = FlexboxLayout.getLayoutParams(child); let lp = <CommonLayoutParams>child.style._getValue(nativeLayoutParamsProperty);
if (lp.alignSelf === AlignSelf.STRETCH) { if (FlexboxLayout.getAlignSelf(child) === AlignSelf.STRETCH) {
flexLine._indicesAlignSelfStretch.push(i); flexLine._indicesAlignSelfStretch.push(i);
} }
let childWidth = lp.width; let childWidth = lp.width;
if (lp.flexBasisPercent !== FlexBasisPercent.DEFAULT && widthMode === EXACTLY) { if (FlexBasisPercent.DEFAULT /*lp.flexBasisPercent*/ !== FlexBasisPercent.DEFAULT && widthMode === EXACTLY) {
childWidth = Math.round(widthSize * lp.flexBasisPercent); childWidth = Math.round(widthSize * FlexBasisPercent.DEFAULT /*lp.flexBasisPercent*/);
} }
let childWidthMeasureSpec = FlexboxLayout.getChildMeasureSpec(widthMeasureSpec, let childWidthMeasureSpec = FlexboxLayout.getChildMeasureSpec(widthMeasureSpec,
@ -304,8 +265,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
largestHeightInRow = Math.max(largestHeightInRow, largestHeightInRow = Math.max(largestHeightInRow,
child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin); child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin);
if (this._isWrapRequired(widthMode, widthSize, flexLine._mainSize, if (this._isWrapRequired(child, widthMode, widthSize, flexLine._mainSize,
child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin, lp, child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin,
i, indexInFlexLine)) { i, indexInFlexLine)) {
if (flexLine.itemCount > 0) { if (flexLine.itemCount > 0) {
this._addFlexLine(flexLine); this._addFlexLine(flexLine);
@ -321,8 +282,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
indexInFlexLine++; indexInFlexLine++;
} }
flexLine._mainSize += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin; flexLine._mainSize += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
flexLine._totalFlexGrow += lp.flexGrow; flexLine._totalFlexGrow += FlexboxLayout.getFlexGrow(child);
flexLine._totalFlexShrink += lp.flexShrink; flexLine._totalFlexShrink += FlexboxLayout.getFlexShrink(child);
flexLine._crossSize = Math.max(flexLine._crossSize, largestHeightInRow); flexLine._crossSize = Math.max(flexLine._crossSize, largestHeightInRow);
@ -345,7 +306,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
let largestHeightInLine = Number.MIN_VALUE; let largestHeightInLine = Number.MIN_VALUE;
for (let i = viewIndex; i < viewIndex + flexLine._itemCount; i++) { for (let i = viewIndex; i < viewIndex + flexLine._itemCount; i++) {
let child = this._getReorderedChildAt(i); let child = this._getReorderedChildAt(i);
let lp = FlexboxLayout.getLayoutParams(child); let lp = <CommonLayoutParams>child.style._getValue(nativeLayoutParamsProperty);
if (this.flexWrap !== FlexWrap.WRAP_REVERSE) { if (this.flexWrap !== FlexWrap.WRAP_REVERSE) {
let marginTop = flexLine._maxBaseline - FlexboxLayout.getBaseline(child); let marginTop = flexLine._maxBaseline - FlexboxLayout.getBaseline(child);
marginTop = Math.max(marginTop, lp.topMargin); marginTop = Math.max(marginTop, lp.topMargin);
@ -392,14 +353,15 @@ export class FlexboxLayout extends FlexboxLayoutBase {
continue; continue;
} }
let lp = FlexboxLayout.getLayoutParams(child); let lp = <CommonLayoutParams>child.style._getValue(nativeLayoutParamsProperty);
if (lp.alignSelf === AlignSelf.STRETCH) { if (FlexboxLayout.getAlignSelf(child) === AlignSelf.STRETCH) {
flexLine._indicesAlignSelfStretch.push(i); flexLine._indicesAlignSelfStretch.push(i);
} }
let childHeight = lp.height; let childHeight = lp.height;
if (lp.flexBasisPercent !== FlexBasisPercent.DEFAULT && heightMode === EXACTLY) { // TODO: This should always be false
childHeight = Math.round(heightSize * lp.flexBasisPercent); if (FlexBasisPercent.DEFAULT /* lp.flexBasisPercent */ !== FlexBasisPercent.DEFAULT && heightMode === EXACTLY) {
childHeight = Math.round(heightSize * FlexBasisPercent.DEFAULT /* lp.flexBasisPercent */);
} }
let childWidthMeasureSpec = FlexboxLayout.getChildMeasureSpec(widthMeasureSpec, let childWidthMeasureSpec = FlexboxLayout.getChildMeasureSpec(widthMeasureSpec,
@ -416,8 +378,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
largestWidthInColumn = Math.max(largestWidthInColumn, largestWidthInColumn = Math.max(largestWidthInColumn,
child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin); child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin);
if (this._isWrapRequired(heightMode, heightSize, flexLine.mainSize, if (this._isWrapRequired(child, heightMode, heightSize, flexLine.mainSize,
child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin, lp, child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin,
i, indexInFlexLine)) { i, indexInFlexLine)) {
if (flexLine._itemCount > 0) { if (flexLine._itemCount > 0) {
@ -435,8 +397,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
} }
flexLine._mainSize += child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin; flexLine._mainSize += child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
flexLine._totalFlexGrow += lp.flexGrow; flexLine._totalFlexGrow += FlexboxLayout.getFlexGrow(child);
flexLine._totalFlexShrink += lp.flexShrink; flexLine._totalFlexShrink += FlexboxLayout.getFlexShrink(child);
flexLine._crossSize = Math.max(flexLine._crossSize, largestWidthInColumn); flexLine._crossSize = Math.max(flexLine._crossSize, largestWidthInColumn);
@ -452,24 +414,25 @@ export class FlexboxLayout extends FlexboxLayoutBase {
private _checkSizeConstraints(view: View) { private _checkSizeConstraints(view: View) {
let needsMeasure = false; let needsMeasure = false;
let lp = FlexboxLayout.getLayoutParams(view);
let childWidth = view.getMeasuredWidth(); let childWidth = view.getMeasuredWidth();
let childHeight = view.getMeasuredHeight(); let childHeight = view.getMeasuredHeight();
if (view.getMeasuredWidth() < lp.minWidth) { let minWidth = view.minWidth;
if (view.getMeasuredWidth() < minWidth) {
needsMeasure = true; needsMeasure = true;
childWidth = lp.minWidth; childWidth = minWidth;
} else if (view.getMeasuredWidth() > lp.maxWidth) { } else if (view.getMeasuredWidth() > MAX_SIZE /*lp.maxWidth*/) {
needsMeasure = true; needsMeasure = true;
childWidth = lp.maxWidth; childWidth = MAX_SIZE /*lp.maxWidth*/;
} }
if (childHeight < lp.minHeight) { let minHeight = view.minHeight;
if (childHeight < minHeight) {
needsMeasure = true; needsMeasure = true;
childHeight = lp.minHeight; childHeight = minHeight;
} else if (childHeight > lp.maxHeight) { } else if (childHeight > MAX_SIZE /*lp.maxWidth*/) {
needsMeasure = true; needsMeasure = true;
childHeight = lp.maxHeight; childHeight = MAX_SIZE /*lp.maxWidth*/;
} }
if (needsMeasure) { if (needsMeasure) {
view.measure(makeMeasureSpec(childWidth, EXACTLY), makeMeasureSpec(childHeight, EXACTLY)); view.measure(makeMeasureSpec(childWidth, EXACTLY), makeMeasureSpec(childHeight, EXACTLY));
@ -548,16 +511,18 @@ export class FlexboxLayout extends FlexboxLayoutBase {
childIndex++; childIndex++;
continue; continue;
} }
let lp = FlexboxLayout.getLayoutParams(child); let lp = <CommonLayoutParams>child.style._getValue(nativeLayoutParamsProperty);
if (this._isMainAxisDirectionHorizontal(flexDirection)) { if (this._isMainAxisDirectionHorizontal(flexDirection)) {
if (!this._childrenFrozen[childIndex]) { if (!this._childrenFrozen[childIndex]) {
let rawCalculatedWidth = child.getMeasuredWidth() + unitSpace * lp.flexGrow + accumulatedRoundError; let flexGrow = FlexboxLayout.getFlexGrow(child);
let rawCalculatedWidth = child.getMeasuredWidth() + unitSpace * flexGrow + accumulatedRoundError;
let roundedCalculatedWidth = Math.round(rawCalculatedWidth); let roundedCalculatedWidth = Math.round(rawCalculatedWidth);
if (roundedCalculatedWidth > lp.maxWidth) { // TODO: MAX_SIZE is so big, this is always false:
if (roundedCalculatedWidth > MAX_SIZE /* lp.maxWidth */) {
needsReexpand = true; needsReexpand = true;
roundedCalculatedWidth = lp.maxWidth; roundedCalculatedWidth = MAX_SIZE /* lp.maxWidth */;
this._childrenFrozen[childIndex] = true; this._childrenFrozen[childIndex] = true;
flexLine._totalFlexGrow -= lp.flexGrow; flexLine._totalFlexGrow -= flexGrow;
} else { } else {
accumulatedRoundError = rawCalculatedWidth - roundedCalculatedWidth; accumulatedRoundError = rawCalculatedWidth - roundedCalculatedWidth;
} }
@ -566,13 +531,15 @@ export class FlexboxLayout extends FlexboxLayoutBase {
flexLine._mainSize += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin; flexLine._mainSize += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
} else { } else {
if (!this._childrenFrozen[childIndex]) { if (!this._childrenFrozen[childIndex]) {
let rawCalculatedHeight = child.getMeasuredHeight() + unitSpace * lp.flexGrow + accumulatedRoundError; let flexGrow = FlexboxLayout.getFlexGrow(child);
let rawCalculatedHeight = child.getMeasuredHeight() + unitSpace * flexGrow + accumulatedRoundError;
let roundedCalculatedHeight = Math.round(rawCalculatedHeight); let roundedCalculatedHeight = Math.round(rawCalculatedHeight);
if (roundedCalculatedHeight > lp.maxHeight) { // TODO: MAX_SIZE is so big this is always false:
if (roundedCalculatedHeight > MAX_SIZE /*lp.maxHeight*/) {
needsReexpand = true; needsReexpand = true;
roundedCalculatedHeight = lp.maxHeight; roundedCalculatedHeight = MAX_SIZE /*lp.maxHeight*/;
this._childrenFrozen[childIndex] = true; this._childrenFrozen[childIndex] = true;
flexLine._totalFlexGrow -= lp.flexGrow; flexLine._totalFlexGrow -= flexGrow;
} else { } else {
accumulatedRoundError = rawCalculatedHeight - roundedCalculatedHeight; accumulatedRoundError = rawCalculatedHeight - roundedCalculatedHeight;
} }
@ -608,17 +575,19 @@ export class FlexboxLayout extends FlexboxLayoutBase {
childIndex++; childIndex++;
continue; continue;
} }
let lp = FlexboxLayout.getLayoutParams(child); let lp = <CommonLayoutParams>child.style._getValue(nativeLayoutParamsProperty);
if (this._isMainAxisDirectionHorizontal(flexDirection)) { if (this._isMainAxisDirectionHorizontal(flexDirection)) {
// The direction of main axis is horizontal // The direction of main axis is horizontal
if (!this._childrenFrozen[childIndex]) { if (!this._childrenFrozen[childIndex]) {
let rawCalculatedWidth = child.getMeasuredWidth() - unitShrink * lp.flexShrink + accumulatedRoundError; let flexShrink = FlexboxLayout.getFlexShrink(child);
let rawCalculatedWidth = child.getMeasuredWidth() - unitShrink * flexShrink + accumulatedRoundError;
let roundedCalculatedWidth = Math.round(rawCalculatedWidth); let roundedCalculatedWidth = Math.round(rawCalculatedWidth);
if (roundedCalculatedWidth < lp.minWidth) { let minWidth = child.minWidth;
if (roundedCalculatedWidth < minWidth) {
needsReshrink = true; needsReshrink = true;
roundedCalculatedWidth = lp.minWidth; roundedCalculatedWidth = minWidth;
this._childrenFrozen[childIndex] = true; this._childrenFrozen[childIndex] = true;
flexLine._totalFlexShrink -= lp.flexShrink; flexLine._totalFlexShrink -= flexShrink;
} else { } else {
accumulatedRoundError = rawCalculatedWidth - roundedCalculatedWidth; accumulatedRoundError = rawCalculatedWidth - roundedCalculatedWidth;
} }
@ -627,13 +596,14 @@ export class FlexboxLayout extends FlexboxLayoutBase {
flexLine._mainSize += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin; flexLine._mainSize += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
} else { } else {
if (!this._childrenFrozen[childIndex]) { if (!this._childrenFrozen[childIndex]) {
let rawCalculatedHeight = child.getMeasuredHeight() - unitShrink * lp.flexShrink + accumulatedRoundError; let flexShrink = FlexboxLayout.getFlexShrink(child);
let rawCalculatedHeight = child.getMeasuredHeight() - unitShrink * flexShrink + accumulatedRoundError;
let roundedCalculatedHeight = Math.round(rawCalculatedHeight); let roundedCalculatedHeight = Math.round(rawCalculatedHeight);
if (roundedCalculatedHeight < lp.minHeight) { if (roundedCalculatedHeight < child.minHeight) {
needsReshrink = true; needsReshrink = true;
roundedCalculatedHeight = lp.minHeight; roundedCalculatedHeight = child.minHeight;
this._childrenFrozen[childIndex] = true; this._childrenFrozen[childIndex] = true;
flexLine._totalFlexShrink -= lp.flexShrink; flexLine._totalFlexShrink -= flexShrink;
} else { } else {
accumulatedRoundError = rawCalculatedHeight - roundedCalculatedHeight; accumulatedRoundError = rawCalculatedHeight - roundedCalculatedHeight;
} }
@ -783,8 +753,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
this._flexLines.forEach(flexLine => { this._flexLines.forEach(flexLine => {
for (let i = 0; i < flexLine.itemCount; i++, viewIndex++) { for (let i = 0; i < flexLine.itemCount; i++, viewIndex++) {
let view = this._getReorderedChildAt(viewIndex); let view = this._getReorderedChildAt(viewIndex);
let lp = FlexboxLayout.getLayoutParams(view); let alignSelf = FlexboxLayout.getAlignSelf(view);
if (lp.alignSelf !== AlignSelf.AUTO && lp.alignSelf !== AlignSelf.STRETCH) { if (alignSelf !== AlignSelf.AUTO && alignSelf !== AlignSelf.STRETCH) {
continue; continue;
} }
switch (flexDirection) { switch (flexDirection) {
@ -823,14 +793,14 @@ export class FlexboxLayout extends FlexboxLayoutBase {
} }
private _stretchViewVertically(view: View, crossSize: number) { private _stretchViewVertically(view: View, crossSize: number) {
let lp = FlexboxLayout.getLayoutParams(view); let lp = <CommonLayoutParams>view.style._getValue(nativeLayoutParamsProperty);
let newHeight = crossSize - lp.topMargin - lp.bottomMargin; let newHeight = crossSize - lp.topMargin - lp.bottomMargin;
newHeight = Math.max(newHeight, 0); newHeight = Math.max(newHeight, 0);
view.measure(makeMeasureSpec(view.getMeasuredWidth(), EXACTLY), makeMeasureSpec(newHeight, EXACTLY)); view.measure(makeMeasureSpec(view.getMeasuredWidth(), EXACTLY), makeMeasureSpec(newHeight, EXACTLY));
} }
private _stretchViewHorizontally(view: View, crossSize: number) { private _stretchViewHorizontally(view: View, crossSize: number) {
let lp = FlexboxLayout.getLayoutParams(view); let lp = <CommonLayoutParams>view.style._getValue(nativeLayoutParamsProperty);
let newWidth = crossSize - lp.leftMargin - lp.rightMargin; let newWidth = crossSize - lp.leftMargin - lp.rightMargin;
newWidth = Math.max(newWidth, 0); newWidth = Math.max(newWidth, 0);
view.measure(makeMeasureSpec(newWidth, EXACTLY), makeMeasureSpec(view.getMeasuredHeight(), EXACTLY)); view.measure(makeMeasureSpec(newWidth, EXACTLY), makeMeasureSpec(view.getMeasuredHeight(), EXACTLY));
@ -910,11 +880,11 @@ export class FlexboxLayout extends FlexboxLayoutBase {
this.setMeasuredDimension(widthSizeAndState, heightSizeAndState); this.setMeasuredDimension(widthSizeAndState, heightSizeAndState);
} }
private _isWrapRequired(mode: number, maxSize: number, currentLength: number, childLength: number, lp: FlexboxLayout.LayoutParams, childAbsoluteIndex: number, childRelativeIndexInFlexLine: number): boolean { private _isWrapRequired(child: View, mode: number, maxSize: number, currentLength: number, childLength: number, childAbsoluteIndex: number, childRelativeIndexInFlexLine: number): boolean {
if (this.flexWrap === FlexWrap.NOWRAP) { if (this.flexWrap === FlexWrap.NOWRAP) {
return false; return false;
} }
if (lp.wrapBefore) { if (FlexboxLayout.getFlexWrapBefore(child)) {
return true; return true;
} }
if (mode === UNSPECIFIED) { if (mode === UNSPECIFIED) {
@ -1029,7 +999,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
currentViewIndex++; currentViewIndex++;
continue; continue;
} }
let lp = FlexboxLayout.getLayoutParams(child); let lp = <CommonLayoutParams>child.style._getValue(nativeLayoutParamsProperty);
childLeft += lp.leftMargin; childLeft += lp.leftMargin;
childRight -= lp.rightMargin; childRight -= lp.rightMargin;
@ -1076,10 +1046,11 @@ export class FlexboxLayout extends FlexboxLayoutBase {
} }
private _layoutSingleChildHorizontal(view: View, flexLine: FlexLine, flexWrap: FlexWrap, alignItems: AlignItems, left: number, top: number, right: number, bottom: number): void { private _layoutSingleChildHorizontal(view: View, flexLine: FlexLine, flexWrap: FlexWrap, alignItems: AlignItems, left: number, top: number, right: number, bottom: number): void {
let lp = FlexboxLayout.getLayoutParams(view); let lp = <CommonLayoutParams>view.style._getValue(nativeLayoutParamsProperty);
if (lp.alignSelf !== AlignSelf.AUTO) { let alignSelf = FlexboxLayout.getAlignSelf(view);
alignItems = lp.alignSelf; if (alignSelf !== AlignSelf.AUTO) {
alignItems = alignSelf;
} }
let crossSize = flexLine._crossSize; let crossSize = flexLine._crossSize;
@ -1188,7 +1159,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
currentViewIndex++; currentViewIndex++;
continue; continue;
} }
let lp = FlexboxLayout.getLayoutParams(child); let lp = <CommonLayoutParams>child.style._getValue(nativeLayoutParamsProperty);
childTop += lp.topMargin; childTop += lp.topMargin;
childBottom -= lp.bottomMargin; childBottom -= lp.bottomMargin;
@ -1234,9 +1205,10 @@ export class FlexboxLayout extends FlexboxLayoutBase {
} }
private _layoutSingleChildVertical(view: View, flexLine: FlexLine, isRtl: boolean, alignItems: AlignItems, left: number, top: number, right: number, bottom: number) { private _layoutSingleChildVertical(view: View, flexLine: FlexLine, isRtl: boolean, alignItems: AlignItems, left: number, top: number, right: number, bottom: number) {
let lp = FlexboxLayout.getLayoutParams(view); let lp = <CommonLayoutParams>view.style._getValue(nativeLayoutParamsProperty);
if (lp.alignSelf !== AlignSelf.AUTO) { let alignSelf = FlexboxLayout.getAlignSelf(view);
alignItems = lp.alignSelf; if (alignSelf !== AlignSelf.AUTO) {
alignItems = alignSelf;
} }
let crossSize = flexLine.crossSize; let crossSize = flexLine.crossSize;
switch (alignItems) { switch (alignItems) {
@ -1337,56 +1309,6 @@ export class FlexboxLayout extends FlexboxLayoutBase {
} }
export namespace FlexboxLayout { export namespace FlexboxLayout {
export interface LayoutParams extends CommonLayoutParams {
order: number;
alignSelf: AlignSelf;
flexGrow: number;
flexShrink: number;
flexBasisPercent: number;
wrapBefore: boolean;
minWidth: number;
minHeight: number;
maxWidth: number;
maxHeight: number;
}
export function getLayoutParams(child: View): FlexboxLayout.LayoutParams {
let lp: CommonLayoutParams = child.style._getValue(nativeLayoutParamsProperty);
let flp: FlexboxLayout.LayoutParams = {
width: lp.width,
height: lp.height,
widthPercent: lp.widthPercent,
heightPercent: lp.heightPercent,
leftMargin: lp.leftMargin,
topMargin: lp.topMargin,
rightMargin: lp.rightMargin,
bottomMargin: lp.bottomMargin,
leftMarginPercent: lp.leftMarginPercent,
topMarginPercent: lp.topMarginPercent,
rightMarginPercent: lp.rightMarginPercent,
bottomMarginPercent: lp.bottomMarginPercent,
horizontalAlignment: lp.horizontalAlignment,
verticalAlignment: lp.verticalAlignment,
alignSelf: FlexboxLayout.getAlignSelf(child),
flexBasisPercent: FlexBasisPercent.DEFAULT,
flexGrow: FlexboxLayout.getFlexGrow(child),
flexShrink: FlexboxLayout.getFlexShrink(child),
maxHeight: MAX_SIZE,
maxWidth: MAX_SIZE,
minHeight: child.minHeight,
minWidth: child.minWidth,
order: FlexboxLayout.getOrder(child),
wrapBefore: FlexboxLayout.getFlexWrapBefore(child)
};
return flp;
}
export function getBaseline(child: View): number { export function getBaseline(child: View): number {
// TODO: Check if we support baseline for iOS. // TODO: Check if we support baseline for iOS.
return 0; return 0;