contentDocument

@page "/round_scale"

@inject IJSRuntime JSRuntime

<div class="container">
    <div class="row h-75 w-100 justify-content-center">
        <svg height="500" width="750" id="SVGcanvas" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <style>
                .float {
                    font: italic 30px sans-serif;
                    fill: blue;
                }
                .static {
                    font: italic 20px sans-serif;
                    fill: blue;
                }
            </style>
            <circle cx="@cX" cy="@cY" r="@r" stroke-width="3" stroke="red" fill="none" />
            <rect x="@rectX" y="@cY" width="700" height="250" stroke="white" fill="white" />
            <path d="M @arrowX1,@cY @cX,@arrowY2 @arrowX3,@cY Z" stroke="black" fill="black" transform="rotate(@arrowRotate @cX @cY)" />
            <circle cx="@cX" cy="@cY" r="6" stroke="black" fill="black" />
            @for (int i = -180; i < 1; i += step)
            {
                int x1, x2, y1, y2;
                int rShiftTop, rShiftBottom, stroke;
                int valPoint;
                int labelRotation = 0;
                switch (i)
                {
                    case -180:
                        {
                            rShiftTop = 20;
                            rShiftBottom = 5;
                            stroke = 2;
                            valPoint = minVal;
                            labelRotation = i + 90;
                        }
                        break;
                    case -90:
                        {
                            rShiftTop = 20;
                            rShiftBottom = 5;
                            stroke = 2;
                            valPoint = maxVal / 2;
                        }
                        break;
                    case 0:
                        {
                            rShiftTop = 20;
                            rShiftBottom = 5;
                            stroke = 2;
                            valPoint = maxVal;
                        }
                        break;
                    default:
                        {
                            rShiftTop = 10;
                            rShiftBottom = 5;
                            stroke = 1;
                            valPoint = maxVal - Math.Abs(i / step) * (maxVal / (180 / step));
                            labelRotation = i + 90;
                        }
                        break;
                }
                x1 = (int)(Math.Cos(i * (Math.PI / 180.0f)) * (r - rShiftBottom)) + cX;
                y1 = (int)(Math.Sin(i * (Math.PI / 180.0f)) * (r - rShiftBottom)) + cY;
                x2 = (int)(Math.Cos(i * (Math.PI / 180.0f)) * (r + rShiftTop)) + cX;
                y2 = (int)(Math.Sin(i * (Math.PI / 180.0f)) * (r + rShiftTop)) + cY;
                <line x1="@x1" y1="@y1" x2="@x2" y2="@y2" stroke-width="@stroke" stroke="red" />
                <text>
                    <text x="@x2" y="@y2" class="static" transform="rotate(@labelRotation @x2 @y2)">@(valPoint)</text>
                </text>
            }
            }
            <text x="@valueTextX" y="@valueTextY" id="valLabel">@Val.ToString()</text>
            }
        </svg>
    </div>
    <div class="row h-auto w-100 justify-content-center">
        <input type="range" name="volume"
               min="@minVal" max="@maxVal" @oninput="@((args) => Rotate(args.Value.ToString()))">
        <label for="volume">Value: @Val</label>
    </div>
</div>

@code {
    int step = 15;
    static int cX = 250;
    static int cY = 250;
    static int r = 200;
    int arrowX1 = cX - 3;
    int arrowX3 = cX + 3;
    int arrowY2 = cY - r;
    int rectX = cX - r - 10;
    int valueTextX = cX;
    int valueTextY = cY + 50;
    ////////////////////////////////
    int arrowRotate = 0;
    int minVal = 0;
    int maxVal = 1000;
    int Val = 500;

    public async Task Rotate(string val)
    {
        Val = int.Parse(val);
        arrowRotate = (int)(((float)Val / (float)maxVal) * 180f) - 90;

        //floatX = (int) (Math.Cos( (arrowRotate - 90)/*-180 0*/ * (Math.PI / 180.0f) ) * r) + cX;
        //floatY = (int) (Math.Sin( (arrowRotate - 90) * (Math.PI / 180.0f) ) * r) + cY;//.getElementById('valLabel').getComputedTextLength()
        //int lebelLen = await JSRuntime.InvokeAsync<int>("document.getElementById('SVGcanvas').contentDocument");
        Console.WriteLine(await JSRuntime.InvokeAsync<string>("document.getElementById('SVGcanvas').innerText"));
    }
}