无法加载带有manuall扩展代码的javascript drow2d画布

Question

我在draw2d画布中为我的对象添加了一些功能。例如：

var MyConnection= draw2d.Connection.extend({
init:function(attr){
this._super(attr);
this.setRouter(new draw2d.layout.connection.VertexRouter());
this.setOutlineStroke(1);
this.setOutlineColor("#000000");
this.setStroke(3);
this.setColor('#ffffff');
this.setRadius(150);
this.conectionResult={"src":{"nms":true,"trg":true},"trg":{"nms":true,"src":"true"}};
},

onContextMenu:function(x,y){
$.contextMenu({
selector: 'body',
events:{
hide:function(){ $.contextMenu( 'destroy' ); }
},
callback: $.proxy(function(key, options){
switch(key){
case "check":
result = this.checkConection();
this.conectionResult=result;
console.log(result);
if(result.src.trg && result.trg.src){
this.setColor("#FFFFFF");
}else{
this.setColor("#FF4422");
}
break;
case "report":
message=[];
result=this.conectionResult;
if(result.src.trg && result.trg.src){
alert("OK");
}else{
src=this.getSource();
trg=this.getTarget();
if(result.src.nms){
message.push("NMS Can See "+src.userData.dev_name);
if(result.src.trg){
message.push(src.userData.dev_name +" Can See "+trg.userData.dev_name);
}else{
message.push(src.userData.dev_name +" CAN NOT See "+trg.userData.dev_name);
}
}else{
message.push("NMS CAN NOT See "+trg.userData.dev_name);
if(result.src.trg){
message.push(src.userData.dev_name +"Can See "+trg.userData.dev_name);
}else{
message.push(src.userData.dev_name +"CAN NOT See "+trg.userData.dev_name+" Or NMS Can not confirm it");
}
}
if(result.trg.nms){
message.push("NMS Can See "+trg.userData.dev_name);
if(result.trg.src){
message.push(trg.userData.dev_name +" Can See "+src.usedData.dev_name);
}else{
message.push(trg.userData.dev_name +" CAN NOT See "+src.userData.dev_name);
}
}else{
message.push("NMS CAN NOT See "+trg.dev_name);
if(result.src.trg){
message.push(src.userData.dev_name +" Can See "+trg.userData.dev_name);
}else{
message.push(src.userData.dev_name +" CAN NOT See "+trg.userData.dev_name+" Or NMS Can not confirm it.");
}
}
alert(message.join("n"));
}
break;
case "delete":
var cmd = new draw2d.command.CommandDelete(this);
this.getCanvas().getCommandStack().execute(cmd);
default:
break;
}
},this),
x:x,
y:y,
items:
{
"check":{name:"Check", icon:"edit"},
"report":{name:"Report",icon:"edit"},
"sep1":   "---------"
,"delete": {name: "Delete", icon: "delete"}
}
});
},
checkConection:function(){
src=this.getSource();
trg=this.getTarget();
console.log("Source IP:"+src.userData.ip+", Target Ip:"+trg.userData.ip);
results={"src":{"nms":false,"trg":false},"trg":{"nms":false,"src":false}};
$.ajax({
url:"***/index.php?r=/******/check-conection&src="+src.userData.ip+"&trg="+trg.userData.ip,
async:false,
success: function(result){
results=result;
}
});
console.log(results);
this.conectionResult=results;
this.setConectionColor();
return results;
},
setConectionColor:function(){
result=this.conectionResult;
console.log(result);
if(result.src.trg && result.trg.src){
this.setColor("#FFFFFF");
}else{
this.setColor("#FF4422");
}
}
});

~我使用下面的方法通过AJAX请求将它们保存在服务器中。

function saveTopology(){
var writer = new draw2d.io.json.Writer();
writer.marshal(canvas, function(json){
var jsonTxt = JSON.stringify(json,null,2);                        .
$("pre").text(jsonTxt);
});
alert($("pre").text());
draw2d=JSON.stringify(JSON.parse($("pre").html()));
var data={
id      :1,
draw2d : draw2d,
map_id : 1
};
var url = "topology/save";
result = AjaxResponce(url,data,"POST");
$("pre").html(result);
displayJSON(canvas);
}

并在下面用于重新加载以备下次使用。

function setTopology(){
write2status("Requesting Topology of map_id 1 ...");
draw2d.Configuration.factory.createConnection = function (sourcePort, targetPort) {
var conn = new MyConnection({});
return conn;
};
var topology = AjaxResponce("topology/get-topology",{tplg_id:tplg_id});
console.log(topology);
data = topology;
var bg_map = "url('"+data.bg_map+"')";
var width = data.width;
var height = data.height;
var background_size = height+"px "+width+"px ";
if(typeof(data.draw2d)==="Array"){
$.each(data.draw2d,function(index,item){
if(typeof(item.userData) != "undefined" &&Object.keys(item.userData).length >0){
if(typeof(item.userData.dev_id) !== "undefined")
usedDevices.push(item.userData.dev_id);
}
});
}
topology=JSON.stringify(data.draw2d);
$(".ui-droppable").css({"background-image":bg_map});
$(".ui-droppable").css({"height":parseInt(height)*1.1});
$(".ui-droppable").css({"width":parseInt(width)*1.1});
write2status("Adding map to page...");
$("pre#json").html(topology);
write2status("Map added...");
}

我设置了

draw2d.Configuration.factory.createConnection = function (sourcePort, targetPort) {
var conn = new MyConnection({});
return conn;
};`

当我打开一个新表单时，这些功能就可以工作，但在重新加载页面后，添加的功能也不会加载，同时它们会被分配给重新加载后添加到页面的任何新对象。有人能帮我解决这个问题吗？

Answer 1

我已经解决了这个问题，但不确定是否是正确的方法。我刚换了

var MyConnection= draw2d.Connection.extend({

在的第一个代码中

draw2d.Connection = draw2d.Connection.extend({

然后删除了第3个文件的相关代码。在这种情况下，Draw2d加载My连接，而不是默认函数。