Routing of links crosses over on diagonal

GoJS
1

I have created a simple node and link template, and specified the: fromSpot and toSpot as go.Spot.AllSides.

When I draw two links between a pair of nodes (using the mouse interactively), I get the following result where the links cross over diagonally.

image

I was expecting the links to to be drawn in a straight line (not crossed)
When I move Node 2 it looks better as follows.

image

But when I move Node 2 back to its original position, I get the same crossing links. How can I fix this?

Here is the code:

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
  <meta name="description"
    content="Node link Test" />          

  <script src="https://unpkg.com/gojs/release/go-debug.js"></script>


  <script>

    function init() {

      var $ = go.GraphObject.make;  // for conciseness in defining templates

      var diagram = $(go.Diagram, "myDiagramDiv"
        , {
          allowDrop: true
          , allowDelete: true
          , allowCopy: true
          , "grid.visible": true
        }
      );


      var nodeTemplate =
        $(go.Node, "Auto",  // the whole node panel
          {
            selectionAdorned: true
            , resizable: true
          }
          , new go.Binding("location", "loc")

          , $(go.Shape, "Rectangle",  // spot positions in the the mopde are aligned with respect to this
            {
              fill: "lightblue"
              , strokeWidth: 2
              , desiredSize: new go.Size(100, 100)
              , portId: ""
              , cursor: "crosshair"
              , fromLinkable: true, fromLinkableDuplicates: true
              , toLinkable: true, toLinkableDuplicates: true
              , fromSpot: go.Spot.AllSides
              , toSpot: go.Spot.AllSides      
              //, fromSpot: go.Spot.RightSide
              //, toSpot: go.Spot.LeftSide
            }
          )
          ,
          $(go.TextBlock,
            {
              name: "TitleTextBlock"
              , alignment: go.Spot.Top
              , alignmentFocus: go.Spot.Top
              , font: "bold 16px sans-serif"
              , margin: 10
              , desiredSize: new go.Size(80, 80)
              , editable: true
              , text: "node"
              , background: "lightcyan"
            }
            , new go.Binding("text", "nodeTitle")
          )

        );  // end Node

        var linkTemplate =
        $(go.Link
          , $(go.Shape,
            { strokeWidth: 2 }
          )
          , $(go.Shape,  // arrowhead
            { toArrow: "Triangle", stroke: null, scale: 1.5 }
            )
        );



      var nodeDataArray = [
        { nodeTitle: "Node 1", loc: new go.Point(0, 0) },
        { nodeTitle: "Node 2", loc: new go.Point(300, 0) },

      ];

      var linkDataArray = [];

      diagram.nodeTemplate = nodeTemplate;
      diagram.linkTemplate = linkTemplate;

      diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);


    }

    window.addEventListener('DOMContentLoaded', init);

  </script>

</head>

<body>

  <div id="myDiagramDiv" style="border: solid 1px blue; width:1000px; height:1000px"></div>


</body>

</html>
2

Thanks for pointing this out. This looks like a regression. We’ll investigate and get back to you.

3

This appears to have been fixed. Thankyou.