How to control spacing between vertical line/link?

vishalktbsi · September 18, 2014, 11:19pm

Hi folks,

I am using LayOut - LayeredDigraphLayout and LinkType- routing :go.Link.Orthogonal,
 curve :go.Link.JumpOver

If any one can help me on – how can I control space/gap between two vertical links/lines, I will be thankful.

Code:

layout: $(go.LayeredDigraphLayout,
{ layerSpacing: 200.0, columnSpacing: 100.0, direction:0.0, packOption:2, aggressiveOption: go.LayeredDigraphLayout.AggressiveLess, initializeOption: go.LayeredDigraphLayout.InitDepthFirstOut })

myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{
routing:go.Link.Orthogonal,
 curve: go.Link.JumpOver
 });

Screen 1: What is output?




 - So May I know how to increase line spacing between two lines/links ? ( check out red color highlighted box where you can see vertical lines) Smile

walter · September 18, 2014, 11:24pm

There is an undocumented and unsupported property, LayeredDigraphLayout.linkSpacing, that you could set. The default value is 4.

vishalktbsi · September 29, 2014, 2:14am

Thanks Walter, It works fine. Big smile

vishalktbsi · September 30, 2014, 2:20am

Hi Walter, May I know how can I manager line spacing in TreeLayout structure ?

Thanks & regards,
Vishal Patel
vishalmg@ymail.com
+91 7411667882

walter · September 30, 2014, 8:12am

If the diagram is tree-structured, and if the TreeLayout hasn’t been modified to cause any nodes to overlap, there can never be any unrelated links that would have coincident segments.

But you might want to consider using the whole node as a port and using a “Side” Spot, such as fromSpot == go.Spot.RightSide. It appears from your screenshot that you are specifying a specific toSpot and a specific fromSpot, but if you use “Side” Spot the links will automatically be separated from each other at the port. Please read http://gojs.net/latest/intro/connectionPoints.html for more information.

Yefim · September 24, 2015, 1:37pm

Hi Walter,
Is there a way to control distance between links in other layouts? I thought setting Link’ “margin” inherited from GraphObject might work, but it does not.
Regards,
Yefim

walter · September 24, 2015, 1:46pm

I don’t see how that should be a problem with layouts other than LayeredDigraphLayout.

What is the situation that you have? What layout are you using and how are the nodes and ports configured?

Yefim · September 24, 2015, 5:52pm

To clarify what I am talking about I just moved around nodes in DynamicPorts.html sample. As you can see,
links can run very close or overlap each other, and the question is how to define a minimal space between them.

walter · September 25, 2015, 2:49am

That sample does not use any Diagram.layout.

Both the standard routing and the custom routing used in that sample do not take into account the routing of any other links. So there’s no easy solution for your problem. I suppose you could further customize the CustomLink class in that sample by overriding computePoints to call the base method and then and make whatever adjustments to the route that you like. But what you want is not easy to accomplish well.

What would you expect to happen when there are N+1 links in a space with room for only N links?

Yefim · September 25, 2015, 12:52pm

Thank you for your response and clarification. Your question about N+1 links is a perfect example we - development - ask people who write requirements. In this case they most likely would add a cause like: If in a particular segment links with defined strikes and margins do not fit between nodes, such a segment has to collapse into a single link with a different graphical representation. And due to the fact that individual segments do not have their own graphical attributes, an implementation might involve more than only a custom link involved.

walter · September 25, 2015, 1:44pm

I think what you are suggesting for that case only works well if there are multiple links connecting the same two ports (or nodes). Then “collapsing” them into a single (thicker?) link makes sense. I have an example of that.

But that doesn’t help you with making sure that there is always a certain spacing around each middle link segment. Maybe we can work on this for the future. Sorry, I cannot make any promises.

Yefim · September 25, 2015, 6:40pm

Thank you. If will appreciate if you share your example, it might be useful in a different use case we have to deal with.

walter · September 25, 2015, 8:10pm

OK, here’s a “Merged Links” sample:

<!DOCTYPE html>
<html>
<head>
<title>Merged Links</title>
<!-- Copyright 1998-2015 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagram",
        { initialContentAlignment: go.Spot.Center, "undoManager.isEnabled": true });

    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        $(go.Shape, "Circle",
          { width: 30, height: 30, fill: "lightgray",
            portId: "", fromLinkable: true, toLinkable: true,
            fromLinkableDuplicates: true, toLinkableDuplicates: true
          }),
        $(go.TextBlock,
          new go.Binding("text", "key")),
        { // assume only one port per node
          linkConnected: function(node, link) {
            updateLinkWidths(link.fromNode, link.toNode);
          },
          linkDisconnected: function(oldnode, link) {
            updateLinkWidths(link.fromNode, link.toNode, link);
          }
        }
      );

    function updateLinkWidths(node1, node2, ignore) {
      if (node1 === null || node2 === null) return;
      var main = null;
      var total = 0;
      var it = node1.findLinksBetween(node2);
      while (it.next()) {
        var l = it.value;
        if (l === ignore) continue;
        if (main === null) {
          main = l;
        } else {
          l.opacity = 0;  // whole Link, not just path Shape
        }
        total++;
      }
      if (main !== null) {
        main.opacity = 1;
        main.path.strokeWidth = total;
        var ah = main.findObject("AH");
        if (ah !== null) ah.strokeWidth = total;
        var tb = main.findObject("TB");
        if (tb !== null) tb.text = total.toString();
      }
    }

    // doesn't work for reflexive links
    myDiagram.linkTemplate =
      $(go.Link,
        { curviness: 0, relinkableFrom: true, relinkableTo: true },
        $(go.Shape),
        $(go.Shape, { name: "AH", toArrow: "OpenTriangle" }),
        $(go.TextBlock, { name: "TB" })
      );

    myDiagram.model = new go.GraphLinksModel([
      { key: "Alpha" },
      { key: "Beta" },
      { key: "Gamma" }
    ],[
      { from: "Alpha", to: "Beta" }
    ]);
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagram" style="border: solid 1px black; width:100%; height:600px"></div>
  <p>
    Duplicate Links between Nodes are merged into a single Link whose strokeWidth is set to the number of links.
  </p>
  <p>
    This chooses one link among the duplicates to be made "thick"; it sets the opacity of all the other links to be zero.
    It is also possible to change the visibility of the links instead of their opacity, but that would affect code that
    ignores non-visible parts.
  </p>
</body>
</html>