如何对 JointJS 中的 link remove 事件做出反应
How to react on link remove event in JointJS
我使用以下代码来控制 link 上的删除功能。如果 link 匹配特定条件,我如何拦截删除事件并阻止它?
// add a remove button on hovered link
this.paper.on("link:mouseenter", function(linkView) {
let tools = [new joint.linkTools.Remove({ distance: 20 })];
linkView.addTools(
new joint.dia.ToolsView({
name: "onhover",
tools: tools
})
);
});
// remove button on hovered link
this.paper.on("link:mouseleave", function(linkView) {
if (!linkView.hasTools("onhover")) return;
linkView.removeTools();
});
通过使用传递给 linkTools.Remove 构造函数的操作参数找到了答案。
// add a remove button on hovered link
this.paper.on("link:mouseenter", function(linkView) {
let tools = [
new joint.linkTools.Remove({
distance: 20,
action: function(evt) {
// do stuff and remove link using
this.model.remove({ ui: true, tool: this.cid });
}
})
];
linkView.addTools(
new joint.dia.ToolsView({
name: "onhover",
tools: tools
})
);
});
我使用以下代码来控制 link 上的删除功能。如果 link 匹配特定条件,我如何拦截删除事件并阻止它?
// add a remove button on hovered link
this.paper.on("link:mouseenter", function(linkView) {
let tools = [new joint.linkTools.Remove({ distance: 20 })];
linkView.addTools(
new joint.dia.ToolsView({
name: "onhover",
tools: tools
})
);
});
// remove button on hovered link
this.paper.on("link:mouseleave", function(linkView) {
if (!linkView.hasTools("onhover")) return;
linkView.removeTools();
});
通过使用传递给 linkTools.Remove 构造函数的操作参数找到了答案。
// add a remove button on hovered link
this.paper.on("link:mouseenter", function(linkView) {
let tools = [
new joint.linkTools.Remove({
distance: 20,
action: function(evt) {
// do stuff and remove link using
this.model.remove({ ui: true, tool: this.cid });
}
})
];
linkView.addTools(
new joint.dia.ToolsView({
name: "onhover",
tools: tools
})
);
});