can not load javascript drow2d canvas with manuall extends cods

Question

I have added some functionality to my objects in draw2d canvas. such as :

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

~ i used below method to save them via AJAX request in server.

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

}

and used below to reload it for next times.

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

I set

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

The functionalities works when i open a new form but nor added functionalities loads after reloading the page while they are asigned to any new objects that add to page after reload. Can any one help me to solve this problem?

Answer 1

I've solve the problem but not sure is a correct way. I just changed

 var MyConnection= draw2d.Connection.extend({

in first code to

 draw2d.Connection = draw2d.Connection.extend({

then removed related codes of 3th file. in this case Draw2d loads My connection instead of default function.