Self linked node routing is weird

Hi,

I have the following setting for links and nodes

    var GO = $;
    function getNodeTemplate () {
      return  GO(go.Node, 'Vertical',
        {
          locationObjectName: 'SHAPE',
          locationSpot: go.Spot.MiddleLeft,
          portSpreading: go.Node.SpreadingEvenly,
          deletable: false 
        },
        new go.Binding('location'),
        GO(go.Shape, 'RoundedRectangle',
          {
            name: 'SHAPE',
            stroke: 'gray', strokeWidth: 3,
            minSize: new go.Size(50, 10),
            maxSize: new go.Size(120, 50),
            fromLinkable: true,
            fromSpot: go.Spot.RightSide,
            fromLinkableDuplicates: true,
            fromLinkableSelfNode: true,
            toLinkable: true,
            toSpot: go.Spot.LeftSide,
            toLinkableDuplicates: true,
            toLinkableSelfNode: true,
            portId: ''
          }))
  function getLinkTemplate () {
      return GO(go.Link,
        {
          layerName: 'Background',
          adjusting: go.Link.End,
          fromEndSegmentLength: 50, toEndSegmentLength: 50,
          curve: go.Link.Bezier,
          deletable: false,
          selectionAdornmentTemplate: GO(go.Adornment, 'Link', GO(go.Shape, {isPanelMain: true, stroke: 'rgba(255, 251, 56, 0.3)', strokeWidth: 10}))
        },
        GO(go.Shape,
          {
            isPanelMain: true,
            strokeWidth: 10
          }),
        GO(go.TextBlock,
          {
            name: 'TEXT',
            stroke: 'black',
            opacity: 0,
            //segmentOffset: new go.Point(0, -10),
            segmentOrientation: go.Link.OrientAlong,
            font: '2.5em Segoe UI, sans-serif'
          })
      );

I want to have both self linked node and links between two nodes working. But somehow, the self-linked node looks like this. Notice the bottom link, it starts from the bottom and go back to the bottom. The left and right links are fine.

Could you please advise me how to resolve this problem ?

Regards,
Kakit

Yes, that is odd. This seems to work better:

    myDiagram.nodeTemplate =
      $(go.Node, 'Vertical',
        {
          portSpreading: go.Node.SpreadingEvenly,
          deletable: false
        },
        $(go.Shape, 'RoundedRectangle',
          {
            fill: "lightyellow", stroke: 'gray', strokeWidth: 3,
            desiredSize: new go.Size(120, 50),
            fromSpot: go.Spot.RightSide,
            toSpot: go.Spot.LeftSide,
            portId: ''
          }),
        $(go.TextBlock, new go.Binding("text"))
      )

    myDiagram.linkTemplate =
      $(CustomLink,
        {
          layerName: 'Background',
          fromEndSegmentLength: 50, toEndSegmentLength: 50,
          curve: go.Link.Bezier,
          deletable: false,
          selectionAdornmentTemplate:
            $(go.Adornment, 'Link',
              $(go.Shape,
                {
                  isPanelMain: true,
                  stroke: 'rgba(255, 251, 56, 0.3)',
                  strokeWidth: 10
                }))
        },
        $(go.Shape, { strokeWidth: 10 }),
        $(go.TextBlock,
          {
            name: 'TEXT',
            opacity: 0,
            segmentOrientation: go.Link.OrientAlong,
            font: '2.5em Segoe UI, sans-serif'
          })
      );

Where CustomLink is defined as:

  function CustomLink() {
    go.Link.call(this);
  }
  go.Diagram.inherit(CustomLink, go.Link);

  //CustomLink.prototype.computeEndSegmentLength = function(node, port, spot, from) {
  //  if (this.fromNode === this.toNode) return 20;
  //  return go.Link.prototype.computeEndSegmentLength.call(this, node, port, spot, from);
  //}

  CustomLink.prototype.computeSpot = function(from, port) {
    if (this.fromNode === this.toNode) return from ? go.Spot.Right : go.Spot.Left;
    return go.Link.prototype.computeSpot.call(this, from, port);
  }

I don’t know if you want to have an override of the computeEndSegmentLength method. If you do, uncomment out that method and adapt it for your own needs.