The issue with ports

The element we have looks as following:

As you can see there is a small port at the bottom of element. The code looks as following:

var image8Template =
    $(go.Node, "Vertical", nodeStyle(),
    $(go.Picture, "Images/ElectricalElements/Tr_2.svg"),
    $(go.Shape, "Rectangle", portStyle1(true),  // the only port
        { portId: "", alignment: new go.Spot(0.6, 0.5) })
    );

function portStyle1(input) {
    return {
        desiredSize: new go.Size(3, 3),
        fill: "black",
        fromLinkable: input,
        toLinkable: !input,
        toMaxLinks: 2,
        cursor: "pointer"
    };
}

The issue is I can’t move port where I want that is I can only change x position and it’s at the bottom. How can I move port anywhere, for example move it to the top of the element?

I’ve figured it out. Excuse me.

I bet you are using either a “Spot” Panel or a “Position” Panel, rather than a “Vertical” Panel.

I’ve used “Vertical” Panel, but put the port above picture.