disable mouseover interaction JointJS diagram

Question

I am trying to remove the mouseover actions that happen over links and Rects.

I tried adding interactive: false to the joint.dia.Paper object - this does not help fully. I still see changes on mouse over. I want link (especially) to not respond on mouse over.

How do I achieve this?

Answer 1

To understand this you have to understand how the SVG markup for links is built up. The documentation explains it pretty well:

http://jointjs.com/tutorial#link-styling

If you need to check in more detail about the CSS class structure, I find it useful to use Inspect Element on your browser.

Once you understand this you will see that you can do what you are asking for using CSS. For a demo look here:

http://jsfiddle.net/azt8jpam/1/

For links you need to set display: none on the connection-wrap, link-tools, marker-vertices and marker-arrowhead classes.

For completeness you could also set cursor: auto on the shapes. For example

.element.basic.Rect {
    cursor: auto
}