react-diagrams
react-diagrams copied to clipboard
projectstorm
Diagram nodes jump to position automatically layed out by dagre
Hi, I am trying to automatically layout the nodes with dagre engine.
When creating the nodes, I assign a similar position to each node and then let dagre engine spread it over the canvas.
The problem is that the user can see on the screen how the nodes jump from the same initial position to the new one calculated by dagre engine.
The current setup use react effect hook like this:
useEffect(
addNodesToDiagram();
setTimeout({
autoDistributeWithDagreEngine();
zoomToFitNodes(100);
repaintCanvas();
}, 1)
)
How to fix this so the user sees only the final result?
Did you try disabling repaint until the auto distribue is done? something like:
engineModel.getLayers().forEach((layer) => layer.allowRepaint(false));
autoDistributeWithDagreEngine();
zoomToFitNodes(100);
engineModel.getLayers().forEach((layer) => layer.allowRepaint(true));
repaintCanvas();
@msaglietto Thank you, but using allowRepaint doesn't have any effect.
The problem seems to be that every diagram engine function has implicit repaintCanvas, which in turn completely prevents repainting the canvas only after all positions have been recalculated by dagre engine.
