The code I gave you, at Auto Arrange of diagram - #16 by walter, has the ports stretched along each side and overlapping the main object.
I don’t know what you have done; I suggest that you follow the sample that I gave you and replace the “lightgray” Shape with whatever you want to show as the body of the node.
Here’s the same code but with mouseEnter and mouseLeave events on each port:
function makePort(id, align, spot) {
var port = $(go.Shape,
{
portId: id,
alignment: align,
cursor: "pointer",
fromSpot: spot,
fromLinkable: true,
fromLinkableDuplicates: true,
toSpot: spot,
toLinkable: true,
toLinkableDuplicates: true,
fill: "transparent",
strokeWidth: 0,
mouseEnter: function(e, port) { port.fill = "red"; },
mouseLeave: function(e, port) { port.fill = "transparent"; }
});
if (align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom)) {
port.height = 4;
port.stretch = go.GraphObject.Horizontal;
} else {
port.width = 4;
port.stretch = go.GraphObject.Vertical;
}
return port;
}
myDiagram.nodeTemplate =
$(go.Node, "Table",
$(go.Shape, // replace this Shape with what you want to show for the node
{ fill: "lightgray" },
new go.Binding("fill", "color")),
makePort("T", go.Spot.Top, go.Spot.TopSide),
makePort("L", go.Spot.Left, go.Spot.LeftSide),
makePort("R", go.Spot.Right, go.Spot.RightSide),
makePort("B", go.Spot.Bottom, go.Spot.BottomSide)
);