Hi,
I’d like to create X number of ports on group, depending on how much links are connected to nodes inside the said group. I drew inspiration from these samples:
Dynamic Ports - I learned how to add a port dynamically
Movable, Copyable, Deletable Ports - I “borrowed” only the shape of the port.
However, in my diagram, the ports seem to be located one over the other, and their position on the group ins’t really good.
Here is my template code:
var getPortStyle = function (arrayName) {
var position = arrayName === 'inputsArray' ? new go.Spot(0, 0.5) : new go.Spot(1, 0.5);
return $(go.Panel, 'Spot', { alignment: position },
new go.Binding('itemArray', arrayName),
{
itemTemplate: $(go.Panel, {
fromSpot: go.Spot.Right,
fromLinkable: arrayName !== 'inputsArray',
toSpot: go.Spot.Left,
toLinkable: arrayName === 'inputsArray',
cursor: 'pointer',
portId: ''
},
new go.Binding('portId', 'portId'),
$(go.Shape, {
fill: 'lightgray',
stroke: 'gray',
geometryString: 'F1 m 0,0 l 5,0 1,4 -1,4 -5,0 1,-4 -1,-4 z',
spot1: new go.Spot(0, 0, 5, 1),
spot2: new go.Spot(1, 1, -5, 0)
})
)
}
);
};
$(go.Group, go.Panel.Auto, {
isSubGraphExpanded: false,
ungroupable: true
},
$(go.Shape, group.shape, group.details),
getPortStyle(groupPortsNames.in),
$(go.Placeholder, {alignment: go.Spot.TopLeft}),
$(go.TextBlock, textBlock,
new go.Binding('text', 'text')));
Is there any other example that may be helpful?