From 474a614130fd653bcf9fa51c2d0f0c9ff4e20167 Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Sat, 26 Aug 2023 13:56:29 +0200
Subject: [PATCH] Ready to draw filiation links

---
 .../simple_family_tree/SimpleFamilyTree.tsx   | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx b/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx
index f3f122f..2e234a7 100644
--- a/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx
+++ b/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx
@@ -162,8 +162,27 @@ function NodeArea(p: {
   let beginingOfSecondCardX =
     parent_x_offset + memberCardWidth(p.node.member) + SPOUSE_SPACING;
 
+  let beginSecondFaceX =
+    p.node.spouse &&
+    beginingOfSecondCardX +
+      (memberCardWidth(p.node.spouse.member) - FACE_WIDTH) / 2;
+
   let middleParentFaceY = p.y + Math.floor(FACE_HEIGHT / 2);
 
+  // Compute point for link between children and parent
+
+  let childrenLinkX: number;
+  let childrenLinkY: number;
+
+  if (p.node.spouse) {
+    childrenLinkX = Math.floor((endFirstFaceX + beginSecondFaceX!) / 2);
+    childrenLinkY = middleParentFaceY;
+  } else {
+    childrenLinkX =
+      parent_x_offset + Math.floor(memberCardWidth(p.node.member) / 2);
+    childrenLinkY = p.y + CARD_HEIGHT;
+  }
+
   return (
     <>
       <MemberCard x={parent_x_offset} y={p.y} member={p.node.member} />
@@ -175,9 +194,7 @@ function NodeArea(p: {
             className="link"
             fill="none"
             stroke="#000"
-            d={`M${endFirstFaceX} ${middleParentFaceY} H ${
-              beginingOfSecondCardX + memberCardWidth(p.node.spouse.member) / 2
-            }`}
+            d={`M${endFirstFaceX} ${middleParentFaceY} H ${beginSecondFaceX}`}
           ></path>
 
           <MemberCard
@@ -199,6 +216,8 @@ function NodeArea(p: {
         downXOffset += n.width + SIBLINGS_SPACING;
         return el;
       })}
+
+      {/*<circle cx={childrenLinkX} cy={childrenLinkY} r="2" fill="red" />*/}
     </>
   );
 }