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

Question

我一直在看一个JointJS路由演示( http://www.jointjs.com/demos/routing )，我设法将它应用到了我的web应用程序中。这个例子只有两个元素之间的单一联系，只有三个障碍，而在我的应用程序中，我有大约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();
            }
        });
    }
});