问题

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

溶液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)
});

1.指示曼哈顿路由器不要考虑障碍物的容器元素。

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

溶液2

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

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