JsPlumb 2.15.6点击删除连接后无法新增连接问题及解决方案求助

正确删除连接的实现方法 #

你出现问题的核心原因有两个：

1. 点击事件回调中普通函数的this指向偏移，无法拿到你创建的jsPlumb实例
2. 用全局jsPlumb对象调用deleteConnection，而没有用你通过getInstance创建的自定义实例操作，全局对象和自定义实例的数据状态是隔离的，直接调用全局方法会导致自定义实例内部的端点状态异常，就是后续无法新建连接的根因。

正确的点击删除连接代码：

// 提前存储实例引用，避免this指向问题
const plumbInstance = this.plumb;
plumbInstance.bind('click', function(conn) {
    // 如无特殊需求，不需要手动操作你自己维护的connections数组
    // connect.connections.splice(connect.connections.indexOf(conn.cn), 1);
    plumbInstance.deleteConnection(conn, {
        fireEvent: false,
        forceDetach: true
    });
    // 无自定义渲染逻辑不需要调用connect.render()
});

修正后的最小复现代码：

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
    instance.deleteConnection(conn, {
        fireEvent: false,
        forceDetach: true
    });
    conn = getConnection();
}, 0)

问题排查建议 #

• 所有连接、端点的增删改操作统一用你自己创建的jsPlumb实例调用，不要混用全局jsPlumb的方法
• 没有特殊需求不要随意修改jsPlumb内部存储的连接、端点数据，避免状态不一致
• 删除连接时无特殊拦截逻辑的话，建议开启forceDetach: true，避免残留监听导致状态异常
• 调用连接相关API前，确保涉及的DOM元素已经挂载到页面，jsPlumb实例的Container配置指向正确的父容器

最新稳定版CDN地址 #

2.x系列最新稳定版（2.15.6，兼容性最好，和你现有代码适配） #

https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.6/js/jsplumb.min.js

5.x系列浏览器可用UMD版本（API和2.x不兼容，迁移需要修改代码） #

https://cdn.jsdelivr.net/npm/@jsplumb/browser-ui@5.13.2/dist/js/jsplumb-browser-ui.umd.min.js

内容的提问来源于stack exchange，提问作者Weilory