Javascript JointJS-处理链接删除单击

创建链接后，将鼠标悬停在该链接上会显示红色（X）以将其删除

单击此按钮将触发一系列事件 （通过订阅“所有”活动收集）：

• 单元格：指针镇
• 链接：指针镇
• 单元格：pointermove（x5，似乎可疑）
• 单元格：pointerup

在浏览了文档并花了太长时间挖掘这些事件的param对象之后，我发现没有什么可以用来有效地知道链接是否将被删除

我肯定错过了一些明显的东西

---

我可以将pointerdown和pointerup之间的链接集合与图形进行比较，但这非常难看

您可以在graph

remove

事件上收听，查看链接是否被删除：

graph.on('remove', function(cell, collection, opt) {
   if (cell.isLink()) {
      // a link was removed  (cell.id contains the ID of the removed link)
   }
})

---

如果要侦听由链接上的“X”触发的移除事件（JointJS将这些鼠标悬停元素称为“链接工具”）：

您可以将事件传递给SVG元素，该元素将在joint.dia.Paper上触发，如下所示：

    let link = new joint.dia.Link({
        source: getLink(conn.source),
        target: getLink(conn.target),
        attr: {},
        router: {name: 'metro'},
        customAttr: {fullSource: conn.source, fullTarget: conn.target},
        toolMarkup: [
            '<g class="link-tool">',
            '<g class="tool-remove" event="tool:remove">',
            '<circle r="11" />',
            '<path transform="scale(.8) translate(-16, -16)" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z"/>',
            '<title>Remove link.</title>',
            '</g>',
            '**<g event="link:options">**',
            '<circle r="11" transform="translate(25)"/>',
            '<path fill="white" transform="scale(.55) translate(29, -16)" d="M31.229,17.736c0.064-0.571,0.104-1.148,0.104-1.736s-0.04-1.166-0.104-1.737l-4.377-1.557c-0.218-0.716-0.504-1.401-0.851-2.05l1.993-4.192c-0.725-0.91-1.549-1.734-2.458-2.459l-4.193,1.994c-0.647-0.347-1.334-0.632-2.049-0.849l-1.558-4.378C17.165,0.708,16.588,0.667,16,0.667s-1.166,0.041-1.737,0.105L12.707,5.15c-0.716,0.217-1.401,0.502-2.05,0.849L6.464,4.005C5.554,4.73,4.73,5.554,4.005,6.464l1.994,4.192c-0.347,0.648-0.632,1.334-0.849,2.05l-4.378,1.557C0.708,14.834,0.667,15.412,0.667,16s0.041,1.165,0.105,1.736l4.378,1.558c0.217,0.715,0.502,1.401,0.849,2.049l-1.994,4.193c0.725,0.909,1.549,1.733,2.459,2.458l4.192-1.993c0.648,0.347,1.334,0.633,2.05,0.851l1.557,4.377c0.571,0.064,1.148,0.104,1.737,0.104c0.588,0,1.165-0.04,1.736-0.104l1.558-4.377c0.715-0.218,1.399-0.504,2.049-0.851l4.193,1.993c0.909-0.725,1.733-1.549,2.458-2.458l-1.993-4.193c0.347-0.647,0.633-1.334,0.851-2.049L31.229,17.736zM16,20.871c-2.69,0-4.872-2.182-4.872-4.871c0-2.69,2.182-4.872,4.872-4.872c2.689,0,4.871,2.182,4.871,4.872C20.871,18.689,18.689,20.871,16,20.871z"/>',
            '<title>Link options.</title>',
            '</g>',
            '</g>'
        ].join('')
    });

