react-flow-chart icon indicating copy to clipboard operation
react-flow-chart copied to clipboard

How do I move the view so that it centers on a node?

Open popey456963 opened this issue 4 years ago • 4 comments

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.

popey456963 avatar Mar 02 '21 01:03 popey456963

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

g-wozniak avatar May 31 '22 09:05 g-wozniak

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 }
);

janarvaezkng avatar Jun 20 '23 10:06 janarvaezkng