go.Spot.Center on the port causing link's behavior wrong

I would like to put the endpoint of a link to align with the center of port. However, if I set the port and link as the way below, I got very weird behavior on the routing.

private makePort = (name: string, alignmentSpot: go.Spot, anchorSpot: go.Spot, output: boolean, input: boolean, fromDup: boolean, toDup: boolean) => {
    return this.$(go.Picture,
            desiredSize: new go.Size(8, 8),
            alignment: alignmentSpot,  // align the port on the main Shape
            alignmentFocus: go.Spot.Center,  // just inside the Shape
            portId: name,  // declare this object to be a "port"
            // fromSpot: anchorSpot,
            // toSpot: anchorSpot,  // declare where links may connect at this port
            fromSpot: go.Spot.Center,
            toSpot: go.Spot.Center,  // declare where links may connect at this port
            fromLinkable: output,
            toLinkable: input,  // declare whether the user may draw links to/from here
            cursor: "pointer",  // show a different cursor to indicate potential link point
            fromLinkableDuplicates: fromDup,
            toLinkableDuplicates: toDup,
            fromMaxLinks: 1 // only allow one ingoing connector per anchor point

    newDiagram.linkTemplate =
        this.$(go.Link,  // the whole link panel
                corner: 5,
                routing: go.Link.AvoidsNodes,
                curve: go.Link.JumpOver,
                relinkableFrom: true,
                relinkableTo: true,
                reshapable: true,
                resegmentable: true,
                // mouse-overs subtly highlight links:
                mouseEnter: (e: any, link: any) => { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; },
                mouseLeave: (e: any, link: any) => { link.findObject("HIGHLIGHT").stroke = "transparent"; }

Any idea? Before I am using go.Spot.Center on port, I have correct routing. However, my port is on the center of the boundary so that I would like to let the link endpoint align the center of port as well.


Yes, that is currently the correct behavior. We’re thinking about changing that behavior in v2.0.

You can avoid that routing behavior by setting fromEndSegmentLength and/or toEndSegmentLength to zero.

Thanks for quick reply. It resolves the issue in second picture. However, the first/last segment is always horizontally placed no matter which port I attached it to. So when ports is on the top and bottom boundary, it looks weird. Is that also expected?

Yes, I think so.