fitView() on onLoad doesn't seem to act, but works with Control Panel

Hello there,

I am currently working on the fitView() method on my diagram, but I see that it doesn’t seem to fit on onLoad().

I am doing this, following the doc :

const onLoad = (reactFlowInstance) => {
    reactFlowInstance.fitView();
}

But it doesn’t happen. But when I click on the fitView button on the control, it does work !

Here is how I use the props in the component :

<ReactFlow
        elements={elements}
        elementsSelectable={diagramMode !== "View"}
        onLoad={onLoad}
        nodesDraggable={nodesDraggableState}
        paneMoveable
        zoomOnScroll
        arrowHeadColor="#206584"
        nodesConnectable={nodesConnectableState}
        defaultPosition={[0, 0]}
        defaultZoom={1}
        onNodeDragStop={onNodeDragStop}
        onConnect={onConnect}
        onElementClick={openForm}
        onElementsRemove={onElementsRemove}
        deleteKeyCode={46}
      >
        <MiniMap
          nodeColor={(node) => {
            switch (node.type) {
              case "input":
                return "red";
              case "default":
                return "#00ff00";
              case "output":
                return "rgb(0,0,255)";
              default:
                return "#eee";
            }
          }}
        />
        <Controls />
      </ReactFlow>

I tried adding padding as a parameter, to do as the Control Panel . Here is the code of the control panel I found in the sources :

{showFitView && (
        <div
          className="react-flow__controls-button react-flow__controls-fitview"
          onClick={() => fitView({ padding: 0.1 })}
        >
          <FitviewIcon />
        </div>
      )}

But even when adding padding like this, it does not change the behaviour. I tried to look at the older issues but couln’t find something related.

Would you have any idea about the source of this ?

Thank you, Yoann

[chrtze]

This seems to happen when the elements are changed after ReactFlow gets mounted (e.g. with useEffect like in the custom node example). That is because the onLoad handler gets called before the new elements are passed to the component. You can workaround this by waiting for the elements to change in an extra useEffect hook. Minimal example: https://codesandbox.io/s/unruffled-ishizaka-fhljt?file=/src/App.js

[KutnerUri]

happening to me too. Fixed it by adding setTimeout, i.e.

onLoad={(instance) => setTimeout(() => instance.fitView(), 0)}

EDIT: this might be caused by setting ‘defaultPosition’, it doesn’t happen once I comment it out