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 ?