If i mouse enter and leave from node Node UI again become good.
As you can see initially nodes were looking bad and as i mouse entered UI becomes good.
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)
);
hi walter is it possible to give hight or width equal to node height or width?