projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.58k stars 1.17k forks source link

Diagram nodes jump to position automatically layed out by dagre #799

Open AdrianLsk opened 3 years ago

AdrianLsk commented 3 years ago

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?

msaglietto commented 3 years ago

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();
AdrianLsk commented 3 years ago

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

davakh commented 3 years ago

Have you solved the problem?

AdrianLsk commented 3 years ago

@davakh unfortunately not

challamalla commented 2 years ago

Have you Solved the problem?