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 :-)