I am newb to Draw2D.js, I have created 'HorizontalLayout' with three child label. and trying to get JSON for 'HorizontalLayout' with three child label.

My code as following:

HTML:

<div id="gfx_holder" style="width: 3000px; height: 3000px; cursor: default"></div>

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

JS:

var canvas = new draw2d.Canvas("gfx_holder");
var label1 = new draw2d.shape.basic.Label({text: "TEST123"});
var label2 = new draw2d.shape.basic.Label({text: "Label 2"});
var label3 = new draw2d.shape.basic.Label({text: "Label 3"});

var container1 = new draw2d.shape.layout.HorizontalLayout();
container1.add(label1);
container1.add(label2);
container1.add(label3);
container1.setGap(10);
container1.setStroke(2);

canvas.add(container1, 50, 10);

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

Above code generated following output:

enter image description here

I am getting JSON by calling displayJSON(canvas) method. but I am just getting parent (HorizontalLayout) shape not getting child labels.

I am getting following JSON by calling displayJSON(canvas) method:

[
  {
    "type": "draw2d.shape.layout.HorizontalLayout",
    "id": "9c009d71-a2af-6c86-51c4-e9011c9a446d",
    "x": 198,
    "y": 122,
    "width": 184.390625,
    "height": 28,
    "alpha": 1,
    "angle": 0,
    "userData": {},
    "cssClass": "draw2d_shape_layout_HorizontalLayout",
    "ports": [],
    "bgColor": "none",
    "color": "#1B1B1B",
    "stroke": 2,
    "radius": 0,
    "dasharray": null,
    "gap": 10
  }
]

I want to get whole figure JSON with HorizontalLayout and child labels. So, How can I get it? And After that How to display Draw2d graph from JSON?

0

There are 0 best solutions below