Miscellaneous

Associate Custom Data with Items

You can associate custom values from any data type with diagram elements by setting their tag and id properties. Their values will be automatically serialized to JSON format using browser's JSON serializer when saving diagram JSON files. If saving XML files, you must handle the serializeTag and deserializeTag events to save non-string values in XML format. Apart from tag and id, JavaScript lets you create new object fields dynamically - these however will not be saved automatically in diagram files.

Fluent API

Builder objects with property setter methods and shortcut methods for fonts and brushes add support for fluent programming style. Static With and instance init methods in DiagramItem, Style and Layout -derived classes return a builder instance that can be used to set up respective new or existing objects:

JavaScript Copy Code
diagram.addItem(
    ShapeNode.With()
        .brush("lightGray")
        .font("Arial", 4)
        .enableStyledText(true)
        .text("Task <i>1</i>")
        .tooltip("This is the task")
        .create());

diagram.getFactory()
    .createShapeNode(20, 20, 20, 20).init()
        .brush("lightGray", "white", 20)
        .font("Arial", 4)
        .enableStyledText(true)
        .text("Task <i>2</i>")
        .tooltip("This is the second task");

diagram.arrange(
    TreeLayout.With()
        .levelDistance(20)
        .nodeDistance(20)
        .linkType(TreeLayoutLinkType.Cascading3)
        .create());