Multiply connection points

How can i dynamically add multiply connection points at same edge?

Position of the point should depend on its index and the total number of points.

Distribution of the points should be uniform.

Diagrams 2.0

Hello

To do this you need to start by creating a custom node type that will manage the logic for dynamically adding connection points. Within this node you should have a method that dynamically adds a new connection point to the node. Within this method you start by creating a new instance of a connection point. Pass in the Edge enum value to the constructor based on which edge gets populated with connection points. Next, add this new connection point to the ConnectionPoints collection.

Once you have added a new connection point to the node, you need to update the positions of all the connection points along that edge so that they are evenly distributed. The position of a connection point is controlled by the IDiagramConnectionPoint.PositionCalculator property. So you need to set this property on all the connection points to be an appropriate OffsetPositionCalculator. Use a for loop to iterate through the connection points on that edge. Then use the current loop index and the known number of connection points on the edge to set the XFactor or YFactor of an OffsetPositionCalculator as neccessary. Then set the PositionCalculator property of the connection point. (each connection point will get it's own OffsetPositionCalculator). Updating the connection point calculators should be done every time a new connection point has been dynamically added.

Here is some example code that does this. It uses a custom connection point type called TreeDiagramConnectionPoint. The AddConnectionPoint method also returns the newly created connection point. The custom node that contains these methods starts off with a connection point on the top edge, and a connection point in the center. Connection points are then dynamically added to the bottom edge. Thus the known number of connection points that have been added to the bottom edge is the total number of connection points minus 2. And the for loop starts at i = 2.

public TreeDiagramConnectionPoint AddConnectionPoint()
{
    TreeDiagramConnectionPoint point = new TreeDiagramConnectionPoint(this, Edge.Bottom, ConnectionPointDirection.Outbound);
    ConnectionPoints.Add(point);
    UpdateConnectionPointCalculators();
    return point;
}

private void UpdateConnectionPointCalculators()
{
    double count = ConnectionPoints.Count - 2;
    for (int i = 2; i < ConnectionPoints.Count; i++)
    {
        OffsetPositionCalculator calc = new OffsetPositionCalculator((i - 1) / (count + 1), 1);
        ConnectionPoints[i].PositionCalculator = calc;
    }
}

Now the AddConnectionPoint method can be called depending on how you want to dynamically add the connection points.

This should give you a place to start, let me know if you have other questions about this.

 - Jason

I try modificate WaitNode.cs from CustomNodeType.FlowDiagrams.

But it's not working. All bottom points in same place.

    public class WaitNode : DiagramNode
    {
        public WaitNode()
        {
            ConnectionPoints.Add(new FlowDiagramConnectionPoint(this, Edge.Top, ConnectionPointDirection.Inbound));
            ConnectionPoints.Add(new FlowDiagramConnectionPoint(this, Edge.Right));
            ConnectionPoints.Add(new FlowDiagramConnectionPoint(this, Edge.Left));

            AddConnectionPoint();
            AddConnectionPoint();
            AddConnectionPoint();
        }

        public DiagramConnectionPoint AddConnectionPoint()
        {
            DiagramConnectionPoint point = new DiagramConnectionPoint(this, Edge.Bottom, ConnectionPointDirection.Outbound);
            ConnectionPoints.Add(point);
            UpdateConnectionPointCalculators();
            return point;
        }

        private void UpdateConnectionPointCalculators()
        {
            double count = BottomConnectionPoints.Count - 2;
            for (int i = 2; i < BottomConnectionPoints.Count; i++)
            {
                OffsetPositionCalculator calc = new OffsetPositionCalculator((i - 1) / (count + 1), 1);
                ConnectionPoints[i].PositionCalculator = calc;
            }
        }

        public IList<DiagramConnectionPoint> BottomConnectionPoints
        {
            get
            {
                return ConnectionPoints.Where(x => x.Edge == Edge.Bottom).ToList();
            }
        }
    }

Hello

You are very close to getting it working. Just a few more modifications  need to be made:

Since you have added the BottomConnectionPoints property, the UpdateConnectionPointsCalculators method has some bugs. The count variable does not need to have 2 subtracted from it. The for loop should start at i = 0. The (i - 1) will need to be changed to (i + 1). And the last line in the for loop should use "BottomConnectionPoints" instead of "ConnectionPoints"

This will fix all the logic, but if you run it now it still will not quite work. Once the node is rendered on the diagram surface, the connection point calculators are overriden by style settings because unfortunatly there isn't a way to know how the calculators have been set. This is only a problem because here you are setting up the position calculators in the node model before the template has been applied. There may be a fix for this in the future, but this will not be a problem when dynamically adding connection points based on user actions.

So if you call the AddConnectionPoint method to dynamically add connection points when the node is already drawn on the diagram surface, then everything will work fine. If you still need to add these bottom 3 connection points in the constructor, then the simplest way to get the connection point calculators applied is to call the UpdateConnectionPointCalculators method through a dispatcher in the constructor.

I have attached a very simple example that includes the modifications I have mentioned and produces the effect you want. I have not applied any custom styling to the node, so it just appears as the default blue rectangle. In order to run the sample, you will need to include a reference to your copy of WPF Diagrams 2.

Let me know how it goes.

Thank you, Jason. It's worked. Problem was in Dispatcher.

Please write to this post if you will fix this issue in the future. I will remove Dispatcher from many constructors.