Dynamic connections point positioning

Our application requires us to create a variable # connection points on different instances of the same node type ( ActivityNode in our case )

We followed the dynamic connection point example that Jason put in the blog with success coupled with the example of point relocation but then it came to positioning the nodes. The way I’ve implemented this ( which is wrong I believe ) is to have the IndexAwareFlowDiagramCalculatorSelector created in xaml thus:

<local:IndexAwareFlowDiagramCalculatorSelector x:Key="CalculatorSelector"         BasedOn="{StaticResource {x:Static     ms:GradientStyle.ConnectionPointPositionCalculatorSelectorKey}}">

</local:IndexAwareFlowDiagramCalculatorSelector>

           

<ms:FlowDiagramFormatter x:Key="Formatter"

                               NodeTemplateSelector="{StaticResource NodeTemplateSelector}"

                               ConnectionTemplateSelector="{StaticResource {x:Static                                 ms:GradientStyle.ConnectionTemplateSelectorKey}}"

                               ConnectionStyleSelector="{StaticResource {x:Static                                    ms:GradientStyle.ConnectionStyleSelectorKey}}"

                               CalculatorSelector="{StaticResource CalculatorSelector}"

/>

 

We then do this to add EdgeCalculators thus:

 

 Dim EdgeCalculator As IndexAwareTypeEdgeCalculator

 Dim CalculatorSelector As IndexAwareFlowDiagramCalculatorSelector

 

 For i As Integer = 0 To tool.Connections.Count - 1

 

 'Create TypeEdgeCalculator

 EdgeCalculator = New IndexAwareTypeEdgeCalculator

 

 EdgeCalculator.Edge = Edge.Bottom

 EdgeCalculator.DataType = GetType(ActivityNode)

 EdgeCalculator.Index = i

 

 'XFactor is between 0 and 1 so the offset should 1 / ( no of outcomes + 1 )

 EdgeCalculator.PositionCalculator = New OffsetPositionCalculator((i + 1) * (1 / (tool.ActivityOutcomes.Count + 1)), 1)

 

 'Get the diagram surface FlowDiagramCalculatorSelector and add the above edgecalculator

 CalculatorSelector = diagSurface.Formatter.CalculatorSelector

 CalculatorSelector.CalculatorMap.Add(EdgeCalculator)

 

 'Add a new connection point to our instance of the ActivityNode

 Activity.AddConnectionPoint(tool.Connections(i).Description)

 

 Next

Public Sub AddConnectionPoint(ByVal strOutcome As String)

 

        Try

 

            Dim IndexPoint As New IndexedConnectionPoint(Me, Edge.Bottom, mintNoPoints)

 

            IndexPoint.Data = strOutcome

            IndexedPoints.Add(IndexPoint)

 

            ActivityConnectionPoints.Add(IndexedPoints(mintNoPoints))

 

            mintNoPoints += 1

 

        Catch ex As Exception

 

            Throw New mokom.product.CommonObjects.TraceableException(ex, Me, "AddConnectionPoint")

 

        End Try

 

End Sub

All works well for the first node dropped on the canvas but as the EdgeCalculators are being added to the CalculatorSelector each time a node is dropped on and the CalculatorSelector is global so to speak we can’t see how this should be done correctly. I.E. The first node may have 7 connections and the second only 2. This would make a total of 9 EdgeCalculators for the ActivityNode type and is causing connection points to be incorrectly positioned on the second node dropped.

 

Hello Mark

At first glimpse I can see a couple of solutions that you could try out. I have not fully tested these out, and how well they work may be affected by other things you are doing with ActivityNode and its connection points.

Firstly, you could try to make all the Index values of the connection points unique, rather than each instance of ActivityNode having connection points with indicies from 0 ... x. e.g. store the number of IndexedConnectionPoint objects made so far, and set the Index of the next connection point based on that. And then make sure the calculators use those correct Indexs values too. Think of it as using the Index property as an ID for each connection point. This may not work if your reading the Index property for some other logic.

Another approach would be to implement your own calculator selector that would be similar to the IndexAwareCalculatorSelector. This calculator would also have an Index property, but also some kind of ID property. Then give each ActivityNode a unique ID, you may need to implement an ID property if you have not yet done so. Then in your calculator selector, a calculator can be selected by using both the ID of the ActivityNode attached to the connection point in question, and the index of that connection point.
This is just one example of the kind of calculator selector you could implement to get this to work.

I suggest trying out the first approach I mentioned here as it is the easiest solution. See if it will work in your application, otherwise work on implementing your own custom calculator selector. Let me know if you ever need help implementing one, or if there is anything you don't quite understand.

Regards
Jason Fauchelle

Spot on! I was missing the link between the index of the IndexAwareTypeEdgeCalculator and the index of the connection point. The ID IDea worked perfectly.

 

Cheers, Mark