Not able to add port in Custom location in the SVG image

The following image shows an example of what is drawn when I try to add the port at a particular location in the image.


But I want this type of implementation.


Code snippet

makePort(‘r’, go.Spot.Right, true, true),
const makePort = function (id: string, spot: go.Spot, output: boolean, input: boolean) {
return $(go.Shape, ‘Circle’,
opacity: .5,
fill: ‘gray’, 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: true, toLinkable: true,
//cursor: “pointer”

Is there a reason you do not set fromSpot or toSpot?

If you do set them, you can set fromShortLength and toShortLength to -7, or something like that.