Add Dynamic ports

GoJS
1

Hi,I am using a treeview palette to drag and drop my nodes in the editor part, it works fine.
When I try to add dynamic ports to node in my application. i am able to add the ports to the node with this code

{
var newPort = this.makePort(“I3”,true);
}

makePort(name, leftside) {
const ggm = go.GraphObject.make;
var port = ggm(go.Shape, “Rectangle”,
{
fill: “gray”, stroke: null,
desiredSize: new go.Size(8, 8),
portId: name, // declare this object to be a “port”
toMaxLinks: 1, // don’t allow more than one link into a port
cursor: “pointer”, // show a different cursor to indicate potential link point
name:“SHAPE”
});

var lab = ggm(go.TextBlock, name,  // the name of the port
            { font :"10px Noto Sans",
              stroke :"#fff"
   });

var panel = ggm(go.Panel, "Horizontal",
              { margin: new go.Margin(2, 0) });

// set up the port/panel based on which side of the node it will be on
if (leftside) {
  port.toSpot = go.Spot.Left;
  port.toLinkable = true;
  lab.margin = new go.Margin(1, 0, 0, 1);
  panel.alignment = go.Spot.TopLeft;
  panel.add(port);
  panel.add(lab);
} else {
  port.fromSpot = go.Spot.Right;
  port.fromLinkable = true;
  lab.margin = new go.Margin(1, 1, 0, 0);
  panel.alignment = go.Spot.TopRight;
  panel.add(lab);
  panel.add(port);
}
return panel;

var side = selectedNode.findObject(“LeftPanel”); //LeftPanel is the name of panel to which port is to be added
side.add(newPort);
}

the port gets added and the changes are reflected in model as well. i save the the model in sessionStorage and while reloading the page i use fromJson() method to redraw the diagram. the changes(added ports) are not reflected in the diagram but in nodedataarray and linkdataarray the values are present.

2

I do not understand how the code that you just quoted would change the model at all. It appears to only be adding some GraphObjects to a Node in the Diagram without touching any model data.

I highly recommend that you follow the implementation and design that the Dynamic Ports sample (and other samples) exhibit when the user wants to add GraphObjects to a Node: add item data to an item Array in the model and let GoJS automatically add a copy of an item template to a Panel.
https://gojs.net/latest/intro/itemarrays.html

3

I am manually pushing the data in the model like this

this.diagram.startTransaction();
side.add(newPort);
this.diagram.selection[“Ea”][“key”][“Zd”][“IP_ports”].push(“I3”);
this.diagram.commitTransaction(“added Port”);

I am able to get I3 in the model as i mentioned above.

4

A general requirement for us to be able to help you: only use the documented API. Do not use minified properties.

You should be calling Model | GoJS API and let GoJS create a data bound copy of an item template to a panel in your node.

5

Thanks for the clarification i will look into itemArray.