Markers for the links

Hello!

In my development of the diagrams I have faced with another problem.

I need to have something like "marker" for the links. It should look like on the attached picture: a node with a connection point, that I can "hang" on a link. The behavior should be the following:

1. When I drag it on the link, "marker" should connect to the link.
2. When I move the link, the "marker" should be moved with the link.
3. When I move the "marker" it should be disconnected from the link.4

Could you give me some advices how to implement this? Have you ever seen/implemented something like that? I'm not sure that my explanation is clear enough, but I hope you can help me.

//Dmitry

Hello Dmitry

We don't have this support built in, but there is a feature you may want to explore first which may be a good alternative:

Our diagramming framework has built-in support for connection-mounted-connections. You should be able to drag the end of a connection and hover the mouse over another connection. The receiving connection should change to red and allow you to drop the connection so that the 2 connections connect together. Also you should be able to hover the mouse over a connection, see it turn red, then click and drag to start creating a connection. If this is not currently active in your application, make sure that CanConnectToConnections is set to true on the DiagramSurface, and make sure any custom connection implementations are not overriding CanRecieveNewConnections and CanOriginateNewConnections. Also, if you are extending from the FlowDiagramConnection class, you will need to override the CanOriginateNewConnection property to always return true.

With this feature, you can put a connection point on your "marker" node. Users can create a connection from this connection point and drop it on the connection between the other 2 nodes. With a little custom styling, you can include the red dot at the end of the connection-mounted-connection. When the link moves, the connection-mounted-connection will move along with it. But the marker node won't actually move. Users can detach the marker node by deleting the connection-mounted-connection.

I have attached an image to help explain this better. Notice that the bounds of the marker node is smaller, and I have added a blue connection point along the bottom edge. Between the blue connection point and the red dot is a diagram-connection. To attach the marker node, users would drag the mouse from the blue connection point and drop it on the other connection. This little connection could be deleted to "detach" the marker node. When the long link is moved, the little connection will follow it so they still remain connected.

I realize this isn't exactly what you have described, but it is by far the easiest way for you to implement a similar functionality. I recommend trying this out to see if it is a suitable solution. You can always ask me more questions if you need help. If this approach is not going to be good enough, let me know and we can work together to implement a more complicated solution that matches what you have described.

Regards

Jason Fauchelle

Hello Jason!

I have choosen another way.

I created marker node with two connection points:

ConnectionPoints.Add(new DiagramConnectionPoint(this, Edge.Left) { Data = "Red" });
ConnectionPoints.Add(new DiagramConnectionPoint(this, Edge.Right) { Data = "Red" });

But coordinates for these points are the same, so it looks like the node has only one connection point. Then, in DiagramSurface_NodeDragCompleted I check if movingNode is a marker and if mouse is over link element. If so, I delete this link and create two new links - from node1 to marker node and from marker node to node2.

You can see the result on the attached picture. It looks nice, but I still have some problems - when a user drags a marker node over a link, he can't recognize if the marker "catched" the link or not. I would like the link should be highlighted somehow (change its color or thikness), but I don't know how to implement this. And another issue - user can't drag the marker from the toolBox directly, he should place it on the diagram first, then drag to the link (I think I should add some code to DiagramNodes_CollectionChanged to solve this, right?).

May be you could help me? I think I should add some trigger to highlight the link, but what exactly...

//Dmitry

Hello Dmitry

For the drag notification, you'll need to implement a custom connection type and add a boolean property which will indicate if the marker node is over the connection. You can look at the ActivityDiagrams sample for examples of how to create a custom connection type. Your custom connection implementation should extend the DiagramConnection class. You'll also need to implement a connection builder which implements the IDiagramConnectionBuilder interface. You'll need to set the DefaultConnectionBuilder property of the diagram model to be an instance of this connection builder. By doing this, all the connections that get created in the diagram will be instances of your custom connection type. Now when the marker node is dragged over the link, you can cast the link into your custom connection type and set the boolean property to true. Then in the style, you can use a trigger or a binding to look at this boolean property and change the color or thickness of the line.

To listen to when the marker node is dragged from the toolbox, you can listen to the ToolThumb.QueryDropPositionEvent. This can be done by attaching an event handler to the DiagramSurface like this:

ds.AddHandler(ToolThumb.QueryDropPositionEvent, new EventHandler<QueryDropPositionEventArgs>(DiagramSurface_QueryDropPositionEvent));

Where ds is the DiagramSurface. This event will be raised constantly as the mouse moves while dragging a node from the tool box. Note that it is also raised constantly as the user drags a node already on the diagram surface too. So you'll be able to use this one event handler to handler all the node dragging logic you need for the marker node. You can check out the NodeGrouping sample in MainWindow.xaml.cs which also listens to this event.

This should point you in the right direction to implement this functionality. Let me know if you need more information.

Jason Fauchelle

Thank you Jason! That's clear.

But I would like to know what XAML code should I add and where?

And the next question. Is it possible to have two different styles for the connections? I have two classes for my connections - MarkerConnection and CollapsableConnection (you know it, I think :)). For the CollapsableConnection I would like to have a style with the small blue ellipses at the start point and at the end point. But for my MarkerConnection I would like to have another style with the small blue ellipse at the end point only, and no specific shape at the start. How can I solve this issue?

//Dmitry

Hello Dmitry

In XAML, you'll need to write the connection style. The best example for you to look at would be the ActivityDiagrams sample. Look at the ActivityDiagramStyle.xaml file in the Styles folder. At the bottom is some resources used for the connections.

The ConnectionPathStyle defines the color and thickness of the connection line. The ArrowheadPathStyle is setting the color of the arrowhead. The EndArrowTemplate specifies what is actually at the end of the connection. In this case there is an Arrowhead which uses the ArrowheadStyle. The PathBuilder is an instance of CorneredPathBuilder which is simply putting a margin at the end of the line so that the line does not stick out at the tip of the arrow. The CorneredPathBuilder also lets you set a corner radius of either curved or bevelled corners. Last of all is the ConnectionStyle which brings it all together. Here I am setting the PathStyle, EndArrowTemplate and PathBuilder. You can also set a StartArrowTemplate which specifies what to render at the start of the connection.

Now, in order to get your mouse over effect you'll want to add triggers to the ConnectionPathStyle. The triggers should listen to the boolean property you have on your custom connection. This may look something like this:

<DataTrigger Binding="{Binding Connection.MyProperty, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramConnectionElement}}}" Value="True">
    <Setter Property="Stroke" Value="Red" />
    <Setter Property="StrokeThickness" Value="4" />
</DataTrigger>

For multiple connection styles, this is done in a similar way as node styles. At the end of the ActivityDiagramsStyle.xaml file you'll see the ConnectionStyleSelector. For the activity diagrams sample, this is a FixedStyleSelector which means all the connections in the diagram will use the same style. You'll want to use a TypeStyleSelector. This can be populated with instances of TypeStyle which is a mapping from a type to a style. You can add a TypeStyle for each of your connection types. You'll set the Type to something like local:MarkerConnection, and then set the Style to be the Style you want applied to that connection type. This will allow you to have different graphics at the end of the different connections.

Let me know if you have any questions about this.

Jason Fauchelle