react-flow-chart
react-flow-chart copied to clipboard
How do I move the view so that it centers on a node?
For instance, when searching for a node I want to be able to center it when selected. I can't easily do this by taking replacing the current screen offset with the position of the node beacuse that doesn't seem accurate.
I've tried using two functions setCenter
nor setViewport
on the instance I got from the hook:
const {setViewport} = useReactFlow()
...
const onBlockOpen = useCallback((posX: number, posY: number) => {
setViewport({
x:posX,
y: posY,
zoom: 0.6
})
}, [setViewport])
as specified in the documentation but neither did anything (no matter of values). Try to check the examples as well, that example seems to work but I don't understand why mine does not work..
In my case, I had to fix the positions a little bit, but it was basically this:
setViewport(
{
x: -node.position.x - (node.width / 2) + (viewportWidth / 2),
y: -node.position.y - (node.height / 2) + (viewportHeight / 2),
zoom: 1,
},
{ duration: 800 }
);