通过 JSON 在 Draw2D.js 中保存和恢复图表

Question

如何创建带有添加到这些节点的标签的节点，以便我可以通过 JSON 保存和恢复它们？我试过这样用JSONwriter/reader

$(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));
    });
}

它直接写入我添加到 canvas 的所有节点，但不写入子节点，因此如果我向起始节点添加标签，例如，它会写入并绘制起始节点但是里面没有标签我该如何解决？

Answer 1

我找到了一个解决方案，可以让作者能够在 JSON 中的节点内写入标签您必须创建一个自定义节点并使其继承您要创建它的形状，而不是创建原始节点的实例使其从自定义节点
这是您必须创建的节点

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));
    }
});

现在这两种方法将使编写器像这样在 obj 的末尾包含 JSON 中的子标签

"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"
      }
    ]

通过 JSON 在 Draw2D.js 中保存和恢复图表

Save & Restore Diagrams In Draw2D.js Via JSON

json

draw2d