创建链接后，将鼠标悬停在其上会显示红色（X）以将其删除。
单击此按钮将触发一系列事件 （通过订阅'all'事件收集）：
当然我错过了一些明显的东西？
我可以比较指针向下和指针之间的图形链接集合，但这非常难看。
答案 0 :(得分：10)
您可以在图remove事件中收听，以查看链接是否已删除：
graph.on('remove', function(cell, collection, opt) {
if (cell.isLink()) {
// a link was removed (cell.id contains the ID of the removed link)
}
})
答案 1 :(得分：2)
如果您想收听由＆＃39; X＆＃39;触发的删除事件。在链接上（JointJS称这些鼠标悬停元素＆＃39; link-tool＆＃39;）：
您可以将事件传递给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('')
});
然后你可以完全听取＆＃34;工具：删除＆＃34;，或者你调用它，事件：
paper.on('tool:remove', function(evt, linkView) {
console.log("Removing link" + linkView.model.id);
linkView.model.remove();
})
答案 2 :(得分：0)
//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();
});