Jsplumb detach connection

Question

I am trying to detach a connection when widget is clicked.

refers to the posts:

I am on newest CDNJS release 2.15.6, here's what I have tried:

this.plumb.bind('click', function(conn){
            connect.connections.splice(connect.connections.indexOf(conn.cn), 1);
            this.plumb.deleteConnection(conn);
            connect.render();
        });
// jsPlumb: fire failed for event click : TypeError: undefined is not an object (evaluating 'this.plumb.deleteConnection')

this.plumb.bind('click', function(conn){
            connect.connections.splice(connect.connections.indexOf(conn.cn), 1);
            jsPlumb.deleteConnection(conn);
            connect.render();
        });

this successfully delete the connection, however, since that I cannot add new connection any more if the target and sources corresponds to deleted connection. I got an error saying:

TypeError: null is not an object (evaluating 'x.endpoints[0]')    jsplumb.min.js

refers to this issue,

I tried to switch to version 5, but I did not find any browser script on https://github.com/jsplumb/jsplumb, by the way there are bunch of errors in the demo provided.

I will be very grateful for any of following:

method to detach a connection
advice on any potential error on my conduction
CDN for newest stable version

minimum snippet to generate the error

setTimeout(()=>{
let source = document.createElement('div');
let target = document.createElement('div');
document.body.appendChild(source);
document.body.appendChild(target);
let instance = jsPlumb.getInstance({
    PaintStyle: { strokeWidth: 1 },
    Container: document.body,
});
function getConnection(){
    return instance.connect({
        source: source,
        target: target,
        cssClass: 'redLine', 
        endpoint: "Blank",
        anchor:"AutoDefault",
        overlays: [
          ["Arrow", {
            location: 1,
            width: 10,
            length: 10
          }
          ],
          [ "Label", {
            location:0.5, 
            label:"Label Text" 
          }
          ], 
        ],
        paintstyle: {
          lineWidth: 1,
          strokeStyle: 'black',
        }
        ,
        connector: ["Flowchart"], 
    });
}
let conn = getConnection();
jsPlumb.deleteConnection(conn, {
    fireEvent: false, //fire a connection detached event?
    forceDetach: false //override any beforeDetach listeners
});
conn = getConnection();
}, 0)

now we are trying to solve the issue on Github

score 2 · Accepted Answer · answered Dec 23 '21 at 03:38

The problem here was that the deleteConnection method was being called on the default instance of jsPlumb but the rest of the code was using a specific instance:

let instance = jsPlumb.getInstance({
    PaintStyle: { strokeWidth: 1 },
    Container: document.body,
});

...

jsPlumb.deleteConnection(...)  <-- should have been instance.deleteConnection

Jsplumb detach connection

1 Answers1