Node Overlapping - Genogram Layout

GoJS
1

Hello!

Is there a way to avoid node overlapping when using the GenogramLayout class, defined here ?

Here is a gif showing what is happening to the nodes.

I’ve found this sample, using the following function:


      function shiftNodesToEmptySpaces() {
        myDiagram.selection.each(function(node) {
          if (!(node instanceof go.Node)) return;
          // look for Parts overlapping the node
          while (true) {
            var exist = myDiagram.findObjectsIn(node.actualBounds,
                                                // only consider Parts
                                                function(obj) { return obj.part; },
                                                // ignore Links and the dropped node itself
                                                function(part) { return part instanceof go.Node && part !== node; },
                                                // check for any overlap, not complete containment
                                                true).first();
            if (exist === null) break;
            // try shifting down beyond the existing node to see if there's empty space
            node.position = new go.Point(node.actualBounds.x, exist.actualBounds.bottom+10);
          }
        });
      }

Can I use this function within the GenogramLayout class? If yes, where should I use it?

Thank you!

2

Normal usage of the GenogramLayout defined in the Genogram sample will not result in any nodes that overlap.

I tried adding twin children to the Genogram Twins sample, and everything was laid out as one would expect.

3

The only modification that I had made, was that one for using the BarLink class, the GenogramLayout remains the same.

Our Genogram Editor should allow the user to build the genogram, by dropping nodes from palettes to the diagram and doing the linking dynamically (as shown in the previous gif).

There are no data to initialize the main diagram, as in the Genogram Sample. How can we modify the GenogramLayout to avoid this node overlapping? Can the function I’ve mentioned be used there?

Best regards!

4

I can’t explain that. Can you get the unmodified Genogram sample to produce such behavior? I need a way to reproduce the problem.

Extending the Genogram sample to act as an editor is on the list of things we’d like to do. Until now the sample was only meant to be a way to show a static family tree.

5

Hi Walter,

Here is a pen reproducing the problem. If you prefer, [here is the code][https://drive.google.com/file/d/0B_6xvdD01pA6dDZucjVEZUR2c1k/view?pref=2&pli=1]. Would you have a look?

qFcxR.jpg847×593 70.8 KB

Thank you!

6

I tried downloading the ZIP file, but that failed because the file was quarantined due to Trojan:Win32/Spursint.A. I have edited your post to remove the link, but I left the text of the link.

7

You modified GenogramLayout.commitNodes to cause “spouseB” to be positioned too far away. Restoring it to the original code:

    spouseB.position = new go.Point(v.x+spouseA.actualBounds.width + 30, v.y);

avoids the overlapping nodes.

8

Yes, we need to increase the distance between the spouses based on the number of children they have, because it reduces the chances of children sharing the same port on the “Marriage Node”. Is it possible to avoid the nodes overlapping while keeping this rule?

9

You’ll need to increase the width of the LayoutVertex in GenogramLayout.prototype.add.

Your modification of the layout algorithm was incomplete and caused inconsistencies, because the layout did not know that the vertex was supposed to be much wider.

10

Thank you! Now the node overlapping is decreasing, we are counting the nodes in the same “row” and increasing the vertex width in the GenogramLayout.prototype.add with the following function

GenogramLayout.prototype.updateVertexWidthForSimblings = function(node: go.Node, vertex: go.Node) {    
    var nodesCount = this.countNodesInTheSameRow(node);
    vertex.width = 30 * nodesCount;
}