Skip to content

[RFC] adding height to the measure function #154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lucasr merged 1 commit into from
Dec 14, 2015
Merged

[RFC] adding height to the measure function #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 47 additions & 9 deletions dist/css-layout.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ typedef struct {
bool should_update;
float last_requested_dimensions[2];
float last_parent_max_width;
float last_parent_max_height;
float last_dimensions[2];
float last_position[2];
css_direction_t last_direction;
Expand Down Expand Up @@ -143,7 +144,7 @@ struct css_node {
css_node_t* next_absolute_child;
css_node_t* next_flex_child;

css_dim_t (*measure)(void *context, float width);
css_dim_t (*measure)(void *context, float width, float height);
void (*print)(void *context);
struct css_node* (*get_child)(void *context, int i);
bool (*is_dirty)(void *context);
Expand All @@ -165,7 +166,7 @@ typedef enum {
void print_css_node(css_node_t *node, css_print_options_t options);

// Function that computes the layout!
void layoutNode(css_node_t *node, float maxWidth, css_direction_t parentDirection);
void layoutNode(css_node_t *node, float maxWidth, float maxHeight, css_direction_t parentDirection);
bool isUndefined(float value);

#endif
Expand Down Expand Up @@ -249,6 +250,7 @@ void init_css_node(css_node_t *node) {
node->layout.last_requested_dimensions[CSS_WIDTH] = -1;
node->layout.last_requested_dimensions[CSS_HEIGHT] = -1;
node->layout.last_parent_max_width = -1;
node->layout.last_parent_max_height = -1;
node->layout.last_direction = (css_direction_t)-1;
node->layout.should_update = true;
}
Expand Down Expand Up @@ -689,7 +691,7 @@ static float getRelativePosition(css_node_t *node, css_flex_direction_t axis) {
return -getPosition(node, trailing[axis]);
}

static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction_t parentDirection) {
static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentMaxHeight, css_direction_t parentDirection) {
/** START_GENERATED **/
css_direction_t direction = resolveDirection(node, parentDirection);
css_flex_direction_t mainAxis = resolveAxis(getFlexDirection(node), direction);
Expand Down Expand Up @@ -718,6 +720,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
// invocations during the layout calculation.
int childCount = node->children_count;
float paddingAndBorderAxisResolvedRow = getPaddingAndBorderAxis(node, resolvedRowAxis);
float paddingAndBorderAxisColumn = getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);

if (isMeasureDefined(node)) {
bool isResolvedRowDimDefined = !isUndefined(node->layout.dimensions[dim[resolvedRowAxis]]);
Expand All @@ -733,6 +736,17 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
}
width -= paddingAndBorderAxisResolvedRow;

float height = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
height = node->style.dimensions[CSS_HEIGHT];
} else if (!isUndefined(node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]])) {
height = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]];
} else {
height = parentMaxHeight -
getMarginAxis(node, resolvedRowAxis);
}
height -= getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);

// 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.
Expand All @@ -745,15 +759,16 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
css_dim_t measureDim = node->measure(
node->context,

width
width,
height
);
if (isRowUndefined) {
node->layout.dimensions[CSS_WIDTH] = measureDim.dimensions[CSS_WIDTH] +
paddingAndBorderAxisResolvedRow;
}
if (isColumnUndefined) {
node->layout.dimensions[CSS_HEIGHT] = measureDim.dimensions[CSS_HEIGHT] +
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
paddingAndBorderAxisColumn;
}
}
if (childCount == 0) {
Expand Down Expand Up @@ -834,6 +849,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
float crossDim = 0;

float maxWidth;
float maxHeight;
for (i = startLine; i < childCount; ++i) {
child = node->get_child(node->context, i);
child->line_index = linesCount;
Expand Down Expand Up @@ -914,6 +930,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction

} else {
maxWidth = CSS_UNDEFINED;
maxHeight = CSS_UNDEFINED;

if (!isMainRowDirection) {
if (isDimDefined(node, resolvedRowAxis)) {
maxWidth = node->layout.dimensions[dim[resolvedRowAxis]] -
Expand All @@ -923,11 +941,20 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
getMarginAxis(node, resolvedRowAxis) -
paddingAndBorderAxisResolvedRow;
}
} else {
if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
maxHeight = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]] -
paddingAndBorderAxisColumn;
} else {
maxHeight = parentMaxHeight -
getMarginAxis(node, CSS_FLEX_DIRECTION_COLUMN) -
paddingAndBorderAxisColumn;
}
}

// This is the main recursive call. We layout non flexible children.
if (alreadyComputedNextLayout == 0) {
layoutNode(child, maxWidth, direction);
layoutNode(child, maxWidth, maxHeight, direction);
}

