Links with intersection not behaving correctly

GoJS
1

Hi there, I’m using genogram code from the example here: Genogram

I want parents connected to their children in such a way that links form an intersection (see images below).

It behaves as expected when I move the parent nodes - all the parent-child links get recalculated. When I move any of the children, all the parent-child links should get recalculated too, but it doesn’t work as expected. How can I achieve this? Is it possible to do this just by using links or do I need to use a separate node for the intersection? Thanks for help.

Here is the code I’m using:

  myDiagram.linkTemplate = // for parent-child relationships
    $(
      TwinLink(),
      {
        routing: go.Link.Orthogonal,
        corner: 5,
        layerName: "Background",
        selectable: false,
      },
      $(go.Shape, { stroke: "#424242", strokeWidth: 2 })
    );

  function TwinLink() {
    class TwinLink extends go.Link {
      public computePoints(): boolean {
        const result = go.Link.prototype.computePoints.call(this);
        const pts = this.points;
        const parents = this.fromNode;
        let children = 0;
        let sumX = 0;
        const it = parents?.findNodesOutOf();
        while (it?.next()) {
          const child = it.value;
          children++;
          sumX += child.location.x;
          if (children > 1) {
            const midX = sumX / children;
            const oldp = pts.elt(pts.length - 3);
            pts.setElt(pts.length - 3, new go.Point(midX, oldp.y));
            pts.setElt(pts.length - 2, pts.elt(pts.length - 1));
          }
        }
        return result;
      }
    }
    return TwinLink;
  }

First render:
first-render

When I move a child, the links get disconnected:
moving-child-actual

Expected:
moving-child-expected

2

You can make sure that all links have their horizontal segment at the same Y point by using code like this:

    var midX = sumX / children;
    var midY = pts.elt(0).y + 57;  //??? adjust to suit your node sizes and layer spacing
    pts.setElt(pts.length-4, new go.Point(pts.elt(0).x, midY));
    pts.setElt(pts.length-3, new go.Point(midX, midY));
    pts.setElt(pts.length-2, pts.elt(pts.length-1));

I think that might take care of the first issue that you raise. The second one is that the routes of the other links, to siblings, aren’t right any more after moving one of them. That you can remedy by defining a “SelectionMoved” DiagramEvent listener that calls Link.invalidateRoute on each of those other links.

3

How can I retrieve those other links in “SelectionMoved” DiagramEvent?

4

I haven’t tried this, but something like:

const source = node.findTreeParentNode();
if (source) {
  source.findTreeChildrenLinks().each(link => { . . . });
}
5

This is what worked for me. Thank you very much.

  myDiagram.addDiagramListener("SelectionMoved", (e) => {
    e.diagram.links.each((l) => {
      l.invalidateRoute();
    });
  });
6

That’s overkill, but I guess it should work.

7

You are right. This time I was able to use your solution with findTreeChildrenLinks instead.