无法加载JavaScript Drow2D画布，并用Manuall扩展Cods

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({

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