2014-10-29 08:01:22 -07:00
|
|
|
/**
|
|
|
|
* Copyright (c) 2014, Facebook, Inc.
|
|
|
|
* All rights reserved.
|
|
|
|
*
|
|
|
|
* This source code is licensed under the BSD-style license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
|
|
*/
|
2014-09-18 15:15:21 -07:00
|
|
|
package com.facebook.csslayout;
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
import static com.facebook.csslayout.CSSConstants.isUndefined;
|
|
|
|
import static com.facebook.csslayout.CSSLayout.DIMENSION_HEIGHT;
|
|
|
|
import static com.facebook.csslayout.CSSLayout.DIMENSION_WIDTH;
|
|
|
|
import static com.facebook.csslayout.CSSLayout.POSITION_BOTTOM;
|
|
|
|
import static com.facebook.csslayout.CSSLayout.POSITION_LEFT;
|
|
|
|
import static com.facebook.csslayout.CSSLayout.POSITION_RIGHT;
|
|
|
|
import static com.facebook.csslayout.CSSLayout.POSITION_TOP;
|
|
|
|
|
2014-09-18 15:15:21 -07:00
|
|
|
/**
|
|
|
|
* Calculates layouts based on CSS style. See {@link #layoutNode(CSSNode, float)}.
|
|
|
|
*/
|
|
|
|
public class LayoutEngine {
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static final int CSS_FLEX_DIRECTION_COLUMN =
|
|
|
|
CSSFlexDirection.COLUMN.ordinal();
|
|
|
|
private static final int CSS_FLEX_DIRECTION_COLUMN_REVERSE =
|
|
|
|
CSSFlexDirection.COLUMN_REVERSE.ordinal();
|
|
|
|
private static final int CSS_FLEX_DIRECTION_ROW =
|
|
|
|
CSSFlexDirection.ROW.ordinal();
|
|
|
|
private static final int CSS_FLEX_DIRECTION_ROW_REVERSE =
|
|
|
|
CSSFlexDirection.ROW_REVERSE.ordinal();
|
|
|
|
|
|
|
|
private static final int CSS_POSITION_RELATIVE = CSSPositionType.RELATIVE.ordinal();
|
|
|
|
private static final int CSS_POSITION_ABSOLUTE = CSSPositionType.ABSOLUTE.ordinal();
|
|
|
|
|
|
|
|
private static final int[] leading = {
|
|
|
|
POSITION_TOP,
|
|
|
|
POSITION_BOTTOM,
|
|
|
|
POSITION_LEFT,
|
|
|
|
POSITION_RIGHT,
|
|
|
|
};
|
|
|
|
|
|
|
|
private static final int[] trailing = {
|
|
|
|
POSITION_BOTTOM,
|
|
|
|
POSITION_TOP,
|
|
|
|
POSITION_RIGHT,
|
|
|
|
POSITION_LEFT,
|
|
|
|
};
|
|
|
|
|
|
|
|
private static final int[] pos = {
|
|
|
|
POSITION_TOP,
|
|
|
|
POSITION_BOTTOM,
|
|
|
|
POSITION_LEFT,
|
|
|
|
POSITION_RIGHT,
|
|
|
|
};
|
|
|
|
|
|
|
|
private static final int[] dim = {
|
|
|
|
DIMENSION_HEIGHT,
|
|
|
|
DIMENSION_HEIGHT,
|
|
|
|
DIMENSION_WIDTH,
|
|
|
|
DIMENSION_WIDTH,
|
|
|
|
};
|
|
|
|
|
|
|
|
private static boolean isDimDefined(CSSNode node, int axis) {
|
|
|
|
float value = node.style.dimensions[dim[axis]];
|
|
|
|
return !isUndefined(value) && value > 0.0;
|
|
|
|
}
|
|
|
|
|
|
|
|
private static boolean isPosDefined(CSSNode node, int position) {
|
|
|
|
return !isUndefined(node.style.position[position]);
|
|
|
|
}
|
|
|
|
|
|
|
|
private static float getPosition(CSSNode node, int position) {
|
|
|
|
float result = node.style.position[position];
|
|
|
|
return isUndefined(result) ? 0 : result;
|
|
|
|
}
|
|
|
|
|
|
|
|
private static float getLeadingMargin(CSSNode node, int axis) {
|
2015-05-11 15:39:02 +01:00
|
|
|
if (isRowDirection(axis)) {
|
2015-05-15 16:52:57 +01:00
|
|
|
float leadingMargin = node.style.margin.getRaw(Spacing.START);
|
2015-09-04 13:50:28 +01:00
|
|
|
if (!isUndefined(leadingMargin)) {
|
2015-05-11 15:39:02 +01:00
|
|
|
return leadingMargin;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
return node.style.margin.get(leading[axis]);
|
2015-05-11 15:39:02 +01:00
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static float getTrailingMargin(CSSNode node, int axis) {
|
2015-05-11 15:39:02 +01:00
|
|
|
if (isRowDirection(axis)) {
|
2015-05-15 16:52:57 +01:00
|
|
|
float trailingMargin = node.style.margin.getRaw(Spacing.END);
|
2015-09-04 13:50:28 +01:00
|
|
|
if (!isUndefined(trailingMargin)) {
|
2015-05-11 15:39:02 +01:00
|
|
|
return trailingMargin;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
return node.style.margin.get(trailing[axis]);
|
2015-05-11 15:39:02 +01:00
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static float getLeadingPadding(CSSNode node, int axis) {
|
2015-05-11 15:39:02 +01:00
|
|
|
if (isRowDirection(axis)) {
|
2015-05-15 16:52:57 +01:00
|
|
|
float leadingPadding = node.style.padding.getRaw(Spacing.START);
|
2015-09-04 13:50:28 +01:00
|
|
|
if (!isUndefined(leadingPadding)) {
|
2015-05-11 15:39:02 +01:00
|
|
|
return leadingPadding;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
return node.style.padding.get(leading[axis]);
|
2015-05-11 15:39:02 +01:00
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static float getTrailingPadding(CSSNode node, int axis) {
|
2015-05-11 15:39:02 +01:00
|
|
|
if (isRowDirection(axis)) {
|
2015-05-15 16:52:57 +01:00
|
|
|
float trailingPadding = node.style.padding.getRaw(Spacing.END);
|
2015-09-04 13:50:28 +01:00
|
|
|
if (!isUndefined(trailingPadding)) {
|
2015-05-11 15:39:02 +01:00
|
|
|
return trailingPadding;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
return node.style.padding.get(trailing[axis]);
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static float getLeadingBorder(CSSNode node, int axis) {
|
2015-05-11 15:39:02 +01:00
|
|
|
if (isRowDirection(axis)) {
|
2015-05-15 16:52:57 +01:00
|
|
|
float leadingBorder = node.style.border.getRaw(Spacing.START);
|
2015-09-04 13:50:28 +01:00
|
|
|
if (!isUndefined(leadingBorder)) {
|
2015-05-11 15:39:02 +01:00
|
|
|
return leadingBorder;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
return node.style.border.get(leading[axis]);
|
2015-05-11 15:39:02 +01:00
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static float getTrailingBorder(CSSNode node, int axis) {
|
2015-05-11 15:39:02 +01:00
|
|
|
if (isRowDirection(axis)) {
|
2015-05-15 16:52:57 +01:00
|
|
|
float trailingBorder = node.style.border.getRaw(Spacing.END);
|
2015-09-04 13:50:28 +01:00
|
|
|
if (!isUndefined(trailingBorder)) {
|
2015-05-11 15:39:02 +01:00
|
|
|
return trailingBorder;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
return node.style.border.get(trailing[axis]);
|
2015-05-11 15:39:02 +01:00
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static float getLeadingPaddingAndBorder(CSSNode node, int axis) {
|
2015-05-11 15:39:02 +01:00
|
|
|
return getLeadingPadding(node, axis) + getLeadingBorder(node, axis);
|
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static float getTrailingPaddingAndBorder(CSSNode node, int axis) {
|
2015-05-11 15:39:02 +01:00
|
|
|
return getTrailingPadding(node, axis) + getTrailingBorder(node, axis);
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static float getBorderAxis(CSSNode node, int axis) {
|
2015-05-11 15:39:02 +01:00
|
|
|
return getLeadingBorder(node, axis) + getTrailingBorder(node, axis);
|
2015-04-30 14:35:59 -07:00
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static float getMarginAxis(CSSNode node, int axis) {
|
2015-05-11 15:39:02 +01:00
|
|
|
return getLeadingMargin(node, axis) + getTrailingMargin(node, axis);
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static float getPaddingAndBorderAxis(CSSNode node, int axis) {
|
2015-05-11 15:39:02 +01:00
|
|
|
return getLeadingPaddingAndBorder(node, axis) + getTrailingPaddingAndBorder(node, axis);
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static float boundAxis(CSSNode node, int axis, float value) {
|
2015-03-31 17:27:13 +08:00
|
|
|
float min = CSSConstants.UNDEFINED;
|
|
|
|
float max = CSSConstants.UNDEFINED;
|
|
|
|
|
2015-05-06 21:22:44 +01:00
|
|
|
if (isColumnDirection(axis)) {
|
2015-03-31 17:27:13 +08:00
|
|
|
min = node.style.minHeight;
|
|
|
|
max = node.style.maxHeight;
|
2015-05-06 21:22:44 +01:00
|
|
|
} else if (isRowDirection(axis)) {
|
2015-03-31 17:27:13 +08:00
|
|
|
min = node.style.minWidth;
|
|
|
|
max = node.style.maxWidth;
|
|
|
|
}
|
|
|
|
|
|
|
|
float boundValue = value;
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
if (!isUndefined(max) && max >= 0.0 && boundValue > max) {
|
2015-03-31 17:27:13 +08:00
|
|
|
boundValue = max;
|
|
|
|
}
|
2015-09-04 13:50:28 +01:00
|
|
|
if (!isUndefined(min) && min >= 0.0 && boundValue < min) {
|
2015-03-31 17:27:13 +08:00
|
|
|
boundValue = min;
|
|
|
|
}
|
|
|
|
|
|
|
|
return boundValue;
|
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static void setDimensionFromStyle(CSSNode node, int axis) {
|
2014-09-18 15:15:21 -07:00
|
|
|
// The parent already computed us a width or height. We just skip it
|
2015-09-04 13:50:28 +01:00
|
|
|
if (!isUndefined(node.layout.dimensions[dim[axis]])) {
|
2014-09-18 15:15:21 -07:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
// We only run if there's a width or height defined
|
|
|
|
if (!isDimDefined(node, axis)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// The dimensions can never be smaller than the padding and border
|
|
|
|
float maxLayoutDimension = Math.max(
|
2015-09-04 13:50:28 +01:00
|
|
|
boundAxis(node, axis, node.style.dimensions[dim[axis]]),
|
2014-09-18 15:15:21 -07:00
|
|
|
getPaddingAndBorderAxis(node, axis));
|
2015-09-04 13:50:28 +01:00
|
|
|
node.layout.dimensions[dim[axis]] = maxLayoutDimension;
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
2015-05-06 21:22:44 +01:00
|
|
|
private static void setTrailingPosition(
|
|
|
|
CSSNode node,
|
|
|
|
CSSNode child,
|
2015-09-04 13:50:28 +01:00
|
|
|
int axis) {
|
|
|
|
child.layout.position[trailing[axis]] = node.layout.dimensions[dim[axis]] -
|
|
|
|
child.layout.dimensions[dim[axis]] - child.layout.position[pos[axis]];
|
2015-05-06 21:22:44 +01:00
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static float getRelativePosition(CSSNode node, int axis) {
|
|
|
|
float lead = node.style.position[leading[axis]];
|
|
|
|
if (!isUndefined(lead)) {
|
2014-09-18 15:15:21 -07:00
|
|
|
return lead;
|
|
|
|
}
|
2015-09-04 13:50:28 +01:00
|
|
|
return -getPosition(node, trailing[axis]);
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
private static float getFlex(CSSNode node) {
|
|
|
|
return node.style.flex;
|
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static boolean isRowDirection(int flexDirection) {
|
|
|
|
return flexDirection == CSS_FLEX_DIRECTION_ROW ||
|
|
|
|
flexDirection == CSS_FLEX_DIRECTION_ROW_REVERSE;
|
2015-05-06 21:22:44 +01:00
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static boolean isColumnDirection(int flexDirection) {
|
|
|
|
return flexDirection == CSS_FLEX_DIRECTION_COLUMN ||
|
|
|
|
flexDirection == CSS_FLEX_DIRECTION_COLUMN_REVERSE;
|
2015-05-06 21:22:44 +01:00
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static int resolveAxis(
|
|
|
|
int axis,
|
2015-05-06 21:22:44 +01:00
|
|
|
CSSDirection direction) {
|
|
|
|
if (direction == CSSDirection.RTL) {
|
2015-09-04 13:50:28 +01:00
|
|
|
if (axis == CSS_FLEX_DIRECTION_ROW) {
|
|
|
|
return CSS_FLEX_DIRECTION_ROW_REVERSE;
|
|
|
|
} else if (axis == CSS_FLEX_DIRECTION_ROW_REVERSE) {
|
|
|
|
return CSS_FLEX_DIRECTION_ROW;
|
2015-05-06 21:22:44 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return axis;
|
|
|
|
}
|
|
|
|
|
|
|
|
private static CSSDirection resolveDirection(CSSNode node, CSSDirection parentDirection) {
|
|
|
|
CSSDirection direction = node.style.direction;
|
|
|
|
if (direction == CSSDirection.INHERIT) {
|
|
|
|
direction = (parentDirection == null ? CSSDirection.LTR : parentDirection);
|
|
|
|
}
|
|
|
|
|
|
|
|
return direction;
|
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static int getFlexDirection(CSSNode node) {
|
|
|
|
return node.style.flexDirection.ordinal();
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static int getCrossFlexDirection(
|
|
|
|
int flexDirection,
|
2015-05-06 21:22:44 +01:00
|
|
|
CSSDirection direction) {
|
|
|
|
if (isColumnDirection(flexDirection)) {
|
2015-09-04 13:50:28 +01:00
|
|
|
return resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
|
2015-05-06 21:22:44 +01:00
|
|
|
} else {
|
2015-09-04 13:50:28 +01:00
|
|
|
return CSS_FLEX_DIRECTION_COLUMN;
|
2015-05-06 21:22:44 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2014-09-18 15:15:21 -07:00
|
|
|
private static CSSAlign getAlignItem(CSSNode node, CSSNode child) {
|
|
|
|
if (child.style.alignSelf != CSSAlign.AUTO) {
|
|
|
|
return child.style.alignSelf;
|
|
|
|
}
|
|
|
|
return node.style.alignItems;
|
|
|
|
}
|
|
|
|
|
2014-12-12 12:03:31 +00:00
|
|
|
private static boolean isFlexWrap(CSSNode node) {
|
|
|
|
return node.style.flexWrap == CSSWrap.WRAP;
|
|
|
|
}
|
|
|
|
|
2014-09-18 15:15:21 -07:00
|
|
|
private static boolean isFlex(CSSNode node) {
|
2015-09-02 20:24:26 +01:00
|
|
|
return node.style.positionType == CSSPositionType.RELATIVE && node.style.flex > 0;
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
private static boolean isMeasureDefined(CSSNode node) {
|
|
|
|
return node.isMeasureDefined();
|
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
private static float getDimWithMargin(CSSNode node, int axis) {
|
|
|
|
return node.layout.dimensions[dim[axis]] +
|
2015-05-11 15:39:02 +01:00
|
|
|
getLeadingMargin(node, axis) +
|
|
|
|
getTrailingMargin(node, axis);
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
private static boolean needsRelayout(CSSNode node, float parentMaxWidth) {
|
|
|
|
return node.isDirty() ||
|
2015-09-04 13:50:28 +01:00
|
|
|
!FloatUtil.floatsEqual(
|
|
|
|
node.lastLayout.requestedHeight,
|
|
|
|
node.layout.dimensions[DIMENSION_HEIGHT]) ||
|
|
|
|
!FloatUtil.floatsEqual(
|
|
|
|
node.lastLayout.requestedWidth,
|
|
|
|
node.layout.dimensions[DIMENSION_WIDTH]) ||
|
2014-09-18 15:15:21 -07:00
|
|
|
!FloatUtil.floatsEqual(node.lastLayout.parentMaxWidth, parentMaxWidth);
|
|
|
|
}
|
|
|
|
|
2015-03-23 17:49:47 +00:00
|
|
|
/*package*/ static void layoutNode(
|
|
|
|
CSSLayoutContext layoutContext,
|
|
|
|
CSSNode node,
|
2015-05-06 21:22:44 +01:00
|
|
|
float parentMaxWidth,
|
|
|
|
CSSDirection parentDirection) {
|
2014-09-18 15:15:21 -07:00
|
|
|
if (needsRelayout(node, parentMaxWidth)) {
|
2015-09-04 13:50:28 +01:00
|
|
|
node.lastLayout.requestedWidth = node.layout.dimensions[DIMENSION_WIDTH];
|
|
|
|
node.lastLayout.requestedHeight = node.layout.dimensions[DIMENSION_HEIGHT];
|
2014-09-18 15:15:21 -07:00
|
|
|
node.lastLayout.parentMaxWidth = parentMaxWidth;
|
|
|
|
|
2015-05-06 21:22:44 +01:00
|
|
|
layoutNodeImpl(layoutContext, node, parentMaxWidth, parentDirection);
|
2014-09-18 15:15:21 -07:00
|
|
|
node.lastLayout.copy(node.layout);
|
|
|
|
} else {
|
|
|
|
node.layout.copy(node.lastLayout);
|
|
|
|
}
|
2015-01-19 12:37:30 +00:00
|
|
|
|
|
|
|
node.markHasNewLayout();
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
2015-03-23 17:49:47 +00:00
|
|
|
private static void layoutNodeImpl(
|
|
|
|
CSSLayoutContext layoutContext,
|
|
|
|
CSSNode node,
|
2015-05-06 21:22:44 +01:00
|
|
|
float parentMaxWidth,
|
|
|
|
CSSDirection parentDirection) {
|
2014-12-02 18:52:57 +00:00
|
|
|
for (int i = 0; i < node.getChildCount(); i++) {
|
|
|
|
node.getChildAt(i).layout.resetResult();
|
|
|
|
}
|
|
|
|
|
2014-09-18 15:15:21 -07:00
|
|
|
/** START_GENERATED **/
|
|
|
|
|
2015-05-06 21:22:44 +01:00
|
|
|
CSSDirection direction = resolveDirection(node, parentDirection);
|
2015-09-04 13:50:28 +01:00
|
|
|
int mainAxis = resolveAxis(getFlexDirection(node), direction);
|
|
|
|
int crossAxis = getCrossFlexDirection(mainAxis, direction);
|
|
|
|
int resolvedRowAxis = resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
|
2014-09-18 15:15:21 -07:00
|
|
|
|
|
|
|
// Handle width and height style attributes
|
|
|
|
setDimensionFromStyle(node, mainAxis);
|
|
|
|
setDimensionFromStyle(node, crossAxis);
|
|
|
|
|
2015-05-20 11:12:24 +01:00
|
|
|
// Set the resolved resolution in the node's layout
|
2015-09-04 13:50:28 +01:00
|
|
|
node.layout.direction = direction;
|
2015-05-20 11:12:24 +01:00
|
|
|
|
2014-09-18 15:15:21 -07:00
|
|
|
// The position is set by the parent, but we need to complete it with a
|
|
|
|
// delta composed of the margin and left/top/right/bottom
|
2015-09-04 13:50:28 +01:00
|
|
|
node.layout.position[leading[mainAxis]] += getLeadingMargin(node, mainAxis) +
|
|
|
|
getRelativePosition(node, mainAxis);
|
|
|
|
node.layout.position[trailing[mainAxis]] += getTrailingMargin(node, mainAxis) +
|
|
|
|
getRelativePosition(node, mainAxis);
|
|
|
|
node.layout.position[leading[crossAxis]] += getLeadingMargin(node, crossAxis) +
|
|
|
|
getRelativePosition(node, crossAxis);
|
|
|
|
node.layout.position[trailing[crossAxis]] += getTrailingMargin(node, crossAxis) +
|
|
|
|
getRelativePosition(node, crossAxis);
|
2014-09-18 15:15:21 -07:00
|
|
|
|
2015-09-02 20:24:26 +01:00
|
|
|
// Inline immutable values from the target node to avoid excessive method
|
|
|
|
// invocations during the layout calculation.
|
|
|
|
int childCount = node.getChildCount();
|
|
|
|
float paddingAndBorderAxisResolvedRow = getPaddingAndBorderAxis(node, resolvedRowAxis);
|
|
|
|
|
2014-09-18 15:15:21 -07:00
|
|
|
if (isMeasureDefined(node)) {
|
2015-09-02 20:24:26 +01:00
|
|
|
boolean isResolvedRowDimDefined = !isUndefined(node.layout.dimensions[dim[resolvedRowAxis]]);
|
|
|
|
|
2014-09-18 15:15:21 -07:00
|
|
|
float width = CSSConstants.UNDEFINED;
|
2015-05-06 21:22:44 +01:00
|
|
|
if (isDimDefined(node, resolvedRowAxis)) {
|
2015-09-04 13:50:28 +01:00
|
|
|
width = node.style.dimensions[DIMENSION_WIDTH];
|
2015-09-02 20:24:26 +01:00
|
|
|
} else if (isResolvedRowDimDefined) {
|
2015-09-04 13:50:28 +01:00
|
|
|
width = node.layout.dimensions[dim[resolvedRowAxis]];
|
2014-09-18 15:15:21 -07:00
|
|
|
} else {
|
|
|
|
width = parentMaxWidth -
|
2015-05-06 21:22:44 +01:00
|
|
|
getMarginAxis(node, resolvedRowAxis);
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
2015-09-02 20:24:26 +01:00
|
|
|
width -= paddingAndBorderAxisResolvedRow;
|
2014-09-18 15:15:21 -07:00
|
|
|
|
|
|
|
// We only need to give a dimension for the text if we haven't got any
|
|
|
|
// for it computed yet. It can either be from the style attribute or because
|
|
|
|
// the element is flexible.
|
2015-09-02 20:24:26 +01:00
|
|
|
boolean isRowUndefined = !isDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined;
|
2015-09-04 13:50:28 +01:00
|
|
|
boolean isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
|
|
|
|
isUndefined(node.layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]]);
|
2014-09-18 15:15:21 -07:00
|
|
|
|
|
|
|
// Let's not measure the text if we already know both dimensions
|
|
|
|
if (isRowUndefined || isColumnUndefined) {
|
2015-02-17 21:12:29 -05:00
|
|
|
MeasureOutput measureDim = node.measure(
|
2015-09-04 13:50:28 +01:00
|
|
|
|
|
|
|
layoutContext.measureOutput,
|
2015-03-23 17:49:47 +00:00
|
|
|
width
|
2014-09-18 15:15:21 -07:00
|
|
|
);
|
|
|
|
if (isRowUndefined) {
|
2015-09-04 13:50:28 +01:00
|
|
|
node.layout.dimensions[DIMENSION_WIDTH] = measureDim.width +
|
2015-09-02 20:24:26 +01:00
|
|
|
paddingAndBorderAxisResolvedRow;
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
if (isColumnUndefined) {
|
2015-09-04 13:50:28 +01:00
|
|
|
node.layout.dimensions[DIMENSION_HEIGHT] = measureDim.height +
|
|
|
|
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
}
|
2015-09-02 20:24:26 +01:00
|
|
|
if (childCount == 0) {
|
2015-05-10 17:46:48 +02:00
|
|
|
return;
|
|
|
|
}
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
2015-09-02 20:24:26 +01:00
|
|
|
boolean isNodeFlexWrap = isFlexWrap(node);
|
|
|
|
|
|
|
|
float leadingPaddingAndBorderMain = getLeadingPaddingAndBorder(node, mainAxis);
|
|
|
|
float leadingPaddingAndBorderCross = getLeadingPaddingAndBorder(node, crossAxis);
|
|
|
|
float paddingAndBorderAxisMain = getPaddingAndBorderAxis(node, mainAxis);
|
|
|
|
float paddingAndBorderAxisCross = getPaddingAndBorderAxis(node, crossAxis);
|
|
|
|
|
|
|
|
boolean isMainDimDefined = !isUndefined(node.layout.dimensions[dim[mainAxis]]);
|
|
|
|
boolean isCrossDimDefined = !isUndefined(node.layout.dimensions[dim[crossAxis]]);
|
|
|
|
boolean isMainRowDirection = isRowDirection(mainAxis);
|
|
|
|
|
2015-02-17 21:12:29 -05:00
|
|
|
int i;
|
|
|
|
int ii;
|
|
|
|
CSSNode child;
|
2015-09-04 13:50:28 +01:00
|
|
|
int axis;
|
2015-02-17 21:12:29 -05:00
|
|
|
|
2014-09-18 15:15:21 -07:00
|
|
|
// Pre-fill some dimensions straight from the parent
|
2015-09-02 20:24:26 +01:00
|
|
|
for (i = 0; i < childCount; ++i) {
|
2015-02-17 21:12:29 -05:00
|
|
|
child = node.getChildAt(i);
|
2014-09-18 15:15:21 -07:00
|
|
|
// Pre-fill cross axis dimensions when the child is using stretch before
|
|
|
|
// we call the recursive layout pass
|
|
|
|
if (getAlignItem(node, child) == CSSAlign.STRETCH &&
|
2015-09-02 20:24:26 +01:00
|
|
|
child.style.positionType == CSSPositionType.RELATIVE &&
|
|
|
|
isCrossDimDefined &&
|
2014-12-11 20:23:53 +00:00
|
|
|
!isDimDefined(child, crossAxis)) {
|
2015-09-04 13:50:28 +01:00
|
|
|
child.layout.dimensions[dim[crossAxis]] = Math.max(
|
|
|
|
boundAxis(child, crossAxis, node.layout.dimensions[dim[crossAxis]] -
|
2015-09-02 20:24:26 +01:00
|
|
|
paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
|
2014-09-18 15:15:21 -07:00
|
|
|
// You never want to go smaller than padding
|
|
|
|
getPaddingAndBorderAxis(child, crossAxis)
|
2015-09-04 13:50:28 +01:00
|
|
|
);
|
2015-09-02 20:24:26 +01:00
|
|
|
} else if (child.style.positionType == CSSPositionType.ABSOLUTE) {
|
2014-09-18 15:15:21 -07:00
|
|
|
// Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
|
|
|
|
// left and right or top and bottom).
|
2015-02-17 21:12:29 -05:00
|
|
|
for (ii = 0; ii < 2; ii++) {
|
2015-09-04 13:50:28 +01:00
|
|
|
axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
|
|
|
|
if (!isUndefined(node.layout.dimensions[dim[axis]]) &&
|
2014-09-18 15:15:21 -07:00
|
|
|
!isDimDefined(child, axis) &&
|
2015-09-04 13:50:28 +01:00
|
|
|
isPosDefined(child, leading[axis]) &&
|
|
|
|
isPosDefined(child, trailing[axis])) {
|
|
|
|
child.layout.dimensions[dim[axis]] = Math.max(
|
|
|
|
boundAxis(child, axis, node.layout.dimensions[dim[axis]] -
|
2015-03-31 17:27:13 +08:00
|
|
|
getPaddingAndBorderAxis(node, axis) -
|
|
|
|
getMarginAxis(child, axis) -
|
2015-09-04 13:50:28 +01:00
|
|
|
getPosition(child, leading[axis]) -
|
|
|
|
getPosition(child, trailing[axis])),
|
2014-09-18 15:15:21 -07:00
|
|
|
// You never want to go smaller than padding
|
|
|
|
getPaddingAndBorderAxis(child, axis)
|
2015-09-04 13:50:28 +01:00
|
|
|
);
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2014-12-12 12:03:31 +00:00
|
|
|
float definedMainDim = CSSConstants.UNDEFINED;
|
2015-09-02 20:24:26 +01:00
|
|
|
if (isMainDimDefined) {
|
|
|
|
definedMainDim = node.layout.dimensions[dim[mainAxis]] - paddingAndBorderAxisMain;
|
2014-12-11 20:23:53 +00:00
|
|
|
}
|
2014-12-12 12:03:31 +00:00
|
|
|
|
|
|
|
// We want to execute the next two loops one per line with flex-wrap
|
|
|
|
int startLine = 0;
|
|
|
|
int endLine = 0;
|
2015-02-17 21:12:29 -05:00
|
|
|
// int nextOffset = 0;
|
2015-01-19 12:37:30 +00:00
|
|
|
int alreadyComputedNextLayout = 0;
|
2014-12-12 12:03:31 +00:00
|
|
|
// We aggregate the total dimensions of the container in those two variables
|
|
|
|
float linesCrossDim = 0;
|
|
|
|
float linesMainDim = 0;
|
2015-05-06 15:14:57 +08:00
|
|
|
int linesCount = 0;
|
2015-09-02 20:24:26 +01:00
|
|
|
while (endLine < childCount) {
|
2014-12-12 12:03:31 +00:00
|
|
|
// <Loop A> Layout non flexible children and count children by type
|
|
|
|
|
|
|
|
// mainContentDim is accumulation of the dimensions and margin of all the
|
|
|
|
// non flexible children. This will be used in order to either set the
|
|
|
|
// dimensions of the node if none already exist, or to compute the
|
|
|
|
// remaining space left for the flexible children.
|
|
|
|
float mainContentDim = 0;
|
|
|
|
|
|
|
|
// There are three kind of children, non flexible, flexible and absolute.
|
|
|
|
// We need to know how many there are in order to distribute the space.
|
|
|
|
int flexibleChildrenCount = 0;
|
|
|
|
float totalFlexible = 0;
|
|
|
|
int nonFlexibleChildrenCount = 0;
|
2015-02-17 21:12:29 -05:00
|
|
|
|
|
|
|
float maxWidth;
|
2015-09-02 20:24:26 +01:00
|
|
|
for (i = startLine; i < childCount; ++i) {
|
2015-02-17 21:12:29 -05:00
|
|
|
child = node.getChildAt(i);
|
2014-12-12 12:03:31 +00:00
|
|
|
float nextContentDim = 0;
|
|
|
|
|
2015-05-01 12:16:47 -07:00
|
|
|
// It only makes sense to consider a child flexible if we have a computed
|
|
|
|
// dimension for the node.
|
2015-09-02 20:24:26 +01:00
|
|
|
if (isMainDimDefined && isFlex(child)) {
|
2014-12-12 12:03:31 +00:00
|
|
|
flexibleChildrenCount++;
|
2015-09-02 20:24:26 +01:00
|
|
|
totalFlexible += child.style.flex;
|
2014-12-12 12:03:31 +00:00
|
|
|
|
|
|
|
// Even if we don't know its exact size yet, we already know the padding,
|
2015-03-31 17:27:13 +08:00
|
|
|
// border and margin. We'll use this partial information, which represents
|
|
|
|
// the smallest possible size for the child, to compute the remaining
|
|
|
|
// available space.
|
2014-12-12 12:03:31 +00:00
|
|
|
nextContentDim = getPaddingAndBorderAxis(child, mainAxis) +
|
|
|
|
getMarginAxis(child, mainAxis);
|
2014-09-18 15:15:21 -07:00
|
|
|
|
2014-12-12 12:03:31 +00:00
|
|
|
} else {
|
2015-02-17 21:12:29 -05:00
|
|
|
maxWidth = CSSConstants.UNDEFINED;
|
2015-09-02 20:24:26 +01:00
|
|
|
if (!isMainRowDirection) {
|
2015-05-06 21:22:44 +01:00
|
|
|
if (isDimDefined(node, resolvedRowAxis)) {
|
2015-09-04 13:50:28 +01:00
|
|
|
maxWidth = node.layout.dimensions[dim[resolvedRowAxis]] -
|
2015-09-02 20:24:26 +01:00
|
|
|
paddingAndBorderAxisResolvedRow;
|
|
|
|
} else {
|
|
|
|
maxWidth = parentMaxWidth -
|
|
|
|
getMarginAxis(node, resolvedRowAxis) -
|
|
|
|
paddingAndBorderAxisResolvedRow;
|
2015-02-17 21:12:29 -05:00
|
|
|
}
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
2014-12-11 20:23:53 +00:00
|
|
|
|
2014-12-12 12:03:31 +00:00
|
|
|
// This is the main recursive call. We layout non flexible children.
|
2015-01-19 12:37:30 +00:00
|
|
|
if (alreadyComputedNextLayout == 0) {
|
2015-05-06 21:22:44 +01:00
|
|
|
layoutNode(layoutContext, child, maxWidth, direction);
|
2014-12-12 12:03:31 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Absolute positioned elements do not take part of the layout, so we
|
|
|
|
// don't use them to compute mainContentDim
|
2015-09-02 20:24:26 +01:00
|
|
|
if (child.style.positionType == CSSPositionType.RELATIVE) {
|
2014-12-12 12:03:31 +00:00
|
|
|
nonFlexibleChildrenCount++;
|
|
|
|
// At this point we know the final size and margin of the element.
|
|
|
|
nextContentDim = getDimWithMargin(child, mainAxis);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// The element we are about to add would make us go to the next line
|
2015-09-02 20:24:26 +01:00
|
|
|
if (isNodeFlexWrap &&
|
|
|
|
isMainDimDefined &&
|
2015-01-19 12:37:30 +00:00
|
|
|
mainContentDim + nextContentDim > definedMainDim &&
|
|
|
|
// If there's only one element, then it's bigger than the content
|
|
|
|
// and needs its own line
|
|
|
|
i != startLine) {
|
2015-05-12 10:10:39 +01:00
|
|
|
nonFlexibleChildrenCount--;
|
2015-01-19 12:37:30 +00:00
|
|
|
alreadyComputedNextLayout = 1;
|
2014-12-12 12:03:31 +00:00
|
|
|
break;
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
2015-01-19 12:37:30 +00:00
|
|
|
alreadyComputedNextLayout = 0;
|
2015-09-04 13:50:28 +01:00
|
|
|
mainContentDim += nextContentDim;
|
2014-12-12 12:03:31 +00:00
|
|
|
endLine = i + 1;
|
2014-12-11 20:23:53 +00:00
|
|
|
}
|
2014-09-18 15:15:21 -07:00
|
|
|
|
2014-12-12 12:03:31 +00:00
|
|
|
// <Loop B> Layout flexible children and allocate empty space
|
|
|
|
|
|
|
|
// In order to position the elements in the main axis, we have two
|
|
|
|
// controls. The space between the beginning and the first element
|
|
|
|
// and the space between each two elements.
|
|
|
|
float leadingMainDim = 0;
|
|
|
|
float betweenMainDim = 0;
|
|
|
|
|
|
|
|
// The remaining available space that needs to be allocated
|
|
|
|
float remainingMainDim = 0;
|
2015-09-02 20:24:26 +01:00
|
|
|
if (isMainDimDefined) {
|
2014-12-12 12:03:31 +00:00
|
|
|
remainingMainDim = definedMainDim - mainContentDim;
|
|
|
|
} else {
|
2015-05-01 12:16:47 -07:00
|
|
|
remainingMainDim = Math.max(mainContentDim, 0) - mainContentDim;
|
2014-12-12 12:03:31 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// If there are flexible children in the mix, they are going to fill the
|
|
|
|
// remaining space
|
|
|
|
if (flexibleChildrenCount != 0) {
|
|
|
|
float flexibleMainDim = remainingMainDim / totalFlexible;
|
2015-03-31 17:27:13 +08:00
|
|
|
float baseMainDim;
|
|
|
|
float boundMainDim;
|
|
|
|
|
2015-03-31 18:58:56 +08:00
|
|
|
// Iterate over every child in the axis. If the flex share of remaining
|
|
|
|
// space doesn't meet min/max bounds, remove this child from flex
|
|
|
|
// calculations.
|
2015-03-31 17:27:13 +08:00
|
|
|
for (i = startLine; i < endLine; ++i) {
|
|
|
|
child = node.getChildAt(i);
|
|
|
|
if (isFlex(child)) {
|
2015-09-02 20:24:26 +01:00
|
|
|
baseMainDim = flexibleMainDim * child.style.flex +
|
2015-03-31 17:27:13 +08:00
|
|
|
getPaddingAndBorderAxis(child, mainAxis);
|
|
|
|
boundMainDim = boundAxis(child, mainAxis, baseMainDim);
|
|
|
|
|
|
|
|
if (baseMainDim != boundMainDim) {
|
|
|
|
remainingMainDim -= boundMainDim;
|
2015-09-02 20:24:26 +01:00
|
|
|
totalFlexible -= child.style.flex;
|
2015-03-31 17:27:13 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
flexibleMainDim = remainingMainDim / totalFlexible;
|
2014-12-12 12:03:31 +00:00
|
|
|
|
|
|
|
// 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;
|
|
|
|
}
|
|
|
|
// We iterate over the full array and only apply the action on flexible
|
|
|
|
// children. This is faster than actually allocating a new array that
|
|
|
|
// contains only flexible children.
|
2015-02-17 21:12:29 -05:00
|
|
|
for (i = startLine; i < endLine; ++i) {
|
|
|
|
child = node.getChildAt(i);
|
2014-12-12 12:03:31 +00:00
|
|
|
if (isFlex(child)) {
|
|
|
|
// At this point we know the final size of the element in the main
|
|
|
|
// dimension
|
2015-09-04 13:50:28 +01:00
|
|
|
child.layout.dimensions[dim[mainAxis]] = boundAxis(child, mainAxis,
|
2015-09-02 20:24:26 +01:00
|
|
|
flexibleMainDim * child.style.flex + getPaddingAndBorderAxis(child, mainAxis)
|
2015-09-04 13:50:28 +01:00
|
|
|
);
|
2014-12-12 12:03:31 +00:00
|
|
|
|
2015-02-17 21:12:29 -05:00
|
|
|
maxWidth = CSSConstants.UNDEFINED;
|
2015-05-06 21:22:44 +01:00
|
|
|
if (isDimDefined(node, resolvedRowAxis)) {
|
2015-09-04 13:50:28 +01:00
|
|
|
maxWidth = node.layout.dimensions[dim[resolvedRowAxis]] -
|
2015-09-02 20:24:26 +01:00
|
|
|
paddingAndBorderAxisResolvedRow;
|
|
|
|
} else if (!isMainRowDirection) {
|
2014-12-12 12:03:31 +00:00
|
|
|
maxWidth = parentMaxWidth -
|
2015-05-06 21:22:44 +01:00
|
|
|
getMarginAxis(node, resolvedRowAxis) -
|
2015-09-02 20:24:26 +01:00
|
|
|
paddingAndBorderAxisResolvedRow;
|
2014-12-12 12:03:31 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// And we recursively call the layout algorithm for this child
|
2015-05-06 21:22:44 +01:00
|
|
|
layoutNode(layoutContext, child, maxWidth, direction);
|
2014-12-12 12:03:31 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// We use justifyContent to figure out how to allocate the remaining
|
|
|
|
// space available
|
|
|
|
} else {
|
2015-09-02 20:24:26 +01:00
|
|
|
CSSJustify justifyContent = node.style.justifyContent;
|
2015-02-17 21:12:29 -05:00
|
|
|
if (justifyContent == CSSJustify.CENTER) {
|
2014-12-12 12:03:31 +00:00
|
|
|
leadingMainDim = remainingMainDim / 2;
|
|
|
|
} else if (justifyContent == CSSJustify.FLEX_END) {
|
|
|
|
leadingMainDim = remainingMainDim;
|
|
|
|
} else if (justifyContent == CSSJustify.SPACE_BETWEEN) {
|
|
|
|
remainingMainDim = Math.max(remainingMainDim, 0);
|
|
|
|
if (flexibleChildrenCount + nonFlexibleChildrenCount - 1 != 0) {
|
|
|
|
betweenMainDim = remainingMainDim /
|
|
|
|
(flexibleChildrenCount + nonFlexibleChildrenCount - 1);
|
|
|
|
} else {
|
|
|
|
betweenMainDim = 0;
|
|
|
|
}
|
|
|
|
} else if (justifyContent == CSSJustify.SPACE_AROUND) {
|
|
|
|
// Space on the edges is half of the space between elements
|
2014-09-18 15:15:21 -07:00
|
|
|
betweenMainDim = remainingMainDim /
|
2014-12-12 12:03:31 +00:00
|
|
|
(flexibleChildrenCount + nonFlexibleChildrenCount);
|
|
|
|
leadingMainDim = betweenMainDim / 2;
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2014-12-12 12:03:31 +00:00
|
|
|
// <Loop C> Position elements in the main axis and compute dimensions
|
2014-09-18 15:15:21 -07:00
|
|
|
|
2014-12-12 12:03:31 +00:00
|
|
|
// At this point, all the children have their dimensions set. We need to
|
|
|
|
// find their position. In order to do that, we accumulate data in
|
|
|
|
// variables that are also useful to compute the total dimensions of the
|
|
|
|
// container!
|
|
|
|
float crossDim = 0;
|
2015-09-02 20:24:26 +01:00
|
|
|
float mainDim = leadingMainDim + leadingPaddingAndBorderMain;
|
2014-09-18 15:15:21 -07:00
|
|
|
|
2015-02-17 21:12:29 -05:00
|
|
|
for (i = startLine; i < endLine; ++i) {
|
|
|
|
child = node.getChildAt(i);
|
2015-05-06 15:14:57 +08:00
|
|
|
child.lineIndex = linesCount;
|
2014-12-12 12:03:31 +00:00
|
|
|
|
2015-09-02 20:24:26 +01:00
|
|
|
if (child.style.positionType == CSSPositionType.ABSOLUTE &&
|
2015-09-04 13:50:28 +01:00
|
|
|
isPosDefined(child, leading[mainAxis])) {
|
2014-12-12 12:03:31 +00:00
|
|
|
// In case the child is position absolute and has left/top being
|
|
|
|
// defined, we override the position to whatever the user said
|
|
|
|
// (and margin/border).
|
2015-09-04 13:50:28 +01:00
|
|
|
child.layout.position[pos[mainAxis]] = getPosition(child, leading[mainAxis]) +
|
2015-05-11 15:39:02 +01:00
|
|
|
getLeadingBorder(node, mainAxis) +
|
2015-09-04 13:50:28 +01:00
|
|
|
getLeadingMargin(child, mainAxis);
|
2014-12-12 12:03:31 +00:00
|
|
|
} else {
|
|
|
|
// If the child is position absolute (without top/left) or relative,
|
|
|
|
// we put it at the current accumulated offset.
|
2015-09-04 13:50:28 +01:00
|
|
|
child.layout.position[pos[mainAxis]] += mainDim;
|
2015-05-06 21:22:44 +01:00
|
|
|
|
|
|
|
// Define the trailing position accordingly.
|
2015-09-02 20:24:26 +01:00
|
|
|
if (isMainDimDefined) {
|
2015-05-06 21:22:44 +01:00
|
|
|
setTrailingPosition(node, child, mainAxis);
|
|
|
|
}
|
2014-12-12 12:03:31 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Now that we placed the element, we need to update the variables
|
|
|
|
// We only need to do that for relative elements. Absolute elements
|
|
|
|
// do not take part in that phase.
|
2015-09-02 20:24:26 +01:00
|
|
|
if (child.style.positionType == CSSPositionType.RELATIVE) {
|
2014-12-12 12:03:31 +00:00
|
|
|
// The main dimension is the sum of all the elements dimension plus
|
|
|
|
// the spacing.
|
2015-09-04 13:50:28 +01:00
|
|
|
mainDim += betweenMainDim + getDimWithMargin(child, mainAxis);
|
2014-12-12 12:03:31 +00:00
|
|
|
// The cross dimension is the max of the elements dimension since there
|
|
|
|
// can only be one element in that cross dimension.
|
2015-03-31 17:27:13 +08:00
|
|
|
crossDim = Math.max(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
|
2014-12-12 12:03:31 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
float containerCrossAxis = node.layout.dimensions[dim[crossAxis]];
|
2015-09-02 20:24:26 +01:00
|
|
|
if (!isCrossDimDefined) {
|
2014-12-12 12:03:31 +00:00
|
|
|
containerCrossAxis = Math.max(
|
|
|
|
// For the cross dim, we add both sides at the end because the value
|
|
|
|
// is aggregate via a max function. Intermediate negative values
|
|
|
|
// can mess this computation otherwise
|
2015-09-02 20:24:26 +01:00
|
|
|
boundAxis(node, crossAxis, crossDim + paddingAndBorderAxisCross),
|
|
|
|
paddingAndBorderAxisCross
|
2014-12-12 12:03:31 +00:00
|
|
|
);
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
2014-12-12 12:03:31 +00:00
|
|
|
// <Loop D> Position elements in the cross axis
|
2015-02-17 21:12:29 -05:00
|
|
|
for (i = startLine; i < endLine; ++i) {
|
|
|
|
child = node.getChildAt(i);
|
2014-12-12 12:03:31 +00:00
|
|
|
|
2015-09-02 20:24:26 +01:00
|
|
|
if (child.style.positionType == CSSPositionType.ABSOLUTE &&
|
2015-09-04 13:50:28 +01:00
|
|
|
isPosDefined(child, leading[crossAxis])) {
|
2014-12-12 12:03:31 +00:00
|
|
|
// In case the child is absolutely positionned and has a
|
|
|
|
// top/left/bottom/right being set, we override all the previously
|
|
|
|
// computed positions to set it correctly.
|
2015-09-04 13:50:28 +01:00
|
|
|
child.layout.position[pos[crossAxis]] = getPosition(child, leading[crossAxis]) +
|
2015-05-11 15:39:02 +01:00
|
|
|
getLeadingBorder(node, crossAxis) +
|
2015-09-04 13:50:28 +01:00
|
|
|
getLeadingMargin(child, crossAxis);
|
2014-12-12 12:03:31 +00:00
|
|
|
|
|
|
|
} else {
|
2015-09-02 20:24:26 +01:00
|
|
|
float leadingCrossDim = leadingPaddingAndBorderCross;
|
2014-12-12 12:03:31 +00:00
|
|
|
|
|
|
|
// For a relative children, we're either using alignItems (parent) or
|
|
|
|
// alignSelf (child) in order to determine the position in the cross axis
|
2015-09-02 20:24:26 +01:00
|
|
|
if (child.style.positionType == CSSPositionType.RELATIVE) {
|
2014-12-12 12:03:31 +00:00
|
|
|
CSSAlign alignItem = getAlignItem(node, child);
|
2015-02-17 21:12:29 -05:00
|
|
|
if (alignItem == CSSAlign.STRETCH) {
|
2014-12-12 12:03:31 +00:00
|
|
|
// You can only stretch if the dimension has not already been set
|
|
|
|
// previously.
|
|
|
|
if (!isDimDefined(child, crossAxis)) {
|
2015-09-04 13:50:28 +01:00
|
|
|
child.layout.dimensions[dim[crossAxis]] = Math.max(
|
2015-03-31 17:27:13 +08:00
|
|
|
boundAxis(child, crossAxis, containerCrossAxis -
|
2015-09-02 20:24:26 +01:00
|
|
|
paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
|
2014-12-12 12:03:31 +00:00
|
|
|
// You never want to go smaller than padding
|
|
|
|
getPaddingAndBorderAxis(child, crossAxis)
|
2015-09-04 13:50:28 +01:00
|
|
|
);
|
2014-12-12 12:03:31 +00:00
|
|
|
}
|
2015-02-17 21:12:29 -05:00
|
|
|
} else if (alignItem != CSSAlign.FLEX_START) {
|
2014-12-12 12:03:31 +00:00
|
|
|
// The remaining space between the parent dimensions+padding and child
|
|
|
|
// dimensions+margin.
|
|
|
|
float remainingCrossDim = containerCrossAxis -
|
2015-09-02 20:24:26 +01:00
|
|
|
paddingAndBorderAxisCross - getDimWithMargin(child, crossAxis);
|
2014-12-12 12:03:31 +00:00
|
|
|
|
|
|
|
if (alignItem == CSSAlign.CENTER) {
|
2015-09-04 13:50:28 +01:00
|
|
|
leadingCrossDim += remainingCrossDim / 2;
|
2014-12-12 12:03:31 +00:00
|
|
|
} else { // CSSAlign.FLEX_END
|
2015-09-04 13:50:28 +01:00
|
|
|
leadingCrossDim += remainingCrossDim;
|
2014-12-12 12:03:31 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// And we apply the position
|
2015-09-04 13:50:28 +01:00
|
|
|
child.layout.position[pos[crossAxis]] += linesCrossDim + leadingCrossDim;
|
2015-05-11 15:39:02 +01:00
|
|
|
|
|
|
|
// Define the trailing position accordingly.
|
2015-09-02 20:24:26 +01:00
|
|
|
if (isCrossDimDefined) {
|
2015-05-11 15:39:02 +01:00
|
|
|
setTrailingPosition(node, child, crossAxis);
|
|
|
|
}
|
2014-12-12 12:03:31 +00:00
|
|
|
}
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
2014-12-12 12:03:31 +00:00
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
linesCrossDim += crossDim;
|
2014-12-12 12:03:31 +00:00
|
|
|
linesMainDim = Math.max(linesMainDim, mainDim);
|
2015-09-04 13:50:28 +01:00
|
|
|
linesCount += 1;
|
2014-12-12 12:03:31 +00:00
|
|
|
startLine = endLine;
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
2015-05-09 11:46:28 +08:00
|
|
|
// <Loop E>
|
2015-05-06 15:14:57 +08:00
|
|
|
//
|
2015-05-09 11:46:28 +08:00
|
|
|
// Note(prenaux): More than one line, we need to layout the crossAxis
|
|
|
|
// according to alignContent.
|
2015-05-06 15:14:57 +08:00
|
|
|
//
|
|
|
|
// Note that we could probably remove <Loop D> and handle the one line case
|
|
|
|
// here too, but for the moment this is safer since it won't interfere with
|
|
|
|
// previously working code.
|
|
|
|
//
|
|
|
|
// See specs:
|
|
|
|
// http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#layout-algorithm
|
|
|
|
// section 9.4
|
|
|
|
//
|
2015-09-02 20:24:26 +01:00
|
|
|
if (linesCount > 1 && isCrossDimDefined) {
|
2015-09-04 13:50:28 +01:00
|
|
|
float nodeCrossAxisInnerSize = node.layout.dimensions[dim[crossAxis]] -
|
2015-09-02 20:24:26 +01:00
|
|
|
paddingAndBorderAxisCross;
|
2015-05-17 21:54:30 +08:00
|
|
|
float remainingAlignContentDim = nodeCrossAxisInnerSize - linesCrossDim;
|
2015-05-06 15:14:57 +08:00
|
|
|
|
2015-05-09 11:46:28 +08:00
|
|
|
float crossDimLead = 0;
|
2015-09-02 20:24:26 +01:00
|
|
|
float currentLead = leadingPaddingAndBorderCross;
|
2015-05-06 15:14:57 +08:00
|
|
|
|
2015-09-02 20:24:26 +01:00
|
|
|
CSSAlign alignContent = node.style.alignContent;
|
2015-05-06 15:14:57 +08:00
|
|
|
if (alignContent == CSSAlign.FLEX_END) {
|
2015-09-04 13:50:28 +01:00
|
|
|
currentLead += remainingAlignContentDim;
|
2015-05-09 11:46:28 +08:00
|
|
|
} else if (alignContent == CSSAlign.CENTER) {
|
2015-09-04 13:50:28 +01:00
|
|
|
currentLead += remainingAlignContentDim / 2;
|
2015-05-09 11:46:28 +08:00
|
|
|
} else if (alignContent == CSSAlign.STRETCH) {
|
2015-05-06 15:14:57 +08:00
|
|
|
if (nodeCrossAxisInnerSize > linesCrossDim) {
|
2015-05-17 21:54:30 +08:00
|
|
|
crossDimLead = (remainingAlignContentDim / linesCount);
|
2015-05-06 15:14:57 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-05-09 13:10:26 +08:00
|
|
|
int endIndex = 0;
|
|
|
|
for (i = 0; i < linesCount; ++i) {
|
|
|
|
int startIndex = endIndex;
|
2015-05-06 15:14:57 +08:00
|
|
|
|
|
|
|
// compute the line's height and find the endIndex
|
|
|
|
float lineHeight = 0;
|
2015-09-02 20:24:26 +01:00
|
|
|
for (ii = startIndex; ii < childCount; ++ii) {
|
2015-05-06 15:14:57 +08:00
|
|
|
child = node.getChildAt(ii);
|
2015-09-02 20:24:26 +01:00
|
|
|
if (child.style.positionType != CSSPositionType.RELATIVE) {
|
2015-05-06 15:14:57 +08:00
|
|
|
continue;
|
|
|
|
}
|
2015-05-09 13:10:26 +08:00
|
|
|
if (child.lineIndex != i) {
|
2015-05-06 15:14:57 +08:00
|
|
|
break;
|
|
|
|
}
|
2015-09-04 13:50:28 +01:00
|
|
|
if (!isUndefined(child.layout.dimensions[dim[crossAxis]])) {
|
2015-05-09 11:46:28 +08:00
|
|
|
lineHeight = Math.max(
|
|
|
|
lineHeight,
|
2015-09-04 13:50:28 +01:00
|
|
|
child.layout.dimensions[dim[crossAxis]] + getMarginAxis(child, crossAxis)
|
2015-05-09 11:46:28 +08:00
|
|
|
);
|
2015-05-06 15:14:57 +08:00
|
|
|
}
|
|
|
|
}
|
2015-05-09 13:10:26 +08:00
|
|
|
endIndex = ii;
|
2015-09-04 13:50:28 +01:00
|
|
|
lineHeight += crossDimLead;
|
2015-05-06 15:14:57 +08:00
|
|
|
|
|
|
|
for (ii = startIndex; ii < endIndex; ++ii) {
|
|
|
|
child = node.getChildAt(ii);
|
2015-09-02 20:24:26 +01:00
|
|
|
if (child.style.positionType != CSSPositionType.RELATIVE) {
|
2015-05-06 15:14:57 +08:00
|
|
|
continue;
|
|
|
|
}
|
|
|
|
|
2015-05-17 21:54:30 +08:00
|
|
|
CSSAlign alignContentAlignItem = getAlignItem(node, child);
|
|
|
|
if (alignContentAlignItem == CSSAlign.FLEX_START) {
|
2015-09-04 13:50:28 +01:00
|
|
|
child.layout.position[pos[crossAxis]] = currentLead + getLeadingMargin(child, crossAxis);
|
2015-05-17 21:54:30 +08:00
|
|
|
} else if (alignContentAlignItem == CSSAlign.FLEX_END) {
|
2015-09-04 13:50:28 +01:00
|
|
|
child.layout.position[pos[crossAxis]] = currentLead + lineHeight - getTrailingMargin(child, crossAxis) - child.layout.dimensions[dim[crossAxis]];
|
2015-05-17 21:54:30 +08:00
|
|
|
} else if (alignContentAlignItem == CSSAlign.CENTER) {
|
2015-09-04 13:50:28 +01:00
|
|
|
float childHeight = child.layout.dimensions[dim[crossAxis]];
|
|
|
|
child.layout.position[pos[crossAxis]] = currentLead + (lineHeight - childHeight) / 2;
|
2015-05-17 21:54:30 +08:00
|
|
|
} else if (alignContentAlignItem == CSSAlign.STRETCH) {
|
2015-09-04 13:50:28 +01:00
|
|
|
child.layout.position[pos[crossAxis]] = currentLead + getLeadingMargin(child, crossAxis);
|
2015-05-09 11:46:28 +08:00
|
|
|
// TODO(prenaux): Correctly set the height of items with undefined
|
|
|
|
// (auto) crossAxis dimension.
|
2015-05-06 15:14:57 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-09-04 13:50:28 +01:00
|
|
|
currentLead += lineHeight;
|
2015-05-06 15:14:57 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-05-11 15:39:02 +01:00
|
|
|
boolean needsMainTrailingPos = false;
|
|
|
|
boolean needsCrossTrailingPos = false;
|
|
|
|
|
2014-09-18 15:15:21 -07:00
|
|
|
// If the user didn't specify a width or height, and it has not been set
|
|
|
|
// by the container, then we set it via the children.
|
2015-09-02 20:24:26 +01:00
|
|
|
if (!isMainDimDefined) {
|
2015-09-04 13:50:28 +01:00
|
|
|
node.layout.dimensions[dim[mainAxis]] = Math.max(
|
2014-09-18 15:15:21 -07:00
|
|
|
// We're missing the last padding at this point to get the final
|
|
|
|
// dimension
|
2015-05-11 15:39:02 +01:00
|
|
|
boundAxis(node, mainAxis, linesMainDim + getTrailingPaddingAndBorder(node, mainAxis)),
|
2014-09-18 15:15:21 -07:00
|
|
|
// We can never assign a width smaller than the padding and borders
|
2015-09-02 20:24:26 +01:00
|
|
|
paddingAndBorderAxisMain
|
2015-09-04 13:50:28 +01:00
|
|
|
);
|
2015-05-06 21:22:44 +01:00
|
|
|
|
2015-09-08 15:33:26 +01:00
|
|
|
if (mainAxis == CSS_FLEX_DIRECTION_ROW_REVERSE ||
|
|
|
|
mainAxis == CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
|
|
|
|
needsMainTrailingPos = true;
|
|
|
|
}
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
2015-09-02 20:24:26 +01:00
|
|
|
if (!isCrossDimDefined) {
|
2015-09-04 13:50:28 +01:00
|
|
|
node.layout.dimensions[dim[crossAxis]] = Math.max(
|
2014-09-18 15:15:21 -07:00
|
|
|
// For the cross dim, we add both sides at the end because the value
|
|
|
|
// is aggregate via a max function. Intermediate negative values
|
|
|
|
// can mess this computation otherwise
|
2015-09-02 20:24:26 +01:00
|
|
|
boundAxis(node, crossAxis, linesCrossDim + paddingAndBorderAxisCross),
|
|
|
|
paddingAndBorderAxisCross
|
2015-09-04 13:50:28 +01:00
|
|
|
);
|
2015-05-11 15:39:02 +01:00
|
|
|
|
2015-09-08 15:33:26 +01:00
|
|
|
if (crossAxis == CSS_FLEX_DIRECTION_ROW_REVERSE ||
|
|
|
|
crossAxis == CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
|
|
|
|
needsCrossTrailingPos = true;
|
|
|
|
}
|
2015-05-11 15:39:02 +01:00
|
|
|
}
|
|
|
|
|
2015-05-17 21:54:30 +08:00
|
|
|
// <Loop F> Set trailing position if necessary
|
2015-05-11 15:39:02 +01:00
|
|
|
if (needsMainTrailingPos || needsCrossTrailingPos) {
|
2015-09-02 20:24:26 +01:00
|
|
|
for (i = 0; i < childCount; ++i) {
|
2015-05-11 15:39:02 +01:00
|
|
|
child = node.getChildAt(i);
|
|
|
|
|
|
|
|
if (needsMainTrailingPos) {
|
|
|
|
setTrailingPosition(node, child, mainAxis);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (needsCrossTrailingPos) {
|
|
|
|
setTrailingPosition(node, child, crossAxis);
|
|
|
|
}
|
|
|
|
}
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
2015-05-17 21:54:30 +08:00
|
|
|
// <Loop G> Calculate dimensions for absolutely positioned elements
|
2015-09-02 20:24:26 +01:00
|
|
|
for (i = 0; i < childCount; ++i) {
|
2015-02-17 21:12:29 -05:00
|
|
|
child = node.getChildAt(i);
|
2015-09-02 20:24:26 +01:00
|
|
|
if (child.style.positionType == CSSPositionType.ABSOLUTE) {
|
2014-09-18 15:15:21 -07:00
|
|
|
// Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
|
|
|
|
// left and right or top and bottom).
|
2015-02-17 21:12:29 -05:00
|
|
|
for (ii = 0; ii < 2; ii++) {
|
2015-09-04 13:50:28 +01:00
|
|
|
axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
|
|
|
|
if (!isUndefined(node.layout.dimensions[dim[axis]]) &&
|
2014-09-18 15:15:21 -07:00
|
|
|
!isDimDefined(child, axis) &&
|
2015-09-04 13:50:28 +01:00
|
|
|
isPosDefined(child, leading[axis]) &&
|
|
|
|
isPosDefined(child, trailing[axis])) {
|
|
|
|
child.layout.dimensions[dim[axis]] = Math.max(
|
|
|
|
boundAxis(child, axis, node.layout.dimensions[dim[axis]] -
|
2015-04-30 14:35:59 -07:00
|
|
|
getBorderAxis(node, axis) -
|
2015-03-31 17:27:13 +08:00
|
|
|
getMarginAxis(child, axis) -
|
2015-09-04 13:50:28 +01:00
|
|
|
getPosition(child, leading[axis]) -
|
|
|
|
getPosition(child, trailing[axis])
|
2015-03-31 17:27:13 +08:00
|
|
|
),
|
2014-09-18 15:15:21 -07:00
|
|
|
// You never want to go smaller than padding
|
|
|
|
getPaddingAndBorderAxis(child, axis)
|
2015-09-04 13:50:28 +01:00
|
|
|
);
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
}
|
2015-02-17 21:12:29 -05:00
|
|
|
for (ii = 0; ii < 2; ii++) {
|
2015-09-04 13:50:28 +01:00
|
|
|
axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
|
|
|
|
if (isPosDefined(child, trailing[axis]) &&
|
|
|
|
!isPosDefined(child, leading[axis])) {
|
|
|
|
child.layout.position[leading[axis]] =
|
|
|
|
node.layout.dimensions[dim[axis]] -
|
|
|
|
child.layout.dimensions[dim[axis]] -
|
|
|
|
getPosition(child, trailing[axis]);
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/** END_GENERATED **/
|
|
|
|
}
|