0

I'm working on a React-Flow project. I'm changing the layout of the nodes and edges with a button and I want the last thing to happen to be resetting the viewport to be centered (so just fitView).

How can I do this?

I've tried calling fitView() again but this doesn't seem to work at all.

907riley
  • 11
  • 1

2 Answers2

1

Try calling fitView inside of a setTimeout

setTimeout(reactFlowInstance.setView)

There is no need to pass a specific delay to the timeout, since (quoting the docs):

If this parameter is omitted, a value of 0 is used, meaning execute "immediately", or more accurately, the next event cycle.

Which in our case is following the re-render of the Flow.

YenHub
  • 81
  • 6
0

You can call fitView() on the react flow instance.

The instance you get from the onInit callback and save in a state, e.g. like this:

<ReactFlow ... onInit={(instance) => setReactFlowInstance(instance)} />
Roman
  • 91
  • 5