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?

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);