如何将多个端口动态添加到 gojs 节点

Question

我正在处理go.js 流程图，我的节点是：

1. 开始
2. 播放
3. 阙
4. 选项
5. 结束

起始节点有一个输出端口，而play和que都有一个输入和一个输出端口，而options节点只有一个输入端口，底部可以根据用户输入有1到多个输出端口。

每当用户从 Palette 中拖动选项节点并将其放在图表上时，都会出现一个弹出窗口，要求用户输入。

所以基本上我现在想要的是根据用户输入创建选项节点的输出端口。 有什么办法可以实现吗？

以下是我到目前为止所做的以及我正在努力实现的截图

这是我的代码

    function show_options_opt(model,dat,node,myDiagram)
    {
     //this function is called whenever the option node is dropped to diagram div
     var portSize = new go.Size(8, 8);
    model.setDataProperty(data,'bottomArray',[]);
  $$=go.GraphObject.make;
  var portMenu =  // context menu for each port
  $$(go.Adornment, "Vertical",
    makeButton("Remove port",
               // in the click event handler, the obj.part is the Adornment;
               // its adornedObject is the port
               function (e, obj) { removePort(obj.part.adornedObject); }),
    makeButton("Change color",
               function (e, obj) { changeColor(obj.part.adornedObject); }),
    makeButton("Remove side ports",
               function (e, obj) { removeAll(obj.part.adornedObject); })
  );
   myDiagram.nodeTemplate =
  $$(go.Node, "Table",
    { locationObjectName: "BODY",
      locationSpot: go.Spot.Center,
      selectionObjectName: "BODY"
    },
     new go.Binding("location", "loc",go.Point.parse).makeTwoWay(go.Point.stringify),
  $$(go.Panel, "Horizontal",
      new go.Binding("itemArray", "bottomArray"),
      { row: 2, column: 1,
        itemTemplate:
          $$(go.Panel,
            { _side: "bottom",
              fromSpot: go.Spot.Bottom, toSpot: go.Spot.Bottom,
              fromLinkable: true, toLinkable: true, cursor: "pointer",
              contextMenu: portMenu },
            new go.Binding("portId", "portId"),
            $$(go.Shape, "Rectangle",
              { stroke: null, strokeWidth: 0,
                desiredSize: portSize,
                margin: new go.Margin(0, 1) },
              new go.Binding("fill", "portColor"))
          )  // end itemTemplate
      }
    )  // end Horizontal Panel
   );
  addPort("bottom",node,myDiagram);
   }//end function show_options_opt

Given 下面是 addport 函数

   function addPort(side,node,myDiagram) {
  myDiagram.startTransaction("addPort");
  // skip any selected Links
  if (!(node instanceof go.Node)) return;
  // compute the next available index number for the side
  var i = 0;
  while (node.findPort(side + i.toString()) !== node) i++;
  // now this new port name is unique within the whole Node because of the side prefix
  var name = side + i.toString();
  // get the Array of port data to be modified
  var arr = node.data[side + "Array"];
  if (arr) {
    // create a new port data object
    var newportdata = {
      portId: name,
      portColor: go.Brush.randomColor()
      // if you add port data properties here, you should copy them in copyPortData above
    };
    // and add it to the Array of port data
    myDiagram.model.insertArrayItem(arr, -1, newportdata);
  }
    myDiagram.commitTransaction("addPort");
 }

Answer 1

要在节点中拥有可变数量的对象（包括您的情况下的端口），您需要将Panel.itemArray 绑定到节点数据中的一个数组，该数组为每个端口保存一个数据对象。这在Item Arrays 中有描述。有几个示例演示了如何执行此操作。 Dynamic Ports 示例可能是最有启发性的，尽管您需要删除很多代码，因为它有四个单独的端口数据数组，每个绑定到四个不同的面板，而您可能只需要绑定一个端口面板到一个端口数据数组。