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:
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?
