Question

我是刚接触js的新手，并且很难找出如何限制特定节点中端口的数量。不同节点的入站和出站端口数应该不同，例如开始节点应具有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); }
    }
  );

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

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

Answer 1

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

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

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

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

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

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

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

1 个答案: