javascript - Jsplumb 分离连接

Question

我正在尝试在单击小部件时断开连接。

引用帖子:

• Jsplumb remove all connections not working with verion 2.4.3
• How to delete jsPlumb connection

我在 newest CDNJS release 2.15.6 上，这是我尝试过的:

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

但是，这成功删除了连接，因为如果目标和源对应于已删除的连接，我将无法再添加新连接。我收到一条错误消息:

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

指的是 this issue ,

我试图切换到版本 5，但我没有在 https://github.com/jsplumb/jsplumb 上找到任何浏览器脚本，顺便说一句，在提供的演示中有一堆错误。

---

如果有以下任何一项，我将不胜感激:

• 分离连接的方法
• 就我的行为中的任何潜在错误提出建议
• 最新稳定版CDN

---

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

Answer 1

这里的问题是在 jsPlumb 的默认实例上调用了 deleteConnection 方法，但其余代码使用的是特定实例:

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

...

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