JointJS如何限制元素端口间已存在连接时禁止重复连线

直接用JointJS Paper自带的validateConnection校验钩子做限制就行，这个钩子返回false的时候会直接拦掉非法连线，不用额外绑定一堆事件，性能也更好：

• 先保留原有两个基础规则：不允许元素自己连自己、不允许从输入端口反向拉线
• 新增重复连线判断：把画布上所有现存的连线拉出来遍历，看看有没有哪条线的两个端点所属元素，和当前正在拉的线的两个端点所属元素完全重合，遍历的时候记得跳过当前正在拖拽的这条临时线，不然会把自己判成重复，永远连不上
• 只要两个元素之间已经有一条线，不管连的是两边的哪个端口，都直接拦掉新连线，符合两个单元格仅1对1连接的要求。

不用改其他逻辑，直接替换初始化Paper配置里的validateConnection函数就行，改完的代码如下：

validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
  // 禁止元素自连
  if (cellViewS === cellViewT) return false;

  // 禁止从输入端口反向连线
  if (magnetS === magnetT) return false;

  // 两个元素之间仅允许存在1条连线
  const sourceId = cellViewS.model.id;
  const targetId = cellViewT.model.id;
  const allExistLinks = graph.getLinks();
  
  const isDuplicated = allExistLinks.some(link => {
    // 跳过当前正在拖拽创建的临时连线，避免自我误判
    if (link === linkView.model) return false;
    const existLinkSource = link.get('source');
    const existLinkTarget = link.get('target');
    // 同方向重复判断
    const sameDirMatch = existLinkSource.id === sourceId && existLinkTarget.id === targetId;
    // 如果需要禁止双向重复（A连B后B也不能连A），放开下面这行，最后返回两个条件的或结果
    // const reverseDirMatch = existLinkSource.id === targetId && existLinkTarget.id === sourceId;
    return sameDirMatch;
    // 双向限制用 return sameDirMatch || reverseDirMatch;
  });

  if (isDuplicated) return false;

  return true;
}

配置说明：默认配置下同方向仅允许一条连线，也就是A到B可以连1条、B到A也可以连1条；如果需要做两个元素之间不管方向总共只能有1条线的强限制，把代码里注释的反向判断逻辑放开即可。

内容的提问来源于stack exchange，提问作者jdistro07