Hi, I need to create 2 ports with to different definitions. One is single directional and another is multi directional. I have created tow different ports definitions and i want to place it one after another. But it collides at one spot(if I give row:0, column:1). If I give different rows and column it works but I want them one after another.I have attached the code and the images below. Please help
$(go.Panel, "Horizontal",
new go.Binding("itemArray", "topArray"),
{
row: 0, column: 1,
alignment: go.Spot.Center,
itemTemplate:
$(go.Panel,
{
_side: "top",
fromSpot: go.Spot.Top,
fromLinkable: true,
cursor: "pointer",
},
new go.Binding("portId", "portId"),
$(go.Shape, "Rectangle",
{
stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(0, 0)
},
{ toolTip: sharedToolTipPort },
new go.Binding("fill", "portColor"))
) // end itemTemplate
}
), // end Horizontal Panel
$(go.Panel, "Horizontal",
new go.Binding("itemArray", "topYellowArray"),
{
row: 0, column: 0,
itemTemplate:
$(go.Panel,
{
_side: "top",
fromSpot: go.Spot.Top,
toSpot: go.Spot.Top,
fromLinkable: true,
toLinkable: true,
cursor: "pointer",
},
new go.Binding("portId", "portId"),
$(go.Shape, "Rectangle",
{
stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(0, 0, 0, 0),
},
{ toolTip: sharedToolTipPort },
new go.Binding("fill", "portColor"))
) // end itemTemplate
}
),
Here on the top side, the green and the yellow dot should come one after another.