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;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Calculates layouts based on CSS style. See {@link #layoutNode(CSSNode, float)}.
|
|
|
|
*/
|
|
|
|
public class LayoutEngine {
|
|
|
|
|
|
|
|
private static enum PositionIndex {
|
|
|
|
TOP,
|
|
|
|
LEFT,
|
|
|
|
BOTTOM,
|
|
|
|
RIGHT,
|
|
|
|
}
|
|
|
|
|
|
|
|
private static enum DimensionIndex {
|
|
|
|
WIDTH,
|
|
|
|
HEIGHT,
|
|
|
|
}
|
|
|
|
|
|
|
|
private static void setLayoutPosition(CSSNode node, PositionIndex position, float value) {
|
|
|
|
switch (position) {
|
|
|
|
case TOP:
|
|
|
|
node.layout.y = value;
|
|
|
|
break;
|
|
|
|
case LEFT:
|
|
|
|
node.layout.x = value;
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
throw new RuntimeException("Didn't get TOP or LEFT!");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private static float getLayoutPosition(CSSNode node, PositionIndex position) {
|
|
|
|
switch (position) {
|
|
|
|
case TOP:
|
|
|
|
return node.layout.y;
|
|
|
|
case LEFT:
|
|
|
|
return node.layout.x;
|
|
|
|
default:
|
|
|
|
throw new RuntimeException("Didn't get TOP or LEFT!");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private static void setLayoutDimension(CSSNode node, DimensionIndex dimension, float value) {
|
|
|
|
switch (dimension) {
|
|
|
|
case WIDTH:
|
|
|
|
node.layout.width = value;
|
|
|
|
break;
|
|
|
|
case HEIGHT:
|
|
|
|
node.layout.height = value;
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
throw new RuntimeException("Someone added a third dimension...");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private static float getLayoutDimension(CSSNode node, DimensionIndex dimension) {
|
|
|
|
switch (dimension) {
|
|
|
|
case WIDTH:
|
|
|
|
return node.layout.width;
|
|
|
|
case HEIGHT:
|
|
|
|
return node.layout.height;
|
|
|
|
default:
|
|
|
|
throw new RuntimeException("Someone added a third dimension...");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private static float getStylePosition(CSSNode node, PositionIndex position) {
|
|
|
|
switch (position) {
|
|
|
|
case TOP:
|
|
|
|
return node.style.positionTop;
|
|
|
|
case BOTTOM:
|
|
|
|
return node.style.positionBottom;
|
|
|
|
case LEFT:
|
|
|
|
return node.style.positionLeft;
|
|
|
|
case RIGHT:
|
|
|
|
return node.style.positionRight;
|
|
|
|
default:
|
|
|
|
throw new RuntimeException("Someone added a new cardinal direction...");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private static float getStyleDimension(CSSNode node, DimensionIndex dimension) {
|
|
|
|
switch (dimension) {
|
|
|
|
case WIDTH:
|
|
|
|
return node.style.width;
|
|
|
|
case HEIGHT:
|
|
|
|
return node.style.height;
|
|
|
|
default:
|
|
|
|
throw new RuntimeException("Someone added a third dimension...");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private static PositionIndex getLeading(CSSFlexDirection axis) {
|
|
|
|
return axis == CSSFlexDirection.COLUMN ? PositionIndex.TOP : PositionIndex.LEFT;
|
|
|
|
}
|
|
|
|
|
|
|
|
private static PositionIndex getTrailing(CSSFlexDirection axis) {
|
|
|
|
return axis == CSSFlexDirection.COLUMN ? PositionIndex.BOTTOM : PositionIndex.RIGHT;
|
|
|
|
}
|
|
|
|
|
|
|
|
private static PositionIndex getPos(CSSFlexDirection axis) {
|
|
|
|
return axis == CSSFlexDirection.COLUMN ? PositionIndex.TOP : PositionIndex.LEFT;
|
|
|
|
}
|
|
|
|
|
|
|
|
private static DimensionIndex getDim(CSSFlexDirection axis) {
|
|
|
|
return axis == CSSFlexDirection.COLUMN ? DimensionIndex.HEIGHT : DimensionIndex.WIDTH;
|
|
|
|
}
|
|
|
|
|
|
|
|
private static boolean isDimDefined(CSSNode node, CSSFlexDirection axis) {
|
2015-03-22 14:36:16 +08:00
|
|
|
float value = getStyleDimension(node, getDim(axis));
|
|
|
|
return !CSSConstants.isUndefined(value) && value > 0.0;
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
private static boolean isPosDefined(CSSNode node, PositionIndex position) {
|
2014-12-02 22:30:44 +00:00
|
|
|
return !CSSConstants.isUndefined(getStylePosition(node, position));
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
private static float getPosition(CSSNode node, PositionIndex position) {
|
|
|
|
float result = getStylePosition(node, position);
|
2014-12-02 22:30:44 +00:00
|
|
|
return CSSConstants.isUndefined(result) ? 0 : result;
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
private static float getMargin(CSSNode node, PositionIndex position) {
|
|
|
|
switch (position) {
|
|
|
|
case TOP:
|
2015-01-19 12:37:30 +00:00
|
|
|
return node.style.margin[Spacing.TOP];
|
2014-09-18 15:15:21 -07:00
|
|
|
case BOTTOM:
|
2015-01-19 12:37:30 +00:00
|
|
|
return node.style.margin[Spacing.BOTTOM];
|
2014-09-18 15:15:21 -07:00
|
|
|
case LEFT:
|
2015-01-19 12:37:30 +00:00
|
|
|
return node.style.margin[Spacing.LEFT];
|
2014-09-18 15:15:21 -07:00
|
|
|
case RIGHT:
|
2015-01-19 12:37:30 +00:00
|
|
|
return node.style.margin[Spacing.RIGHT];
|
2014-09-18 15:15:21 -07:00
|
|
|
default:
|
|
|
|
throw new RuntimeException("Someone added a new cardinal direction...");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private static float getPadding(CSSNode node, PositionIndex position) {
|
|
|
|
switch (position) {
|
|
|
|
case TOP:
|
2015-01-19 12:37:30 +00:00
|
|
|
return node.style.padding[Spacing.TOP];
|
2014-09-18 15:15:21 -07:00
|
|
|
case BOTTOM:
|
2015-01-19 12:37:30 +00:00
|
|
|
return node.style.padding[Spacing.BOTTOM];
|
2014-09-18 15:15:21 -07:00
|
|
|
case LEFT:
|
2015-01-19 12:37:30 +00:00
|
|
|
return node.style.padding[Spacing.LEFT];
|
2014-09-18 15:15:21 -07:00
|
|
|
case RIGHT:
|
2015-01-19 12:37:30 +00:00
|
|
|
return node.style.padding[Spacing.RIGHT];
|
2014-09-18 15:15:21 -07:00
|
|
|
default:
|
|
|
|
throw new RuntimeException("Someone added a new cardinal direction...");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private static float getBorder(CSSNode node, PositionIndex position) {
|
|
|
|
switch (position) {
|
|
|
|
case TOP:
|
2015-01-19 12:37:30 +00:00
|
|
|
return node.style.border[Spacing.TOP];
|
2014-09-18 15:15:21 -07:00
|
|
|
case BOTTOM:
|
2015-01-19 12:37:30 +00:00
|
|
|
return node.style.border[Spacing.BOTTOM];
|
2014-09-18 15:15:21 -07:00
|
|
|
case LEFT:
|
2015-01-19 12:37:30 +00:00
|
|
|
return node.style.border[Spacing.LEFT];
|
2014-09-18 15:15:21 -07:00
|
|
|
case RIGHT:
|
2015-01-19 12:37:30 +00:00
|
|
|
return node.style.border[Spacing.RIGHT];
|
2014-09-18 15:15:21 -07:00
|
|
|
default:
|
|
|
|
throw new RuntimeException("Someone added a new cardinal direction...");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private static float getPaddingAndBorder(CSSNode node, PositionIndex position) {
|
|
|
|
return getPadding(node, position) + getBorder(node, position);
|
|
|
|
}
|
|
|
|
|
|
|
|
private static float getMarginAxis(CSSNode node, CSSFlexDirection axis) {
|
|
|
|
return getMargin(node, getLeading(axis)) + getMargin(node, getTrailing(axis));
|
|
|
|
}
|
|
|
|
|
|
|
|
private static float getPaddingAndBorderAxis(CSSNode node, CSSFlexDirection axis) {
|
|
|
|
return getPaddingAndBorder(
|
|
|
|
node,
|
|
|
|
getLeading(axis)) + getPaddingAndBorder(node, getTrailing(axis));
|
|
|
|
}
|
|
|
|
|
|
|
|
private static void setDimensionFromStyle(CSSNode node, CSSFlexDirection axis) {
|
|
|
|
// The parent already computed us a width or height. We just skip it
|
2014-12-02 22:30:44 +00:00
|
|
|
if (!CSSConstants.isUndefined(getLayoutDimension(node, getDim(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(
|
|
|
|
getStyleDimension(node, getDim(axis)),
|
|
|
|
getPaddingAndBorderAxis(node, axis));
|
|
|
|
setLayoutDimension(node, getDim(axis), maxLayoutDimension);
|
|
|
|
}
|
|
|
|
|
|
|
|
private static float getRelativePosition(CSSNode node, CSSFlexDirection axis) {
|
|
|
|
float lead = getStylePosition(node, getLeading(axis));
|
2014-12-02 22:30:44 +00:00
|
|
|
if (!CSSConstants.isUndefined(lead)) {
|
2014-09-18 15:15:21 -07:00
|
|
|
return lead;
|
|
|
|
}
|
|
|
|
return -getPosition(node, getTrailing(axis));
|
|
|
|
}
|
|
|
|
|
|
|
|
private static float getFlex(CSSNode node) {
|
|
|
|
return node.style.flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
private static CSSFlexDirection getFlexDirection(CSSNode node) {
|
|
|
|
return node.style.flexDirection;
|
|
|
|
}
|
|
|
|
|
|
|
|
private static CSSPositionType getPositionType(CSSNode node) {
|
|
|
|
return node.style.positionType;
|
|
|
|
}
|
|
|
|
|
|
|
|
private static CSSAlign getAlignItem(CSSNode node, CSSNode child) {
|
|
|
|
if (child.style.alignSelf != CSSAlign.AUTO) {
|
|
|
|
return child.style.alignSelf;
|
|
|
|
}
|
|
|
|
return node.style.alignItems;
|
|
|
|
}
|
|
|
|
|
|
|
|
private static CSSJustify getJustifyContent(CSSNode node) {
|
|
|
|
return node.style.justifyContent;
|
|
|
|
}
|
|
|
|
|
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) {
|
|
|
|
return getPositionType(node) == CSSPositionType.RELATIVE && getFlex(node) > 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
private static boolean isMeasureDefined(CSSNode node) {
|
|
|
|
return node.isMeasureDefined();
|
|
|
|
}
|
|
|
|
|
|
|
|
private static float getDimWithMargin(CSSNode node, CSSFlexDirection axis) {
|
|
|
|
return getLayoutDimension(node, getDim(axis)) +
|
|
|
|
getMargin(node, getLeading(axis)) +
|
|
|
|
getMargin(node, getTrailing(axis));
|
|
|
|
}
|
|
|
|
|
|
|
|
private static boolean needsRelayout(CSSNode node, float parentMaxWidth) {
|
|
|
|
return node.isDirty() ||
|
|
|
|
!FloatUtil.floatsEqual(node.lastLayout.requestedHeight, node.layout.height) ||
|
|
|
|
!FloatUtil.floatsEqual(node.lastLayout.requestedWidth, node.layout.width) ||
|
|
|
|
!FloatUtil.floatsEqual(node.lastLayout.parentMaxWidth, parentMaxWidth);
|
|
|
|
}
|
|
|
|
|
2015-03-23 17:49:47 +00:00
|
|
|
/*package*/ static void layoutNode(
|
|
|
|
CSSLayoutContext layoutContext,
|
|
|
|
CSSNode node,
|
|
|
|
float parentMaxWidth) {
|
2014-09-18 15:15:21 -07:00
|
|
|
if (needsRelayout(node, parentMaxWidth)) {
|
|
|
|
node.lastLayout.requestedWidth = node.layout.width;
|
|
|
|
node.lastLayout.requestedHeight = node.layout.height;
|
|
|
|
node.lastLayout.parentMaxWidth = parentMaxWidth;
|
|
|
|
|
2015-03-23 17:49:47 +00:00
|
|
|
layoutNodeImpl(layoutContext, node, parentMaxWidth);
|
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,
|
|
|
|
float parentMaxWidth) {
|
2014-09-18 15:15:21 -07:00
|
|
|
|
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-02-17 21:30:41 -05:00
|
|
|
|
2014-09-18 15:15:21 -07:00
|
|
|
CSSFlexDirection mainAxis = getFlexDirection(node);
|
|
|
|
CSSFlexDirection crossAxis = mainAxis == CSSFlexDirection.ROW ?
|
|
|
|
CSSFlexDirection.COLUMN :
|
|
|
|
CSSFlexDirection.ROW;
|
|
|
|
|
|
|
|
// Handle width and height style attributes
|
|
|
|
setDimensionFromStyle(node, mainAxis);
|
|
|
|
setDimensionFromStyle(node, crossAxis);
|
|
|
|
|
|
|
|
// 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
|
|
|
|
setLayoutPosition(node, getLeading(mainAxis), getLayoutPosition(node, getLeading(mainAxis)) + getMargin(node, getLeading(mainAxis)) +
|
|
|
|
getRelativePosition(node, mainAxis));
|
|
|
|
setLayoutPosition(node, getLeading(crossAxis), getLayoutPosition(node, getLeading(crossAxis)) + getMargin(node, getLeading(crossAxis)) +
|
|
|
|
getRelativePosition(node, crossAxis));
|
|
|
|
|
|
|
|
if (isMeasureDefined(node)) {
|
|
|
|
float width = CSSConstants.UNDEFINED;
|
|
|
|
if (isDimDefined(node, CSSFlexDirection.ROW)) {
|
|
|
|
width = node.style.width;
|
2014-12-02 22:30:44 +00:00
|
|
|
} else if (!CSSConstants.isUndefined(getLayoutDimension(node, getDim(CSSFlexDirection.ROW)))) {
|
2014-09-18 15:15:21 -07:00
|
|
|
width = getLayoutDimension(node, getDim(CSSFlexDirection.ROW));
|
|
|
|
} else {
|
|
|
|
width = parentMaxWidth -
|
|
|
|
getMarginAxis(node, CSSFlexDirection.ROW);
|
|
|
|
}
|
|
|
|
width -= getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
|
|
|
|
|
|
|
|
// 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.
|
|
|
|
boolean isRowUndefined = !isDimDefined(node, CSSFlexDirection.ROW) &&
|
2014-12-02 22:30:44 +00:00
|
|
|
CSSConstants.isUndefined(getLayoutDimension(node, getDim(CSSFlexDirection.ROW)));
|
2014-09-18 15:15:21 -07:00
|
|
|
boolean isColumnUndefined = !isDimDefined(node, CSSFlexDirection.COLUMN) &&
|
2014-12-02 22:30:44 +00:00
|
|
|
CSSConstants.isUndefined(getLayoutDimension(node, getDim(CSSFlexDirection.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-03-23 17:49:47 +00:00
|
|
|
layoutContext.measureOutput,
|
|
|
|
width
|
2014-09-18 15:15:21 -07:00
|
|
|
);
|
|
|
|
if (isRowUndefined) {
|
2015-02-17 21:12:29 -05:00
|
|
|
node.layout.width = measureDim.width +
|
2014-09-18 15:15:21 -07:00
|
|
|
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
|
|
|
|
}
|
|
|
|
if (isColumnUndefined) {
|
2015-02-17 21:12:29 -05:00
|
|
|
node.layout.height = measureDim.height +
|
2014-09-18 15:15:21 -07:00
|
|
|
getPaddingAndBorderAxis(node, CSSFlexDirection.COLUMN);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2015-02-17 21:12:29 -05:00
|
|
|
int i;
|
|
|
|
int ii;
|
|
|
|
CSSNode child;
|
|
|
|
CSSFlexDirection axis;
|
|
|
|
|
2014-09-18 15:15:21 -07:00
|
|
|
// Pre-fill some dimensions straight from the parent
|
2015-02-17 21:12:29 -05:00
|
|
|
for (i = 0; i < node.getChildCount(); ++i) {
|
|
|
|
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 &&
|
|
|
|
getPositionType(child) == CSSPositionType.RELATIVE &&
|
2014-12-02 22:30:44 +00:00
|
|
|
!CSSConstants.isUndefined(getLayoutDimension(node, getDim(crossAxis))) &&
|
2014-12-11 20:23:53 +00:00
|
|
|
!isDimDefined(child, crossAxis)) {
|
2014-09-18 15:15:21 -07:00
|
|
|
setLayoutDimension(child, getDim(crossAxis), Math.max(
|
|
|
|
getLayoutDimension(node, getDim(crossAxis)) -
|
|
|
|
getPaddingAndBorderAxis(node, crossAxis) -
|
|
|
|
getMarginAxis(child, crossAxis),
|
|
|
|
// You never want to go smaller than padding
|
|
|
|
getPaddingAndBorderAxis(child, crossAxis)
|
|
|
|
));
|
|
|
|
} else if (getPositionType(child) == CSSPositionType.ABSOLUTE) {
|
|
|
|
// 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++) {
|
|
|
|
axis = (ii != 0) ? CSSFlexDirection.ROW : CSSFlexDirection.COLUMN;
|
2014-12-02 22:30:44 +00:00
|
|
|
if (!CSSConstants.isUndefined(getLayoutDimension(node, getDim(axis))) &&
|
2014-09-18 15:15:21 -07:00
|
|
|
!isDimDefined(child, axis) &&
|
|
|
|
isPosDefined(child, getLeading(axis)) &&
|
|
|
|
isPosDefined(child, getTrailing(axis))) {
|
|
|
|
setLayoutDimension(child, getDim(axis), Math.max(
|
|
|
|
getLayoutDimension(node, getDim(axis)) -
|
|
|
|
getPaddingAndBorderAxis(node, axis) -
|
|
|
|
getMarginAxis(child, axis) -
|
|
|
|
getPosition(child, getLeading(axis)) -
|
|
|
|
getPosition(child, getTrailing(axis)),
|
|
|
|
// You never want to go smaller than padding
|
|
|
|
getPaddingAndBorderAxis(child, axis)
|
|
|
|
));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2014-12-12 12:03:31 +00:00
|
|
|
float definedMainDim = CSSConstants.UNDEFINED;
|
2014-12-02 22:30:44 +00:00
|
|
|
if (!CSSConstants.isUndefined(getLayoutDimension(node, getDim(mainAxis)))) {
|
2014-12-11 20:23:53 +00:00
|
|
|
definedMainDim = getLayoutDimension(node, getDim(mainAxis)) -
|
2014-12-12 12:03:31 +00:00
|
|
|
getPaddingAndBorderAxis(node, mainAxis);
|
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-01-19 12:37:30 +00:00
|
|
|
while (endLine < node.getChildCount()) {
|
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;
|
|
|
|
for (i = startLine; i < node.getChildCount(); ++i) {
|
|
|
|
child = node.getChildAt(i);
|
2014-12-12 12:03:31 +00:00
|
|
|
float nextContentDim = 0;
|
|
|
|
|
|
|
|
// It only makes sense to consider a child flexible if we have a computed
|
|
|
|
// dimension for the node.
|
|
|
|
if (!CSSConstants.isUndefined(getLayoutDimension(node, getDim(mainAxis))) && isFlex(child)) {
|
|
|
|
flexibleChildrenCount++;
|
|
|
|
totalFlexible = totalFlexible + getFlex(child);
|
|
|
|
|
|
|
|
// Even if we don't know its exact size yet, we already know the padding,
|
|
|
|
// border and margin. We'll use this partial information to compute the
|
|
|
|
// remaining space.
|
|
|
|
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;
|
|
|
|
if (mainAxis != CSSFlexDirection.ROW) {
|
2014-12-11 20:23:53 +00:00
|
|
|
maxWidth = parentMaxWidth -
|
|
|
|
getMarginAxis(node, CSSFlexDirection.ROW) -
|
|
|
|
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
|
2015-02-17 21:12:29 -05:00
|
|
|
|
|
|
|
if (isDimDefined(node, CSSFlexDirection.ROW)) {
|
|
|
|
maxWidth = getLayoutDimension(node, getDim(CSSFlexDirection.ROW)) -
|
|
|
|
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
|
|
|
|
}
|
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-03-23 17:49:47 +00:00
|
|
|
layoutNode(layoutContext, child, maxWidth);
|
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
|
|
|
|
if (getPositionType(child) == CSSPositionType.RELATIVE) {
|
|
|
|
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
|
|
|
|
if (isFlexWrap(node) &&
|
|
|
|
!CSSConstants.isUndefined(getLayoutDimension(node, getDim(mainAxis))) &&
|
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) {
|
|
|
|
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;
|
2014-12-12 12:03:31 +00:00
|
|
|
mainContentDim = mainContentDim + nextContentDim;
|
|
|
|
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;
|
|
|
|
if (!CSSConstants.isUndefined(getLayoutDimension(node, getDim(mainAxis)))) {
|
|
|
|
remainingMainDim = definedMainDim - mainContentDim;
|
|
|
|
} else {
|
|
|
|
remainingMainDim = Math.max(mainContentDim, 0) - mainContentDim;
|
|
|
|
}
|
|
|
|
|
|
|
|
// If there are flexible children in the mix, they are going to fill the
|
|
|
|
// remaining space
|
|
|
|
if (flexibleChildrenCount != 0) {
|
|
|
|
float flexibleMainDim = remainingMainDim / totalFlexible;
|
|
|
|
|
|
|
|
// 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
|
|
|
|
setLayoutDimension(child, getDim(mainAxis), flexibleMainDim * getFlex(child) +
|
|
|
|
getPaddingAndBorderAxis(child, mainAxis));
|
|
|
|
|
2015-02-17 21:12:29 -05:00
|
|
|
maxWidth = CSSConstants.UNDEFINED;
|
|
|
|
if (isDimDefined(node, CSSFlexDirection.ROW)) {
|
2014-12-12 12:03:31 +00:00
|
|
|
maxWidth = getLayoutDimension(node, getDim(CSSFlexDirection.ROW)) -
|
|
|
|
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
|
2015-02-17 21:12:29 -05:00
|
|
|
} else if (mainAxis != CSSFlexDirection.ROW) {
|
2014-12-12 12:03:31 +00:00
|
|
|
maxWidth = parentMaxWidth -
|
|
|
|
getMarginAxis(node, CSSFlexDirection.ROW) -
|
|
|
|
getPaddingAndBorderAxis(node, CSSFlexDirection.ROW);
|
|
|
|
}
|
|
|
|
|
|
|
|
// And we recursively call the layout algorithm for this child
|
2015-03-23 17:49:47 +00:00
|
|
|
layoutNode(layoutContext, child, maxWidth);
|
2014-12-12 12:03:31 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// We use justifyContent to figure out how to allocate the remaining
|
|
|
|
// space available
|
|
|
|
} else {
|
|
|
|
CSSJustify justifyContent = getJustifyContent(node);
|
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;
|
|
|
|
float mainDim = leadingMainDim +
|
|
|
|
getPaddingAndBorder(node, getLeading(mainAxis));
|
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);
|
2014-12-12 12:03:31 +00:00
|
|
|
|
|
|
|
if (getPositionType(child) == CSSPositionType.ABSOLUTE &&
|
|
|
|
isPosDefined(child, getLeading(mainAxis))) {
|
|
|
|
// 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).
|
|
|
|
setLayoutPosition(child, getPos(mainAxis), getPosition(child, getLeading(mainAxis)) +
|
|
|
|
getBorder(node, getLeading(mainAxis)) +
|
|
|
|
getMargin(child, getLeading(mainAxis)));
|
|
|
|
} else {
|
|
|
|
// If the child is position absolute (without top/left) or relative,
|
|
|
|
// we put it at the current accumulated offset.
|
|
|
|
setLayoutPosition(child, getPos(mainAxis), getLayoutPosition(child, getPos(mainAxis)) + mainDim);
|
|
|
|
}
|
|
|
|
|
|
|
|
// 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.
|
|
|
|
if (getPositionType(child) == CSSPositionType.RELATIVE) {
|
|
|
|
// The main dimension is the sum of all the elements dimension plus
|
|
|
|
// the spacing.
|
|
|
|
mainDim = mainDim + betweenMainDim + getDimWithMargin(child, mainAxis);
|
|
|
|
// The cross dimension is the max of the elements dimension since there
|
|
|
|
// can only be one element in that cross dimension.
|
|
|
|
crossDim = Math.max(crossDim, getDimWithMargin(child, crossAxis));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
float containerMainAxis = getLayoutDimension(node, getDim(mainAxis));
|
|
|
|
// 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-02-17 21:12:29 -05:00
|
|
|
if (CSSConstants.isUndefined(containerMainAxis)) {
|
2014-12-12 12:03:31 +00:00
|
|
|
containerMainAxis = Math.max(
|
|
|
|
// We're missing the last padding at this point to get the final
|
|
|
|
// dimension
|
|
|
|
mainDim + getPaddingAndBorder(node, getTrailing(mainAxis)),
|
|
|
|
// We can never assign a width smaller than the padding and borders
|
|
|
|
getPaddingAndBorderAxis(node, mainAxis)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
float containerCrossAxis = getLayoutDimension(node, getDim(crossAxis));
|
|
|
|
if (CSSConstants.isUndefined(getLayoutDimension(node, getDim(crossAxis)))) {
|
|
|
|
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
|
|
|
|
crossDim + getPaddingAndBorderAxis(node, crossAxis),
|
|
|
|
getPaddingAndBorderAxis(node, crossAxis)
|
|
|
|
);
|
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
|
|
|
|
|
|
|
if (getPositionType(child) == CSSPositionType.ABSOLUTE &&
|
|
|
|
isPosDefined(child, getLeading(crossAxis))) {
|
|
|
|
// 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.
|
|
|
|
setLayoutPosition(child, getPos(crossAxis), getPosition(child, getLeading(crossAxis)) +
|
|
|
|
getBorder(node, getLeading(crossAxis)) +
|
|
|
|
getMargin(child, getLeading(crossAxis)));
|
|
|
|
|
|
|
|
} else {
|
|
|
|
float leadingCrossDim = getPaddingAndBorder(node, getLeading(crossAxis));
|
|
|
|
|
|
|
|
// For a relative children, we're either using alignItems (parent) or
|
|
|
|
// alignSelf (child) in order to determine the position in the cross axis
|
|
|
|
if (getPositionType(child) == CSSPositionType.RELATIVE) {
|
|
|
|
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)) {
|
|
|
|
setLayoutDimension(child, getDim(crossAxis), Math.max(
|
|
|
|
containerCrossAxis -
|
|
|
|
getPaddingAndBorderAxis(node, crossAxis) -
|
|
|
|
getMarginAxis(child, crossAxis),
|
|
|
|
// You never want to go smaller than padding
|
|
|
|
getPaddingAndBorderAxis(child, crossAxis)
|
|
|
|
));
|
|
|
|
}
|
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 -
|
|
|
|
getPaddingAndBorderAxis(node, crossAxis) -
|
|
|
|
getDimWithMargin(child, crossAxis);
|
|
|
|
|
|
|
|
if (alignItem == CSSAlign.CENTER) {
|
|
|
|
leadingCrossDim = leadingCrossDim + remainingCrossDim / 2;
|
|
|
|
} else { // CSSAlign.FLEX_END
|
|
|
|
leadingCrossDim = leadingCrossDim + remainingCrossDim;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// And we apply the position
|
|
|
|
setLayoutPosition(child, getPos(crossAxis), getLayoutPosition(child, getPos(crossAxis)) + linesCrossDim + leadingCrossDim);
|
|
|
|
}
|
2014-09-18 15:15:21 -07:00
|
|
|
}
|
2014-12-12 12:03:31 +00:00
|
|
|
|
|
|
|
linesCrossDim = linesCrossDim + crossDim;
|
|
|
|
linesMainDim = Math.max(linesMainDim, mainDim);
|
|
|
|
startLine = endLine;
|
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.
|
2014-12-02 22:30:44 +00:00
|
|
|
if (CSSConstants.isUndefined(getLayoutDimension(node, getDim(mainAxis)))) {
|
2014-09-18 15:15:21 -07:00
|
|
|
setLayoutDimension(node, getDim(mainAxis), Math.max(
|
|
|
|
// We're missing the last padding at this point to get the final
|
|
|
|
// dimension
|
2014-12-12 12:03:31 +00:00
|
|
|
linesMainDim + getPaddingAndBorder(node, getTrailing(mainAxis)),
|
2014-09-18 15:15:21 -07:00
|
|
|
// We can never assign a width smaller than the padding and borders
|
|
|
|
getPaddingAndBorderAxis(node, mainAxis)
|
|
|
|
));
|
|
|
|
}
|
|
|
|
|
2014-12-02 22:30:44 +00:00
|
|
|
if (CSSConstants.isUndefined(getLayoutDimension(node, getDim(crossAxis)))) {
|
2014-09-18 15:15:21 -07:00
|
|
|
setLayoutDimension(node, getDim(crossAxis), 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
|
2014-12-12 12:03:31 +00:00
|
|
|
linesCrossDim + getPaddingAndBorderAxis(node, crossAxis),
|
2014-09-18 15:15:21 -07:00
|
|
|
getPaddingAndBorderAxis(node, crossAxis)
|
|
|
|
));
|
|
|
|
}
|
|
|
|
|
|
|
|
// <Loop E> Calculate dimensions for absolutely positioned elements
|
|
|
|
|
2015-02-17 21:12:29 -05:00
|
|
|
for (i = 0; i < node.getChildCount(); ++i) {
|
|
|
|
child = node.getChildAt(i);
|
2014-09-18 15:15:21 -07:00
|
|
|
if (getPositionType(child) == CSSPositionType.ABSOLUTE) {
|
|
|
|
// 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++) {
|
|
|
|
axis = (ii != 0) ? CSSFlexDirection.ROW : CSSFlexDirection.COLUMN;
|
2014-12-02 22:30:44 +00:00
|
|
|
if (!CSSConstants.isUndefined(getLayoutDimension(node, getDim(axis))) &&
|
2014-09-18 15:15:21 -07:00
|
|
|
!isDimDefined(child, axis) &&
|
|
|
|
isPosDefined(child, getLeading(axis)) &&
|
|
|
|
isPosDefined(child, getTrailing(axis))) {
|
|
|
|
setLayoutDimension(child, getDim(axis), Math.max(
|
|
|
|
getLayoutDimension(node, getDim(axis)) -
|
|
|
|
getPaddingAndBorderAxis(node, axis) -
|
|
|
|
getMarginAxis(child, axis) -
|
|
|
|
getPosition(child, getLeading(axis)) -
|
|
|
|
getPosition(child, getTrailing(axis)),
|
|
|
|
// You never want to go smaller than padding
|
|
|
|
getPaddingAndBorderAxis(child, axis)
|
|
|
|
));
|
|
|
|
}
|
|
|
|
}
|
2015-02-17 21:12:29 -05:00
|
|
|
for (ii = 0; ii < 2; ii++) {
|
|
|
|
axis = (ii != 0) ? CSSFlexDirection.ROW : CSSFlexDirection.COLUMN;
|
2014-09-18 15:15:21 -07:00
|
|
|
if (isPosDefined(child, getTrailing(axis)) &&
|
|
|
|
!isPosDefined(child, getLeading(axis))) {
|
|
|
|
setLayoutPosition(child, getLeading(axis), getLayoutDimension(node, getDim(axis)) -
|
|
|
|
getLayoutDimension(child, getDim(axis)) -
|
|
|
|
getPosition(child, getTrailing(axis)));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/** END_GENERATED **/
|
|
|
|
}
|