Holding , Serializing and Deserializing Custom Data on Nodes and Connections

 Hello,

I need to hold some data in nodes and connections and also need to serialize on save and deserialize on load that data.

How to do this? I know i can develop custom nodes. but is it the only way to achive this.

my only need is to hold custom data , i do not want to change the apperance of nodes or connections.

Thanks.

Hello

I have now made it easier to hold custom data withn diagram nodes. I have attached a sample showing how to use the Data property of a node to hold what ever data you want. The sample demonstrates how to change the apperance of a node based on this data, but also how to keep the apperance the same as what your interested in. Also it shows how to serialize and deserialize any kind of custom data you want. Have a look at this sample and take some time to understand what its doing. You'll also need to download the latest nightly build for it work.

First you will want to make a wrapper class for you custom data. This will be equivilent to the AbitraryData class in the sample. I simply contains a string to be displayed on the node template, and an object which will be your custom data.

Next you need to tell the diagram surface how to display the text within this wrapper class on a node element. To do this you first need to make a DataTemplate which should simply be the same as the second DataTemplate found in the MainWindow.xaml file. Next you should make an instance of a FixedTemplateSelector, and set its data template to be the one mentioned above. Now, you can set the NodeContentTemplateSelector of the FlowDiagramFormatter to be this template selector. Then set the other template selectors on the formatter to come from you own style, or use one of our standard styles as demonstrated in the sample near the end of the MainWindow.xaml file.

Doing this will allow you to allow node to hold custom data in their Data property, but not change the apperance of a node. For serialization and deserialization, make your own implementation of INodeContentSerializer and follow the CustomNodeContentSerializer class in the sample to serialize your own custom data in what ever way you need. Set the NodeContentSerializer property of a FlowDiagramXmlSerializer to be an instance of your node content serializer. This is demonstrated in the MainWindow.xaml.cs file.

You will notice that for now, this only allows nodes to hold custom data, but not connections. Try this out and see if it works well for your application needs. If it works well for you, then we can add this support for connection data as well.
Let us know if you need help getting this to work, or need further clarification on something.

Cheers
- Jason

 Thank you very much for quick response. this sample is good for me. and that is what i want.

but there is one missed point i think. node and connection builders should support this custom data creation. i know i can set connection builder from code. but can i set node builders for node types.

what i mean is, i will use default toolbox that contains nodes ( StackPanel ) but when new node is dragged to DiagramSurface new nodes data must be set . for this i think we need to set node builders for node types or we must define toolbox from zero point.

Hello

Each DiagramNodeTool in the toolbox has a different node builder. So there is a different node builder for each type of flow diagram node (start, end, process, decision). For setting your custom data into a node when it is created, you might want to try implementing your own node builders for each type of node. Then when styling the toolbox, you can give each of the DiagramNodeTools the appropriate node builder that you have implemented. Node builders are very simple. For example, here is the node builder for the start node:

public class StartFlowDiagramNodeBuilder : IDiagramNodeBuilder
{
    public void CreateNode(IDiagramModel diagram, Rect bounds)
    {
        StartNode node = new StartNode();
        node.Data = "Start"; // Set any custom data here
        node.Bounds = bounds;
        diagram.Nodes.Add(node);
    }

    public Size DefaultSize
    {
        get { return new Size(100, 40); }
    }
}

Let me know if this is what your looking for.

- Jason

 Hi ,

We bought your WPF diagram tool today :) ( Registration user name mucahitg ). thank you for this component again. it really helped us much.

Again question

What about custom data on connections. Can you solve that like node custom data. it will solve our problems.

*** I know node builders :)

Hello

Great to hear that our component serves you well.

I have now added support for custom data on connections. It follows the same pattern used for custom node data. This will be available through tonights nightly build. I have attached an update of the sample to this forum post which now also demonstrates how to style and serialize custom data on connections. You can use this to see the names of new classes/properties, and it also provides a default DataTemplate for styling connection data.

Cheers
- Jason

Hello,

