Connection Text

Hello,

Yesterday i just installed a new nightly build Mindscape Flow Diagrams. When i try to run CustomNodeType and make a connection between two nodes, i found that the text on the connection is replace with "Mindscape.WpfDiagramming.FlowDiagrams.FlowDiagramConnection". Is that any solution with this problem.

Thank.

Hello Janice

Thanks so much for pointing this out. I have fixed this up and so it will be available tomorrow the 21st throught the nightly build download.

Cheers
- Jason

Hello Jason,

Thank you! The problem is solved.

Then, I would like to ask whether i can customize the connection as one of the node to add to the drag and drop toolbox? I am recently doing my project that need a tools to allow user to draw data flow diagrams. So, i would like to ask how to make a customized connection node instead of direct connect from the nodes on the workspace. Thank you! =)

Hello Janice

This should be possible to do, although to answer your question I would like to clarify what your looking for. Are you wanting to implement your own type of flow diagram connection with extra functionality? or are you simply wanting to create a drag/drop toolbox-item for creating instances of the standard FlowDiagramConnection that we provide?

Cheers
- Jason

Hello Jason,

I want to create a drag and drop toolbox item for creating instances of the standard FlowDiagramConnection that WPF Flow Diagram provided. At the same time, i would like to perform some checking when user make the connection between different node.   

Thank you!

Janice

Hello Janice

We have already provided a tool box item for building connections. You will want to download the nightly build for tomorrow the 27th to get a small bug fix for this. Although this toolbox item may not be quite what your looking for, but it could be a good place to start. For the user to use this tool box item, rather than dragging it from the tool box, the user needs to click on the tool box item. This puts the mouse cursor into create-connection-mode and then the user can create connections in the usual way. This tool box item is best used when there are multiple different types of connections that the user can create. In Flow Diagrams however there is only 1 connection type. If you want to try this out then you can add the following code into the toolbox:

<ms:DiagramConnectionTool Builder="{StaticResource ConnectionBuilder}" ToolScope="{Binding
        ElementName=toolboxContainer}" LineStyle="{StaticResource ConnectionStyle}">
    <Border Margin="10" Background="White" Width="50" Height="25" CornerRadius="8">
        <TextBlock Text="Conn" HorizontalAlignment="Center" VerticalAlignment="Center" />
     </Border>
</ms:DiagramConnectionTool>

You will also need to put this code into the resources of the application:

<f:FlowDiagramConnectionBuilder x:Key="ConnectionBuilder" />

<Style x:Key="ConnectionStyle">
    <Setter Property="Shape.Stroke" Value="Purple" />
    <Setter Property="Shape.StrokeThickness" Value="2" />
    <Setter Property="Canvas.ZIndex" Value="-1" />
</Style>

Also, where I have written 'toolboxContainer', this needs to be replaced with the name of the element that the toolbox items are inside.

As I said, the way that this toolbox item is used by the user may not be what your looking for. If it is not what you want, then a description of how you want the user to use this toolbox item will be useful for us.

As for the checks you want to perform,  this should be relativly easy. The best way to do this is to implement your own type of IDiagramConnectionBuilder. This has a method that is called whenever the user has requested a connection to be made. These are very simple to implement. You will need to write a method like this:

public void CreateConnection(FlowDiagramModel diagram, OutboundConnectionPoint
fromConnectionPoint, InboundConnectionPoint toConnectionPoint)
{
      FlowDiagramConnection connection = new FlowDiagramConnection(fromConnectionPoint, toConnectionPoint);
      diagram.Connections.Add(connection);
}

And implement the IDiagramConnectionBuilder.CreateConnection method like this:

void IDiagramConnectionBuilder.CreateConnection(IDiagramModel diagram, IDiagramConnectionPoint fromConnectionPoint, IDiagramConnectionPoint toConnectionPoint)
{
      CreateConnection((FlowDiagramModel)diagram, (OutboundConnectionPoint)fromConnectionPoint, (InboundConnectionPoint)toConnectionPoint);
}

Then, in the first method that I mentioned here, you can use the Connectable property on the fromConnectionPoint and toConnectionPoint which will get either a node or a connection object.

Hope this helps, feel free to ask more questions about things you don't understand or can't get working.

Cheers
Jason

Hello Jason,

Thank you for a detailed explanation, but there is less an namespace in my project? Since when i try to implement the code that you provided as below:

<f:FlowDiagramConnectionBuilder x:Key="ConnectionBuilder" />

When i run my system, the system is required me to included the namespace for f.

Thank for your help.

Janice

Hello Jancie

You will need to add something like this:

xmlns:f="clr-namespace:Mindscape.WpfDiagramming.FlowDiagrams;assembly=Mindscape.WpfDiagramming.FlowDiagrams"

Put it with the other xmlns declarations at the top of the XAML file for you application.

- Jason

Hello Jason,

So sorry for the late reply, until now i still can't get it to work.

When i try to implement the code, i can get a connection symbol in my toolbox. However, it looks like a symbol only and does not have any changes after i click on it. Is that i less something important code in order to get it to work?

Also, actually what name should i placed it instead of "ToolboxContainer". I am not very understand about it. Hope can get more info about this.    

