How to position dynamic ports added to group?

@marin wrote:

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:
http://gojs.net/latest/samples/dynamicPorts.html - I learned how to add a port dynamically
https://gojs.net/latest/samples/draggablePorts.html - 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?

Posts: 1

Participants: 1

Read full topic