xyflow: `setNodes` + `fitView` in an uncontrolled flow is broken
Describe the Bug
I think @xyflow/react: v12.0.0-next.9 introduced a regression.
I’m using a setup very similar to Elkjs Tree example from the docs: https://reactflow.dev/examples/layout/elkjs
Also, I’ve implemented Expand and Collapse similar to this example: https://reactflow.dev/examples/layout/expand-collapse
My flow looks something like this:
elkjs => setNodes/setEdges => fitView for auto layout.
After upgrading to v12.0.0-next.9 I started to notice weird glitches with fitView function.
Sometimes it only fits some of the nodes (ones that were updated).
Sometimes it fits into random portion of the view.
And sometimes it does nothing at all.
After some debugging, the only difference between v12.0.0-next.8 and v12.0.0-next.9 I’ve found is that initial nodes have computed.height and computed.width defined.
But after calling setNodes method, new nodes have computed.height: undefined and computed.width: undefined
Steps to Reproduce the Bug or Issue
- Update to
12.0.0-next.9 - Use this example as a base
- Call
setNodesmethod a couple of times - New nodes will have
undefinedcomputed.heightandcomputed.width fitViewmethod will be broken
Expected behavior
After calling fitView all nodes should be visible
Screenshots or Videos
Check this video: https://drive.google.com/file/d/1sCzIzVp6LicJ8_5ref2fA24tBPkLV7vR/view?usp=sharing
Platform
- OS: Windows 11
- Browser: Chrome
- Version: 122.0.6261.70
About this issue
- Original URL
- State: open
- Created 4 months ago
- Comments: 16 (8 by maintainers)
Got it. It might be related with the new batching of
setNodes. We will check it next week.