JointJS

Question

创建 link 后，将鼠标悬停在其上会显示红色 (X) 以将其删除。

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

单元格：向下指针
link:pointerdown
cell:pointermove（x5，似乎可疑）
单元格：向上指针

在浏览文档并花费太长时间挖掘这些事件的参数对象后，我看不到任何可用于有效了解 link 是否即将被删除的信息。

我肯定遗漏了什么明显的东西？

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

Answer 1

您可以监听图表 remove 事件以查看 link 是否被删除：

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

Answer 2

如果你想监听 link 上的 'X' 触发的移除事件（JointJS 调用这些鼠标悬停元素 'link-tool'）：

您可以将事件传递给 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('')
    });

然后您可以准确收听 "tool:remove"，或者无论您如何称呼它，事件：

    paper.on('tool:remove', function(evt, linkView) {
        console.log("Removing link" + linkView.model.id);
        linkView.model.remove();
    })

Answer 3

//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();
});

JointJS - 处理 Link 删除点击

JointJS - handling a Link Delete click

javascript