fitView improvements

[peterkogo]

Changes

• added waitForInit to FitViewProps
• added fitViewScheduled to store
• removed fitViewOnInit, fitViewOnInitOptions, fitViewDone from store

Questions

• What implications are there for reset()?
• Is returning true if fitView has not been called yet and just scheduled okay?

[ogroppo]

Hi, is this PR aimed to render the nodes already fitted instead of seeing the transition on page load?

[moklick]

@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.

[ogroppo]

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")

Untitled.mov

  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

Screen.Recording.2024-05-07.at.22.25.48.mov

[moklick]

How do your nodes look like?

[ogroppo]

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"
        }
    ]
}