JavaScript:JointJS 中的智能路由(性能问题？)

Question

我一直在看 JointJS 路由演示 ( http://www.jointjs.com/demos/routing )，我设法将其应用到我的网络应用程序中。该示例在 2 个元素之间只有一个链接，并且只有 3 个障碍物，而在我的应用程序中，我有大约 50 个元素(可以同时是源、目标和障碍物)，它们之间有超过 80 个链接。

我有页面上所有元素的列表:listOfElements，以及它们之间的所有链接的列表:listOfLinks

按照上面的 JointJS.com 链接中的逻辑，我正在执行以下操作:

graph.on('change:position', function(cell) {
    // have any elements been moved? Then reroute all of the links.
    for(var j = 0; j < listOfLinks.length; ++j) {
       if (_.contains(listOfElements, cell)) paper.findViewByModel(listOfLinks).update();
    }
}); 

上面的方法可以解决问题，但是当我拖动元素时，性能会受到很大影响，因为每当我移动元素时，都会检查每个链接。

1. 是否有一种有效的方法来检查 JointJS 中链接和元素的冲突？我一直在挖掘，但似乎找不到任何有关此事的信息。

2. 我真的在做一些自杀行为吗？有没有办法加快速度？

除了JointJS之外，我也愿意接受其他关于智能路由的建议。我也尝试过 jsPlumb，但没有成功。任何帮助将不胜感激。

提前感谢各位，继续努力!

Answer 1

我只是简单地看了一下这个例子，但你迭代 listOfLinks.length 次，并每次都发送所有链接，这看起来确实很奇怪。

怎么样:

graph.on('change:position', function(cell) {
    if (_.contains(listOfElements, cell)) {
        for (var i=0; i<listOfLinks.length; i++) {
            paper.findViewByModel(listOfLinks[i]).update();
        }
    }
});

我试图查找如何仅更新该区域中的链接，不幸的是，似乎很容易找到重叠的元素。但这是我想到的:

function overlap(rect1, rect2) {
    return !(rect1.right < rect2.left || 
             rect1.left > rect2.right || 
             rect1.bottom < rect2.top || 
             rect1.top > rect2.bottom);
}

graph.on('change:position', function(cell) {
    if (_.contains(listOfElements, cell)) {
        var bbox = paper.findViewByModel(cell);
        _.each(listOfLinks, function(link) {
            var linkView = paper.findViewByModel(link);
            if (overlap(linkView.getBBox(), bbox)) {
                linkView.update();
            }
        });
    }
});