5

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
}
softvar
  • 17,917
  • 12
  • 55
  • 76

1 Answers1

8

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

dave
  • 4,353
  • 2
  • 29
  • 25
  • 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 – softvar Feb 26 '14 at 10:31
  • Ah! Your answer had the solution `element.attr({rect:{style:{'pointer-events':'none'}}});` :) – softvar Feb 26 '14 at 10:36
  • 3
    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` – dave Feb 26 '14 at 11:59
  • 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`? – softvar Feb 26 '14 at 21:33
  • I came across `foreignobject` but don't know how to use it? Can you throw some light on it? – softvar Feb 26 '14 at 22:48
  • 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! – dave Feb 27 '14 at 11:07
  • Sure! Here it is: http://stackoverflow.com/questions/22069466/style-specific-port-in-jointjs – softvar Feb 27 '14 at 13:08