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

Question

我想让一个特定的单元格始终向后，以便能够在其上放置整个图形，如图所示（此处此单元格具有浅蓝色背景色），但我的源箭头和目标箭头link使用曼哈顿路由器时不显示。

我写的设置这个单元格为Back的代码是：

cell.toBack();

这意味着此单元格将始终处于图形的最低级别。

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

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

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

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

解决方案 2

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

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

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

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

jquery

backbone.js

jointjs

rappid

问题

解决方案 1

解决方案 2