Go.js记录映射中禁用左侧表格记录多选及映射限制需求

嘿，这个需求其实在Go.js里通过几个关键配置就能实现，我给你拆解一下具体方案：

核心思路 #

我们要做的是限制左侧节点最多只能创建1条向外的映射链接，但完全允许右侧节点接收多条来自左侧的链接。主要通过链接校验、事件监听和视觉反馈这几个层面来实现。

1. 用 linkValidation 阻止创建多余链接 #

Go.js的linkValidation函数会在创建链接前触发，我们可以在这里检查源节点（左侧节点）已有的对外链接数量，如果已经达到1条，就返回false阻止新链接创建：

myDiagram.linkValidation = function(fromNode, fromPort, toNode, toPort) {
  // 先判断当前源节点是不是左侧节点（这里假设左侧节点的category设为"leftNode"）
  if (fromNode.category === "leftNode") {
    // 统计该节点已对外创建的链接数
    const outgoingLinks = fromNode.findLinksOutOf();
    // 如果已有1条，就不允许再创建新链接
    if (outgoingLinks.count >= 1) {
      return false;
    }
  }
  // 右侧节点不限制接收链接的数量，直接返回true允许创建
  return true;
};

2. 处理链接修改场景（拖拽/重连） #

如果用户通过拖拽已有链接来修改映射，或者不小心触发了重复创建，我们可以监听LinkDrawn和LinkRelinked事件，自动清理左侧节点的多余链接：

// 监听新链接创建事件
myDiagram.addDiagramListener("LinkDrawn", function(e) {
  const newLink = e.subject;
  const sourceNode = newLink.fromNode;
  
  if (sourceNode.category === "leftNode") {
    const allOutgoing = sourceNode.findLinksOutOf();
    // 如果链接数超过1，保留最新创建的，删除之前的旧链接
    if (allOutgoing.count > 1) {
      allOutgoing.each(function(link) {
        if (link !== newLink) {
          myDiagram.model.removeLinkData(link.data);
        }
      });
    }
  }
});

// 监听链接重连事件
myDiagram.addDiagramListener("LinkRelinked", function(e) {
  const relinkedLink = e.subject;
  const sourceNode = relinkedLink.fromNode;
  
  if (sourceNode.category === "leftNode") {
    const allOutgoing = sourceNode.findLinksOutOf();
    // 同样确保左侧节点只有1条对外链接
    if (allOutgoing.count > 1) {
      allOutgoing.each(function(link) {
        if (link !== relinkedLink) {
          myDiagram.model.removeLinkData(link.data);
        }
      });
    }
  }
});

3. 模型层面的前置校验（可选） #

如果你的映射数据是从外部加载的，可能存在初始数据不符合规则的情况，建议在加载模型前先做一次校验，自动清理左侧节点的多余映射：

function cleanInvalidLinks(linkDataArray) {
  const leftNodeLinkCounts = {};
  // 先统计每个左侧节点的链接数
  linkDataArray.forEach(link => {
    const fromKey = link.from;
    // 这里假设左侧节点的key有特定标识，比如前缀"left_"，你可以根据实际情况调整
    if (fromKey.startsWith("left_")) {
      leftNodeLinkCounts[fromKey] = (leftNodeLinkCounts[fromKey] || 0) + 1;
    }
  });
  
  // 过滤掉多余的链接，每个左侧节点只保留第一条
  return linkDataArray.filter(link => {
    const fromKey = link.from;
    if (fromKey.startsWith("left_") && leftNodeLinkCounts[fromKey] > 1) {
      leftNodeLinkCounts[fromKey]--;
      return leftNodeLinkCounts[fromKey] === 0;
    }
    return true;
  });
}

// 加载模型时使用
const validLinks = cleanInvalidLinks(originalLinkData);
myDiagram.model = new go.GraphLinksModel(nodeDataArray, validLinks);

4. 视觉反馈（提升用户体验） #

为了让用户直观知道哪些左侧节点已经有映射了，可以给节点添加样式绑定，比如当节点已有链接时改变背景色：

// 左侧节点模板示例
myDiagram.nodeTemplateMap.add("leftNode",
  new go.Node("Auto")
    .add(new go.Shape("RoundedRectangle", { fill: "white" })
      // 绑定填充色，根据是否有对外链接变化
      .bind("fill", "", function(node) {
        return node.findLinksOutOf().count > 0 ? "#e6f7ff" : "#ffffff";
      })
    )
    .add(new go.TextBlock({ margin: 8 })
      .bind("text", "name")
    )
);

这样用户一眼就能区分出已映射和未映射的左侧节点，减少误操作。

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