Baseline support #317

woehrl01 · 2017-01-04T21:26:26Z

Added baseline support (see #132)

You have the ability for a custom baseline function (float(*YGBaselineFunc)(YGNodeRef node);) to return whatever baseline you want.

woehrl01 · 2017-01-04T21:50:57Z

Not sure if we should cache the baseline, as we get the baseline twice. First to get the maximum and second to position it.

I'm thinking about something like computedFlexBasisGeneration just named baselineCalculationGeneration and a cached value property.

emilsjolander

This is awesome! Thanks! I'll do a more thorough review later this week. Please run format.sh in the mean time.

emilsjolander · 2017-01-05T10:25:21Z

yoga/Yoga.c

@@ -334,6 +335,20 @@ YGMeasureFunc YGNodeGetMeasureFunc(const YGNodeRef node) {
  return node->measure;
 }

+
+void YGNodeSetBaselineFunc(const YGNodeRef node, YGBaselineFunc baselineFunc) {
+  if (baselineFunc == NULL) {


node->baseline = baselineFunc; is enough

emilsjolander · 2017-01-05T10:26:21Z

yoga/Yoga.c

+  }
+
+  YGNodeRef baselineChild = NULL;
+  for(unsigned int i = 0; i < YGNodeGetChildCount(node); ++i)


woehrl01 · 2017-01-05T10:51:39Z

Please run format.sh in the mean time.

I'd love to do this, but the effort to create the environment to run this on windows, is currently too much work for me. As it seems I need a full linux runtime to execute this.

emilsjolander · 2017-01-05T11:29:26Z

@woehrl01 having clang installed should be enough 👍 But that's fine, I can run it before merging. Could you try to adhere to the code style of the rest of the project though?

woehrl01 · 2017-01-05T12:25:26Z

@emilsjolander clang to the rescue! 👍 strangely clang-format on windows doesn't allow wildcard. So I hope I haven't missed a file.

emilsjolander · 2017-01-05T12:55:00Z

@woehrl01 That's not clang, most likely your shell is not doing the expansion.

woehrl01 · 2017-01-05T12:57:00Z

most likely your shell is not doing the expansion.

true 😄

emilsjolander

Please add some tests for column direction as well as row direction. Also please add tests for align-self usage.

emilsjolander · 2017-01-05T13:40:40Z

yoga/Yoga.c

          if (YGNodeIsLayoutDimDefined(child, crossAxis)) {
            lineHeight = fmaxf(lineHeight,
                               child->layout.measuredDimensions[dim[crossAxis]] +
                                   YGNodeMarginForAxis(child, crossAxis, availableInnerWidth));
          }
+          if (performLayout && YGNodeAlignItem(node, child) == YGAlignBaseline) {


performLayout check is not needed here as it is already checked in the containing if statement

isn't performlayout checked at line 2526 a little bit down below?

emilsjolander · 2017-01-05T13:43:58Z

yoga/Yoga.c

@@ -941,6 +950,39 @@ static inline YGDirection YGNodeResolveDirection(const YGNodeRef node,
  }
 }

+static float YGBaselineOfFirstLine(const YGNodeRef node, const YGFlexDirection crossAxis) {


YGNodeBaseline

emilsjolander · 2017-01-05T19:03:20Z

yoga/Yoga.c

@@ -929,7 +938,12 @@ static inline float YGNodePaddingAndBorderForAxis(const YGNodeRef node,
 }

 static inline YGAlign YGNodeAlignItem(const YGNodeRef node, const YGNodeRef child) {
-  return child->style.alignSelf == YGAlignAuto ? node->style.alignItems : child->style.alignSelf;
+  YGAlign align =


emilsjolander · 2017-01-05T19:06:20Z

yoga/Yoga.c

+  if (node->baseline != NULL) {
+    const float baseline = node->baseline(node);
+    if (YGFloatIsUndefined(baseline)) {
+      return node->layout.measuredDimensions[dim[crossAxis]];


This will always be height as baseline is undefined for column flex direction. right? in that case I think it is better to be clear and use YGDimensionHeight instead of dim[crossAxis]

emilsjolander · 2017-01-05T19:07:40Z

yoga/Yoga.c

+                        const YGFlexDirection crossAxis) {
+  if (node->baseline != NULL) {
+    const float baseline = node->baseline(node);
+    if (YGFloatIsUndefined(baseline)) {


Is there a good reason to allow undefined return value for baseline? I would prefer asserting and crashing as it would probably indicate a bug. What do you think?

I'm not sure my self about this. I thought this could be a kind of "feature", so if you return undefined, you simply use the nodes height. But crashing would be fine too for me. What I'm not sure about is if we explicitly add the padding-top here or if the implementation of the custom function needs to consider this.

The custom function should not take padding into account. We don't expect this for the measure function so I would like to preserve that here if possible.

Let's crash for now. If we find a valid reason to have this feature we can implement it later.

emilsjolander · 2017-01-05T19:11:39Z

yoga/Yoga.c

+  YGNodeRef baselineChild = NULL;
+  for (uint32_t i = 0; i < YGNodeGetChildCount(node); i++) {
+    const YGNodeRef child = YGNodeGetChild(node, i);
+    if (child->style.positionType == YGPositionTypeAbsolute || child->lineIndex > 0) {


Why child->lineIndex > 0? I understand that it skips multiline children but i'm not sure why.

we use only the first line of the children for base layout alignment. At least this is how chrome handles it.

yes, but this looks like we are skipping over children with multiple lines instead of just looking at their first line?

oh, yep. We should break instead of continue here!

emilsjolander · 2017-01-05T19:12:21Z

yoga/Yoga.c

+  }
+
+  if (baselineChild == NULL) {
+    return node->layout.measuredDimensions[dim[crossAxis]];


same as above regarding dim[crossAxis]

emilsjolander · 2017-01-05T19:14:02Z

yoga/Yoga.c

+      continue;
+    }
+
+    if (YGNodeAlignItem(node, child) == YGAlignBaseline) {


The baseline of a container is defined by its first baseline aligned child, but when there is no baseline aligned child then the container's baseline is defined by it's last child. This seems odd. Are you sure we have test cases covering edge cases here to make sure this is how it works on the web?

no it's defined by its first child on the first line or the first baseline aligned child if there is one (one the first line). I'll add a test for this.

So the current code is wrong i think. Right? As it will pick the last child in the case no child is baseline aligned?

no as we only use the child if baselineChild is still NULL. Which is false as seen as we find the first one. We still need to iterate to take any baseline aligned child into account.

emilsjolander · 2017-01-05T19:14:19Z

yoga/Yoga.c

+  }
+
+  const float baseline = YGBaseline(baselineChild, crossAxis);
+  return baseline + baselineChild->layout.position[pos[crossAxis]];


same as above regarding pos[crossAxis]

emilsjolander · 2017-01-05T19:15:01Z

yoga/Yoga.c

+      return true;
+    }
+  }
+  return false;


nit: empty line above

Please add this 👍

not sure what you mean, should I add a empty line above return false?

emilsjolander · 2017-01-05T19:18:02Z

yoga/Yoga.h

@@ -49,6 +49,9 @@ typedef YGSize (*YGMeasureFunc)(YGNodeRef node,
                                YGMeasureMode widthMode,
                                float height,
                                YGMeasureMode heightMode);
+
+typedef float (*YGBaselineFunc)(YGNodeRef node);


nit: remove added empty lines

emilsjolander · 2017-01-05T19:19:23Z

yoga/Yoga.c

          if (YGNodeIsLayoutDimDefined(child, crossAxis)) {
            lineHeight = fmaxf(lineHeight,
                               child->layout.measuredDimensions[dim[crossAxis]] +
                                   YGNodeMarginForAxis(child, crossAxis, availableInnerWidth));
          }
+          if (YGNodeAlignItem(node, child) == YGAlignBaseline) {


same as above. Don't reference crossAxis as it confuses the fact that baseline is only defined for row layouts

should I use YGFlexDirectionColumn here on the YGNodeLeadingMargin and YGNodeMarginForAxis calls?

yes :) and replace dim[crossAxis]

…erride

emilsjolander · 2017-01-05T19:55:55Z

@woehrl01 If you push all updates in one go (Ok if they are different commits) that would make it more clear to me and others when you are finished addressing comments so we can have another look 👍

woehrl01 · 2017-01-05T19:57:58Z

@emilsjolander sorry, will do next time!

woehrl01 · 2017-01-05T20:04:31Z

I think I got all your points, please have a look 😄

emilsjolander · 2017-01-05T20:05:26Z

yoga/Yoga.h

@@ -49,6 +49,8 @@ typedef YGSize (*YGMeasureFunc)(YGNodeRef node,
                                YGMeasureMode widthMode,
                                float height,
                                YGMeasureMode heightMode);
+typedef float (*YGBaselineFunc)(YGNodeRef node);
+


nit: remove added empty line

emilsjolander · 2017-01-05T20:07:18Z

yoga/Yoga.c

@@ -2501,6 +2574,12 @@ static void YGNodelayoutImpl(const YGNodeRef node,
                //                (auto) crossAxis dimension.
                break;
              }
+              case YGAlignBaseline: {
+                child->layout.position[pos[crossAxis]] =


Could pos[crossAxis] be hardcoded? Same with crossAxis a couple lines below

sure, I just wanted to be the same like the others, to not cause confusion. But I'll replace them, to be explicit that it is only used on YGEdgeTop

emilsjolander · 2017-01-05T20:07:59Z

yoga/Yoga.c

+      return true;
+    }
+  }
+  return false;


Please add this 👍

emilsjolander · 2017-01-05T20:09:44Z

yoga/Yoga.c

+  YGNodeRef baselineChild = NULL;
+  for (uint32_t i = 0; i < YGNodeGetChildCount(node); i++) {
+    const YGNodeRef child = YGNodeGetChild(node, i);
+    if (child->lineIndex > 0) {


not quite sure why we break if a child has more than one line. That would mean if the first child of this node has two lines then the baseline would default to the height of the node. I'm not sure why that would be correct.

we break as only childs on the first line which have align baseline are taken into account. I already added a testcase for this.

oh, I see the confusion, child->lineIndex does not mean that it has more than one line. It means it is itself on the seconds (or later) line.

@woehrl01 yeah that was my confusion, i'm not super familiar with the multi line code and read it too quickly 🐱

woehrl01 · 2017-01-05T21:08:51Z

@emilsjolander I additionally modified YGIsBaselineLayout to shortcut to false if it's a column layout.

facebook-github-bot · 2017-01-05T22:10:32Z

@emilsjolander has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

Summary: Added baseline support (see #132) You have the ability for a custom baseline function (```float(*YGBaselineFunc)(YGNodeRef node);```) to return whatever baseline you want. Closes facebook/yoga#317 Reviewed By: splhack Differential Revision: D4385061 Pulled By: emilsjolander fbshipit-source-id: cb8a59a09237c840fa3e21753ab68239997dab0c

Summary: same as Measure function, based on #317 Closes #321 Reviewed By: emilsjolander Differential Revision: D4385336 Pulled By: splhack fbshipit-source-id: b583ec79861d2e9abba31a72503e2f706bfda8e8

anql · 2017-02-24T11:21:53Z

@woehrl01 The baseline feature is really awesome, but I'm not sure how to implement the function correctly. Would you give me some suggestions? Thanks.

woehrl01 · 2017-02-24T12:00:50Z

@anql: Sure! You must return the vertical position inside the node you want to align.

If you do not have a baseline function set, it uses the nodes height. That means that all the nodes are align at their bottom line.

If you have a text node where you want to align your nodes across each others, you need to return the position of the baseline of the firstline inside the node.

I unpacked my "awesome" paint skills 😂, to make this a bit clearer:

If the black numbers are the height of the nodes, you need to return the red values, to align the nodes across. If you have multiline text you need to return the value of the first line.

anql · 2017-02-24T13:23:55Z

The paint is so clearer, it's very helpful for me. 👍 @woehrl01

Summary: Added baseline support (see #132) You have the ability for a custom baseline function (```float(*YGBaselineFunc)(YGNodeRef node);```) to return whatever baseline you want. Closes facebook/yoga#317 Reviewed By: splhack Differential Revision: D4385061 Pulled By: emilsjolander fbshipit-source-id: cb8a59a09237c840fa3e21753ab68239997dab0c

woehrl01 added 2 commits January 4, 2017 22:21

added baseline support

3d840e5

remove background color from tests

3b20c24

facebook-github-bot added the CLA Signed label Jan 4, 2017

woehrl01 added 3 commits January 4, 2017 22:32

fix whitespace indent

71a23ef

more whitespace cleanup

09f3470

enums for csharp and java

29bce98

woehrl01 added 2 commits January 5, 2017 00:27

use flexdirection

d4ccb44

fix nodes with margin

5803ba4

emilsjolander reviewed Jan 5, 2017

View reviewed changes

fix multiline baseline layout

eaa2501

run format.sh

45f0011

woehrl01 added 5 commits January 5, 2017 13:35

renamed variables correctly and used correct values

3e5e01f

format

e99e7b9

cleanup

49ffda5

remove unneeded function

d4e4595

delete tmp file

b721fb3

woehrl01 added 2 commits January 5, 2017 14:11

get baseline of the same direction

00ab30e

fix layout with explicit top specified

23ad2df

emilsjolander reviewed Jan 5, 2017

View reviewed changes

woehrl01 added 3 commits January 5, 2017 14:47

renamed to YGBaseline

17ef313

added test for align-self: baseline

87abbc0

delete tmp

e4f70d0

woehrl01 added 5 commits January 5, 2017 17:02

renamed files and moved tests to accoriding fixtures

d10d050

adjusted text and fixed alignment on column/row direction difference

e87edbf

added additional tests

9d035cd

wrong comparions

1c52ff1

added tests for margin and removed unused function argument

cf7a7c5

emilsjolander reviewed Jan 5, 2017

View reviewed changes

woehrl01 added 5 commits January 5, 2017 20:40

code review changes and tests for child firstline and per baseline ov…

3151617

…erride

add testcase where align-self can't override if on second line

fc834e8

break instead of continue if on second line

11825ad

crash if custom baseline function returns undefined

b790bf7

use height explicit

2595e08

use YGFlexDirectionColumn explicit

0a708e1

emilsjolander reviewed Jan 5, 2017

View reviewed changes

woehrl01 added 2 commits January 5, 2017 22:03

code review changes

9e44f0f

shortcut if node is column direction

1d9855b

splhack mentioned this pull request Jan 5, 2017

C# Baseline function #321

Closed

facebook-github-bot closed this in c169a98 Jan 6, 2017

mk0x9 mentioned this pull request Feb 14, 2018

Missing documentation for baseline alignment #713

Open

synk mentioned this pull request Apr 29, 2018

Fix the height of node which contains baseline items #759

Closed

Baseline support #317

Baseline support #317

Conversation

woehrl01 commented Jan 4, 2017

woehrl01 commented Jan 4, 2017 • edited

emilsjolander left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

woehrl01 commented Jan 5, 2017 • edited

emilsjolander commented Jan 5, 2017

woehrl01 commented Jan 5, 2017 • edited

emilsjolander commented Jan 5, 2017

woehrl01 commented Jan 5, 2017 • edited

emilsjolander left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

woehrl01 Jan 5, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

woehrl01 Jan 5, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

emilsjolander commented Jan 5, 2017

woehrl01 commented Jan 5, 2017

woehrl01 commented Jan 5, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

woehrl01 commented Jan 5, 2017

facebook-github-bot commented Jan 5, 2017

anql commented Feb 24, 2017

woehrl01 commented Feb 24, 2017 • edited

anql commented Feb 24, 2017

woehrl01 commented Jan 4, 2017 •

edited

woehrl01 commented Jan 5, 2017 •

edited

woehrl01 commented Jan 5, 2017 •

edited

woehrl01 commented Jan 5, 2017 •

edited

woehrl01 Jan 5, 2017 •

edited

woehrl01 Jan 5, 2017 •

edited

woehrl01 commented Feb 24, 2017 •

edited