GetRight returns 0 even GetLeft, GetWidth and GetTop, GetHeight return correct values. #1053

New Issue

2021-01-05T14:52:40-08:00

Robert-M-Muench commented

2021-01-05 14:52:40 -08:00

(Migrated from github.com)

I have one root node (r) with two child nodes (c1, c2) with these settings:

	C.YGNodeStyleSetFlexDirection(n, C.YGFlexDirectionRow) // layout as row => nodes are left to right
	C.YGNodeStyleSetFlexGrow(n, 0) // stay in space from parent
	C.YGNodeStyleSetFlexShrink(n, 1) // shrink to fix in space from parent (makes sense when using percent
	C.YGNodeStyleSetHeightPercent(n, 100)
	C.YGNodeStyleSetWidthPercent(n, 100)

Doing a YGNodeCalculateLayout(r, 2000,1000, YGDirectionLTR) I would expect the following results:

	assert.Equal(t, float32(0),    r.GetLeft())
	assert.Equal(t, float32(0),    r.GetTop())
	assert.Equal(t, float32(2000), r.GetWidth())
	assert.Equal(t, float32(1000), r.GetHeight())
	assert.Equal(t, float32(2000), r.GetRight())             <== this returns 0
	assert.Equal(t, float32(1000), r.GetBottom())          <== this returns 0

The problem is that GetRight(==GetLeft+GetWidth?) and GetBottom(==GetTop+GetHeight) don't return the correct values, even the values from which I assume Right and Bottom are calculate dare correct.

Can someone tell me what's going on here?

I have one root node (r) with two child nodes (c1, c2) with these settings: ``` C.YGNodeStyleSetFlexDirection(n, C.YGFlexDirectionRow) // layout as row => nodes are left to right C.YGNodeStyleSetFlexGrow(n, 0) // stay in space from parent C.YGNodeStyleSetFlexShrink(n, 1) // shrink to fix in space from parent (makes sense when using percent C.YGNodeStyleSetHeightPercent(n, 100) C.YGNodeStyleSetWidthPercent(n, 100) ``` Doing a `YGNodeCalculateLayout(r, 2000,1000, YGDirectionLTR)` I would expect the following results: ```Go assert.Equal(t, float32(0), r.GetLeft()) assert.Equal(t, float32(0), r.GetTop()) assert.Equal(t, float32(2000), r.GetWidth()) assert.Equal(t, float32(1000), r.GetHeight()) assert.Equal(t, float32(2000), r.GetRight()) <== this returns 0 assert.Equal(t, float32(1000), r.GetBottom()) <== this returns 0 ``` The problem is that GetRight(==GetLeft+GetWidth?) and GetBottom(==GetTop+GetHeight) don't return the correct values, even the values from which I assume Right and Bottom are calculate dare correct. Can someone tell me what's going on here?

👍 1

sam-mcgrath commented

2021-01-10 12:22:04 -08:00

(Migrated from github.com)

The values are correct. The left/top/right/bottom properties in the computed layout specify the distance to the corresponding edge of the parent node.

Robert-M-Muench commented

2021-01-24 06:02:11 -08:00

(Migrated from github.com)

Ah, ok. Thanks. And for the root nodes, because there is no parent, it's 0.

Robert-M-Muench commented

2021-02-28 10:56:13 -08:00

(Migrated from github.com)

Hmm... I now hit a new problem with child nodes. Adding two child-nodes (lob11, lob12) (lob=layout object) to the above root, which each covering half of the root node, I would expect:

