從 JSON 恢復標簽

Question

我正在嘗試使用 draw2d 庫從 JSON 恢復標簽。 使用這些方法，我應該能夠獲取和設置標簽，但它似乎永遠不會調用 setPersistentAttributes 方法：

var example = {};


example = draw2d.shape.node.End.extend({

    init:function()
    {
      this._super();

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

相反，它會創建一個包含標簽的良好 JSON：

 [
    {
      "type": "draw2d.shape.node.End",
      "id": "32a31a16-666c-f7d2-0d25-ec51e9a991a0",
      "x": 200,
      "y": 70,
      "width": 100,
      "height": 60,
      "alpha": 1,
      "angle": 0,
      "userData": {},
      "cssClass": "process",
      "ports": [
        {
          "type": "draw2d.InputPort",
          "id": "9d79904f-3451-06a2-abf4-929bce5c1fa9",
          "width": 10,
          "height": 10,
          "alpha": 0.7047222561306423,
          "angle": 0,
          "userData": {},
          "cssClass": "draw2d_InputPort",
          "bgColor": "#4F6870",
          "color": "#1B1B1B",
          "stroke": 1,
          "dasharray": null,
          "maxFanOut": 9007199254740991,
          "name": "input0",
          "port": "draw2d.InputPort",
          "locator": "draw2d.layout.locator.BottomLocator"
        },
        {
          "type": "draw2d.OutputPort",
          "id": "6393b7de-9fc2-d053-cdc0-1771aba69443",
          "width": 10,
          "height": 10,
          "alpha": 0.7047222561306423,
          "angle": 0,
          "userData": {},
          "cssClass": "draw2d_OutputPort",
          "bgColor": "#4F6870",
          "color": "#1B1B1B",
          "stroke": 1,
          "dasharray": null,
          "maxFanOut": 9007199254740991,
          "name": "output0",
          "port": "draw2d.OutputPort",
          "locator": "draw2d.layout.locator.TopLocator"
        }
      ],
      "bgColor": "#D3E1FF",
      "color": "#000000",
      "stroke": 1,
      "radius": 0,
      "dasharray": null,
      "labels": [
        {
          "type": "draw2d.shape.basic.Label",
          "id": "2de8281d-7642-6b0d-890a-7aa06a7a5572",
          "x": 1,
          "y": 1,
          "width": 27,
          "height": 23,
          "alpha": 1,
          "angle": 0,
          "userData": {},
          "cssClass": "draw2d_shape_basic_Label",
          "ports": [],
          "bgColor": "none",
          "color": "#D3E1FF",
          "stroke": 1,
          "radius": 0,
          "dasharray": null,
          "text": "BP",
          "outlineStroke": 0,
          "outlineColor": "none",
          "fontSize": 12,
          "fontColor": "#080808",
          "fontFamily": null,
          "locator": "draw2d.layout.locator.XYAbsPortLocator"
        },
        {
          "type": "draw2d.shape.basic.Label",
          "id": "5ab95eb2-e099-0b93-6449-f605530f1477",
          "x": 45.5,
          "y": 25.5,
          "width": 10,
          "height": 10,
          "alpha": 1,
          "angle": 0,
          "userData": {},
          "cssClass": "draw2d_shape_basic_Label",
          "ports": [],
          "bgColor": "none",
          "color": "#D3E1FF",
          "stroke": 1,
          "radius": 0,
          "dasharray": null,
          "text": "",
          "outlineStroke": 0,
          "outlineColor": "none",
          "fontSize": 12,
          "fontColor": "#080808",
          "fontFamily": null,
          "locator": "draw2d.layout.locator.CenterLocator"
        }
      ]
    }
  ]

但它不會在加載階段恢復它們。

我以這種方式保存 JSON：

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

    myJson=json;

我嘗試以這種方式加載它：

draw2d.shape.basic.Label.inject( {
      clearCache:function() {
        this.portRelayoutRequired=true;
        this.cachedMinWidth  = null;
        this.cachedMinHeight = null;
        this.cachedWidth=null;
        this.cachedHeight=null;
        this.lastAppliedTextAttributes= {};
        return this;
      }
    });

   let reader = new draw2d.io.json.Reader();
    reader.unmarshal(this.canvas, this.myJson);

但它只是加載形狀。 我在內部使用 draw2d 庫和 Angular2 組件（但一切正常）。

declare var draw2d:any;
 export class draw2DExample implements OnInit {

   ngOnInit(){
     this.createGraph();

   }

   createGraph() {

     this.canvas = new draw2d.Canvas("canvas-div");

   }

   createNode(){

     let endNode   = new example();
     endNode.attr({
         width:  100,
         height: 60
     });

     endNode.setX("200");
     endNode.setY("70");

     endNode.add(new draw2d.shape.basic.Label({text:"SampleNode"}).attr({
        "color": "#E6F1F5"
          }), new draw2d.layout.locator.XYAbsPortLocator(1,1));

     this.canvas.add( endNode);

   }
}

我哪里錯了？

Answer 1

您不將屬性傳遞給構造函數嘗試將此更改反映到您的構造函數

init:function(attr)
    {
      this._super(attr);

      // labels are added via JSON document.
    },

Answer 2

這是因為您從未調用過示例。 您應該將“type”：“draw2d.shape.node.End”更改為“type”：“example”，Int json。