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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

make connector to point in node

Thread ID:

Created:

Updated:

Platform:

Replies:

117873 Dec 31,2014 11:47 PM UTC Jan 2,2015 11:03 AM UTC WinForms 1
loading
Tags: Diagram
Tagir
Asked On December 31, 2014 11:47 PM UTC

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 [Syncfusion]
Replied On January 2, 2015 11:03 AM UTC

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.



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;