Jsplumb 分离连接答案

【问题标题】：Jsplumb detach connectionJsplumb 分离连接
【发布时间】：2022-01-12 15:22:50
【问题描述】：

单击小部件时，我试图断开连接。

指的是帖子：

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

产生错误的最小sn-p

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)

现在我们正在尝试解决Github上的问题

【问题讨论】：

标签： javascript jsplumb

【解决方案1】：

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

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

...

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

【讨论】：