Blazor calling js using js library

Question

Im new to Blazor. Have a js function that uses gojs library. Canvas, data loading are processed dynamically on js side. As I undestood, just adding js script on Host is not enouph and I have to use IJSRuntime. From examples I found it is understandable when calling simple functions with return etc. But I have this:

 function init() {
        if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
        var $ = go.GraphObject.make;  // for conciseness in defining templates
        myDiagram =
            $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
                {
                    initialContentAlignment: go.Spot.Center,
                    allowDrop: true,  // must be true to accept drops from the Palette
                    "LinkDrawn": showLinkLabel,  // this DiagramEvent listener is defined below
                    "LinkRelinked": showLinkLabel,
                    "animationManager.duration": 800, // slightly longer than default (600ms) animation
                    "undoManager.isEnabled": true  // enable undo & redo
                });
        // when the document is modified, add a "*" to the title and enable the "Save" button
        myDiagram.addDiagramListener("Modified", function (e) {
            var button = document.getElementById("SaveButton");
            if (button) button.disabled = !myDiagram.isModified;
            var idx = document.title.indexOf("*");
            if (myDiagram.isModified) {
                if (idx < 0) document.title += "*";
            } else {
                if (idx >= 0) document.title = document.title.substr(0, idx);
            }
        });

        myPalette =
            $(go.Palette, "myPaletteDiv",  // must name or refer to the DIV HTML element
                {
                    "animationManager.duration": 800, // slightly longer than default (600ms) animation
                    nodeTemplateMap: myDiagram.nodeTemplateMap,  // share the templates used by myDiagram
                    model: new go.GraphLinksModel([  // specify the contents of the Palette
                        { category: "Start", text: "Start", figure: "Ellipse" },
                        { text: "Step" },
                        { text: "Check Trigger", figure: "Diamond" },
                        { category: "End", text: "End" }
                        //{ category: "Comment", text: "Comment" }
                    ])
                });
    }
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById("jsonModel").value);

}

and so on. So, on init my canvas are dynamically built.

on component side I have :

<div onload="init()"></div> <span style="display: inline-block; vertical-align: top; padding: 5px; width:20%"> <div id="myPaletteDiv" style="border: solid 1px gray; height: 100%">

     ```   </div>```
  ```  </span>```

   ``` <span style="display: inline-block; vertical-align: top; padding: 5px; width:80%">```
       ``` <div id="myDiagramDiv" style="border: solid 1px gray; height: 100%"></div>```
    ```</span>```

<textarea style="display:inline-block" id="jsonModel"></textarea>

How can I process all this in Blazor? Tried

[JSInvokable]
protected override Task OnAfterRenderAsync(bool firstRender = true)
{
    if (firstRender)
    {
        return jsRuntime.InvokeVoidAsync
            ("init").AsTask();
    }
    return Task.CompletedTask;
}

but it didn`t work. Thank you in advance for any help

Answer 1

There is a complete sample at: https://github.com/NorthwoodsSoftware/GoJS-Alongside-Blazor

It does this:

    protected async override void OnAfterRender(bool firstRender)
    {
      if (firstRender)
      {
        // This calls the script in gojs-scripts.js
        await JSRuntime.InvokeAsync<string>("initGoJS");
      }
    }

Alas, I am not familiar with Blazor, so I'm not able to answer any questions about it.