wie dynamisch mehrere Ports hinzufügen Knoten sind meine Knoten

Question

Ich arbeite an go.js Flussdiagramm gojs:

1. starten
2. Wiedergabe
3. Que
4. Optionen
5. End

Der Startknoten hat einen Ausgang, während beide spielen und que haben einen Eingang und einen Ausgangsport, und die Optionen Knoten einen Eingangsanschluss hat, und eine an mehrere Ausgangsanschlüsse an der Unterseite auf eine Benutzereingabe basiert haben kann.

Immer, wenn Benutzer den Options-Knoten aus der Palette zieht und im Diagramm ablegt, wird ein Popup-Fenster angezeigt, in dem nach Benutzereingaben gefragt wird.

Also im Grunde, was ich jetzt will, ist Optionen Ausgang Ausgangsknoten basierend auf Benutzereingaben zu erstellen. Kann ich das irgendwie erreichen?

Anbei ist der Screenshot von dem, was ich bisher getan haben und was ich versuche

hier zu erreichen ist mein Code

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 

Und Below Gegeben ist die Addport-Funktion

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

Um eine variable Anzahl von Objekten (einschließlich in Ihrem Fall Ports) in einem Knoten haben, mögen Sie Panel.itemArray einen Array in Ihren Knotendaten binden, die für jeden Port ein Datenobjekt halten. Dies wird in Item Arrays beschrieben. Es gibt mehrere Beispiele, die zeigen, wie dies zu tun ist. Das Beispiel Dynamic Ports ist höchst lehrreich, obwohl Sie einen großen Teil des Codes entfernen möchten, da er vier separate Port-Daten enthält, die jeweils an vier verschiedene Panels gebunden sind, während Sie vermutlich nur ein Panel von Ports benötigen Array von Portdaten.