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

GoJS
1

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

imagex

But I want this type of implementation.

image

Code snippet
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”
}
);

2

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.