JointJS - обработка ссылки Удалить нажмите

Question

Как только ссылка создана, над ней отображается красный (X), чтобы удалить ее.

Нажатие этого сгорит последовательность событий (собранную подписавшись на 'все' событие):

• клетки: pointerdown
• ссылка: pointerdown
• клетки: pointermove (x5, кажется сомнительный)
• клетки: pointerup

после троллинга через документацию & слишком долго копаясь в объектах param этих событий, я не вижу ничего, что можно было бы эффективно использовать, если бы ссылка была удалена или нет.

Уверен, что мне не хватает чего-то очевидного?

Я мог сравнить с сборкой графиков ссылок между pointerdown и pointerup, но это довольно уродливо.

Answer 1

Если вы хотите прослушивать событие REMOVE, который инициированной «X» на линии связи (JointJS называет эти MouseOver элементов «ссылка-инструмент»):

Вы можете передать событие на элемент 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('') 
    }); 

И то вы можете слушать точно «инструмент: удалить», или как бы вы назвали это, событие:

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

Answer 2

Вы можете слушать на графике remove событие, чтобы увидеть, если ссылка была удалена:

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

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