Ensure that all nodes are visible within scrollable area

[Sigkill79]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ X] Other... Please describe: Maybe it's a feature request, maybe it's me not understanding how things work.

Current behavior

We currently have a few customers with graphs with many elements, and then nodes gets located outside the scrollable area. It is fixed by setting maxHeight to something big, but you risk having a much larger scrollable area than you need. I was hoping there was someway of setting a maxHeight and maxWidth based on the area that is actually populated by nodes.

Expected behavior

I would like to either the library set the size of the scrollable area based on where nodes are located, or that one can retrieve a 'bounding box' of all the nodes, so one can set a meaningful mxHeight/maxWidth.

Minimal reproduction of the problem with instructions

Simply create a graph with many nodes :)

What is the motivation / use case for changing the behavior?

Environment

Libs:
- react version: 17.0.2
- realflow version: 4.2.7


Browser:
- [X ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ X] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX            

[BernhardWItt]

I had the same problem and this workaround works for me:

const canvasRef = useRef<CanvasRef>(null);

const calculatePaneWidthAndHeight = useCallback(() => { let newHeight = 0; let newWidth = 0; canvasRef?.current?.layout?.children?.forEach((node) => { if (node.y + node.height > newHeight) newHeight = node.y + node.height; if (node.x + node.width > newWidth) newWidth = node.x + node.width; });

setPaneHeight(newHeight);
setPaneWidth(newWidth);

},[]);

...

<Canvas ref={canvasRef} onLayoutChange={calculatePaneWidthAndHeight} maxHeight={paneHeight} maxWidth={paneWidth} ...

[subodhpareek18]

The above work around works well on initial load, but when I zoom in to the tree, the same issue persists