unable to set Bezier connectors start and end point at node when sourceID and TargetID are same

[Anil Guliyaan]

Hi Team,

I am not able to change position of Bezier connectors start and end point. it's always pointing to center location of the node if connector added dynamically.
condition : connector should have same  sourceID and TargetID  as Node (loopback connector) 

• I need to position start and end point at node anywhere instead at center while having the sam
  
  here is the screenshot for your reference (currently showing).
  
  
  
  
• Requirement (should look like this and connector should be connected with same Node)
  
  here is the code snippet to add connector having same sourceID and targetID as Node.
  

  Connector Connector = new Connector()
                    {
                        ID = connectorName,
                        SourceID = selectedStateId,
                        TargetID = selectedStateId,
                        Segments = new DiagramObjectCollection<ConnectorSegment>()
                        {
                            new BezierSegment()
                            {
                               // Type = ConnectorSegmentType.Bezier,
                                Vector1 = new Vector { Angle = 320, Distance = vectorsDistance == 0 ? 215 : vectorsDistance },
                                Vector2 = new Vector { Angle = 220, Distance = vectorsDistance == 0 ? 215 : vectorsDistance },
                            }
                        },
                        Style = new ShapeStyle()
                        {
                            Fill = "#6495ED",
                            StrokeColor = "#6495ED",
                            StrokeWidth = 1
                        },
                        SourcePadding = 10,
                        TargetPadding = 10,
                        Annotations = new DiagramObjectCollection<PathAnnotation>()
                        {
                             new PathAnnotation
                            {
                               Content = "Connector1",
                            // Sets the offset of the annotation as 0.
                               Alignment = AnnotationAlignment.After,
                            Offset = 0.5,
                   Displacement = new DiagramPoint() { X = 400 , Y = 200 },
                            }
                            },
                        Type = ConnectorSegmentType.Bezier,
                       TargetDecorator = new DecoratorSettings()
                        {
                            Shape = DecoratorShape.Arrow,
                            Height = 10,
                            Width = 10,
                            Style = new ShapeStyle()
                            {
                                StrokeColor = "blue",
                                Fill = "blue",
                                StrokeWidth = 3
                            }
                        }
                    };
                    connectors.Add(Connector);

Please help on this.

[Sumathi Uthayakumar]

Hi Anil,

We have validated your code snippet. In this code snippet, you have set the connector's source ID and target ID to the same node. When we set the source ID and target ID for the same node, the source point and target point are connected in the node's center position. That is, this is a node-to-node connection. You should add a port to the node if you need to connect the connectors on the left and right sides of the node.

A port is a special connection point in a node where connectors can be glued. When a connector is glued to a node or port, it remains connected even if one of the nodes is moved. You can meet your requirements by adding ports to the node and setting the connector's SourcePortID and TargetPortID. For your convenience, we've included a code snippet. Also, We have shared our online UG link for your reference.

Code Snippet:

Connector Connector = new Connector()

                    {

                        ID = connectorName,

                        SourceID = selectedStateId,

                        TargetID = selectedStateId,

                        SourcePortID= (Diagram.GetObject(selectedStateId) as Node).Ports[0].ID,

                        TargetPortID=(Diagram.GetObject(selectedStateId) as Node).Ports[1].ID,

                        Segments = new DiagramObjectCollection<ConnectorSegment>()

                        {

                            new BezierSegment()

                            {

                               // Type = ConnectorSegmentType.Bezier,

                                Vector1 = new Vector { Angle = 320, Distance = vectorsDistance == 0 ? 215 : vectorsDistance },

                                Vector2 = new Vector { Angle = 220, Distance = vectorsDistance == 0 ? 215 : vectorsDistance },

                            }

                        },

                        Style = new ShapeStyle()

                        {

                            Fill = "#6495ED",

                            StrokeColor = "#6495ED",

                            StrokeWidth = 1

                        },

                        SourcePadding = 10,

                        TargetPadding = 10,

                        Annotations = new DiagramObjectCollection<PathAnnotation>()

                        {

                             new PathAnnotation

                            {

                               Content = "Connector1",

                            // Sets the offset of the annotation as 0.

                               Alignment = AnnotationAlignment.After,

                            Offset = 0.5,

                   Displacement = new DiagramPoint() { X = 400 , Y = 200 },

                            }

                            },

                        Type = ConnectorSegmentType.Bezier,

                       TargetDecorator = new DecoratorSettings()

                        {

                            Shape = DecoratorShape.Arrow,

                            Height = 10,

                            Width = 10,

                            Style = new ShapeStyle()

                            {

                                StrokeColor = "blue",

                                Fill = "blue",

                                StrokeWidth = 3

                            }

                        }

                    };

                    connectors.Add(Connector);

UG link: https://blazor.syncfusion.com/documentation/diagram/ports/ports#connections

Regards,

Sumathi U.