Component field in overlay object returning null after detach operation jsplumb

Question

I tried to delete a connection on mouseover and right now, I am checking for the specific connection to delete on mouseover and then am deleting it on click on the trash icon overlay (Trash icon appears on the connection on mouseover).

I use the following code to add trash icon overlay:

plumb.bind("connection", function (info, originalEvent) {
    var connection = info.connection;
    var overlay = connection.addOverlay(["Custom",{
        create:function(){ 
            return $('<img class="delete-connection" style="display:block;" src="../static/img/Delete.png">');
        },
        location:0.5,
        id:"delete-connection-new",
        cssClass : "delete-connection"
    }]);
    overlay.setVisible(false);
    connection.bind('mouseover',function(connection,originalEvent){
        overlay.setVisible(true);
        scope.conn_del = connection;
        console.log($scope.conn_del);
    });
    connection.bind('mouseout',function(connection,originalEvent){
        overlay.setVisible(false);
    });
}

To delete the connection I use the following code:

<code>
$(document).on('click','.delete-connection',function(){
            console.log(conn_del.component);
            plumb.detach(conn_del.component);
        });
</code>

When I delete the connection, but do not save the flowchart and I come back to the same flowchart, the conn_del.component is returned as null when there is a connection existing.

I will be adding the jsfiddle for the same soon. Any help in this regard would be really appreciated.

Answer 1

Adding the following click event handler code in overlay definition would fix the issue:

var overlay = connection.addOverlay(["Custom",{
                create:function(){
                        return $('<img class="delete-connection" style="display:block;" src="../static/img/Delete.png">');
                    },
                    location:0.5,
                    id:"delete-connection-new",
                    cssClass : "delete-connection",
                    events:{
                        click:function(connection,originalEvent){
                            plumb.detach(connection.component);
                        }
                    }
            }]);