Save & Restore Diagrams In Draw2D.js Via JSON

Question

How do I create nodes with labels that added to these nodes, so I can save and restore them via JSON? I tried to use JSON writer/reader in this way

$(window).load(function () {

    var canvas = new draw2d.Canvas("gfx_holder");


    // unmarshal the JSON document into the canvas
    // (load)
    var reader = new draw2d.io.json.Reader();
    reader.unmarshal(canvas, jsonDocument);

    // display the JSON document in the preview DIV
    //
    displayJSON(canvas);


    // add an event listener to the Canvas for change notifications.
    // We just dump the current canvas document into the DIV
    //
    canvas.getCommandStack().addEventListener(function(e){
        if(e.isPostChangeEvent()){
            displayJSON(canvas);
        }
    });

});

function displayJSON(canvas){
    var writer = new draw2d.io.json.Writer();
    writer.marshal(canvas,function(json){
        $("#json").text(JSON.stringify(json, null, 2));
    });
}

Its write all nodes that I added to the canvas directly but don't write the child nodes so if I add a label to start node, for example, it will write and draw a start node but without the label inside it how can I solve that?

Answer 1

I found a solution that can make the writer able to write the labels inside nodes in JSON you have to create a custom node and make it inherits from the shape that you want to create it and rather than creat instance of the original node make it from the custom one
here is the node that you have to creat

var CustomNode = {};

/**
 * @class example.connection_locator.LabelConnection
 * 
 * A simple Connection with a label wehich sticks in the middle of the connection..
 *
 * @author Andreas Herz
 * @extend draw2d.Connection
 */
CustomNode.Start = draw2d.shape.node.Start.extend({

    NAME: "CustomNode.Start",

    init: function (attr) {
        this._super(attr);
        if (attr == undefined) {
            this.setResizeable(false);
        }
        // labels are added via JSON document.
    },

    /**
     * @method 
     * Return an objects with all important attributes for XML or JSON serialization
     * 
     * @returns {Object}
     */
    getPersistentAttributes: function () {
        var memento = this._super();

        // add all decorations to the memento 
        //
        memento.labels = [];
        this.children.each(function (i, e) {
            var labelJSON = e.figure.getPersistentAttributes();
            labelJSON.locator = e.locator.NAME;
            memento.labels.push(labelJSON);
        });

        return memento;
    },

    /**
     * @method 
     * Read all attributes from the serialized properties and transfer them into the shape.
     * 
     * @param {Object} memento
     * @returns 
     */
    setPersistentAttributes: function (memento) {
        this._super(memento);

        // remove all decorations created in the constructor of this element
        //
        this.resetChildren();

        // and add all children of the JSON document.
        //
        $.each(memento.labels, $.proxy(function (i, json) {
            // create the figure stored in the JSON
            var figure = eval("new " + json.type + "()");

            // apply all attributes
            figure.attr(json)

            // instantiate the locator
            var locator = eval("new " + json.locator + "()");

            // add the new figure as child to this figure
            this.add(figure, locator);
        }, this));
    }
}); 

now these two methods will make the writer includes the child labels in JSON at the end of obj like this

"labels": [
      {
        "type": "draw2d.shape.basic.Label",
        "id": "4676f2fe-ab4d-9944-563a-db52aa3ebd44",
        "x": 7.5,
        "y": 13.5,
        "width": 29.6875,
        "height": 21,
        "alpha": 1,
        "selectable": false,
        "draggable": false,
        "angle": 0,
        "userData": {},
        "cssClass": "draw2d_shape_basic_Label",
        "ports": [],
        "bgColor": "rgba(0,0,0,0)",
        "color": "rgba(27,27,27,1)",
        "stroke": 1,
        "radius": 0,
        "dasharray": null,
        "text": "start",
        "outlineStroke": 0,
        "outlineColor": "rgba(0,0,0,0)",
        "fontSize": 12,
        "fontColor": "rgba(8,8,8,1)",
        "fontFamily": null,
        "locator": "draw2d.layout.locator.CenterLocator"
      }
    ]