Question

我正在研究go.js我的节点的流程图：

开始
播放
阙
选项
结束

起始节点有一个输出端口，而播放和 que 都有一个输入和一个输出端口，并且选项节点有一个输入端口，根据用户输入可以在底部有一个到多个输出端口。

每当用户从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

以下给出的是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绑定到节点数据中的Array，该数据为每个端口保存一个数据对象。这在Item Arrays中有所描述。有几个示例演示了如何执行此操作。 Dynamic Ports样本可能是最有启发性的，虽然你想要删除很多代码，因为它有四个独立的端口数据阵列，每个都绑定到四个不同的面板，而大概你只需要一个面板端口绑定到一个端口数据数组。

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

1 个答案: