GridLayoutAlgorithm and Node/Connection Collisions

Hi,

I'm evaluating the WPF Diagrams package at the moment with a view to auto generating diagrams from an XML based format.

I've run into an issue that I'm not sure how to approach.

I've reduced it to the simple test case show here, using the QuickStart example as a baseline.

ShapeNode el1 = new ShapeNode() { Shape = DiagramShapes.Ellipse, Bounds = new Rect(0, 0, 100, 40), Data = "test" };

ShapeNode el2 = new ShapeNode() { Shape = DiagramShapes.Ellipse, Bounds = new Rect(0, 0, 100, 40), Data = "test2" };

ShapeNode el3 = new ShapeNode() { Shape = DiagramShapes.Ellipse, Bounds = new Rect(0, 0, 100, 40), Data = "test3" };

DiagramConnection conn = new DiagramConnection(el1.ConnectionPoints[4], el2.ConnectionPoints[0]);

DiagramConnection conn1 = new DiagramConnection(el1.ConnectionPoints[4], el3.ConnectionPoints[0]);

ds.Diagram.Nodes.Add(el1);

ds.Diagram.Nodes.Add(el2);

ds.Diagram.Nodes.Add(el3);

ds.Diagram.Connections.Add(conn);

 ds.Diagram.Connections.Add(conn1);

ds.AllowSegmentToNodeCollisions = false;

 ILayoutAlgorithm layout = new GridLayoutAlgorithm() { Info = new FlowDiagramLayoutAlgorithmInfo(), HorizontalOffset = 100, VerticalOffset = 50 };

ds.ApplyLayoutAlgorithm(layout);

ds.SizeToFit();

Using the above code, I get an output as shown here 

Is there any simple method for me to produce a layout where the connections and nodes do not overlap?

Hello

For this situation you will want to use the AStarPathfinder to route the connections. Diagram connections have a Pathfinder property which returns the pathfinder they should use for routing, but you can not set it on the built in connections. Start by creating a custom connection that extends the DiagramConnection class. Then override the Pathfinder property to return AStarPathfinder.Instance. Here is some example code for this which includes the neccessary connection constructors:

public class CustomDiagramConnection : DiagramConnection
{
    public CustomDiagramConnection(DiagramConnectionPoint fromConnectionPoint, DiagramConnectionPoint toConnectionPoint)
        : base(fromConnectionPoint, toConnectionPoint)
    {
        LineType = DiagramLineTypes.ElbowArrow;
    }

    public CustomDiagramConnection(DiagramConnectionPoint fromConnectionPoint, DiagramConnectionPoint toConnectionPoint, IList<DiagramConnectionSegment> segments)
        : base(fromConnectionPoint, toConnectionPoint, segments)
    {
        LineType = DiagramLineTypes.ElbowArrow;
    }

    public override IPathfinder Pathfinder
    {
        get
        {
            return AStarPathfinder.Instance;
        }
    }
}

Now you can use instances of this custom connection class in place of the DiagramConnections in the code you posted to see the results.

The AllowSegmentToNodeCollisions property is a user interaction option, rather than a layout option. If you run your sample code using the custom connection with the AStarPathfinder, you will see one of the connections bending around the middle node. If you hover the mouse over this connection, some yellow diamonds will appear which you can drag to move the segments. If you move the horizontal segment, you will notice that it can't overlap the middle node. Setting the property to true will instead allow the segment to overlap the middle node.

Let me know if you need help with including your custom connection in the toolbox if neccessary.

 - Jason

Hi Jason,

Thanks for your quick response.  Your fix worked great.  I have a few more refinements that if I could make to the layout I would be totally sold on the package.

First of all, I'll explain something about the type of diagrams that I need to create.  

The graphs are not traditional flow charts, they represent a programming paradigm that is used internally.  The graphs should ordinarly always flow left to right.  I'm wondering can I give the LayoutAlgorithm show simple hints to help get the layout we want.

