Orthogonal routing service

[Kevin]

I'm trying to create a custom orthogonal router that acts much like a schematic capture program.  If you look at the youtube video in the link below, starting at 4m28s you will see what I am trying to achieve.

1. I need a custom router to make right angles when I add connections.  I have listed the code below to show what I have so far, which basically adds two points to the middle of the connection, but it does not handle complex routing situations where it needs to route around other shapes.

2. Also, I would like the connection to start on a mouse click (press+release) and start routing as I move my mouse, then finally completing the connection with another mouse click (press+release).  Any thoughts on how to achieve these two items?

public class OrthogonalRouter : IRouter
    {
        public System.Collections.Generic.IList<Point> GetRoutePoints(IConnection connection, bool showLastLine)
        {
            List<Point> pointList = new List<Point>();
            Point start = connection.StartPoint;
            Point end = connection.EndPoint;

            pointList.Add(new Point(start.X + (end.X - start.X) / 2, start.Y));
            pointList.Add(new Point(start.X + (end.X - start.X) / 2, end.Y));

            return pointList;
        }
    }

http://youtu.be/JutQuq1vFYY?t=4m28s

[Petar Mladenov]

Hi Brent,

We believe the RadDiagram has the functionality you need built-in. In order to make the connections with right angles, you first need to set RouteConnections of the RadDiagram to True. When you make a connection, the ConnectorTool of the RadDiagram is the current mouse tool. Actually you are also able to set the diagrams ActiveTool property to Conenctor tool and you will be able to create connections on mousedown +  mouse move. To switch to the normal tool just set ActiveTool to PointerTool. 

The RadDiagram has built-in connection router but we believe the AStarRouter is better, you can set it like so in code behind:

this.diagram.RoutingService.Router = new AStarRouter(this.diagram);
          this.diagram.RoutingService.FreeRouter = new AStarRouter(this.diagram);

Router is active when the connection you make has attached source (some diagram shape) and FreeRouter is when your connection has no source (and no target attached). The AStarRouter will try to move the connection between the shapes.

You can play with the described features in the attached project. Please let us know if this is what you expect.

On a side note, we wanted to mention that the diagram does not have built-in feature to support connecting different connections runtime as it is shown in your video.


Regards,
Petar Mladenov
Telerik

 

 

[Kevin]

Hi Petar,

Your solution works pretty well.  Thank you for that.  I do have another question... In MS Visio, you are allowed to move a connection by moving a section of the connection.  Basically, when you hover over the line, you can move the midpoint of the line, which actually moves two points on the line at the same time and the mouse pointer becomes horizontal or vertical resize arrows.  The attached picture shows what I'm trying to explain.

Is there a way to implement this type of functionality?  Currently, I can only move one point on a line.

[Petar Mladenov]

Hi Brent,

Currently the diagram connections do not support moving their sections with mouse out of the box. It is only possible to move their control points. You can add control points by Ctrl + Mouse Down on a selected RadDiagramConnection.

Regards,
Petar Mladenov
Telerik

 

 

[Kevin]

I get that, but how do I add this functionality?  It seems like this would be a basic feature to the diagram - can I request that this feature be added?  In the meantime, do you have any suggestions on how to do this?

[Petar Mladenov]

Hi Brent,

In the attached project you can find a sample implementation of connection manipulation customization. What's added on top of the built-in functionality is the ability to move segments by moving center points located on middle segments (middle segment of location is segment which is not the first one or the last one). Please check it out - we hope this could be a good starting point and you will be able to add your customizations based on the provided sample.

Regards,
Petar Mladenov
Telerik

 

 

[Kevin]

Thank you Petar.  That gives me a good starting point.  I did notice one thing however... when you move the middle segment, and then move the shape that it's connected to, it seems to disregard the AStarRouter and not keep the points on the segment in line with the shape (see attached picture).

Before I move the middle segment, moving the shape always updates the line and keeps nice straight 90 degree angles.  Once I move the middle segment and them move the shape it's like it ignores the routing service.  How can I fix this?

[Petar Mladenov]

Hi Brent,

When you move the middle points with mouse the connection goes into "Modified" state and its public property IsModified is set to True. Then the AStarRouter does not work in the normal way when the connection is modified. The way return to the normal AStarRouting behavior when you move the shape is to set the IsModified to false like so:

public override ConnectionRoute FindExtendedRoute(IConnection connection)
      {
          if (connection.Source != null && connection.Source.IsSelected)
          {
              connection.IsModified = false;
          }

However, please note than in this scenario when you move the shape, the AStar routing will disregard the points you have previously moved with the mouse and will overwrite them.

Regards,
Petar Mladenov
Telerik

 

 

[Kevin]

That did it.  Thanks!  One comment - this code only handles if source is moved.  If the target is moved I also had to add:

if (connection.Target != null && connection.Target.IsSelected)
{
        connection.IsModified = false;
}

[Hassan]

Hi,

when I use the AStar router, few connections are not created with right angles.

Thanks in advance,
Hassan

[Milena]

Hi Hassen, 

It is not always possible to have connections with right angles between 2 shapes - it depends on the position and size of the shapes too. But you can take advantage of  RouterInflationValue constant and change the value around the shapes, which the router inflates the shapes with (by default its value is 20): 

public MainWindow()
{
    DiagramConstants.RouterInflationValue = 10;

    InitializeComponent();
    this.diagram.RoutingService.Router = new AStarRouter(diagram);
}

You can experiment with its value to fit your scenario. 

I hope this information is helpful. 

Regards,
Milena
Telerik

 

 

[Hassan]

Thanks


Sincerely,
Hassan

[Hassan]

Thanks


Sincerely,
Hassan

[Amiel]

Hello,

I have seen it work however when saving and reloading it ignored the changes made.  How can we persist the changes?

 

[Petar Mladenov]

Hi Amiel,

Could you please provide more details regarding your scenario - for example the exact steps you perform (how do you modify the connection (in code or with mouse, and when), how and when do you save and load, which router you use, etc.) ? Since this is old thread, we encourage you to add this additional information information in new support thread. Thank you in advance for your cooperation.

Regards,
Petar Mladenov
Progress Telerik