how do properly zoom and center? | xyflow | Page 1

paper cargo Sep 15, 2023, 1:03 AM

#

Code looks like this:

useEffect(function init() {
  const layoutNodes = // apply layout
  // this code seems to work but when I apply a bound using the   result, it's off!
  const result = calculateBounds(layoutNodes);

  setNodes(layoutNodes);

  // bounds are off! even though leftMax,topMax,width,height are   correct 
  fitBounds({
    x: result.bounds.leftMax,
    y: result.bounds.topMax,
    width: result.width,
    height: result.height,
  });
}, []);

You can see in the screenshot that the graph is cut off

#

setCenter seems to have the same issue

spring stag Sep 18, 2023, 5:46 PM

#

did you solve this issue or you are still having this problem

lusty gull Sep 19, 2023, 6:53 AM

#

How are you calculating the bounds

paper cargo Sep 21, 2023, 3:17 AM

#

yea so figure out what the issue is

when you do setCenter(x,y,{zoom})
the expectation is that it will center the viewport at (x,y) with the given zoom level
what actually happens is the following....
it will first zoom, then move to (x,y) --- which isn't what you want in the scaled space
that means you have to scale (x,y) --- (zoom*x, zoom*y). to get it to center correctly
in other words, you have to call setCenter(x*zoom, y*zoom, {zoom}) to get it to center

#

@spring stag @lusty gull saying it loud, it sounds like a bug

#how do properly zoom and center?