How draw a straight Link using port


The port is used in an object like the one shown below. Let’s check the highlighted part in screenshot 1 and implement the link with the port shown in screenshot 2.


const makePort = function (id: string, spot: go.Spot, output: boolean, input: boolean) {
return $(go.Shape, ‘Circle’,
opacity: .5,
fill: null, strokeWidth: 0, desiredSize: new go.Size(7, 7),
portId: id, alignment: spot,
alignmentFocus: spot, // just inside the Shape
fromSpot: spot, toSpot: spot, // declare where links may connect at this port
fromLinkable: output, toLinkable: input,
cursor: “pointer”

using above code to create the port.

Don’t set the fromSpot or toSpot on the port (nor override it on the link).

Or you could set them to go.Spot.None.

Note that go.Spot.None would not make sense for the alignment or alignmentFocus properties.