Genogram Identical Twin Layout Issue

[YosuaSalim]

I’m developing twin and identical twin nodes in VueJS based Genogram.
I read a topic in this forum (Mixing orthogonal and normal linking) and tried implementing it. It works perfectly for twin nodes, but not for identical twin nodes.

First identical twin is generated correctly, but second identical twin is not

Is there a settings that I should configure to fix the layout problem ?

Here is the identical twin setup code (similar with the one in the forum)

    var T1 = myDiagram.findNodeForKey(identicalTwin[0].key);
    var T2 = myDiagram.findNodeForKey(identicalTwin[1].key);
    var TPL1 = T1.findTreeParentLink();
    var TPL2 = T2.findTreeParentLink();
    var TLN1 = $(go.Node);
    TLN1.labeledLink = TPL1;
    TLN1.segmentIndex = -2;
    TLN1.segmentFraction = .5;
    myDiagram.add(TLN1);
    var TLN2 = $(go.Node);
    TLN2.labeledLink = TPL2;
    TLN2.segmentIndex = -2;
    TLN2.segmentFraction = .5;
    myDiagram.add(TLN2);
    var TL = $(go.Link, {
      isLayoutPositioned: false,
      isTreeLink: false
    }, $(go.Shape, {
      strokeWidth: 2,
      stroke: "black"
    }));
    TL.fromNode = TLN1;
    TL.toNode = TLN2;
    myDiagram.add(TL);

[walter]

For some reason you haven’t set it up so that GenogramLayout recognizes that Twin C and Twin D are children of Bob and Barbara. That’s why they are in the wrong layer.

How did you want identical twins to be drawn? If it’s just a different appearance for the horizontal link connecting the label nodes of the parent links, that can be set when you add that unmodeled Link.

[YosuaSalim]

Identical twin should be drawn like below image, a single horizontal line between twins.

The horizontal link between two twin nodes are generated correctly but the auto layout doesn’t work (shown in my first post) when I run setup identical twin function, so I have to rearrange it manually. That function runs after marriages and parents setup.

This is the original genogram with no identical twin, perfect layout.

Which layout code I should modify ? Is it Genogram Layout ?

[walter]

There’s something wrong with how you are adding the identical twin Link, but I cannot tell what from the limited information you have given. Your code for adding a Twin Link looks OK to me, but perhaps you are calling it wrong.

If you set up your diagram as in the last screenshot, and then you execute the code to add a Twin Link between C & D, what happens?

[YosuaSalim]

If you set up your diagram as in the last screenshot, and then you execute the code to add a Twin Link between C & D, what happens?

The identical twin link is properly created like second image.
Let’s put aside the auto layout problem, I have another question about identical twin.
I created a checkbox button form to enable identical twin.

When I check it, it works as expected.

The problem arise when I uncheck it, the identical twin link still displayed (I move the twins node to see unremoved identical twin link)

I find in the code TL variable is the link to represent identical twin link.

var TL = $(go.Link, {
  isLayoutPositioned: false,
  isTreeLink: false
}, $(go.Shape, {
  strokeWidth: 2,
  stroke: "black"
}));
TL.fromNode = TLN1;
TL.toNode = TLN2;
myDiagram.add(TL);

I’m trying to remove this link but I can’t since it’s not stored in nodeDataArray nor linkDataArray.
Could you help me to solve this problem ? Thank you very much.

[walter]

At the time the checkbox is cleared or the RemoveTwin button is pressed, are there two or more nodes selected, so that you know which Nodes are supposed to be twins/triplets/quadruplets/quintuplets?

For each such Node, find its parent Link and get its label Node (if any). Any Twin Link will be connected with such label Nodes.

var T1 = ...
var T2 = ...
if (!T1 || !T2) return;
var TPL1 = T1.findTreeParentLink();
var TPL2 = T2.findTreeParentLink();
if (!TPL1 || !TPL2) return;
var TLN1 = TPL1.labelNodes.first();
var TLN2 = TPL2.labelNodes.first();
if (!TLN1 || !TLN2) return;
var TL = TLN1.findLinksBetween(TLN2).first();
if (TL) {
  myDiagram.commit(function(diag) {
    diag.remove(TL);
   }, "removed Twin Link");
}

[YosuaSalim]

Currently only twins (two nodes) are selected.
The code works very well. Thank you very much for your assistance.