Link the dynamic spots that comes on mouse click by giving them unique portId

@akash1 wrote:

Here is my code :

function init() {
var $ = go.GraphObject.make;

myDiagram =
  $(go.Diagram, "myDiagramDiv",
    { initialContentAlignment: go.Spot.Center, "undoManager.isEnabled": true });

myDiagram.nodeTemplate =
  $(go.Node, "Spot",
    { selectionObjectName: "BODY" },
    new go.Binding("itemArray", "spots"),
    { // each spot is represented by a Panel holding a circular Shape
      // at a particular alignment relative to the "BODY"
      itemTemplate:
        $(go.Panel,
          $(go.Shape, "Circle",
            {
              fill: "red",
              portId: " ",
              toLinkable: true,
              fromLinkable: true,
              strokeWidth: 0,
              width: 8, height: 8
            }),
          new go.Binding("alignment", "spot", go.Spot.parse).makeTwoWay(go.Spot.stringify)
        ),
      // when the user clicks on the node, add a "spot"
      click: function(e, obj) {
        e.diagram.startTransaction();
        // convert click point into Spot in node's bounds
        var pt = e.documentPoint;  // in document coordinates
        var node = obj.part;
        var b = node.actualBounds;  // will be in document coordinates
        var spot = new go.Spot(Math.max(0, Math.min((pt.x - b.x) / b.width, 1)),
                               Math.max(0, Math.min((pt.y - b.y) / b.height, 1)));
        // add an Object describing the spot's location (as a Spot value)
        var spotsArray = node.data.spots;
        if (!Array.isArray(spotsArray)) spotsArray = node.data.spots = [];
        e.diagram.model.addArrayItem(spotsArray, { spot: go.Spot.stringify(spot) });
        e.diagram.commitTransaction("added spot");
      }
    },
    $(go.Panel, "Auto",
      { name: "BODY", width: 100, height: 100 },
      $(go.Shape, { fill: "whitesmoke" }),
      $(go.TextBlock, { editable: true },
        new go.Binding("text").makeTwoWay())
    )
  );

myDiagram.model = $(go.GraphLinksModel,
  {
    copiesArrays: true,  // make sure the data.spots Array is copied
    copiesArrayObjects: true,  // make sure the Objects in those Arrays are also copied
    model.linkFromPortIdProperty = "fromPort";
    model.linkToPortIdProperty = "toPort";
    nodeDataArray: [ ],
    linkDataArray: [ ]
  });

}

what i need is whenever a spot is made on the mouse click it should have unique portId and in these properties:
model.linkFromPortIdProperty = "fromPort";
model.linkToPortIdProperty = "toPort";
when i link the any two spots fromPort should have the one spots portId and toPort should have the other spots portId.
Because of portId: " " i am able to connect only first two spots after that all the links connect on the same spots (see in the screenshot).

Posts: 1

Participants: 1

Read full topic