Finding the position of a node or connector in a diagram

[Joseph Tan]

In a diagram with automatic layout, how do I find the position of a node? 

        protected DiagramLayout LayoutValue = new DiagramLayout()

        {

            Type = LayoutType.ComplexHierarchicalTree,

            ConnectionPointOrigin = ConnectionPointOrigin.DifferentPoint, // so that different branches don't  come from the same point in the node 

            VerticalSpacing = 100,

            HorizontalSpacing = 100,

            EnableAnimation = false,

            Orientation = LayoutOrientation.TopToBottom,

            HorizontalAlignment = HorizontalAlignment.Center,

            VerticalAlignment = VerticalAlignment.Top

        };

The use case is that I want to be able to bring the node into view (in a large diagram) using Diagram.BringIntoView(), but all the nodes have OffsetX = 0, OffsetY = 0.

[Gowtham Gunashekar]

Hi Joseph 

 

Please refer the below attached sample and documentation link  , in the sample we demonstrate how to use the BringIntoView API to bring a specific node into the diagram view port area. In the sample we take the bound of the first node in the node collection and use it as the argument of the BringIntoView API, you can use any node instead of that node.  

  

 

Code snippet: 

public void bringIntoView() 

    { 

        var rect = Diagram.Nodes[0]; 

        System.Drawing.Rectangle Bounds = new System.Drawing.Rectangle() 

        { 

            X = (int)(rect.OffsetX - (rect.Width / 2)), 

            Y = (int)(rect.OffsetX - (rect.Height / 2)), 

            Height = (int)rect.Height, 

            Width = (int)rect.Width 

        }; 

        Diagram.BringIntoView(Bounds); 

    } 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BringIntoView-571442166.zip 

Documentation Link: https://blazor.syncfusion.com/documentation/diagram/methods/#bring-to-view 

 

Note: The nodes and connector will have its offsetX and offsetY after the diagram rendered. So please make sure that you use the API after all the node is automatically aligned. 

 

Regards, 

Gowtham

[Joseph Tan]

Hi,

Thanks for the example. I can see that  in your code the offsetx and offsety are populated.

But in mine, they are always zero.

The diagram is rendered correctly (see attached pic), but the following js Console error is thrown every time the graph loads. Might this have something to do with the problem?

Where would I start to figure out the error?

Uncaught (in promise) Error: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')

   at System.Collections.Generic.List`1.get_Item(Int32 index)

   at System.Collections.ObjectModel.Collection`1.System.Collections.IList.get_Item(Int32 index)

   at Syncfusion.Blazor.Diagrams.SfDiagram.UpdateComponentModel(Dictionary`2 properties, Object parentObject)

   at Syncfusion.Blazor.Diagrams.SfDiagram.UpdateComponentModel(Dictionary`2 properties, Object parentObject)

   at Syncfusion.Blazor.Diagrams.SfDiagram.UpdateBlazorProperties(Dictionary`2 properties)

   at Syncfusion.Blazor.Diagrams.SfDiagram.UpdateBlazorDiagramObjects(Dictionary`2 DiagramObject)

    at Object.endInvokeDotNetFromJS (blazor.server.js:1)

    at e.<anonymous> (blazor.server.js:10)

    at blazor.server.js:1

    at Array.forEach (<anonymous>)

    at e.invokeClientMethod (blazor.server.js:1)

    at e.processIncomingData (blazor.server.js:1)

    at e.connection.onreceive (blazor.server.js:1)

    at WebSocket.i.onmessage (blazor.server.js:1)

Attachment: DiagramError_5ede0ce4.7z

[Gowtham Gunashekar]

Hi Joseph  

 

We suspect that you have using one of our old nugget version. We suggest you use the latest version (19.1.0.56). if the error still persists means we request you to share with us a simple sample that illustrating the issue with issue replication steps. That will helps us to proceed further. 

 

If you couldn't provide information then kindly let us know your availability to schedule a web meeting for a live debugging session in your application. 

 

Regards,  

Gowtham 

[Joseph Tan]

Hi there.

I am using 19.1.0.56 already.   Let me see if I can create a sample.

[Gowtham Gunashekar]

Hi Joseph, 

 

Thanks for your update we wait to hear from you. 

 

Regards, 

Gowtham