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
}

Assemblage

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

Lazo

Thanks a lot for your perfect answer. Helped a lot! Can we make a particular element 'non-selectable' ? I have an element of the type joint.shapes.devs. I want to make a specific element of this type 'non-selectable' not all the elements of this type – Assemblage

Ah! Your answer had the solution element.attr({rect:{style:{'pointer-events':'none'}}}); :) – Assemblage

Correct, that would be one approach. Another is that you can actually set interactive: false to specific elements (more precisely, their views) by using something like: paper.findViewByModel(myElement).options.interactive = false – Lazo

Sorry for disturbing you again, can we change the css of a particular inPort? For linking sourcePort to the target I'm using source: { id: source.id, selector: source.getPortSelector(sourcePort) }, it's giving me accurate source port, but how to apply css on this particular port after knowing it as my source connector? Is there a way? Can we fit the label automatically inside the element if its width is longer than the element-width? – Assemblage

I came across foreignobject but don't know how to use it? Can you throw some light on it? – Assemblage

Those questions seem to be unrelated to the main question. Could you maybe create a new one so that others can benefit from the answers too? Thanks! – Lazo

Sure! Here it is: #22069966 – Assemblage