reaviz / reaflow

🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.
https://reaflow.dev
Apache License 2.0
2.11k stars 122 forks source link

Issue with rendering large number of nodes with reaflow #190

Closed himanshu-1034 closed 1 year ago

himanshu-1034 commented 1 year ago

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?

amcdnl commented 1 year ago

Could you make a demo?

im-amir commented 1 year ago

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