assert.Equal(t, float32(0),    lob11.GetLeft())
assert.Equal(t, float32(0),    lob11.GetTop())
assert.Equal(t, float32(1000), lob11.GetWidth())
assert.Equal(t, float32(1000), lob11.GetHeight())
assert.Equal(t, float32(1000), lob11.GetRight() // <== this test fails, GetRight() returns 0 !!!
assert.Equal(t, float32(0), lob11.GetBottom())

assert.Equal(t, float32(1000),  lob12.GetLeft()) // <== whereas this test is correct, GetLeft() returns 1000
assert.Equal(t, float32(0),     lob12.GetTop())
assert.Equal(t, float32(1000),  lob12.GetWidth())
assert.Equal(t, float32(1000),  lob12.GetHeight())
assert.Equal(t, float32(0),  lob12.GetRight())
assert.Equal(t, float32(0),  lob12.GetBottom())

lob11.GetRight() is inconsistent, because lob12.GetLeft() returns the correct value. So, why not the same behavior lob11.GetRight()?

Hmm... I now hit a new problem with child nodes. Adding two child-nodes (lob11, lob12) (lob=layout object) to the above root, which each covering half of the root node, I would expect: ```Go assert.Equal(t, float32(0), lob11.GetLeft()) assert.Equal(t, float32(0), lob11.GetTop()) assert.Equal(t, float32(1000), lob11.GetWidth()) assert.Equal(t, float32(1000), lob11.GetHeight()) assert.Equal(t, float32(1000), lob11.GetRight() // <== this test fails, GetRight() returns 0 !!! assert.Equal(t, float32(0), lob11.GetBottom()) assert.Equal(t, float32(1000), lob12.GetLeft()) // <== whereas this test is correct, GetLeft() returns 1000 assert.Equal(t, float32(0), lob12.GetTop()) assert.Equal(t, float32(1000), lob12.GetWidth()) assert.Equal(t, float32(1000), lob12.GetHeight()) assert.Equal(t, float32(0), lob12.GetRight()) assert.Equal(t, float32(0), lob12.GetBottom()) ``` lob11.GetRight() is inconsistent, because lob12.GetLeft() returns the correct value. So, why not the same behavior lob11.GetRight()?

NickGerleman commented

2022-10-04 07:55:53 -07:00

(Migrated from github.com)

Related: #1158

John-Colvin commented

2024-02-07 04:21:13 -08:00

(Migrated from github.com)

Which layout results can we actually expect to be set? Perhaps I am totally misunderstanding the situation but it seems that in almost all cases they aren't all set correctly:

See e.g. this very simple example.

import {loadYoga} from 'yoga-layout';
const Yoga = await loadYoga();
const root = Yoga.Node.create();
root.setWidth(100);
root.setHeight(100);
const node1 = Yoga.Node.create();
node1.setWidth(10);
node1.setHeight(10);
root.insertChild(node1, 0);
root.calculateLayout(100, 100, Yoga.DIRECTION_LTR);
console.log(root.getComputedLayout()); // { left: 0, right: 0, top: 0, bottom: 0, width: 100, height: 100 }
console.log(node1.getComputedLayout()); // { left: 0, right: 0, top: 0, bottom: 0, width: 10, height: 10 }

which makes no sense, the invariants have to be left + width + right = parent.width and top + height + bottom = parent.height, right?

Which layout results can we actually expect to be set? Perhaps I am totally misunderstanding the situation but it seems that in almost all cases they aren't all set correctly: See e.g. this very simple example. ``` import {loadYoga} from 'yoga-layout'; const Yoga = await loadYoga(); const root = Yoga.Node.create(); root.setWidth(100); root.setHeight(100); const node1 = Yoga.Node.create(); node1.setWidth(10); node1.setHeight(10); root.insertChild(node1, 0); root.calculateLayout(100, 100, Yoga.DIRECTION_LTR); console.log(root.getComputedLayout()); // { left: 0, right: 0, top: 0, bottom: 0, width: 100, height: 100 } console.log(node1.getComputedLayout()); // { left: 0, right: 0, top: 0, bottom: 0, width: 10, height: 10 } ``` which makes no sense, the invariants have to be `left + width + right = parent.width` and `top + height + bottom = parent.height`, right?

fredemmott commented

2024-12-22 04:37:21 -08:00

(Migrated from github.com)

The values are correct. The left/top/right/bottom properties in the computed layout specify the distance to the corresponding edge of the parent node.

"Bottom" does not appear to be relative to the parent node, just always 0 - e.g:

auto root = YGNodeNew();
YGNodeStyleSetFlexDirection(root, YGFlexDirectionColumn);

auto node1 = YGNodeNew();
auto node2 = YGNodeNew();
YGNodeStyleSetWidth(node1, 100);
YGNodeStyleSetWidth(node2, 100);
YGNodeStyleSetHeight(node1, 10);
YGNodeStyleSetHeight(node2, 10);

YGNodeInsertChild(root, node1, 0);
YGNodeInsertChild(root, node2, 1);

YGNodeCalculateLayout(root, 1024, 768, YGDirectionLTR);
YGNodeLayoutGetTop(node1); // ✅ 0
YGNodeLayoutGetHeight(node1); // ✅ 10
YGNodeLayoutGetBottom(node1); // ❌ 0

node1's bottom is not 0 distance from root's bottom, as node2 is also a child of root, and is positionedd beneath it.

> The values are correct. The left/top/right/bottom properties in the computed layout specify the distance to the corresponding edge of the parent node. "Bottom" does not appear to be relative to the parent node, just always 0 - e.g: ```c++ auto root = YGNodeNew(); YGNodeStyleSetFlexDirection(root, YGFlexDirectionColumn); auto node1 = YGNodeNew(); auto node2 = YGNodeNew(); YGNodeStyleSetWidth(node1, 100); YGNodeStyleSetWidth(node2, 100); YGNodeStyleSetHeight(node1, 10); YGNodeStyleSetHeight(node2, 10); YGNodeInsertChild(root, node1, 0); YGNodeInsertChild(root, node2, 1); YGNodeCalculateLayout(root, 1024, 768, YGDirectionLTR); YGNodeLayoutGetTop(node1); // ✅ 0 YGNodeLayoutGetHeight(node1); // ✅ 10 YGNodeLayoutGetBottom(node1); // ❌ 0 ``` `node1`'s bottom is not 0 distance from `root`'s bottom, as `node2` is also a child of `root`, and is positionedd beneath it.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1053