Moveable/Draggable ports

GoJS
21

Note that the PortShiftingTool sets the alignment property. You need to make the Binding a TwoWay Binding so that it remembers the new alignment. Otherwise whenever the Binding is evaluated it will use the original alignment.

I bet that without any other actions, if you save the model and then reload it, you will see that the model still contains the original alignment. Until you change the Binding to remember the new alignment in the model data.

22

Yes, i did try the
new go.Binding(“alignment”, “spot”, go.Spot.parse).makeTwoWay(go.Spot.stringify),
And it works find.
Thanks

23

I wonder why cant i draw links between the ports.
I set all necessary params, but when i press the port, i drag the whole node.

24

It looks that i put the fromLinkable/toLinkable on the wrong place.
Fixed.
Thanks

25

Now a link can be created between ports, but after it is created, it is drawn between the nodes
Any idea ?

26

Read:
http://gojs.net/latest/intro/ports.html#GeneralPorts
and in particular note:

27

I applied all the rules.
Here is the a sample of the data and the templates :

var nodeDataArray = [ // a JavaScript Array of JavaScript objects, one per node;
// the “color” property is added specifically for this app
{ key: nodeKey++, source: “icons/Router.svg”, siteId: “100/TS-XDM1000-KSDH-A-01”, ipAddress: “1.10.11.23”, loc: “0 500”, ports: [ { id:“H01Rx”, spot: “1 0.5 0 0” }, { id:“H02Rx”, spot: “0 0.6 0 0”} ] },
{ key: nodeKey++, source: “icons/Router.svg”, siteId: “200”, loc: “200 500” , ports: [ { portColor:"#d488a2", id:“top1”, spot: “0 0.5 0 0” } ] }
];
var linkDataArray =
[ // a JavaScript Array of JavaScript objects, one per link
{ from: “1”, to: “2”, fromPort : “H01Rx”, toPort: “top1” },
// { from: “4”, to: “3” },
// { from: “4”, to: “2” }
];

diagram.model.linkFromPortIdProperty = “fromPort”;
diagram.model.linkToPortIdProperty = “toPort”;
diagram.model.linkFromKeyProperty = “from”;
diagram.model.linkToKeyProperty = “to”;

diagram.nodeTemplate =
$(go.Node, “Vertical”, nodeStyle(),
$(go.TextBlock, { margin: 4 }, new go.Binding(“text”, “siteId”)),
$(go.Panel, “Spot”,
$(go.Panel, “Spot”,
$(go.Shape, “Rectangle”, { width: 130, height: 130, fill: “white”, isPanelMain: true } ),
$(go.Picture, { width: 100, height: 100 }, new go.Binding(“source”) )
),
new go.Binding(“itemArray”, “ports”),
{
itemTemplate : $(go.Panel, “Vertical”,
new go.Binding(“portId”, “id”),
new go.Binding(“alignment”, “spot”, go.Spot.parse).makeTwoWay(go.Spot.stringify),
{ fromLinkable: true, toLinkable: true, toMaxLinks: 1, toSpot: go.Spot.Top, fromSpot: go.Spot.Top },
$(go.Shape, “Rectangle”, { desiredSize: new go.Size(6, 6), fill: “black”, cursor: “pointer”, }), // portStyle(false)),
$(go.TextBlock, { margin: 4 }, new go.Binding(“text”, “id”))
)
}
),
$(go.TextBlock, { margin: 4 }, new go.Binding(“text”, “ipAddress”))
);

What do i miss ?

28

You didn’t say how you got the node data and the link data into the model.

29

I’m not sure i understand.
I used the binding…is this what you’re asking ?

30

diagram.model = new go.GraphLinksModel(nodeDataArray,linkDataArray);

31

found the problem,
i set

diagram.model.linkFromPortIdProperty = “fromPort”;
diagram.model.linkToPortIdProperty = “toPort”;
diagram.model.linkFromKeyProperty = “from”;
diagram.model.linkToKeyProperty = “to”;

BEFORE

diagram.model = new go.GraphLinksModel(nodeDataArray,linkDataArray);

When i switched the order it works
Thanks