jquery - jointJS/Rappid - 使用曼哈顿路由器时错误显示源和目标箭头

Question

我想让一个特定的单元格始终返回，以便能够将整个图表放在它上面，如图所示（这里这个单元格有浅蓝色背景色），但是当我的源和目标箭头没有显示时该链接使用曼哈顿路由器。

我编写的将此单元格设置为后退的代码是：

cell.toBack();

这意味着该单元格将始终位于图表的最低级别。

我应该怎么做才能使该单元格上的所有转换都显示为仅在纸上，我的意思是如下图所示？

Answer 1

问题

示例中使用的曼哈顿路由器无法找到路径，因为有一个大障碍物（浅蓝色矩形）同时覆盖了源元素和目标元素。

解决方案 1

1. 确保容器元素具有唯一的类型。

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

   对于旧版本的 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. 指示曼哈顿路由器不要将容器元素视为障碍物。

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

解决方案 2

将元素嵌入到容器元素中会导致曼哈顿路由器自动忽略容器。

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