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
setNodes
method a couple of times - New nodes will have
undefined
computed.height
andcomputed.width
fitView
method 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.