Documentation Issue, Dagre positioning unclear!

[michael-prewitt-ridge]

Describe the Bug

There are two examples of how to layout something, both with sample code:

1. https://reactflow.dev/learn/layouting/layouting#dagre
2. https://reactflow.dev/examples/layout/dagre

However, option number 1, has a critical difference from option number two, it is missing the following:

    // We are shifting the dagre node position (anchor=center center) to the top left
    // so it matches the React Flow node anchor point (top left).
    node.position = {
      x: nodeWithPosition.x - nodeWidth / 2,
      y: nodeWithPosition.y - nodeHeight / 2,
    };

This is important because if you copy and past the code from option number one, you probably won't realize there is an issue until much later on.

I would suggest

Thank you for such an awesome library!

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Go to the docs and see that the example for here https://reactflow.dev/learn/layouting/layouting#dagre has a bug that is addressed here https://reactflow.dev/examples/layout/dagre

Expected behavior

the code example should have the fix:

    // We are shifting the dagre node position (anchor=center center) to the top left
    // so it matches the React Flow node anchor point (top left).
    node.position = {
      x: nodeWithPosition.x - nodeWidth / 2,
      y: nodeWithPosition.y - nodeHeight / 2,
    };

Screenshots or Videos

No response

Platform

NA

Additional context

Thank you!

[hayleigh-dot-dev]

Yep keeping these two consistent is definitely better, thanks for the heads up!