<label class="lbl">
    Width: <TelerikNumericTextBox @bind-Value="@SelectedShapeWidth" Width="120px" />
</label>

<label class="lbl">
    Height: <TelerikNumericTextBox @bind-Value="@SelectedShapeHeight" Width="120px" />
</label>

<label class="lbl">
    X: <TelerikNumericTextBox @bind-Value="@SelectedShapeX" Width="120px" />
</label>

<label class="lbl">
    Y: <TelerikNumericTextBox @bind-Value="@SelectedShapeY" Width="120px" />
</label>

<label class="lbl">
    Angle: <TelerikNumericTextBox @bind-Value="@SelectedShapeAngle" Width="120px" />
</label>

<style>
    .lbl {
        display: block;
        margin: 0 0 1em;
    }
</style>

<TelerikButton OnClick="@OnButtonClick">Apply</TelerikButton>

@if (RenderDiagram)
{
    <TelerikDiagram Height="300px" Zoom="0.8">
        <DiagramShapes>
                <DiagramShape
                            Id="shape1"
                            Width="100"
                            Height="100"
                            X="200"
                            Y="50">
                    <DiagramShapeContent Text="Shape 1" />
                    <DiagramShapeRotation Angle="0" />
                </DiagramShape>
                <DiagramShape
                            Id="@SelectedShapeId"
                            Width="@SelectedShapeWidth"
                            Height="@SelectedShapeHeight"
                            X="@SelectedShapeX"
                            Y="@SelectedShapeY">
                    <DiagramShapeContent Text="Shape 2" />
                    <DiagramShapeRotation Angle="@SelectedShapeAngle" />
                </DiagramShape>
        </DiagramShapes>
    </TelerikDiagram>

    <TelerikDiagram Height="300px" Zoom="0.8">
        <DiagramShapes>
                <DiagramShape
                            Id="shape1"
                            Width="100"
                            Height="100"
                            X="200"
                            Y="50">
                    <DiagramShapeContent Text="Shape 1" />
                    <DiagramShapeRotation Angle="0" />
                </DiagramShape>
                <DiagramShape
                            Id="@SelectedShapeId"
                            Width="@SelectedShapeWidth"
                            Height="@SelectedShapeHeight"
                            X="@SelectedShapeX"
                            Y="@SelectedShapeY">
                    <DiagramShapeContent Text="Shape 2" />
                    <DiagramShapeRotation Angle="@SelectedShapeAngle" />
                </DiagramShape>
        </DiagramShapes>
        <DiagramConnections>
            <DiagramConnection FromId="shape1" ToId="shape2" />
        </DiagramConnections>
    </TelerikDiagram>
}

@code {
    #nullable enable

    private List<ShapeDescriptor> DiagramShapeList { get; set; } = new();

    private string SelectedShapeId { get; set; } = "shape2";
    private double? SelectedShapeAngle { get; set; } = 0;
    private double? SelectedShapeWidth { get; set; } = 100;
    private double? SelectedShapeHeight { get; set; } = 100;
    private double? SelectedShapeX { get; set; } = 300;
    private double? SelectedShapeY { get; set; } = 200;

    private bool RenderDiagram { get; set; } = true;

    private async Task OnButtonClick()
    {
        if (string.IsNullOrEmpty(SelectedShapeId))
        {
            return;
        }

        RenderDiagram = false;
        await Task.Delay(1);

        RenderDiagram = true;
    }

    public class ShapeDescriptor
    {
        public string Id { get; set; } = string.Empty;
        public string ParentId { get; set; } = string.Empty;
        public DiagramShapeType Type { get; set; } = DiagramShapeType.Image;
        public string Text { get; set; } = string.Empty;
        public string Source { get; set; } = string.Empty;
        public double? Width { get; set; } = 100;
        public double? Height { get; set; } = 100;
        public double? X { get; set; }
        public double? Y { get; set; }
        public double? Angle { get; set; }
    }
}