Orthogonal routing service

15 posts, 1 answers
  1. Kevin
    Kevin avatar
    13 posts
    Member since:
    Dec 2012

    Posted 09 Dec 2014 Link to this post

    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
  2.
  3. Petar Mladenov
    Admin
    Petar Mladenov avatar
    3058 posts

    Posted 12 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Kevin
    Kevin avatar
    13 posts
    Member since:
    Dec 2012

    Posted 12 Dec 2014 in reply to Petar Mladenov Link to this post

    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.
  7. Petar Mladenov
    Admin
    Petar Mladenov avatar
    3058 posts

    Posted 15 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8.
  9. Kevin
    Kevin avatar
    13 posts
    Member since:
    Dec 2012

    Posted 15 Dec 2014 in reply to Petar Mladenov Link to this post

    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?
  11. Petar Mladenov
    Admin
    Petar Mladenov avatar
    3058 posts

    Posted 16 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. Kevin
    Kevin avatar
    13 posts
    Member since:
    Dec 2012

    Posted 16 Dec 2014 in reply to Petar Mladenov Link to this post

    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?
  14.
  15. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    3058 posts

    Posted 17 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  17. Kevin
    Kevin avatar
    13 posts
    Member since:
    Dec 2012

    Posted 23 Dec 2014 in reply to Petar Mladenov Link to this post

    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;
    }
  19. Hassan
    Hassan avatar
    13 posts
    Member since:
    Jan 2015

    Posted 23 Feb 2015 Link to this post

    Hi,

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

    Thanks in advance,
    Hassan


  20.
  21. Milena
    Admin
    Milena avatar
    226 posts

    Posted 24 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  23. Hassan
    Hassan avatar
    13 posts
    Member since:
    Jan 2015

    Posted 25 Feb 2015 in reply to Milena Link to this post

    Thanks


    Sincerely,
    Hassan
  25. Hassan
    Hassan avatar
    13 posts
    Member since:
    Jan 2015

    Posted 25 Feb 2015 in reply to Milena Link to this post

    Thanks


    Sincerely,
    Hassan
  26.
  27. Amiel
    Amiel avatar
    17 posts
    Member since:
    Jul 2016

    Posted 15 Mar Link to this post

    Hello,

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

     

  29. Petar Mladenov
    Admin
    Petar Mladenov avatar
    3058 posts

    Posted 20 Mar Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top