Routing of many links between nodes that are close to each other

GoJS
1

image
image822×700 78.5 KB

My node is looking like this, when it has around 32 ports each with straight links

After dragging separately,

image
image1614×726 50.5 KB

R
R1126×1125 69.2 KB

Snippet:

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center, background: "lightgray", maxSize: new go.Size(300, NaN) },
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    $(go.Shape, "Rectangle",
      {
        fill: "white", background: "lightgray", stroke: "transparent", strokeWidth: 3,
        portId: "",
        fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides
      }),
    $(go.Panel, "Horizontal",
      { background: "lightgray", defaultAlignment: go.Spot.Bottom, margin: new go.Margin(3, 3) },
      $(go.TextBlock, { background: "lightgray", text: 'AXOS', font: "10px sans-serif", stroke: "blue", alignment: go.Spot.Left, angle: -90 }),
      $(go.Panel, "Horizontal",
        $(go.TextBlock, { font: "16px sans-serif", width: 25, height: 25, text: 'e9', stroke: "white", background: 'orange' }),
        $(go.TextBlock, { font: "16px sans-serif", text: '2', stroke: "blue", alignment: go.Spot.Right })
      ),

    ),
    $(go.TextBlock,
      new go.Binding("text"))
  );

myDiagram.linkTemplate =
  $(go.Link,
    {
      routing: go.Link.AvoidsNodes, corner: 1, curve: go.Link.JumpOver,
      toolTip:  // define a tooltip for each node that displays the color as text
        $("ToolTip",
          $(go.TextBlock, { margin: 4 },
            new go.Binding("text", "", (data) => { return `(From port : ${data?.fromPort}, To Port : ${data?.toPort})` })),
        )  // end of Adornment
    },
    //new go.Binding("routing", "straight", s => s ? go.Link.Normal : go.Link.AvoidsNodes),
    $(go.Shape, "Rectangle", { stroke: "red", strokeWidth: 2 }),
    $(go.Shape, 
      {
        margin: 10, width: 7, height: 7, segmentIndex: 0, segmentOffset: new go.Point(0, 0), fill: "#672056", stroke: "#672056",
        toolTip:  // define a tooltip for each node that displays the color as text
          $("ToolTip",
            $(go.TextBlock, { margin: 4 },
              new go.Binding("text", "fromPort"))
          )  // end of Adornment
      }),
    $(go.Shape,       {
        width: 7, height: 7, segmentIndex: -1, segmentOffset: new go.Point(0, 0), fill: "blue", stroke: "blue",
        toolTip:  // define a tooltip for each node that displays the color as text
          $("ToolTip",
            $(go.TextBlock, { margin: 4 },
              new go.Binding("text", "toPort"))
          )  // end of Adornment
      })
  );
2

When the nodes are far enough apart for the links to be routed separately, I think the results look pretty good.

When the nodes are too close to each other, what do you want?

3

image
image1651×768 121 KB

I dont want nodes to be close in this case

4

Are your nodes now defined like those in Dynamic Ports ?

I hope so, because there’s far more ports than you said there would be in the original forum topic.

Regarding spacing – increase the ForceDirectedLayout.defaultElectricalCharge and defaultSpringLength.

5

yes, I followed your approach of adding ports in the links.
Thanks @walter

6

No, that’s not what I asked about. It seems to me that you want to define nodes with rows /columns of variable numbers of ports on the four sides of each node. It would have been helpful if you had said that at the beginning, because I don’t think any code that I gave you in that forum topic is of any value to you.

8

It seems to me that you want to define nodes with rows /columns of variable numbers of ports on the four sides of each node. It would have been helpful if you had said that at the beginning, because I don’t think any code that I gave you in that forum topic is of any value to you.

@walter
Did I conveyed wrong? If so sorry for that.
I tried to convey what ever you are describing above in bold text.
Is that possible?
Please help on this.

9

Throw away all of the code that I gave you from the other forum topic. Well, keep the Diagram.layout and maybe the Diagram.linkTemplate.

Start again from the Dynamic Ports sample. I’m not sure you will want to use its CustomLink class – you can try it both ways, initially without.

10

Maybe this is of interest to you, although the focus was on doing a “circular” layout, around the four sides of a rectangle.
Border Layout (External)