Skip to content
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

Jump to bottom

Discrepancy between playground and C #1630

Open
caiovlp opened this issue Mar 18, 2024 · 3 comments
Open

Discrepancy between playground and C #1630

caiovlp opened this issue Mar 18, 2024 · 3 comments
Labels
Algorithm

Comments

@caiovlp
Copy link

caiovlp commented Mar 18, 2024

Report

Issues and Steps to Reproduce

Not sure if this is a configuration issue or not, but it seems I'm getting different behaviors when testing with the same tree on the playground vs c code.

Here's the c code:

TEST(test_yoga, Check) {
    YGConfigRef config = YGConfigNew();
    YGConfigSetUseWebDefaults(config, false);

    YGNodeRef root = YGNodeNewWithConfig(config);
    YGNodeStyleSetFlexDirection(root, YGFlexDirectionColumn);

    {
        YGNodeRef container = YGNodeNewWithConfig(config);
        YGNodeStyleSetFlexDirection(container, YGFlexDirectionColumn);
        YGNodeStyleSetWidth(container, 600);
        YGNodeInsertChild(root, container, 0);

        {
            YGNodeRef child = YGNodeNewWithConfig(config);
            YGNodeStyleSetFlexDirection(child, YGFlexDirectionColumn);
            // margin: 30
            YGNodeStyleSetMargin(child, YGEdgeLeft, 30);
            YGNodeStyleSetMargin(child, YGEdgeTop, 30);
            YGNodeStyleSetMargin(child, YGEdgeRight, 30);
            YGNodeStyleSetMargin(child, YGEdgeBottom, 30);
            YGNodeInsertChild(container, child, 0);

            {
                YGNodeRef grandchild1 = YGNodeNewWithConfig(config);
                YGNodeStyleSetFlexDirection(grandchild1, YGFlexDirectionRow);
                // margin: 40
                YGNodeStyleSetMargin(grandchild1, YGEdgeLeft, 40);
                YGNodeStyleSetMargin(grandchild1, YGEdgeTop, 40);
                YGNodeStyleSetMargin(grandchild1, YGEdgeRight, 40);
                YGNodeStyleSetMargin(grandchild1, YGEdgeBottom, 40);
                // padding: 20
                YGNodeStyleSetPadding(grandchild1, YGEdgeLeft, 20);
                YGNodeStyleSetPadding(grandchild1, YGEdgeTop, 20);
                YGNodeStyleSetPadding(grandchild1, YGEdgeRight, 20);
                YGNodeStyleSetPadding(grandchild1, YGEdgeBottom, 20);
                // height: 100
                YGNodeStyleSetHeight(grandchild1, 100);
                YGNodeInsertChild(child, grandchild1, 0);

                YGNodeRef grandchild2 = YGNodeNewWithConfig(config);
                YGNodeStyleSetFlexDirection(grandchild2, YGFlexDirectionRow);
                // margin: 40
                YGNodeStyleSetMargin(grandchild2, YGEdgeLeft, 50);
                YGNodeStyleSetMargin(grandchild2, YGEdgeTop, 50);
                YGNodeStyleSetMargin(grandchild2, YGEdgeRight, 50);
                YGNodeStyleSetMargin(grandchild2, YGEdgeBottom, 50);
                YGNodeInsertChild(child, grandchild2, 1);

                {
                    YGNodeRef greatgrandchild1 = YGNodeNewWithConfig(config);
                    YGNodeStyleSetFlexDirection(greatgrandchild1, YGFlexDirectionRow);
                    YGNodeStyleSetHeight(greatgrandchild1, 50);
                    // margin: 40
                    YGNodeStyleSetMargin(greatgrandchild1, YGEdgeLeft, 45);
                    YGNodeStyleSetMargin(greatgrandchild1, YGEdgeTop, 45);
                    YGNodeStyleSetMargin(greatgrandchild1, YGEdgeRight, 45);
                    YGNodeStyleSetMargin(greatgrandchild1, YGEdgeBottom, 45);
                    YGNodeInsertChild(grandchild2, greatgrandchild1, 0);
                }
            }
        }
    }

    YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);

    std::function<void(YGNodeRef, int)> dumpNodeTree;

    dumpNodeTree = [&dumpNodeTree](YGNodeRef node, int depth) {
        std::string indent(depth * 4, ' ');

        std::cout << indent << "Node [left: " << YGNodeLayoutGetLeft(node)
                  << ", top: " << YGNodeLayoutGetTop(node)
                  << ", width: " << YGNodeLayoutGetWidth(node)
                  << ", height: " << YGNodeLayoutGetHeight(node) << "]\n";

        for (int i = 0; i < YGNodeGetChildCount(node); i  ) {
            dumpNodeTree(YGNodeGetChild(node, i), depth   1);
        }
    };

    dumpNodeTree(root, 0);
}

Here's the equivalent playground code (plus comments):

<Layout config={{useWebDefaults: false}}> 
  <Node style={{width: 600, direction: "column"}}> <!-- container -->
    <Node style={{margin: 30, direction: "column"}}> <!-- child -->
      <Node style={{margin: 40, padding: 20, height: 100, direction: "row"}}></Node> <!-- grandchild1 -->
      <Node style={{margin: 50, direction: "row"}}> <!-- grandchild2 -->
        <Node style={{margin: 45, height: 50, direction: "row"}}></Node> <!-- greatgrandchild1 -->
      </Node>
    </Node>
  </Node>
</Layout>

In the output of the c code, I get:

Node [left: 0, top: 0, width: 600, height: 480]
    Node [left: 0, top: 0, width: 600, height: 480]
        Node [left: 30, top: 30, width: 540, height: 420]
            Node [left: 40, top: 40, width: 460, height: 100]
            Node [left: 50, top: 230, width: 440, height: 140]
                Node [left: 45, top: 45, width: 0, height: 50]

Width shouldn't be zero imo and the playground correctly assigns the appropriate width:

discrepancy-yoga

Tested both v3.0.2 and v2.0.1 with WebDefaults and without.
@NickGerleman
Copy link
Contributor

Interesting. Playground uses same C API under the hood. Minor differences like JS would use YGEdgeAll in the example given. Would need to debug why these two would behave differently.

@mottosso
Copy link

mottosso commented Aug 1, 2024 •
edited
Loading

Hi, did someone end up looking into this? I'm also seeing different results to playground, the C example looks like this on my end, with 3.1.0 and 2.0.1, with Visual Studio 2019.

image

Also notice the greatgrandchild (small vertical line in the top bright rectangle) not having any width.

@mottosso
Copy link

mottosso commented Aug 1, 2024

Update, this wasn't as big of an issue as I thought; my main hurdle was not understanding that top/bottom was relative the parent node, and not a screenspace coordinate. Hence the odd looking layout above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Algorithm
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@NickGerleman @mottosso @caiovlp