Open peterkogo opened 4 months ago
Hi, is this PR aimed to render the nodes already fitted instead of seeing the transition on page load?
@ogroppo This PR is about making it possible to call fitView
right after setting new nodes.
If you use the ReactFlow
fitView
prop, it should fit before the first render.
Apologies if I am polluting this conversation with this issue, so redirect me in case, I am seeing this behaviour with minimal setup using version 12.0.0-next.17 with nextjs, in a client component page ("use client")
https://github.com/xyflow/xyflow/assets/4820803/87392f47-93cc-413c-9425-8b157e76d7f5
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
...
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
fitView
colorMode={colorMode}
>
When removing fitView the zoom does not adjust but the edges are rendered later
https://github.com/xyflow/xyflow/assets/4820803/b622933e-f9b2-4d0f-913b-92b27a88bbad
How do your nodes look like?
This is what is fed into useNodesState and useEdgesState
{
"nodes": [
{
"id": "1",
"data": {
"label": "Granpa"
},
"width": 150,
"height": 30,
"position": {
"x": 0,
"y": 0
}
},
{
"id": "2",
"data": {
"label": "pa"
},
"width": 150,
"height": 30,
"position": {
"x": 0,
"y": 70
}
},
{
"id": "3",
"data": {
"label": "me"
},
"width": 150,
"height": 30,
"position": {
"x": 0,
"y": 140
}
},
{
"id": "5",
"data": {
"label": "alby"
},
"width": 150,
"height": 30,
"position": {
"x": 0,
"y": 210
}
},
{
"id": "6",
"data": {
"label": "mimmo"
},
"width": 150,
"height": 30,
"position": {
"x": 190,
"y": 210
}
}
],
"edges": [
{
"id": "10",
"source": "1",
"label": "has",
"target": "2"
},
{
"id": "11",
"source": "2",
"label": "has",
"target": "3"
},
{
"id": "13",
"source": "3",
"label": "has",
"target": "5"
},
{
"id": "14",
"source": "3",
"label": "has",
"target": "6"
}
]
}
Changes
Questions