Question

如何以正确的方式创建具有4个端口（每侧）的矩形，以便通过JSON保存和恢复它们？

我试过这个，但只保存了矩形。连接和标签丢失了。

JSFiddle： http://jsfiddle.net/xfvf4/36/

创建两个元素（添加） - 移动它们并连接它们
写：这将内容作为JSON-Array
阅读：应该从JSON-Array中取出grafic

最后一点不起作用。

JS：

var LabelRectangle = draw2d.shape.basic.Rectangle.extend({

    NAME: "draw2d.shape.basic.Rectangle",

    init: function (attr) {
        this._super(attr);
        this.label = new draw2d.shape.basic.Label({
            text: "Text",
            fontColor: "#0d0d0d",
            stroke: 0
        });
        this.add(this.label, new draw2d.layout.locator.CenterLocator(this));
        this.label.installEditor(new draw2d.ui.LabelInplaceEditor());
        this.createPort("hybrid", new draw2d.layout.locator.BottomLocator(this));
    },
    getPersistentAttributes: function () {
        var memento = this._super();

        memento.labels = [];

        var ports = [];
        ports = this.getPorts();

        memento.ports = [];

        console.log(ports);
        this.children.each(function (i, e) {
          console.log(e);
            memento.labels.push({
                id: e.figure.getId(),
                label: e.figure.getText(),
                locator: e.locator.NAME
            });
            ports.each(function (i, e) {
              memento.ports.push({
                  //id: e.id,
                  name: e.name,
                  locator: e.locator.NAME
              });
            });

        });

        return memento;
    },
    setPersistentAttributes: function (memento) {
        this._super(memento);

        this.resetChildren();

        $.each(memento.labels, $.proxy(function (i, e) {
            var label = new draw2d.shape.basic.Label(e.label);
            var locator = eval("new " + e.locator + "()");
            locator.setParent(this);
            this.add(label, locator);
        }, this));
    }
});


$(window).load(function () {
    var canvas = new draw2d.Canvas("gfx_holder");

    $("#add").click(function (e) { // Add a new rectangle
        var rect = new LabelRectangle({
            width: 200,
            height: 40,
            radius: 3,
            bgColor: '#ffffff',
            stroke: 0
        });
        rect.createPort("hybrid", new draw2d.layout.locator.OutputPortLocator(rect));
        rect.createPort("hybrid", new draw2d.layout.locator.InputPortLocator(rect));
        rect.createPort("hybrid", new draw2d.layout.locator.TopLocator(rect));
        canvas.add(rect, 150, 200);
    });

    $("#write").click(function (e) { // Write to pre-Element (JSON)
      var writer = new draw2d.io.json.Writer();
      writer.marshal(canvas, function(json){
          $("#json").text(JSON.stringify(json,null,2));
          $('#gfx_holder').empty();
      });

    });

    $("#read").click(function (e) { // Read from pre-Element (JSON)
      var canvas = new draw2d.Canvas("gfx_holder");
      var jsonDocument = $('#json').text();
      var reader = new draw2d.io.json.Reader();
      reader.unmarshal(canvas, jsonDocument);
    });

});

HTML：

<ul class="toolbar">
  <li><a href="javascript:void(0);" id="add" title="Add">Add</a></li>
  <li><a href="javascript:void(0);" id="write" title="Write">Write</a></li>
  <li><a href="javascript:void(0);" id="read" title="Read">Read</a></li>

</ul>

<div id="container" class="boxed">
  <div onselectstart="javascript:/*IE8 hack*/return false" id="gfx_holder" style="width:100%; height:100%; ">
  </div>

  <pre id="json" style="overflow:auto;position:absolute; top:10px; right:10px; width:350; height:500;background:white;border:1px solid gray">
  </pre>

</div>

Answer 1

只需使用Draw2D.js 5.0.4的“json”-Folder中的write.js和Reader.js以及此代码：

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

Answer 2

这应该有效：

var LabelRectangle = draw2d.shape.basic.Rectangle.extend({

  NAME: "draw2d.shape.basic.Rectangle",

  init: function (attr) {
      this._super(attr);
      this.label = new draw2d.shape.basic.Label({
          text: "Text",
          fontColor: "#0d0d0d",
          stroke: 0
      });
      this.add(this.label, new draw2d.layout.locator.CenterLocator(this));
      this.label.installEditor(new draw2d.ui.LabelInplaceEditor());
  },
  getPersistentAttributes: function () {
      var memento = this._super();

      memento.labels = [];
      memento.ports = [];

      this.getPorts().each(function(i,port){
        memento.ports.push({
          name   : port.getName(),
          port   : port.NAME,
          locator: port.getLocator().NAME
        });
      });

      this.children.each(function (i, e) {
          memento.labels.push({
              id: e.figure.getId(),
              label: e.figure.getText(),
              locator: e.locator.NAME
          });
      });
      return memento;
  },
  setPersistentAttributes: function (memento) {
      this._super(memento);

      this.resetChildren();

      if(typeof memento.ports !=="undefined"){
           this.resetPorts();
           $.each(memento.ports, $.proxy(function(i,e){
               var port    =  eval("new "+e.port+"()");
               var locator =  eval("new "+e.locator+"()");
               this.add(port, locator);
               port.setName(e.name);
           },this));
       }

      $.each(memento.labels, $.proxy(function (i, e) {
          var label = new draw2d.shape.basic.Label(e.label);
          var locator = eval("new " + e.locator + "()");
          locator.setParent(this);
          this.add(label, locator);
      }, this));
  }

}）;

通过JSON触摸Draw2D.js中的连接保存和恢复矩形

2 个答案: