Closed himanshu-1034 closed 1 year ago
Could you make a demo?
@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.
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 theCan anyone suggest some fix for this or perhaps another library? I have heard of reagraph library but will it work like reaflow?