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

GoJS
1

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.

-Chuan

2

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.

3

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?

4

Yes, I think so.