Self reference link

[Giosk]

Hello,
I’m working with diagram and I have a problem with self reference links.
I’m trying to obtain a solution like this:

but I got this

I followed the example here trying to change the link behavior but without success.

This is my entity template

myDiagram.nodeTemplate = $(
        go.Node,
        "Auto",
        {
          desiredSize: new go.Size(70, 30),
        },
        $(go.Shape, "RoundedRectangle", {
          parameter1: 20,
          fill: "lightgray",
        }),
        $(
          go.TextBlock,
          {
            stroke: "#ff0000",
            font: "18px Font-Awesome",
            text: "foo bar",
          }
        )
      )

and the link template

  myDiagram.linkTemplate = $(
    go.Link,
    {
      reshapable: true,
    },
    $(go.Shape, { strokeWidth: 1.5 }),
    $(go.Shape, { toArrow: "standard", stroke: null }),
    $(
      go.Panel,
      "Auto",
      { cursor: "move" },
      $(go.Shape, {
        fill: $(go.Brush, "Radial", {
          0: "rgb(240, 240, 240)",
          0.3: "rgb(240, 240, 240)",
          1: "rgba(240, 240, 240, 0)",
        }),
        stroke: null,
      }),
      $(
        go.TextBlock,
        "my label here",
        {
          textAlign: "center",
          font: "10pt helvetica, arial, sans-serif",
          stroke: "black",
          margin: 4,
          editable: true,
        },
        new go.Binding("text", "text").makeTwoWay()
      )
    )
  )

Does it exist a possible solution?
Thanks

[walter]

I think your reflexive Links need to have:

{
  routing: go.Link.Orthogonal,
  fromSpot: go.Spot.Bottom,
  toSpot: go.Spot.Left
}

Or maybe BottomSide.

You might not want to use some or all of those properties on you other links, so you will either need to use bindings or a different link template to get those different properties.

[Giosk]

Hello Walter thanks for your answer. I’d like to know if it is possible to draw the links following these rules:

1. the link has to be as long as its label;

2. in this example the self reference links are drawn starting from the top or bottom of the node, and they start/arrive from/to the same point. I need that my links start/arrive from/to different points. I’ve set the setsPortSpot: false, setsChildPortSpot: false but it affects only links that not refer to themselves.

Thanks

[walter]

You could try using BottomSide and LeftSide Spots. But the routing of reflexive links doesn’t know about any link labels, so you are going to have to route them yourself in an override of TreeLayout.commitLinks. Call the super method first.

[Giosk]

Hello Walter,
I created a solution using gojs at the best of I can and this is the result:

then I created a desired solution with another software as you can see here:

How can I configure entities template and links template in order to obtain the desired solution?

The first problem I met, is the space between links that are drawn overlapped.

The second problem are the labels that are not positioned in order to avoid overlapping and are not always readable.

The third problem is in case of self reference link, I’d like to obtain links long as their label.
You suggested in your previous response to override the TreeLayout.commitLinks method and create a custom logic.

More in general, does it exist a way to obtain the desired target solution without implementing custom logic and custom layouting code?
If it doesn’t exist, in a future do you release an improvement to solve all the above problems?

Thanks
Giorgio

[walter]

If you don’t use AvoidsNodes routing, but just set routing: go.Link.Orthogonal, is the routing better or worse?

You can position the labels to be on the left side by setting their segmentOffset: new go.Point(0, NaN). But as I have said, the layout and the routing does not usually take the labels into account.

Yes, we’d like to improve the results, but we cannot promise anything by any specific date.

[Giosk]

It seems worse with routing: go.Link.Orthogonal

[walter]

??? Are you not using LayeredDigraphLayout? It’s clearly not tree-structured.

[Giosk]

I switched from TreeLayout to LayeredDigraphLayout and the solution seems to suffer of the aforementioned problems

[walter]

Well, that looks better than with TreeLayout. I suppose you could set LayeredDigraphLayout.linkSpacing to 8, to separate out the horizontal segments of the links a bit better.

It is also possible to customize the layout to know about link labels and route accordingly, but at the moment I’m unable to find such an implementation.

[Giosk]

Hello Walter,
I set the LayeredDigraphLayout.linkSpacing to 8 and this is the result

I can’t see a huge change in the final result.
Do you have other proposals?
Thanks

[walter]

You could force the link labels to be narrow, by setting TextBlock.maxSize to new go.Size(50, NaN), or something like that.