Customization link template for node linking

GoJS
#1

Hi, we want to achieve link functionality in our diagram as shown in the below figure-:

image
image515×667 66.9 KB

We have tried a few properties in our diagram to achieve the link functionality as shown in the above figure. Here are our code -:

$(go.Link,
{ selectable: true, selectionAdornmentTemplate: ProcesslinkSelectionAdornmentTemplate }, { relinkableFrom: true, relinkableTo: true, reshapable: true }, {
routing: go.Link.Orthogonal,
curve: go.Link.Bezier,
curviness: 0,
smoothness:1,
adjusting: go.Link.Stretch,
fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides,
},

From this code we are unable to achieve the expected output, Here is snippets of our output-:

image

The functionality we want to achieve-:

    1. If Nodes are arranging vertically straight then links should follow a straight path.
    1. If Nodes are arranging vertically but not in a straight line then the link should follow the curve path with the shortest path (As per defined figure).
    1. If another node is drag-drop in b/w two connected nodes then the link should follow avoid nodes with curve path (with respective to drag-drop node).
#2

Don’t use Orthogonal routing, don’t use spots (fromSpot or toSpot), don’t blindly set curviness to zero.

Chances are that you are using LayeredDigraphLayout. If so, to avoid having it set link spots as part of its routing, set LayeredDigraphLayout.setsPortSpots to false.

Example: https://gojs.net/latest/samples/beatPaths.html

#3

Hi, we want to achieve link functionality in our diagram as shown in below figure-:

  1. Routing should be normal but when there is any node present in between two connected nodes than link should avoid the middle node as shown in below figure.
  2. When we draw a link in between two nodes and there is node present in middle of two nodes than link should avoid node in curved path.
  3. Initially routing of link should be Normal.

image

In this diagram we have using Routing as normal in link template for the following reason as shown in below figure.

image

Our link template is as shown in below figure:-

image

Need to Customize the link template so please provide some function to override this functionality.
In my link template

#4

Why not like the links in https://gojs.net/latest/samples/beatPaths.html ?

#5

In https://gojs.net/latest/samples/beatPaths.html only curved link functionality is there…!
where as, In our case link should be straight(Normal Routing) but when there is any node is present in b/w connected node(on link) than link should avoid that particular node (AvoidNodes Routing) in a curved path.
Is there any event to track that blank node is present in between nodes during draw links?

#6

Have you tried it in your app?

#7

Yes, We had implemented (Beat Path links) in our application. But unable to meet the requirement.
here is the snapshot of our diagram after implementation

Untitled
Untitled1200×675 15.5 KB

  1. Here, Link is still overlapping the middle nodes, Instead it should avoid the stop node(middle one).
  2. Also Links must follow straight path if there is no node present in b/w connected nodes. Otherwise, it will follow curved path to avoid middle node according to our requirement.
#8

Try not setting LayeredDigraphLayout.setsPortSpots to false, and don’t set or bind fromSpot or toSpot.

#9

Here’s a complete example:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          layout: $(go.LayeredDigraphLayout)
        });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape,
          { fill: "white", portId: ""},
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text"))
      );

    myDiagram.linkTemplate =
      $(go.Link,
        { curve: go.Link.Bezier, fromEndSegmentLength: 30, toEndSegmentLength: 30 },
        $(go.Shape),
        $(go.Shape, { toArrow: "Standard" })
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue" },
      { key: 2, text: "Beta", color: "orange" },
      { key: 3, text: "Gamma", color: "lightgreen" },
      { key: 4, text: "Delta", color: "pink" }
    ],
    [
      { from: 1, to: 2 },
      { from: 2, to: 3 },
      { from: 3, to: 4 },
      { from: 2, to: 4 }
    ]);
  }
  </script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>

The result:
image

#10

Hi there,
Could you please suggest any event to sense the node in b/w two connected nodes during link drawn.so we can perform our action on link(routing to avoid node from link during link drawn) on the basis of that node.
Because above solution is not working as per our requirement.

#11

OK, I must have misunderstood your requirements. Are you saying that normal straight routing is fine all of the time except when the path happens to go across a node? And at that time you want the path to be curved around that node? If there are multiple nodes that a straight route would cross, how would you want the path to go?

#12
  1. Yes, Links should be straight b/w nodes if there is clear path(no nodes overlap any link) b/w connected nodes i.e. routing should be normal in this case.
  2. If any node overlap any link b/w nodes than link should avoid that nodes(follow curved path to avoid node overlap) i.e. routing should be curved(avoid nodes) in this case.
  3. See the image below for the reference…
    image
    image515×667 66.9 KB
#13

Hmmm. I’m still not understanding, because I thought what I gave you above satisfies those requirements.

But you might want to set Link.curviness to 0 on the Link template. And maybe you want to set LayeredDigraphLayout.setsPortSpots to false.

For example:
image