jointJS/Rappid - False displaying of source and targer arrowheads when the manhattan router used

Question

I want to have a specific cell always toBack, in order to be able to put a whole graph over it, as in the picture(here this cell has a light blue background color), but my source and target arrowheads are not displayed accordingly when the link uses the Manhattan router.

The code I wrote to set this cell toBack is:

cell.toBack();

This means that this cell will always be at the lowest level of graph.

What should I do in order all transitions which are over this cell to be displayed as being just in the paper,I mean as in the following picture?

Answer 1

Problem

The Manhattan router used in the example is not able to find the route due to a large obstacle (light blue rectangle) covering both source and target element.

Solution 1

1. Make sure the container element has a unique type.

   var Container = joint.dia.Element.define('ns.Container', {
     attrs: {
       rect: {
         refWidth: '100%',
         refHeight: '100%',
         stroke: 'black',
         fill: 'lightblue'
       }
     }  
   }, {
     markup: 'rect'
   });
   
   var container = new Container;
   container.resize(200,200);
   container.position(100, 100);
   container.addTo(graph);
   

   For older versions of JointJS/Rappid

   var Container = joint.dia.Element.extend({
     markup: 'rect',
     defaults: joint.util.deepSupplement({
       type: 'ns.Container',
       attrs: {
         rect: {
           'ref-width': '100%',
           'ref-height': '100%',
           'stroke': 'black',
           'fill': 'lightblue'
          }
       }
     }, joint.dia.Element.prototype.defaults)
   });
   

2. Instruct the Manhattan router not to consider the container element for the obstacle.

   new joint.dia.Paper({
     defaulRouter: {
       name: 'manhattan',
       args: { excludeTypes: 'ns.Container' }
     }
   });
   

Solution 2

Embedding the elements into the container element cause the Manhattan router to ignore the container automatically.

container.embed(activity1);
container.embed(activity2);