我正在尝试使用 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);
}
}
我错在哪里？