Once a link is created, hovering over it presents the red (X) to delete it.

Clicking this will fire a sequence of events (collected by subscribing to the 'all' event):

• cell:pointerdown
• link:pointerdown
• cell:pointermove (x5, seems dubious)
• cell:pointerup

after trolling through the documentation & spending too long digging into the param objects of these events, I see nothing that could be used to effectively know if the link is about to be deleted or not.

Surely I'm missing something obvious?

I could pare against the graph's links collection between pointerdown and pointerup, but that's pretty ugly.

Once a link is created, hovering over it presents the red (X) to delete it.

Clicking this will fire a sequence of events (collected by subscribing to the 'all' event):

• cell:pointerdown
• link:pointerdown
• cell:pointermove (x5, seems dubious)
• cell:pointerup

after trolling through the documentation & spending too long digging into the param objects of these events, I see nothing that could be used to effectively know if the link is about to be deleted or not.

Surely I'm missing something obvious?

I could pare against the graph's links collection between pointerdown and pointerup, but that's pretty ugly.

• javascript
• jointjs

3 Answers 3

You can listen on graph remove event to see if a link was deleted:

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

If you want to listen to a remove event which is triggered by the 'X' on the link (JointJS calls these mouseover elements 'link-tool'):

You can pass an event to the SVG element, which will be triggered on your joint.dia.Paper, like this:

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

And then you can listen to exactly the "tool:remove", or however you called it, event:

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