JointJS - handling a Link Delete click

Question

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 compare against the graph's links collection between pointerdown and pointerup, but that's pretty ugly.

score 10 · Answer 1 · edited May 07 '15 at 23:21

10

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

edited May 07 '15 at 23:21

JoeBrockhaus

2,745
2
40
64

answered May 07 '15 at 18:40

dave

4,353
2
29
25

Awesome. Thanks Dave! The code I'm maintaining was only monitoring paper – JoeBrockhaus May 07 '15 at 18:58
When the graph is re-drawn, these events also fire. If I don't want to handle those events, is the best solution to unsub/resub? – JoeBrockhaus May 26 '15 at 14:24
@dave sir Could you please help me with this question http://stackoverflow.com/questions/31671743/text-area-in-svg-shapes?noredirect=1#comment51291042_31671743 – Jul 28 '15 at 11:46

score 2 · Accepted Answer · answered Jan 20 '16 at 12:03

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

I didn't try this (and I won't be able to), but by the looks of it this is probably what I wanted. — JoeBrockhaus, Jan 20 '16 at 16:31

score 0 · Answer 3 · edited Feb 16 '17 at 06:04

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

for deleting an circle and link based on whether circle is linked with other stages or not by eding json represting graph element gph also u can edit. — Arka Bandyopadhyay, Feb 16 '17 at 05:44
If u consider a diagram of 2 circles and a link connecting between them. If you click on the remove link button on the link then this removeLink event will get fired .Then it will ask user whether to delete the complete flow or the only link , in case the link is associated with a single noded circle with no more link after deleting the exsisting link in the flow , that link with circle or node will be deleted. NB. here step refers link. — Arka Bandyopadhyay, Feb 16 '17 at 07:10

JointJS - handling a Link Delete click

3 Answers3

Linked