Diagramming component - Implementation complexities

[KameshRajendran]

We have planned to create the diagramming component. Our requirements are below.

1. We need to create 10000 rect (SVG) elements inside an SVG element in C# (razor) side. The SVG size will be 700 * 700, All the rectangle should be inside this region.
2. Need to drag the first rectangle inside the SVG based on some mouse interaction.

We have prepared a component like below.

[FullNative.razor]

@page "/"
@*Wired mouse events*@

<div @onmousemove="@OnMousemove" @onmousedown="@OnMousedown" @onmouseup="@OnMouseup" style="width:700px;height:700px">
    <svg height="700" width="700">

        @*rendered the rect elements inside the SVG element*@

        @for (int i = 0; i < @Shapes.Count; i++)
        {
            <rect id="@Shapes[i].ID" x="@Shapes[i].X" y="@Shapes[i].Y" height="50" width="50"></rect>
        }
    </svg>
</div>

@code{

    //created the list for shapes
    List<Shape> Shapes = new List<Shape>();
    bool inAction = false;
    Point Diff = new Point();
    Point Curr = new Point();

    protected override void OnInitialized()
    {
        // added 500 shapes to render in SVG
        Shapes = new List<Shape>();
        for (int i = 0; i < 5000; i++)
        {
            Shapes.Add(new Shape() { ID = (i.ToString()), X = i * 10, Y = i * 10 }); ;
        }
    }

    // wired mousedown event
    public void OnMousedown(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        inAction = true;
        // get the current point
        Curr = new Point() { X = args.ClientX, Y = args.ClientY };

    }
    // wired mouseup event
    public void OnMouseup(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        inAction = false;
    }
    // wired mousemove event
    public void OnMousemove(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        Diff = new Point() { X = args.ClientX - Curr.X, Y = args.ClientY - Curr.Y };
        if (inAction)
        {
            // update the x and y position for shapes
            Shapes[0].X += Diff.X;
            Shapes[0].Y += Diff.Y;
        }
        Curr = new Point() { X = args.ClientX, Y = args.ClientY };
        StateHasChanged();
    }


    class Shape
    {
        public string ID { get; set; }
        public double X { get; set; }
        public double Y { get; set; }
    }
    class Point
    {
        public double X { get; set; }
        public double Y { get; set; }
    }
}

When using the above approach the initial load time and interaction were good. But when I host this sample in other server machines it takes some time on rendering and also the interaction was very slow. (Dragging was very slow even if I render only one rect element and dragging the rect)

http://23.92.60.125:8123/

So we thought that rendering more elements in C# side causes more performance issues and also in drag. So we have moved to another approach, We completely disable a UI rendering and updates in the C# side using the ShouldRender lifecycle and add JS codes to rendering and updating the UI like below-highlighted code.

[UseofJS.razor]

@page "/UseofJS"
@*Wired mouse events*@

<div @onmousemove="@OnMousemove" @onmousedown="@OnMousedown" @onmouseup="@OnMouseup" style="width:700px;height:700px">
    <svg height="700" width="700">

        @*rendered the rect elements inside the SVG element*@

        @for (int i = 0; i < @Shapes.Count; i++)
        {
            <rect id="@Shapes[i].ID" x="@Shapes[i].X" y="@Shapes[i].Y" height="50" width="50"></rect>
        }
    </svg>
</div>

@code{

    [Inject]
    protected IJSRuntime jsRuntime { get; set; }

    //created the list for shapes
    List<Shape> Shapes = new List<Shape>();
    bool inAction = false;
    Point Diff = new Point();
    Point Curr = new Point();

    protected override void OnInitialized()
    {
        // added 500 shapes to render in SVG
        Shapes = new List<Shape>();
        for (int i = 0; i < 5000; i++)
        {
            Shapes.Add(new Shape() { ID = (i.ToString()), X = i * 10, Y = i * 10 }); ;
        }
    }

    // wired mousedown event
    public void OnMousedown(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        inAction = true;
        // get the current point
        Curr = new Point() { X = args.ClientX, Y = args.ClientY };

    }
    // wired mouseup event
    public void OnMouseup(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        inAction = false;
    }
    // wired mousemove event
    public void OnMousemove(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        Diff = new Point() { X = args.ClientX - Curr.X, Y = args.ClientY - Curr.Y };
        if (inAction)
        {
            // update the x and y position for shapes
            Shapes[0].X += Diff.X;
            Shapes[0].Y += Diff.Y;
            jsRuntime.InvokeVoidAsync("updateUI", new object[] { new Point() { X = Shapes[0].X, Y = Shapes[0].Y } });
        }
        Curr = new Point() { X = args.ClientX, Y = args.ClientY };
        StateHasChanged();
    }

    // Prevented the auto rendering
    protected override bool ShouldRender()
    {
        var renderUI = false;
        return renderUI;
    }


    class Shape
    {
        public string ID { get; set; }
        public double X { get; set; }
        public double Y { get; set; }
    }
    class Point
    {
        public double X { get; set; }
        public double Y { get; set; }
    }
}

[Sample.JS]

window.updateUI = function (pt) {
    var rect = this.document.getElementById("1");
    rect.setAttribute('x', pt.x)
    rect.setAttribute('y', pt.y)
}

In the second approach also we are facing more problem

1. For each interaction, we need to make an interop call to update UI from C# to JS. So it makes more performance delay in the server application. (when hosting it into another server machine)
   http://23.92.60.125:8123/UseofJS
2. Also, we need to use the mouse wheel and touch events along with I need to preventDefault actions these events like the below code. However, it does not work and it shows below error on console

In Chrome I also see the following in the console...
[Intervention] Unable to preventDefault inside passive event listener due to the target being treated as passive. See https://www.chromestatus.com/features/6662647093133312

Sample for the above approaches: Sample

Please find the video for better understanding: https://youtu.be/rYRapzTA7k4

Could you please suggest a better approach to create a diagramming component with better than above?

[egil]

I think I understand your problem, but I do recommend creating a minimal functional example that to make it easier to help you.

Anyway, if this is Blazor Server, and you want the server part (C#) to drive the updates, you will always have the speed of light as a hard limited, which you have to design to, not against. If you have a 200 ms network round trip between client browser and server, there is going to be delays in the move events/updates on screen like you show in your YouTube video, and nothing can fix that - speed of light is the limit here.

I imagine this would work pretty smooth in Blazor Wasm though.

In this case though, if you want a component that works in both Blazor Server and Blazor Wasm, you will probably have to design it such that the drag events are handled in JavaScript explicitly, and maybe only the mouseup events are being passed to Blazor, to update the state in Blazor to match what the user is seeing.