how to disable 'remove' action on links on jointjs?

Question

use jointjs library to build a graph, it's a good library with very few documents.

http://jointjs.com/demos/fsa as above page, when mouse move on link, there is a 'remove' icon on link, which can be clicked to remove link, and I want to disable 'remove' action on links? please advise.

Answer 1

The easiest way is to set .link-tools .tool-remove { display: none } in your CSS.

Answer 2

You can modify the markup that is used for displaying links. The documentation lists all the markup elements. Only "connection" is mandatory.

<path class="connection"/>
<path class="marker-source"/>
<path class="marker-target"/>
<path class="connection-wrap"/>
<g class="labels" />
<g class="marker-vertices"/>
<g class="marker-arrowheads"/>
<g class="link-tools" />

E.g. the following creates links with just an end marker and labels, no tools or hover outline:

var MyLink = joint.dia.Link.extend({
    markup: '<path class="connection"/><path class="marker-target"/><g class="labels" />'
});

Answer 3

Here's my alternative way to modify this part of css on jointjs version 1.0.2.

The benefit of this trick is that we can have different link with different style and it's more flexible too.

var link = new joint.dia.Link({
    // other attributes 
    attrs: {
    //other attributes
        '.link-tools': {
            display: 'none'
        }
    }
});

We can also set it as default in a paper, here's another example:

var paper  = new joint.dia.Paper({
    // other configs..
    defaultLink: new joint.dia.Link({
        attrs: {
            //other attributes
            '.link-tools': {
                display: 'none'
            }
        }
    })
});

Answer 4

As Dave indicated, it is done in the css, but you need to add an additional for the options. Entries for the CSS are:

.link-tools .tool-remove { display: none }
.link-tools .tool-options { display: none }

Answer 5

I thought that it would be useful to add an updated answer after a long time to this post.

What we need to do is to define ToolsView to the link view.

const verticesTool = new joint.linkTools.Vertices();
const segmentsTool = new joint.linkTools.Segments();
const sourceArrowheadTool = new joint.linkTools.SourceArrowhead();
const targetArrowheadTool = new joint.linkTools.TargetArrowhead();
const sourceAnchorTool = new joint.linkTools.SourceAnchor();
const targetAnchorTool = new joint.linkTools.TargetAnchor();
const boundaryTool = new joint.linkTools.Boundary();
const removeButton = new joint.linkTools.Remove();

const toolsView = new joint.dia.ToolsView({
    tools: [
        verticesTool, segmentsTool,
        sourceArrowheadTool, targetArrowheadTool,
        sourceAnchorTool, targetAnchorTool,
        boundaryTool, removeButton
    ]
});

After that, you need to add or remove this toolview upon hovering or leaving your links; for instance as below. Certainly, you can use other logic to show the toolview as required as opposed to on hover.

paper.on({
  'blank:mouseover': ()=>{
    paper.removeTools();
  },

  'link:mouseenter': (linkView)=>{
    linkView.addTools(toolsView);
  }
});

To follow the request in the original question, what we need is to discard removeButton from the toolview.

One more thing, if you want to override the default link that is used by paper when adding a new link, you will need to override your paper init parameters as follows:

new joint.dia.paper({
   defaultLink: function (cellView, magnet) {
        return new joint.shapes.standard.Link();
      },
});

For more information: [JointJS link tools] [1]: https://resources.jointjs.com/tutorial/link-tools

Answer 6

I see that for arrow heads there is an g element with marker-arrowheads class.

So:

.link .marker-arrowheads { display: none; }

should do it.

Note that there is also an element with marker-vertices class.