如何在gojs流程图中根据节点类型动态添加不同数量的端口答案

【问题标题】：How to add different number of port dynamically to node according to its type in gojs flow chart如何在gojs流程图中根据节点类型动态添加不同数量的端口
【发布时间】：2019-09-23 11:37:30
【问题描述】：

我是 js 新手，很难弄清楚如何限制特定节点中的端口数量。对于不同的节点，传入和传出端口的数量应该不同，例如start 节点应该有 0 个传入节点和 1 个传出端口，结束节点应该有 2 个传入节点和 0 个传出端口。我定义模板的代码如下：

 myDiagram.nodeTemplate =
  $(go.Node, "Spot",
    { locationSpot: go.Spot.Center, toolTip: tooltiptemplate },
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    { selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate },
    { resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
    { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate },
    new go.Binding("angle").makeTwoWay(),
    // the main object is a Panel that surrounds a TextBlock with a Shape
    $(go.Panel, "Auto",
      { name: "PANEL" },
      new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
      $(go.Shape, "Rectangle",  // default figure
        {
          portId: "", 
          fromLinkable: true, toLinkable: true, cursor: "pointer",
          fill: "white",  
          strokeWidth: 2,
            toMaxLinks:1, //this is where i can limit the number but cant determine the type of node
            fromMaxLinks:2

        },
      new go.Binding("figure", "figure"),
      new go.Binding("fill", "fill"),
      new go.Binding("stroke", "stroke")),
      $(go.TextBlock,
        {
          font: "bold 8pt Helvetica, Arial, sans-serif",
          textAlign: "center",
          margin: 8,
          maxSize: new go.Size(160, NaN),
          wrap: go.TextBlock.WrapFit,
          editable: true
        },
        new go.Binding("choices"),
        new go.Binding("id"),
        new go.Binding("State"),            
        new go.Binding("text").makeTwoWay())
    ),
    // four small named ports, one on each side:
    makePort("T", go.Spot.Top, false, true),
    makePort("L", go.Spot.Left, true, true),
    makePort("R", go.Spot.Right, true, true),
    makePort("B", go.Spot.Bottom, true, false),
    { // handle mouse enter/leave events to show/hide the ports
      // mouseEnter: function(e, node) { showSmallPorts(node, true); },
      // mouseLeave: function(e, node) { showSmallPorts(node, false); }
    }
  );

正如评论中提到的，我知道我可以在哪里限制端口数量，但我无法确定当时正在处理哪个节点。

有人可以帮忙吗？如果您需要更多说明，请发表评论。

【问题讨论】：

标签： gojs

【解决方案1】：

有几种可能的解决方案，具体取决于您希望拥有的灵活性。

更简单的方法是为每种节点设置一个单独的模板。逻辑电路示例证明了这一点：https://gojs.net/latest/samples/logicCircuit.html。

请注意，由于定义模板只是 JavaScript 代码，因此您可以定义函数并使用常量或变量来使每个模板的定义更加清晰和易于维护。这允许在模型中使用相对简单的节点数据对象，因为不需要描述数据中有关端口的任何内容。

相反的极端是定义一个可以以您可能需要的所有可能方式参数化的单个模板。因为可以有如此广泛的外表和行为，所以没有一个很好的综合例子。但是动态端口示例https://gojs.net/latest/samples/dynamicPorts.html 演示了在矩形主体的每一侧具有完全可变数量的端口。用户可以动态添加和删除端口——节点和端口都有上下文菜单。

在这种情况下，模型中的每个节点数据对象都必须对节点每一侧的每个端口都有完整的端口描述符。而且模板要复杂得多。

当然，您可以将这两种方法结合起来，为某些特殊情况（例如输入或输出）设置单独的节点模板，为其他类型的节点设置一个或几个稍微通用的节点模板。

【讨论】：