Search code examples
jointjs

How to react on link remove event in JointJS


I use the following code to control the remove functionality on links. How can I intercept the remove event and prevent it if the link match a specific condition?

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

Solution

  • found the answer by using the action argument passed to the linkTools.Remove constructor.

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