Bundle multiple arriving in the same port

I have a diagram with nodes and every node has 4 ports. Multiple links can arrive in 1 port and it could be many links.

Sometimes go.js nicely merges them towards the port so that it looks like 1 line

but sometimes it does not and it shows different lines. The implementation is the same, so I am a bit puzzled on how I could force it to merge the links towards the ports.

Example of when it does not merge them nicely:

I wonder if you have set the fromSpot property to a “…Side” Spot. Could you please check all of the fromSpot and toSpot settings/bindings? GoJS Link Connection Points on Nodes -- Northwoods Software

Thanks Walter. I guess I was not fully aware of there being next to fromPort also fromSpot. Now we already had this:

function makePort(name, align, spot, output, input) {

        return $(Shape, {
            fill: "transparent", // changed to a color in the mouseEnter event handler
            strokeWidth: 0, // no stroke
            width: 8, // if not stretching horizontally, just 8 wide
            height: 8, // if not stretching vertically, just 8 tall
            alignment: align, // align the port on the main Shape
            portId: name, // declare this object to be a "port"
            fromSpot: spot, // declare where links may connect at this port
            fromLinkable: output, // declare whether the user may draw links from here
            toSpot: spot, // declare where links may connect at this port
            toLinkable: input, // declare whether the user may draw links to here
            cursor: "pointer", // show a different cursor to indicate potential link point
            mouseEnter: (e, port) => {
                // the PORT argument will be this Shape
                if (!e.diagram.isReadOnly)
                    port.fill = "rgba(255,0,255,0.5)";
                    port.width = 8;
                    port.height = 8;
            mouseLeave: (e, port) => {
                port.fill = "transparent";
                port.width = 1;
                port.height = 1;

which we then called like this:

makePort(“L”, Spot.Left, Spot.Left, true, true),
makePort(“T”, Spot.Top, Spot.TopSide, true, true),
makePort(“B”, Spot.Bottom, Spot.BottomSide, true, true),
makePort(“R”, Spot.Right, Spot.RightSide, true, true),

It seems that if I change the port.width and port.height to 1, I do not have the issue anymore.

No, it would be better to remove “Side” from those Spots when calling makePort.

Do you mean removing fromSpot and toSpot from the makePort function? I am a bit confused to what you mean with “Side” in your reply.

When I remove fromSpot and toSpot and links still connect to the part but just go through the node first (depending on the port of course)

Change this code to be:

makePort(“T”, Spot.Top, Spot.Top, true, true),
makePort(“B”, Spot.Bottom, Spot.Bottom, true, true),
makePort(“R”, Spot.Right, Spot.Right, true, true),

You already did the correct thing for the left port.

Wow, interesting! Thanks a lot. I might bug you with another issue I am struggling with since some time now, but let’s try some things first :-)