Line jumps to visually clarify intersecting lines

We’d like to add support for “line jumps” or “bridges” in order to guide the users’ eye in following intersecting edges, as e.g. below:

I’m wondering what would be the best way of implementing them in Sprotty, as an implementation for such line jumps would require awareness of the routes of all edges in a diagram.

Typically, for each SRoutableElement a RoutableView is invoked one after the other, which in turn runs the IEdgeRouter to obtain routes. These routes are then translated into a SVG path by the view. The routes of other edges, however, are not explicitly persistent or available to others during a rendering pass of the entire diagram, neither for the views nor the router. There would have to be a rendering context that is renewed for each rendering pass and that collects the routes of all edges rendered so far so that we could integrate a detection for intersections and subsequently rendering jumps for them. Also, it’d be nice to have these line jumps independently from the actual routers, as those jumps are not necessarily tied to the behavior of a router.

So another way could be to add a IVNodePostprocessor, which could pass through edges and find intersections and replace them with those line jumps. This would be nice because it would be independent of the actual router or even views (to some extent), however it would have to run the registered routers again for the model elements to compute their routes, which is inefficient, and then it would have to fiddle around with the path on SVG level, which seems a bit off too.

@spoenemann What do you think would be the best approach? Thanks a lot for your thoughts on that!

[planger]

FWIW, last year we added support for a new kind of “Jump Links” in GMF Runtime for rendering these intersections. Instead of rendering a semi-circle at the intersection, it simply creates a “gap” in the edge. See https://projects.eclipse.org/projects/modeling.sirius/releases/6.3.1 for a screenshot of what it looks like.

The result can be cleaner visually (IMO) on large diagrams with many intersections.

Thanks for the feedback! Sure that’s also an option.

The proposed implementation already renders a small gap for the line that doesn’t “jump” to avoid actually crossing it (see gif). If you’d want gaps only, we could easily provide an alternative view implementation that renders no jumps and but just a centered gap (see JumpingPolylineEdgeView of my PR).

[planger]

Finally, I got to work a bit on this issue and have a first prototype. I’ll share the code within the next couple of days. Here is how it looks like (intersections are indicated in the gif below by a red circle):

I use an enhanced version of https://github.com/rowanwins/sweepline-intersections (MIT). I had to change it in a few parts though to allow reporting the edge IDs and segment indizes as well. As it is MIT, I think we could further harmonize this enhancement of that library with the Sprotty types and even include it in Sprotty.