Checklist

[x] The tests pass
[x] I have referenced the issue(s) or other PR(s) this fixes/relates-to
[x] I have run pnpm changeset and followed the instructions
[x] I have explained in this PR, what I did and why
[x] I replaced the image below
[x] Had a beer/coffee/tea because I did something cool today

What, why and how?

I removed 'setTimeout' from the demo-dagre sample to avoid layout breaks or flickering when the page is loaded. These issues have been documented below, and it currently seems that they have not yet been fundamentally resolved. Additionally, I have identified another related issue: in some cases, the positions of nodes and links are reset to the origin.

Layout breaks occur due to re-rendering components using CanvasWidget or improper sequencing in the usage of DagreEngine. This re-rendering causes the recreation of DiagramEngine. Consequently, the forceUpdate event in CanvasWidget is sometimes lost. To avoid this issue, DiagramEngine should be maintained.

The reason for flickering is that nodes are placed at the origin until DagreEngine distributes items after the timer ticks. DagreEngine's distribution should run after rendering because it needs the width and height of nodes to calculate their positions accurately. The positions of ports are set in the useEffect (equivalent to componentDidMount) phase, which directly refers to DOM components. Therefore, I have moved the timing of DagreEngine's calculations to useLayoutEffect, which executes between render and useEffect.

projectstorm / react-diagrams

Remove setTimeout from demo-dagre to avoid layout breaks #1025

Checklist

What, why and how?

Feel good image:

🦋 Changeset detected