make connector to point in node

[Tagir]

Hello guys!

I'm trying to connect two nodes.

My requirement is to have an arrow to come out from right side of first node and come to the left side of the second node.

Please see attached screenshot for reference connector_in_node_wrong.png.

Where Node Start connects to node JobS_1.

As you can see I'm using custom ports on MiddleRight for first node and MiddleLeft for second node.

Unfortunately the connector line goes along the left side of node two before it meets with the connection point.

I want the connector to break and approach the connection point on node jobs_1 from the left. Like 

on the screenshot connector_in_node_right.png

could you please let me know what can I do to achieve that ?

Thank you

Tagir

CodE:

testDiagram.Model.LineRoutingEnabled = true;

            var rect1 = new Syncfusion.Windows.Forms.Diagram.Rectangle(0, 0, 50, 20);

            Console.WriteLine("rect1 X " + rect1.PinPoint.X); 

            Console.WriteLine("rect1 Y " + rect1.PinPoint.Y);

            rect1.FillStyle.Color = Color.LightGreen;

            Syncfusion.Windows.Forms.Diagram.Label lbl = new Syncfusion.Windows.Forms.Diagram.Label();

            lbl.Text = "Start";

            rect1.Labels.Add(lbl);

            rect1.PinPoint = new PointF(50,40);

            rect1.DrawPorts = true;

            ConnectionPoint cp1 = new ConnectionPoint();

            cp1.Position = Position.MiddleRight;

            rect1.Ports.Add(cp1);

            

            var rect2 = new Syncfusion.Windows.Forms.Diagram.Rectangle(0, 0, 50, 20);

            Syncfusion.Windows.Forms.Diagram.Label lbl1 = new Syncfusion.Windows.Forms.Diagram.Label();

            lbl1.Text = "End";

            rect2.Labels.Add(lbl1);

            rect2.PinPoint = new PointF(210, 40);

            var rect4 = new Syncfusion.Windows.Forms.Diagram.Rectangle(0, 0, 50, 20);

            Syncfusion.Windows.Forms.Diagram.Label lbl4 = new Syncfusion.Windows.Forms.Diagram.Label();

            lbl4.Text = "JobS";

            rect4.Labels.Add(lbl4);

            rect4.PinPoint = new PointF(120,80);

            var rect5 = new Syncfusion.Windows.Forms.Diagram.Rectangle(0, 0, 50, 20);

            Syncfusion.Windows.Forms.Diagram.Label lbl5 = new Syncfusion.Windows.Forms.Diagram.Label();

            lbl5.Text = "JobS_1";

            rect5.Labels.Add(lbl5);

            rect5.PinPoint = new PointF(120, 120);

            rect5.DrawPorts = true;

            ConnectionPoint cp2 = new ConnectionPoint();

            cp2.Position = Position.MiddleLeft;

            rect5.Ports.Add(cp2);

            var rect3 = new Syncfusion.Windows.Forms.Diagram.Rectangle(10, 10, 250, 180);

            rect3.FillStyle.Color = Color.PowderBlue;

            Syncfusion.Windows.Forms.Diagram.Label lbl3 = new Syncfusion.Windows.Forms.Diagram.Label();

            lbl3.Text = "Container";

            rect3.Labels.Add(lbl3);

            lbl3.Position = Position.TopLeft;

            lbl3.UpdatePosition = true;

            //rect3.Labels[0].OffsetX = ;

            //rect3.Labels[0].OffsetY = 0;

            var con1 = new OrthogonalConnector(rect1.PinPoint, rect2.PinPoint);

            con1.LineStyle.LineColor = Color.Black;

            con1.LineStyle.LineWidth = 1f;

            con1.HeadDecorator.DecoratorShape = DecoratorShape.Filled45Arrow;

            var con2 = new OrthogonalConnector(rect1.PinPoint, rect4.PinPoint);

            con2.LineStyle.LineColor = Color.Black;

            con2.LineStyle.LineWidth = 1f;

            con2.HeadDecorator.DecoratorShape = DecoratorShape.Filled45Arrow;

            var con3 = new OrthogonalConnector(rect1.PinPoint, rect1.PinPoint);

           //var con3 = new OrgLineConnector(rect1.PinPoint,rect5.PinPoint);

            

            con3.LineStyle.LineColor = Color.Black;

            con3.LineStyle.LineWidth = 1f;

            con3.HeadDecorator.DecoratorShape = DecoratorShape.Filled45Arrow;

            testDiagram.Model.AppendChild(rect1);

            testDiagram.Model.AppendChild(rect2);

            testDiagram.Model.AppendChild(rect4);

            testDiagram.Model.AppendChild(rect5);

            testDiagram.Model.AppendChild(rect3);

            rect1.CentralPort.TryConnect(con1.TailEndPoint);

            rect2.CentralPort.TryConnect(con1.HeadEndPoint);

            rect1.CentralPort.TryConnect(con2.TailEndPoint);

            rect4.CentralPort.TryConnect(con2.HeadEndPoint);

            //rect1.CentralPort.TryConnect(con3.TailEndPoint);

            rect1.Ports[1].TryConnect(con3.TailEndPoint);

            rect5.Ports[1].TryConnect(con3.HeadEndPoint);

            //rect5.CentralPort.TryConnect(con3.HeadEndPoint);

            //rect1.Ports[1].TryConnect(con2.TailEndPoint);

            

            testDiagram.Model.AppendChild(con1);

            testDiagram.Model.AppendChild(con2);

            testDiagram.Model.AppendChild(con3);

            testDiagram.View.SelectionList.Clear();

            testDiagram.View.SelectionList.Add(rect3);

            testDiagram.Controller.SendToBack();

            testDiagram.View.SelectionList.Clear();

Attachment: connector_in_node_4f053773.zip

[Ashok Kumar V]

Hi Tagir,

Thanks for your interest in Syncfusion control.

We suggest you to set orthogonal Connector’s “Flip” to “false” in order to avoid the connector path being flipped. We also glad to inform you that we have modified your sample to achieve your requirement. Please refer the below code snippet and sample for your reference.

Here is the code snippet:

[C#]

//Set boolean flip as "false"; true if path should be flipped; otherwise, false.

OrthogonalConnector con1 = new OrthogonalConnector(rect1.PinPoint, rect2.PinPoint, false);

con1.LineStyle.LineColor = Color.Black;

con1.LineStyle.LineWidth = 1f;

con1.HeadDecorator.DecoratorShape = DecoratorShape.Filled45Arrow;

diagram1.Model.AppendChild(con1);

Here is the sample:

Sample

Please try the above and let us know if any concern.

Regards,

Ashok Kumar.