Issue with rendering large number of nodes with reaflow

[Himanshu Arora]

I a having issues rendering 200-300 nodes in one time with reaflow. On the first render using the fit property works and renders the nodes but on zooming it to 20-30%, some of the nodes goes out of the view port and are not visible even on scrolling too. Inspecting the code and increasing the elements height and width from 2000 to 3000 works but how to make that height and width dynamic is the mystery for me.

Can anyone suggest some fix for this or perhaps another library? I have heard of reagraph library but will it work like reaflow?

[Austin]

Could you make a demo?

[Muhammad Amir]

@himanshu-1034

  const canvasRef = useRef(null);
  const [paneWidth, setPaneWidth] = useState(2000);
  const [paneHeight, setPaneHeight] = useState(2000)
  
const calculatePaneWidthAndHeight = useCallback(() => {
    let newHeight = paneHeight;
    let newWidth = paneWidth;
    canvasRef?.current?.layout?.children?.forEach((node) => {
      if ((node.y + node.height + 300) > newHeight) newHeight = node.y + node.height + 300;
      if (node.x + node.width > newWidth) newWidth = node.x + node.width;
    });
    if (newWidth && newHeight){
      setPaneHeight(newHeight);
      setPaneWidth(newWidth);
    }
  },[]);

<Canvas
             onLayoutChange={() => {
               calculatePaneWidthAndHeight();
             }}

This will adjust the height according to height of canvas.