Jsplumb 分离连接

Posted 2023-02-22

【中文标题】Jsplumb 分离连接

【英文标题】：Jsplumb detach connection

【发布时间】：2022-01-12 15:22:50

【问题描述】：

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

指的是帖子：

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

---

产生错误的最小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上的问题

【参考方案1】：

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

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

...

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