Your help is appreciated.

Thank a lots.

Janice.

 Hello Jason,

Thank for your previous time explanation.

After several time trying to implement it in my system, finally i got what you means with the click on the toolbox item.

Now, the mouse cursor in my system is in the click-connection mode by changing the mouse cursor into Uparrow mode whenever user clicks on the connection symbol.

Very thank for your help.

Regards,

Janice.  

Good to hear you got it working well.

 - Jason

Hi Jason,

So sorry to disturb you again,

May i know where should i puts the source code for validation the connection part that you provided previously? I try to declare a connectionBuilder class, but the system does not read that part.

Thank a lots for your help.

Regards,

Janice.   

Hello Janice

For more information about connection validation, check out  this blog post: http://www.mindscape.co.nz/blog/index.php/2010/04/13/wpf-diagramming-connection-and-an-api-change-validation/

It contains all the information about setting up your own connection validation logic and then giving it to the diagram to read. Note that there has been a small improvement in the connection validation system so you may want to download the latest nightly build. A small change in the API will mean you need to implement 1 more method in your IDiagramConnectionBuilder implementation.

The thing that I think you are missing is giving your custom connection builder to the diagram. This is done with:

diagram.DefaultConnectionBuilder = new ...
This is explained in the blog post. Also, you will want your validation code to be in a custom IDiagramConnectionRelocator as well. More details about this in the blog post.

There is a lot to understand here, so let me know if you have any troubles.

Regards
 - Jason

Hi Jason,

Thank a lots for your details explanation. Here, i am still having little trouble when using this funciton. 

This function does not work after the Open and New button are pressed. Then, i try to call back the function but cannot make it work. Is that any solution with this?

Thank you!

Regards,

Janice. 

Hello Janice.

Could you give me more information about the issue? Like what connection validation logic you need for your diagram. What nodes do you want to allow or prevent from being connected together. If you could send me a sample demonstrating the problem with the Open and New buttons then I should be able to find a solution for you.

Cheers
 - Jason

Hi Jason,

In my system, i had declared two types of nodes which are external entity and process.

Now, i would like to validate the external entity only can connect to the process and the same types of nodes cannot be interconnected.

By using the sample provided by you, i successfully make it.

However. when the user presses the Open and New button provided by the system.

This function is unable to work. Here, i already attached my system for your reference.

Thank a lots for your help.

Regards,

Janice.

Hello Janice

So when you start your system, your connection validation is working? but then using Open or New, stops it from working.

You might be missing setting the connection builder onto the diagram when you create a new one. For example, in the 'New' function in your sample, you are doing ds.Diagram = new FlowDiagramModel(). After doing this, you'll need to set the connection builder of this new diagrm model to be your custom connection validation builder in the usual way: ds.Diagram.DefaultConnectionBuilder = ...

Let me know if this is not the problem.
Cheers
 - Jason

Hi Jason,

Thank for you points out the problem of my system.

I already changed my ds.Diagram = new FlowDiagramModel() to the "ds.Diagram.Nodes.Clear;" which has the same function with this.

For the "Open" function, i declared a "((FlowDiagramModel)(ds.Diagram)).DefaultConnectionBuilder = new ValidatingDataFlowBuilder();" to make it work.

Thank a lots for your help.

Regards,

Janice.
 

Hi Jason,

Sorry to disturb you again, i would like to ask regarding the connection validating.

Is that possible for me to add a message box to inform user that the connection is not possible to make at the same the connection cannot be created?

Thank you!

Regards,

Janice.

Hello Janice

Yes this should be possible. Code for displaying message boxes can be written in the connection validation logic within the connection builder and connection relocator classes. Is there any information that you need to get it to work?

 - Jason

Hi Jason,

I would like to display a message either in the message box or a display text block.

I already tried to put it before or after the canCreateConnection = false something like this,

if (source is Process && !(destination is DataStore) && !(destination is ExternalEntity) && !(destination is Process))
{

canCreateConnection = false;

MessageBox.show("Process cannot be connect to the process");
}

but the connection is created after closing the message box. Is that i misplaced the message box?

Thank you!

Regards,

Janice.

Hello Janice

Try see what happens if you remove the message box from your code for now. There may be something else in your validation logic that is setting your canCreateConnection variable to true again. Let me know what happens.

 - Jason

Hi, Jason,

You are right, the problem arises because of the declaration of the statement.

However, i needs to display error message when the process is connected to other process but not itself. Then, is that any way to specify the destination is from another process but not itself?

So sorry to trouble you again.

Thank you!

Regards,

Janice.

Yes this is possible. you can get both the source and the destination from the method arguments. If they are both the same, then you know the user is trying to connect a node to itself. If you have a look at the ConnectionValidationSample, then you will find that I have done similar validation to what you want here.

Getting the source and destination is done like this:

IDiagramConnectable source = connectionPoint.Connectable;
IDiagramConnectable destination = dropTarget.Connectable;

And then you can simply compare them in your validation logic:

source == destination is true if the process is going to connect to itself.

 - Jason

Hi Jason,

Thank for your explanation, i already make it for my system.

Thank you!

Regards,

Janice