Diagram: How to position a node in the centre of diagram

[Michael Aston]

The diagram height and width is defined as 100% x 100%. How do we calculate the centre point of the diagram in pixels to allow the positioning of a node in the centre of the diagram.

[Sumathi Uthayakumar]

Hi Michale,

We have added a sample and a video to demonstrate how to get a Diagram viewport rect value and find the center of the viewport. Using the getBoundingClientRect method, we can be able to get the diagram bounds values that are visible in the viewport, not the browser’s viewport size. From the viewport rect, we can find the centre of the viewport area of the diagram. Please refer to the below code snippet to get the diagram rect values

Code Snippet:

//Interop.js
function getViewportBounds() {

    var bounds = document.getElementsByClassName('e-control e-diagram e-lib e-droppable e-tooltip');

    return bounds[0].getBoundingClientRect();

}

 

//index.razor

private async Task UpdateNodePositionAtCenter()

    {

       object bounds = await jsRuntime.InvokeAsync<object>("getViewportBounds").ConfigureAwait(true);

        Dictionary<string, object> dataObj = JsonSerializer.Deserialize<Dictionary<string, object>>(bounds.ToString());

        string width = dataObj["width"].ToString();

        string height = dataObj["height"].ToString();

        diagram.Nodes[0].OffsetX = Convert.ToDouble(width) / 2;

        diagram.Nodes[0].OffsetY = Convert.ToDouble(height) / 2;

 

    }

Regards,

Sumathi U.

Attachment: Forum178043_3e536de1.zip