Make elements 'not selectable' in jointjs

Question

I have used Jointjs diagramming library in one of my project.

1) I'm curious to know whether it provides any way to restrict users not to play with the elements of the diagram. What I mean is: a user would be able to see the diagram as an image rather than interacting with it like resizing, changing position, dragging links, etc.

2) My app is depending on it badly. Though I have solved the issue of auto layout, but is that possible with Jointjs, can we just tell the lib that we want these elements and stuff and please help us in making the diagram with best suitable, non-colliding elements and with a minimum number of links colliding with each other and with the elements in their path if the links are continuous straight lines ?

3) Lastly, i want to know if we can check links colliding with other elements or with other links in the same diagram. I know it is possible in case of elements.

if (element1.getBBox().intersect(element2.getBBox())) {
    // elements intersect
}

Answer 1

1) Use either new joint.dia.Paper({ interactive: false, ... }) or set pointer-events CSS property to none directly on the paper: paper.$el.css('pointer-events', 'none')

2) You can use the joint.layout.DirectedGraph plugin. This plugin is downloadable here: http://jointjs.com/download and a blog post describing it is here: http://www.daviddurman.com/automatic-graph-layout-with-jointjs-and-dagre.html.

3) This is not, in general, easy. I'd point you to this site for an example of computing intersection between two paths: http://www.kevlindev.com/geometry/2D/intersections/intersect_bezier2_bezier2.svg. Here is the library for download then: http://www.kevlindev.com/gui/math/intersection/index.htm