I have implemented additional functionality to my objects within the draw2d canvas. Here is an example:

    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 saved these functionalities using an AJAX request to the 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);

}

I also used the following method to reload the page for subsequent uses.

    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 have set

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

The functionalities work fine when I open a new form, but the added functionalities do not load after reloading the page even though they are assigned to any new objects added to the page after the reload. Can someone help me solve this issue?