Adding Custom Data for Serialization

There are no strict limitations on what can be serialized, as long as the object to serialize can be converted to a string or better XML element and back. The GraphML serialization mechanism in yFiles for HTML handles the serialization of an IGraph. This means that everything that is related to the graph structure gets serialized. If you want to serialize your own objects, the first thing you need to make sure is that they are somehow connected to the graph model. This can be done using tags or IMapper<K,V> as described in the section Associating Data with Graph Elements.

In the case of using IMapper<K,V>, you have to specify which mapper should be serialized or should be filled when deserializing. The following methods of GraphMLIOHandler enable registering IMapper<K,V> instances as input data targets and as output data sources:

addInputMapper<TKey,TData>(keyType: Class<TKey>, dataType: Class<TData>, name: string, mapper: IMapper<TKey, TData>): void

Register an IMapper<K,V> instance for use as an input data target.

addOutputMapper<TModelItem,TValue>(modelItemType: Class<TModelItem>, dataType: Class<TValue>, name: string, mapper: IMapper<TModelItem, TValue>): void

Register an IMapper<K,V> instance for use as an output data source.

The IMapper<K,V> instances bind the data stored in GraphML attributes to their corresponding graph elements. The specified name must correspond to the attr.name of the GraphML attribute’s key definition.

The following fragment shows how to register a mapper as input target for a GraphML attribute with node scope that stores number values.

// Create a mapper.
const nodeMapper = new Mapper()

// Register the mapper with the GraphML I/O handler.
// The deserializer will be looking for data that has attr.name "nodeAttr".
graphMLIOHandler.addInputMapper(INode.$class, YNumber.$class, 'nodeAttr', nodeMapper)

// Create a mapper.
const nodeMapper = new Mapper<INode, number>()

// Register the mapper with the GraphML I/O handler.
// The deserializer will be looking for data that has attr.name "nodeAttr".
graphMLIOHandler.addInputMapper(INode.$class, YNumber.$class, 'nodeAttr', nodeMapper)

Also keep in mind that all types you define yourself for customizations in yFiles for HTML such as custom styles, custom label models, and so on need to be serialized manually.