NodeGraphCanvas.razor

@namespace BootstrapBlazor.Components
@using Microsoft.Extensions.Logging
@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.NodeGraph/js/Graph.js", AutoInvokeDispose = false, JSObjectReference = true)]
@inherits BootstrapModuleComponentBase

@inject NodeGraphService NodeGraphService
@inject ILogger<NodeGraphCanvas> Logger

<div class="@ClassString" @attributes="@AdditionalAttributes" id="@Id">
    <canvas @ref="_graphCanvas"></canvas>
</div>

@code {
    public Graph Graph { get; private set; } = null!;

    private string? ClassString => CssBuilder.Default("graph-main-container")
        .AddClassFromAttributes(AdditionalAttributes)
        .Build();

    private IJSObjectReference _graphCanvasRef = null!;
    private ElementReference _graphCanvas;

    /// <inheritdoc />
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (firstRender)
        {
            // 初始化并添加引用
            await InvokeVoidAsync("init", Id, DotNetObjectReference.Create(NodeGraphService));
            // 创建图表配置
            var graphRef = await InvokeAsync<IJSObjectReference>("createLGraph");
            Graph = new Graph(graphRef!);
            // var graph = new Graph(graphRef!);
            // 创建图表画布
            _graphCanvasRef = await InvokeAsync<IJSObjectReference>("createLGraphCanvas", _graphCanvas, graphRef)
                              ?? throw new InvalidOperationException("Create GraphCanvas failed!");
        }
    }

}