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 }