In this case,
Q1:I want to be able to bind the location of each port.
var portSizeV = new go.Size(11, 4);
var portSizeH = new go.Size(4, 11);
var gnTemplate =
g_(go.Node, "Table",
{ locationObjectName: "BODY",
locationSpot: go.Spot.Center,
selectionObjectName: "BODY"
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// the body
g_(go.Panel, "Auto",
{ row: 1, column: 1, name: "BODY",
stretch: go.GraphObject.Fill },
g_(go.Shape, "Rectangle",
{ fill: null,
stroke: "rgba(255,0,0,1)",
strokeWidth: 4,
minSize: new go.Size(85, 85) },
new go.Binding("background","isHighlighted",function(h) {
return h ? "rgba(255,0,0,0.1)" : "transparent";
}).ofObject(),
new go.Binding("stroke","color"),
new go.Binding("strokeWidth","thickness"),
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)),
g_(go.TextBlock,
{ margin: 10, textAlign: "center",
font: "bold 10pt Segoe UI,sans-serif",
stroke: "black", editable: true },
new go.Binding("stroke","text_color"),
new go.Binding("font", "font").makeTwoWay(),
new go.Binding("text", "text").makeTwoWay())
), // end Auto Panel body
//left
g_(go.Panel, "Vertical",
new go.Binding("itemArray", "leftArray"),
{ row: 1, column: 0,
itemTemplate:
g_(go.Panel,"Spot",
g_(go.Shape, "Rectangle",
{
stroke: null, strokeWidth: 0,
desiredSize: portSizeV,
margin: new go.Margin(6,0),
_side: "left",
//fromLinkableSelfNode:true,
//toLinkableSelfNode:true,
portId:"",
fromSpot: go.Spot.Left, toSpot: go.Spot.Left,
fromLinkable: true, toLinkable: true, cursor: "pointer" },
new go.Binding("portId", "portId"),
new go.Binding("location", "portLoc"),
new go.Binding("fill", "portColor")),
g_(go.TextBlock, {
editable: true,
angle:0,
text:"111",
font: "bold 3pt serif",
alignment:new go.Spot(0,0,0,9)
},new go.Binding("text","portText").makeTwoWay())
) // end itemTemplate
}
),
//top
g_(go.Panel, "Horizontal",
new go.Binding("itemArray", "topArray"),
{ row: 0, column: 1,
itemTemplate:
g_(go.Panel,"Spot",
g_(go.Shape, "Rectangle",
{ stroke: null, strokeWidth: 0,
desiredSize: portSizeH,scale:0.5,
margin: new go.Margin(0, 6),
_side: "top",
//fromLinkableSelfNode:true,
//toLinkableSelfNode:true,
portId:"",
fromSpot: go.Spot.Top, toSpot: go.Spot.Top,
fromLinkable: true, toLinkable: true, cursor: "pointer" },
new go.Binding("portId", "portId"),
new go.Binding("location", "portLoc"),
new go.Binding("fill", "portColor")),
g_(go.TextBlock, {
editable: true,
text:"222",
angle:-90,
font: "bold 3pt serif",
alignment:new go.Spot(0,0,8,-10)
},new go.Binding("text","portText").makeTwoWay())
) // end itemTemplate
}
),
//right
g_(go.Panel, "Vertical",
new go.Binding("itemArray", "rightArray"),
{ row: 1, column: 2,
itemTemplate:
g_(go.Panel,"Spot",
g_(go.Shape, "Rectangle",
{ stroke: null, strokeWidth: 0,
desiredSize: portSizeV,
margin: new go.Margin(6, 0),
_side: "right",
//fromLinkableSelfNode:true,
//toLinkableSelfNode:true,
portId:"",
fromSpot: go.Spot.Right, toSpot: go.Spot.Right,
fromLinkable: true, toLinkable: true, cursor: "pointer" },
new go.Binding("portId", "portId"),
new go.Binding("location", "portLoc"),
new go.Binding("fill", "portColor")),
g_(go.TextBlock, {
editable: true,
text:"333",
angle:0,
font: "bold 3pt serif",
alignment:new go.Spot(0,0,22,10)
},new go.Binding("text","portText").makeTwoWay())
) // end itemTemplate
}
), // end Vertical Panel
//bottom
g_(go.Panel, "Horizontal",
new go.Binding("itemArray", "bottomArray"),
{ row: 2, column: 1,
itemTemplate:
g_(go.Panel,"Spot",
g_(go.Shape, "Rectangle",
{ stroke: null, strokeWidth: 0,
desiredSize: portSizeH,
margin: new go.Margin(0, 6) ,
_side: "bottom",
alignment:new go.Spot(0,0,0,0),
//fromLinkableSelfNode:true,
//toLinkableSelfNode:true,
portId:"",
fromSpot: go.Spot.Bottom, toSpot: go.Spot.Bottom,
fromLinkable: true, toLinkable: true, cursor: "pointer"},
new go.Binding("portId", "portId"),
new go.Binding("location", "portLoc"),
new go.Binding("fill", "portColor")),
g_(go.TextBlock,{
editable: true,
text:"444",
angle:90,
font: "bold 3pt serif",
alignment:new go.Spot(0,0,10,22)
},new go.Binding("text","portText").makeTwoWay())
) // end itemTemplate
}
) // end Horizontal Panel
); // end Node
function addPort(side) {
myDiagram.startTransaction("addPort");
myDiagram.selection.each(function(node) {
if (!(node instanceof go.Node)) return;
var i = 0;
var str = side.substr(0,2);
while (node.findPort(str + i.toString()) !== node) i++;
var text = str + i.toString();
var nodeId = node.data.nodeId;
var portNodeLoc =node..data.loc;//!!!!!!!!!!!!How do I get the location of a port on each node
var arr = node.data[side + "Array"];
if (arr) {
var newportdata = {
portId: text,
portLoc:portNodeLoc,
portColor:"rgba(255,0,0,1)"
};
myDiagram.model.insertArrayItem(arr, -1, newportdata);
}
});
myDiagram.commitTransaction("addPort");
}
Q2：How do I get the location of a port on each node?node.data.loc only get the location of node.