Avoiding nodes when linking the ports on nodes

GoJS
1

Hi everyone,
I am linking some ports that i have on the nodes and the links are not avoiding the nodes and i have already set routing: go.Link.AvoidsNodes .So what am i doing wrong ?

Here is my linkTemplate

 // Defining template for links
 myDiagram.linkTemplate = 
 GO(go.Link,  // the whole link panel
      { 
        selectable: true,
        relinkableFrom: true, 
        relinkableTo: true, 
        reshapable: true,
        routing: go.Link.AvoidsNodes,
        curve: go.Link.JumpOver,
        corner: 5,
        toShortLength: 4
      },
      new go.Binding("points").makeTwoWay(),

      GO(go.Shape,  // the link path shape
        { isPanelMain: true, strokeWidth: 1 }
      ),

      GO(go.Shape,  // the arrowhead
        { toArrow: "Standard", stroke: null }
      ),

      GO(go.Panel, "Auto",
        new go.Binding("visible", "isSelected").ofObject(),
        GO(go.Shape, "RoundedRectangle",  // the link shape
          { fill: null, stroke: null }
        )
      )
  );

As you can see links are not avoiding the nodes…

2

That route does not cross over any other Nodes.

You have to make sure the fromSpot and toSpot direct the link route’s end segment away from the port’s node.

3

Sorry,didn’t understand much from what you said …can you please elaborate it more?

4

Have you read GoJS Links -- Northwoods Software and GoJS Link Connection Points on Nodes -- Northwoods Software, which discuss link spots?

5

So I have to set the some value to fromSpot and toSpot in the template which is responsible for making these spots.

6

Yes, either on the ports or on the links.

Caution: some layouts will set the Link.fromSpot and Link.toSpot. Those layouts have properties that control whether they set those properties.

7

When i set fromSpot and toSpot property to left, right,top or bottom.It changes the how the links starts to come from end segments but it doesn’t prevent the links to overlap the nodes.

8

That might be because the nodes are too close to each other. Or because you are forcing the “to” end of the route to go through the “to” node. Or both.

9

So for these red spots how can i find out whether a spot is on left,right,top or bottom side of the node because i make them on wherever mouse click is performed on the node.
If i can find that then i think i can set fromSpot and toSpot properties for each spot like this…

This is the template for spots :

    { // each spot is represented by a Panel holding a circular Shape
      // at a particular alignment relative to the "BODY"
      itemTemplate:
      GO(go.Panel,
         {toLinkable: true,fromLinkable:true},
          new go.Binding("portId", "portId"),
          GO(go.Shape, "Circle",
            {
              fill: "red",
              strokeWidth: 0, width: 8, height: 8
            }
          ),
          new go.Binding("fromSpot","fromSpot"),
          new go.Binding("toSpot","toSpot"),
          new go.Binding("alignment", "spot", go.Spot.parse).makeTwoWay(go.Spot.stringify)
        ),

      // when the user clicks on the node, add a "spot"
      click: function(e, obj) {
         if($('#StopSign').data('clicked')){
            e.diagram.startTransaction();
            debugger;
            // convert click point into Spot in node's bounds
            var pt = e.documentPoint;  // in document coordinates
            var node = obj.part;
            var b = node.actualBounds;  // will be in document coordinates
            var L=Math.max(0, Math.min((pt.x - b.x) / b.width, 1))
            var R=Math.max(0, Math.min((pt.y - b.y) / b.height, 1))
            var spot = new go.Spot(L,R);
            setSpot(position of spots); //position will tell whether the spot is on left/right/top/bottom 
            
            var spotsArray = node.data.spots;
            if (!Array.isArray(spotsArray)) spotsArray = node.data.spots = [];
            var name ="spot_"+random_string();
            e.diagram.model.addArrayItem(spotsArray, { spot: go.Spot.stringify(spot),portId:name,fromSpot:setSpot(position of spots),toSpot:setSpot(position of spots) });
            e.diagram.commitTransaction("added spot");
          }
      }

And here is the function i suppose i can use to set fromSpot and toSpot according to the spots positions

var setSpot = function(position of spot){
  var spot;
  if(spot is on left side of node ){
    spot = go.Spot.Bottom;
    return spot;
  }
  else if(spot is on right side of node ){
    spot = go.Spot.Right;
    return spot;
   }
   else if(spot is on top side of node ){
    spot = go.Spot.Top;
     return spot;
   }
   else if(spot is on bottom side of node ){
    spot = go.Spot.Bottom;
     return spot;
  }
}
10

Here’s what I just tried:

// assume fx and fy are fractional distances within the node's actualBounds,
// between 0 and 1 inclusive
function computeSide(fx, fy) {
  if (fx >= fy) {
    if (fx >= 1 - fy) {
      return go.Spot.Right;
    } else {
      return go.Spot.Top;
    }
  } else {
    if (fx >= 1 - fy) {
      return go.Spot.Bottom;
    } else {
      return go.Spot.Left;
    }
  }
}

// I used this mouseOver event handler for debugging this function:
myDiagram.nodeTemplate =
  $(go.Node, . . .,
    {
      mouseOver: function(e, node) {
        var pt = e.documentPoint;
        var b = node.actualBounds;
        var fx = (pt.x - b.x) / (b.width || 1);
        var fy = (pt.y - b.y) / (b.height || 1);
        console.log(computeSide(fx, fy));
      }
    },
    . . .
  );
11

Thank you so much.