// Absolute positioned elements do not take part of the layout, so we
Expand Down Expand Up @@ -1057,9 +1084,18 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
getMarginAxis(node, resolvedRowAxis) -
paddingAndBorderAxisResolvedRow;
}
maxHeight = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
maxHeight = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]] -
paddingAndBorderAxisColumn;
} else if (isMainRowDirection) {
maxHeight = parentMaxHeight -
getMarginAxis(node, CSS_FLEX_DIRECTION_COLUMN) -
paddingAndBorderAxisColumn;
}

// And we recursively call the layout algorithm for this child
layoutNode(currentFlexChild, maxWidth, direction);
layoutNode(currentFlexChild, maxWidth, maxHeight, direction);

child = currentFlexChild;
currentFlexChild = currentFlexChild->next_flex_child;
Expand Down Expand Up @@ -1378,7 +1414,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, css_direction
/** END_GENERATED **/
}

void layoutNode(css_node_t *node, float parentMaxWidth, css_direction_t parentDirection) {
void layoutNode(css_node_t *node, float parentMaxWidth, float parentMaxHeight, css_direction_t parentDirection) {
css_layout_t *layout = &node->layout;
css_direction_t direction = node->style.direction;
layout->should_update = true;
Expand All @@ -1388,6 +1424,7 @@ void layoutNode(css_node_t *node, float parentMaxWidth, css_direction_t parentDi
eq(layout->last_requested_dimensions[CSS_WIDTH], layout->dimensions[CSS_WIDTH]) &&
eq(layout->last_requested_dimensions[CSS_HEIGHT], layout->dimensions[CSS_HEIGHT]) &&
eq(layout->last_parent_max_width, parentMaxWidth);
eq(layout->last_parent_max_height, parentMaxHeight);
eq(layout->last_direction, direction);

if (skipLayout) {
Expand All @@ -1399,9 +1436,10 @@ void layoutNode(css_node_t *node, float parentMaxWidth, css_direction_t parentDi
layout->last_requested_dimensions[CSS_WIDTH] = layout->dimensions[CSS_WIDTH];
layout->last_requested_dimensions[CSS_HEIGHT] = layout->dimensions[CSS_HEIGHT];
layout->last_parent_max_width = parentMaxWidth;
layout->last_parent_max_height = parentMaxHeight;
layout->last_direction = direction;

layoutNodeImpl(node, parentMaxWidth, parentDirection);
layoutNodeImpl(node, parentMaxWidth, parentMaxHeight, parentDirection);

layout->last_dimensions[CSS_WIDTH] = layout->dimensions[CSS_WIDTH];
layout->last_dimensions[CSS_HEIGHT] = layout->dimensions[CSS_HEIGHT];
Expand Down
Binary file modified dist/css-layout.jar
View file
Open in desktop
Binary file not shown.
55 changes: 48 additions & 7 deletions dist/css-layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,11 @@ var computeLayout = (function() {
if (!node.children) {
node.children = [];
}

if (node.style.measure && node.children && node.children.length) {
throw new Error('Using custom measure function is supported only for leaf nodes.');
}

node.children.forEach(fillNodes);
return node;
}
Expand Down Expand Up @@ -458,7 +463,7 @@ var computeLayout = (function() {
return -getPosition(node, trailing[axis]);
}

function layoutNodeImpl(node, parentMaxWidth, /*css_direction_t*/parentDirection) {
function layoutNodeImpl(node, parentMaxWidth, parentMaxHeight, /*css_direction_t*/parentDirection) {
var/*css_direction_t*/ direction = resolveDirection(node, parentDirection);
var/*(c)!css_flex_direction_t*//*(java)!int*/ mainAxis = resolveAxis(getFlexDirection(node), direction);
var/*(c)!css_flex_direction_t*//*(java)!int*/ crossAxis = getCrossFlexDirection(mainAxis, direction);
Expand Down Expand Up @@ -486,6 +491,7 @@ var computeLayout = (function() {
// invocations during the layout calculation.
var/*int*/ childCount = node.children.length;
var/*float*/ paddingAndBorderAxisResolvedRow = getPaddingAndBorderAxis(node, resolvedRowAxis);
var/*float*/ paddingAndBorderAxisColumn = getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);

if (isMeasureDefined(node)) {
var/*bool*/ isResolvedRowDimDefined = !isUndefined(node.layout[dim[resolvedRowAxis]]);
Expand All @@ -501,6 +507,17 @@ var computeLayout = (function() {
}
width -= paddingAndBorderAxisResolvedRow;

var/*float*/ height = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
height = node.style.height;
} else if (!isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]])) {
height = node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]];
} else {
height = parentMaxHeight -
getMarginAxis(node, resolvedRowAxis);
}
height -= getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);

// 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.
Expand All @@ -513,15 +530,16 @@ var computeLayout = (function() {
var/*css_dim_t*/ measureDim = node.style.measure(
/*(c)!node->context,*/
/*(java)!layoutContext.measureOutput,*/
width
width,
height
);
if (isRowUndefined) {
node.layout.width = measureDim.width +
paddingAndBorderAxisResolvedRow;
}
if (isColumnUndefined) {
node.layout.height = measureDim.height +
getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
paddingAndBorderAxisColumn;
}
}
if (childCount === 0) {
Expand Down Expand Up @@ -602,6 +620,7 @@ var computeLayout = (function() {
var/*float*/ crossDim = 0;

var/*float*/ maxWidth;
var/*float*/ maxHeight;
for (i = startLine; i < childCount; ++i) {
child = node.children[i];
child.lineIndex = linesCount;
Expand Down Expand Up @@ -682,6 +701,8 @@ var computeLayout = (function() {

} else {
maxWidth = CSS_UNDEFINED;
maxHeight = CSS_UNDEFINED;

if (!isMainRowDirection) {
if (isDimDefined(node, resolvedRowAxis)) {
maxWidth = node.layout[dim[resolvedRowAxis]] -
Expand All @@ -691,11 +712,20 @@ var computeLayout = (function() {
getMarginAxis(node, resolvedRowAxis) -
paddingAndBorderAxisResolvedRow;
}
} else {
if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
maxHeight = node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]] -
paddingAndBorderAxisColumn;
} else {
maxHeight = parentMaxHeight -
getMarginAxis(node, CSS_FLEX_DIRECTION_COLUMN) -
paddingAndBorderAxisColumn;
}
}

// This is the main recursive call. We layout non flexible children.
if (alreadyComputedNextLayout === 0) {
layoutNode(/*(java)!layoutContext, */child, maxWidth, direction);
layoutNode(/*(java)!layoutContext, */child, maxWidth, maxHeight, direction);
}

// Absolute positioned elements do not take part of the layout, so we
Expand Down Expand Up @@ -825,9 +855,18 @@ var computeLayout = (function() {
getMarginAxis(node, resolvedRowAxis) -
paddingAndBorderAxisResolvedRow;
}
maxHeight = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
maxHeight = node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]] -
paddingAndBorderAxisColumn;
} else if (isMainRowDirection) {
maxHeight = parentMaxHeight -
getMarginAxis(node, CSS_FLEX_DIRECTION_COLUMN) -
paddingAndBorderAxisColumn;
}

// And we recursively call the layout algorithm for this child
layoutNode(/*(java)!layoutContext, */currentFlexChild, maxWidth, direction);
layoutNode(/*(java)!layoutContext, */currentFlexChild, maxWidth, maxHeight, direction);

child = currentFlexChild;
currentFlexChild = currentFlexChild.nextFlexChild;
Expand Down Expand Up @@ -1145,7 +1184,7 @@ var computeLayout = (function() {
}
}

function layoutNode(node, parentMaxWidth, parentDirection) {
function layoutNode(node, parentMaxWidth, parentMaxHeight, parentDirection) {
node.shouldUpdate = true;

var direction = node.style.direction || CSS_DIRECTION_LTR;
Expand All @@ -1155,6 +1194,7 @@ var computeLayout = (function() {
node.lastLayout.requestedHeight === node.layout.height &&
node.lastLayout.requestedWidth === node.layout.width &&
node.lastLayout.parentMaxWidth === parentMaxWidth &&
node.lastLayout.parentMaxHeight === parentMaxHeight &&
node.lastLayout.direction === direction;

if (skipLayout) {
Expand All @@ -1170,6 +1210,7 @@ var computeLayout = (function() {
node.lastLayout.requestedWidth = node.layout.width;
node.lastLayout.requestedHeight = node.layout.height;
node.lastLayout.parentMaxWidth = parentMaxWidth;
node.lastLayout.parentMaxHeight = parentMaxHeight;
node.lastLayout.direction = direction;

// Reset child layouts
Expand All @@ -1180,7 +1221,7 @@ var computeLayout = (function() {
child.layout.left = 0;
});

layoutNodeImpl(node, parentMaxWidth, parentDirection);
layoutNodeImpl(node, parentMaxWidth, parentMaxHeight, parentDirection);

node.lastLayout.width = node.layout.width;
node.lastLayout.height = node.layout.height;
Expand Down
Loading