//从图表中删除链接
纸上（'工具：移除'）功能（链接视图，evt）{
var confirmValue=confirm（'Delete Flow'），函数（结果）{
});
//警报（确认值）；
if（confirmValue）{
var IsDeleteTestEP=错误；
//检查用户是否也需要删除该步骤
如果（确认（'是否也要删除该步骤？'））{
IsDeleteTestEP=真；
}
console.log（“删除链接”+linkView）；
var pathLabel=linkView.model.attributes.labels[0].attrs.text.text；
var destlab=linkView.targetView.model.attributes.attrs[“.tooltip”].text；
if（linkView.sourceView.model.attributes.attrs[“.tooltip”]！=“未定义”）{
srcLabel=linkView.sourceView.model.attributes.attrs[“.tooltip”].text；
}否则{
srcLabel=“源”；
}
var graphJSON=gph.toJSON（）；
var cells=graphJSON.cells；
var linkid=“”；
var-rid=“”；
var-eid=“”；
对于（var i=0；iAwesome。谢谢Dave！我维护的代码只是在重新绘制图表时才监控的文件，这些事件也会触发。如果我不想处理这些事件，那么最好的解决方案是unsub/resub吗？@Dave sir你能帮我解决这个问题吗？我没有尝试过这个（我将无法尝试）这可能是我想要的。为了删除一个圆和链接，基于圆是否与其他阶段链接，通过JSON重新映射图形元素GPH，也可以编辑。如果你考虑一个2个圆的图和连接它们之间的链接。如果你点击链接上的删除链接按钮，那么这个Relvivin。k事件将被触发。然后它将询问用户是删除整个流还是唯一的链接，如果在删除流中的现有链接后，该链接与一个没有更多链接的单节点圆圈相关联，则该带有圆圈或节点的链接将被删除。注意，此处的步骤指的是链接。
    paper.on('tool:remove', function(evt, linkView) {
        console.log("Removing link" + linkView.model.id);
        linkView.model.remove();
    })

//deletion of link from  diagram
paper.on('tool:remove', function(linkView, evt) {
    var confirmValue=confirm('Delete Flow ?', function(result) {
    });
    //alert(confirmValue);
    if(confirmValue) {
        var IsDeleteStep=false;
        //check whether user needs to delete the step also
        if(confirm('Do You want to delete the step also ?')){
            IsDeleteStep=true;
        }

        console.log("Removing link" + linkView);
        var pathLabel = linkView.model.attributes.labels[0].attrs.text.text;
        var destLabel=linkView.targetView.model.attributes.attrs[".tooltip"].text;
        if(typeof linkView.sourceView.model.attributes.attrs[".tooltip"] != 'undefined') {
            srcLabel=linkView.sourceView.model.attributes.attrs[".tooltip"].text;
        } else {
            srcLabel="source";
        }



        var graphJSON=gph.toJSON();
        var cells=graphJSON.cells;
        var linkid="";
        var rid="";
        var eid="";
        for(var i=0;i<cells.length;i++) {
            if(typeof cells[i].fid != 'undefined') {
                console.log("new=>"+cells[i].fid.val);
                if(cells[i].fid.val == linkView.model.attributes.fid.val) {
                    linkid = cells[i].id;
                    if(typeof cells[i].eid != 'undefined') {
                        eid = cells[i].eid.val;
                    }
                    if(typeof cells[i].rid !='undefined') {
                        rid = cells[i].rid.val;
                    }                               
                    //rid = cells[i].rid.val;
                    //alert("fid found=>"+cells[i].fid.val);
                }
            }
        }
        var str="";
        var stepId="";
        link=gph.getCell(linkid);

        console.log(link.toJSON().cid);
       // alert("link json=>"+link.toJSON().cid);
        //alert(link.toJSON().cid.cid);
        //alert(link.toJSON().sid.sid);
        if(typeof link.toJSON().cid!='undefined' && 
                typeof link.toJSON().cid.cid!='undefined'){
            stepId=link.toJSON().cid.cid;
        } else {
            stepId=link.toJSON().sid.sid;
        }

        if(link!="") {
            var linkjson=link.toJSON();
            var jid=link.id;

            str+="&linkId="+linkjson["id"];
            var source = gph.getCell(jid).getSourceElement();
            var target = gph.getCell(jid).getTargetElement();

            gph.removeCells([gph.getCell(jid)]);    
            //if target is isolated then target to be deleted
            if(gph.isSink(target)&&gph.isSource(target)) {
                var targetjson=target.toJSON();
                str+="&targetId="+targetjson["id"];
                gph.removeCells([target]);
            }
            var sourceJson = source.toJSON();
            //if source is isolated then src to be deleted &&sourceJson["type"]!="fsa.StartState"
            if(gph.isSink(source)&&gph.isSource(source)) {
                var srcjson=source.toJSON();
                str+="&sourceId="+srcjson["id"];
                gph.removeCells([source]);
            }

            if(eid==""||rid==""){
                return false;
            }

            if(typeof link.toJSON().fid == 'undefined'){
                return false;
            }

            if(IsDeleteStep){
                str+="&stepId="+stepId;
            }

            if(link.attributes.drawnFrom.val=="source"){
                str+="&eid="+eid+"&ruleId="+rid+"&displayViewRule=true";
                str+="&flowId="+linkView.model.attributes.fid.val;
                str+="&jsonDiagram="+JSON.stringify(gph.toJSON());
                window.location.href="ManageRule.action?deleteFlow="+str;
            }
        }   

    } else {
            return false;
          }
    /* 
    var cnfrm=confirm(" Flow ?");
    if(cnfrm) {

    } else {
        return false;
    } */

   // linkView.model.remove();
});