I'll give another example here.

ShapeNode el1 = new ShapeNode() { Shape = DiagramShapes.Ellipse, Bounds = new Rect(0, 0, 100, 40), Data = "test" };

ShapeNode el2 = new ShapeNode() { Shape = DiagramShapes.Ellipse, Bounds = new Rect(0, 0, 100, 40), Data = "test2" };

ShapeNode el3 = new ShapeNode() { Shape = DiagramShapes.Ellipse, Bounds = new Rect(0, 0, 100, 40), Data = "test3" };

ShapeNode el4 = new ShapeNode() { Shape = DiagramShapes.Ellipse, Bounds = new Rect(0, 0, 100, 40), Data = "test4" };

ShapeNode el5 = new ShapeNode() { Shape = DiagramShapes.Ellipse, Bounds = new Rect(0, 0, 100, 40), Data = "test5" };

DiagramConnection conn = new CDiagramConnection(el1.ConnectionPoints[4], el2.ConnectionPoints[0]);

DiagramConnection conn1 = new CDiagramConnection(el2.ConnectionPoints[4], el5.ConnectionPoints[0]);

DiagramConnection conn2 = new CDiagramConnection(el3.ConnectionPoints[4], el4.ConnectionPoints[0]);

DiagramConnection conn3 = new CDiagramConnection(el4.ConnectionPoints[4], el5.ConnectionPoints[0]);

ds.Diagram.Nodes.Add(el1);

ds.Diagram.Nodes.Add(el2);

ds.Diagram.Nodes.Add(el3);

ds.Diagram.Nodes.Add(el4);

ds.Diagram.Nodes.Add(el5);

ds.Diagram.Connections.Add(conn);

ds.Diagram.Connections.Add(conn1);

ds.Diagram.Connections.Add(conn2);

ds.Diagram.Connections.Add(conn3);

ds.AllowSegmentToNodeCollisions = true;

ILayoutAlgorithm layout = new GridLayoutAlgorithm() { Info = new FlowDiagramLayoutAlgorithmInfo(), HorizontalOffset = 100, VerticalOffset = 50 };

ds.ApplyLayoutAlgorithm(layout);

ds.SizeToFit();

This produces the output as shown here: 

Is there some way that I can give the layoutalgorithm some hints in order to produce a layout like this?

For example, given that I know the source nodes, can I lock those into positions in a column on the left hand side and place the others?

Or can I specify somehow to prefer connections that move left to right?

Once again, thanks for your help.

Hello

The layout that you desire is actually how the GridLayoutAlgorithm should work. I've made improvements to the GridLayoutAlgorithm to produce better results in the scenario you have described as well as many others. These improvements will be available through the nightly builds from tomorrow the 28th of June. This can be downloaded from here: http://assets.mindscape.co.nz/Trial/Nightlies/20110626/WpfDiagramsTrial-20110626.msi

Once you have installed the nightly build (from the 28th of June or later), your sample code above will produce the desired layout without any additional code. If you happen to discover more senarios that produce unexpected results, then let us know and we will further improve this algorithm, or provide hooks for you to override some of the behaviour if neccessary.

 - Jason

Sorry, that link is for the current nightly.  The 28 June nightly will be available at http://www.mindscapehq.com/downloads/ from about 1200 GMT.  Apologies for any confusion!

Hi Ivan and Jason,

Thanks very much for your help, I'll download the new build today and give it a try!

Best regards.

Hi Guys,

I downloaded the nightly build from the main downloads page, with filename WpfDiagramsTrial-20110628.msi.

I'm getting a "No License Installed" exception.  Is this the wrong download for the trial version?

That looks like the correct download for the trial version.  There's some info about licensing exceptions here:

http://www.mindscapehq.com/forums/Thread.aspx?ThreadID=1309

(it was written for a different product but applies equally to WPF Diagrams).  Let us know if these don't help!