Custom Item Types
You can create your own item types by deriving the DiagramNode and DiagramLink classes or their successors such as TableNode, ContainerNode and so on. This lets you add custom data fields to the diagram items, and implement custom visualization and interaction functionality. In Canvas mode, .NET item types must have associated JavaScript classes that implement rendering and interaction on the client side. To associate .NET classes with JavaScript ones, call the RegisterItemType method. For an example, take a look at the IconNodes sample project that comes with NetDiagram.
If you add custom fields to your item class, you will probably want their values saved when saving diagram files, and restored when loading files. To enable this, override the SaveToXml and LoadFromXml methods of the DiagramItem class, which let you use the XML DOM API to implement serialization. For binary serialization, you must implement the SaveTo and LoadFrom methods. Additionally, you must use either the RegisterItemClass or RegisterItemType method to enable serialization of custom items.
In Canvas mode and in ImageMap mode with EnableItemsDOM set to true, custom classes must be serialized to and from JSON format in order to transfer the diagram data between the server and browser. JSON serialization is implemented by means of converter objects, derived from DiagramLinkConverter or DiagramNodeConverter. To associate converters with custom types, call the RegisterConverters method.
If you need to provide custom rendering for your items, override the Draw and DrawShadow methods. They receive as an argument an object that implements the IGraphics interface, which provides methods for drawing vector graphics, text and images. NetDiagram provides GdiGraphics, PdfGraphics and SvgGraphics implementations of that interface, which are used respectively when drawing on the screen, exporting to PDF and to SVG. That lets you use the same code regardless of where the item should draw itself.
In Canvas mode, JavaScript item types can implement own rendering by overriding the updateCanvasElements method. Sample drawing code is available in the IconNodes\Scripts\CustomNode.js example installed with NetDiagram.
To let the user draw items from a custom class, set the Behavior property of the diagram view to Custom, and set the CustomNodeType or CustomLinkType property to the Type object that corresponds to your class.
