We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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.


1 Reply

SU Sumathi Uthayakumar Syncfusion Team October 10, 2022 09:06 AM


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

Loader.
Live Chat Icon For mobile
Up arrow icon