分离操作jsplumb后覆盖对象中的组件字段返回null

Question

我试图在鼠标悬停时删除连接，现在，我正在检查要在鼠标悬停时删除的特定连接，然后在单击垃圾图标覆盖时将其删除（垃圾图标出现在鼠标悬停时的连接上） .

我使用以下代码添加垃圾图标覆盖：

plumb.bind("connection", function (info, originalEvent) {
    var connection = info.connection;
    var overlay = connection.addOverlay(["Custom",{
        create:function(){ 
            return $('<img class="delete-connection" style="display:block;" src="../static/img/Delete.png">');
        },
        location:0.5,
        id:"delete-connection-new",
        cssClass : "delete-connection"
    }]);
    overlay.setVisible(false);
    connection.bind('mouseover',function(connection,originalEvent){
        overlay.setVisible(true);
        scope.conn_del = connection;
        console.log($scope.conn_del);
    });
    connection.bind('mouseout',function(connection,originalEvent){
        overlay.setVisible(false);
    });
}

要删除连接，我使用以下代码：

<code>
$(document).on('click','.delete-connection',function(){
            console.log(conn_del.component);
            plumb.detach(conn_del.component);
        });
</code>

当我删除连接但不保存流程图并返回到同一流程图时，如果存在连接，conn_del.component 将返回为 null。

我将很快添加相同的 jsfiddle。在这方面的任何帮助将不胜感激。

Answer 1

在叠加层定义中添加以下单击事件处理程序代码可以解决此问题： </p> <pre><code>var overlay = connection.addOverlay(["Custom",{ create:function(){ return $('<img class="delete-connection" style="display:block;" src="../static/img/Delete.png">'); }, location:0.5, id:"delete-connection-new", cssClass : "delete-connection", events:{ click:function(connection,originalEvent){ plumb.detach(connection.component); } } }]);

分离操作jsplumb后覆盖对象中的组件字段返回null

Component field in overlay object returning null after detach operation jsplumb

javascript

jquery

jsplumb