Latest CustomDataSample project has errors. It seems like Connection Custom Data Serialization Support is not added to nightly builds.

Hi,

Nightly builds generate at about 3am New Zealand Time - meaning the nightly build available in approximately 6 hours time will have the updates in it :-)

Sorry for the confusion,

John-Daniel Trask

I have taken this example and changed it so that the Data property of the AbitraryData is a collection of objects. I have amended SerializeAbitraryData so that it looks like the following and I get an exception "Token StartAttribute in state Element Content would result in an invalid XML document.". I don't really see a way of handling the scenario of having the custom data with a collection. 

    private void SerializeAbitraryData(XmlWriter writer, AbitraryData data)

    {

      writer.WriteAttributeString("DataType", "Abitrary");

      writer.WriteAttributeString("Text", data.Text);

        foreach (var o in data.Datas)

        {

            writer.WriteStartElement("SomeData");

            writer.WriteAttributeString("TheString", o.ToString());

            writer.WriteEndElement();

        }

    }

We currently have a limitation where a custom node content serialiser is allowed only to write attributes, not elements.

I have committed a partial fix for this which will be included in nightly builds dated 17 Feb 2010 and above, available from about 1500 GMT.

This will allow the custom serialiser to write both attributes and elements, with the constraint that all attributes must be written before any elements are written.  This should be sufficient for your collection scenario.

Let us know if you still see problems or need further info.

ivan, you indicated in your last statement how to write elements for serialization.  Can you please provide an example of how one can deserialize a custom node that contained both attributes and elements?

Start with Jason's CustomDataSample above.  We're going to modify it to save ArbitraryData.Text as an element instead of an attribute.

Step 0: Remove an unsupported scenario

The sample has ArbitraryData objects on both nodes and connections, but element-based serialisation only works on nodes.  Open MainWindow.xaml.cs, locate the constructor and comment out the Data initialiser in the following line (shortly after the // Connections: comment):

      ds.Diagram.Connections.Add(new FlowDiagramConnection(abitraryDataNode.OutboundConnectionPoints[2], squareDataNode.InboundConnectionPoints[0]) { /* Data = abitraryConnectionData */ });

If you have a requirement to serialise custom connection data using elements, let us know and we'll investigate a fix.

Step 1: Serialisation

Open CustomDataSerializer.cs, locate the SerializeAbitraryData method and modify it to read:

    private void SerializeAbitraryData(XmlWriter writer, AbitraryData data)
    {
      writer.WriteAttributeString("DataType", "Abitrary");
      writer.WriteAttributeString("Data", data.Data.ToString());
      writer.WriteElementString("Text", data.Text);
    }

Note that the Text element must be written *after* all attributes have been written.

Step 2: Deserialisation

Locate the DeserializeAbitraryData method and modify it to read:

    private AbitraryData DeserializeAbitraryData(XmlReader reader)
    {
      Object data = reader["Data"];
      string text = String.Empty;

      using (var rdr = reader.ReadSubtree())
      {
        while (rdr.Read())
        {
          if (reader.NodeType == XmlNodeType.Element && reader.LocalName == "Text")
          {
            text = reader.ReadElementString();
          }
        }
      }

      return new AbitraryData() { Text = text, Data = data };
    }

Note the use of ReadSubtree() to ensure that the XmlReader ends up positioned after the XML element that represents the node.

If you look at the XML you will see that Text is saved as an element instead of an attribute.  You can of course extend this to more complex data as required.

Hi Ivan,

I tried to execute the steps that you outlined line by line, but I am unable to deserialize the data (getting an exception).  Can you please take a look at the attached sample and let me know what the issue is?  The project has been converted to a VS2010 project, by the way.  Serialization appears to be ok, but I'm not able to deserialize it using the ReadSubtree methodology.

Thanks,

Tam

 Nevermind.  I found my error.  I did not comment out the Data object on the line that you specified in step 0 (I accidentally commented out a different line).  I have verified that this methodology works.

Thanks,

Tam