@inject IJSRuntime JSRuntime

<g @ref="Ref" visibility="hidden">
    <path @ref="PathRef" />
    <circle cx="@X1" cy="@Y1" />
    <circle cx="@X2" cy="@Y2" />
</g>

@code {
    private ElementReference Ref;
    private ElementReference PathRef;

    public double X1;
    public double Y1;
    public double X2;
    public double Y2;



    public async Task Update(double x, double y)
    {
        X2 = x;
        Y2 = y;
        await CaculatePath();
    }

    public async Task StartCreateAsync(double x, double y)
    {
        X1 = x;
        Y1 = y;
        X2 = x;
        Y2 = y;
        await CaculatePath();
        await Visible();
    }

    private async Task CaculatePath()
    {
        var data = $"M {X1} {Y1} L {(X1 + X2) / 2} {(Y1 + Y2) / 2} L {X2} {Y2}";
        await JSRuntime.InvokeVoidAsync("ElementSetAttribute", PathRef, "d", data);
        StateHasChanged();
    }

    public async Task Visible() => await JSRuntime.InvokeVoidAsync("ElementSetAttribute", Ref, "visibility", "visible");
    public async Task Hidden() => await JSRuntime.InvokeVoidAsync("ElementSetAttribute", Ref, "visibility", "hidden");
}