Problem with initialization (Init order / Prerender / race condition?)

[Phloog]

The DiagramCanvas component seems to behave differently on page refreshes / different lifecycle steps. It's a bit nondeterministic, so it's hard to reproduce / describe.

Ultimately, what I want to achieve is reproducable behaviour with auto-arrange (layoutalgorithm using msagl), automatic ZoomToFit (after arranging the nodes) and registering of custom Node components (this only works after the DiagramCanvas finished its initialization / the @ref-Param is set).

The experienced behaviour is:

a) sometimes everything works on initial Page load b) sometimes the canvas is empty (but the diagrams Node- and Link-Lists are set, as can be verified via debugger) c) sometimes the nodes and links are displayed, but not translating together with the grid; the grid can be dragged and zoomed, and single nodes can be dragged, but the nodes don't follow the pan of the canvas / grid d) sometimes everything works, but is zoomed waaaay in (factor 5 or more) initially

when refreshing (F5) the page, most often cases b) and c) are experienced, very seldomly a) when case b) is experienced, sometimes calling ZoomToFit fixes the situation (nodes appear, can be dragged, etc.) also sometimes in case b), the nodes appear as soon as the canvas is dragged/panned.

To summarize into a single question:

how can I ensure the diagram is setup, arranged and "ZoomToFit"ed on load, and custom Nodes are registered?

Thanks!

[zHaytam]

Hello,

How are you doing things now?

[Phloog]

Hey, I worked around the problem with a bit of a dirty hack:

• I wrote a Component around the DiagramCanvas, called GraphViewer
• In the target component / page where I want to show a graph, I register the GraphViewer into a local variable using @ref=@...
• Inside the GraphViewer, I set the BlazorDiagram that is fed into the DiagramCanvas in OnInitializedAsync().
• Also inside the GraphViewer, I set a public readable prop "FirstRendered" to true in OnAfterRender() if firstRender is true.
• I then, in the target component, IF not PreRendering, wait asynchronously for the @ref-Variable of the GraphViewer to be set
• Then I register my custom Nodetypes etc.
• I then wait asynchronously again for the GraphViewer's FirstRendered-Prop to be true
• Only Then I call ApplyLayout() and ZoomToFit()

Additionally, using CSS, I make the canvas invisible until its FirstRendered Prop is true, and then with a transition I make it visible. This hides the un-arranged nodes that tend to "jump" to their final positions.

All of this does work, but it feels very hacky...