@inject IJSRuntime JSRuntime

<polygon @ref="Ref" visibility="hidden" />

@code {
    private ElementReference Ref;

    public double X1 { get; private set; }
    public double Y1 { get; private set; }
    public double X2 { get; private set; }
    public double Y2 { get; private set; }

    public async Task CreateAsync(double x, double y)
    {
        X1 = x;
        Y1 = y;
        X2 = x;
        Y2 = y;

        await CalculatorZone();
        await Visible();
    }

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

    private async Task CalculatorZone()
    {
        var points = $"{X1},{Y1} {X1},{Y2} {X2},{Y2} {X2},{Y1}";
        await JSRuntime.InvokeVoidAsync("ElementSetAttribute", Ref, "points", points);
    }


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