Calling ZoomToFit function on OnInitialized throws nullreference exception

[Wizdore]

ZoomToFit function throws nullreference exception when its called from the components lifecycle function.
But it works when the function is called onbutton click or any dom events.

So I dont want the user to press a button everytime to fit the diagram on screen. Is there any workaround on this?

[zHaytam]

Hello,
Do you have a simple example to show the issue?
ZoomToFit won't really work before the canvas is rendered, because the nodes don't have sizes yet (unless you set them manually).
Still, it shouldn't throw a NullReferenceException, so that needs to be fixed.

[Wizdore]

Hello,
Do you have a simple example to show the issue?
ZoomToFit won't really work before the canvas is rendered, because the nodes don't have sizes yet (unless you set them manually).
Still, it shouldn't throw a NullReferenceException, so that needs to be fixed.

<div class="diagramContainer" @ref="diagramContainer">
    <DiagramComp Height="_diagramDrawer.diagramHeight"
                 Width="_diagramDrawer.diagramWidth"
                 DiagramModel="_diagramDrawer.diagram"/>
</div>

@code{
    private DiagramDrawer _diagramDrawer;

    protected override void OnInitialized()
    {
        base.OnInitialized();

        _diagramDrawer = new(
            Config.visualConfig.Diagram["height"], 
            Config.visualConfig.Diagram["width"], 
            diagramConfig: Config.plantConfig
            );
        
        _diagramDrawer.diagram.ZoomToFit();

    }
}

Here DiagramDrawer is a class that lays out the diagram based on a json object (Config.plantConfig).
Calling ZoomToFit OnInitialized throws the null reference exception. I found out that its happening because the bounds are not found so for now I have solved it by calling the ZoomToFit in OnAfterRenderAsync and awaiting for the bounds to be calculated and calling StateHasChanged on first render to update the ui.

 protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        await JSRuntime.GetBoundingClientRect(diagramContainer);
        _diagramDrawer.diagram.ZoomToFit(20);
        
        if (firstRender)
            StateHasChanged();
    }

[Wizdore]

I could not reproduce the error on the sample project of this repo. I'll dig deeper whats happening.

[zHaytam]

I believe that I fixed the NullReferenceException part. It was throwing it because the nodes didn't have a Size yet, not because the bounds aren't here yet (that would be another exception).

Since the library needs to know the canvas container and the nodes sizes, calling ZoomToFit in OnInitialized will probably never work, unless you set them beforehand.