Link Overlapping Issue in Case Self Links

GoJS
1

HI
I am facing Link Overlapping Issue in Case Self Link for Node, I am Using LayeredDigraphLayout
and using two Link templates for linking one for Normal linkages And Second for Self-links.

Layout:
layout: $(go.LayeredDigraphLayout,
{
direction: 90,
layerSpacing: 120,
columnSpacing: 40,
linkSpacing: 60,
setsPortSpots: false,
packOption: go.LayeredDigraphLayout.PackMedian, //change For Bug
// setsChildPortSpot: false
}),

Link Template:
//these Template for Normal Linkages

  1. myDiagram.linkTemplatemap1 =
    $(go.Link,
    {
    curviness: 5,
    layerName: “Background”,
    routing: go.Link.Orthogonal,
    corner: 8,
    // mouse-overs subtly highlight links:
    mouseEnter: (e, link) => link.findObject(“HIGHLIGHT”).stroke = “rgba(92, 8, 51, 0.26)”,
    mouseLeave: (e, link) => link.findObject(“HIGHLIGHT”).stroke = “transparent”,
    selectionAdorned: false,
    //setsPortSpot: false, setsChildPortSpot: false//
    },

//these Template for Self-Links
2. var SelflinkTemplate =
$(go.Link,
{
layerName: “Background”,
routing: go.Link.AvoidsNodes,
//fromSpot: go.Spot.BottomSide,
//toSpot: go.Spot.Top,
fromSpot: go.Spot.BottomSide,
toSpot: go.Spot.Right,
corner: 5,
//setsPortSpot: false, setsChildPortSpot: false//
},

Diagram:

Self-link-Overlap_29_May_23_1
Self-link-Overlap_29_May_23_11545×790 104 KB

2

LayeredDigraphLayout (and some other layouts) purposely exclude consideration of reflexive links, so they are not routed by the layout.

I suggest that you customize the layout so that the fromSpot and toSpot of reflexive links are set to values suitable for your app. Perhaps something like:

  new go.Diagram(. . .,
    {
      layout: $(go.LayeredDigraphLayout,
        {
          direction: 90,
          alignOption: go.LayeredDigraphLayout.AlignAll,
          commitLinks: function() {  // method override
            go.LayeredDigraphLayout.prototype.commitLinks.call(this);
            this.network.vertexes.each(v => {
              if (v.node) {
                v.node.findLinksOutOf().each(link => {
                  if (link.fromNode === link.toNode) {
                    link.fromSpot = new go.Spot(0.999, 1, -10, 0);
                    link.toSpot = go.Spot.Right;
                    link.curviness = 0;
                  }
                });
              }
            });
          }
        }),
      . . .
3

HI
As per your suggestion I am customize the layout but still overlapping happens.

4

I cannot help you unless you provide sufficient details so that I can reproduce the issue.

5

Hi
I am using Custom layout as you suggest but Still Overlapping Happens.
1.layout:
myDiagram =
$(go.Diagram, “myDiagramDiv”,
{
contentAlignment: go.Spot.Center,
layout: $(go.LayeredDigraphLayout,
{
direction: 90,
layerSpacing: 120,
columnSpacing: 40,
linkSpacing: 4,
setsPortSpots: false,
commitLinks: function() { // method override
go.LayeredDigraphLayout.prototype.commitLinks.call(this);
this.network.vertexes.each(v => {
if (v.node) {
v.node.findLinksOutOf().each(link => {
if (link.fromNode === link.toNode) {
link.fromSpot = new go.Spot(0.999, 1, -10, 0);
link.toSpot = go.Spot.TopSide;
link.curviness = 0;
}
});
}
});
}
}),

2.and Link Templates I am already share in previous response.
3.Diagram:

Self-linkOverlap_31_May_23_1
Self-linkOverlap_31_May_23_11477×797 82.8 KB

6

I cannot reproduce the problem. Here’s my result, and the code:
image

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      layout: $(go.LayeredDigraphLayout,
        {
          direction: 90,
          alignOption: go.LayeredDigraphLayout.AlignAll,
          setsPortSpots: false,
          commitLinks: function() {  // method override
            go.LayeredDigraphLayout.prototype.commitLinks.call(this);
            this.network.vertexes.each(v => {
              if (v.node) {
                v.node.findLinksOutOf().each(link => {
                  if (link.fromNode === link.toNode) {
                    link.fromSpot = new go.Spot(0.999, 1, -10, 0);
                    link.toSpot = go.Spot.Right;
                    link.curviness = 0;
                  }
                });
              }
            });
          }
        }),
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 100, height: 40 },
    $(go.Shape, { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      new go.Binding("text"))
  );

myDiagram.linkTemplate =
  $(go.Link,
    {
      curviness: 5,
      layerName: "Background",
      routing: go.Link.Orthogonal,
      corner: 8,
      fromSpot: go.Spot.BottomSide,
      toSpot: go.Spot.Top,
      // mouse-overs subtly highlight links:
      //mouseEnter: (e, link) => link.findObject("HIGHLIGHT").stroke = "rgba(92, 8, 51, 0.26)",
      //mouseLeave: (e, link) => link.findObject("HIGHLIGHT").stroke = "transparent",
      //selectionAdorned: false,
    },
    $(go.Shape)
  );

myDiagram.linkTemplateMap.add("R",
  $(go.Link,
    {
      layerName: "Background",
      routing: go.Link.AvoidsNodes,
      // fromSpot: go.Spot.BottomSide,
      // toSpot: go.Spot.Right,
      corner: 5,
    },
    $(go.Shape)
  ));

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: 1, to: 3 },
  { from: 1, to: 1, category: "R" },
  { from: 1, to: 4 }
]);
  </script>
</body>
</html>