From 1c15fd17dbf5ecf67fb78afe6f658a70371157e1 Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Sat, 26 Aug 2023 13:39:32 +0200
Subject: [PATCH] Draw couples links

---
 geneit_app/src/utils/render_utils.ts          |  1 -
 .../simple_family_tree/SimpleFamilyTree.tsx   | 40 +++++++++++++++----
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/geneit_app/src/utils/render_utils.ts b/geneit_app/src/utils/render_utils.ts
index 0047c25..aa175a9 100644
--- a/geneit_app/src/utils/render_utils.ts
+++ b/geneit_app/src/utils/render_utils.ts
@@ -26,6 +26,5 @@ export function getTextWidth(text: string, font: string) {
     if (!ref.has(c)) ref.set(c, computeTextWidth(c, font));
     size += ref.get(c)!;
   }
-  console.log(text, size);
   return size;
 }
diff --git a/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx b/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx
index b68a0b4..f3f122f 100644
--- a/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx
+++ b/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx
@@ -48,7 +48,7 @@ function buildSimpleDownTreeNode(
 ): SimpleTreeNode {
   if (depth === 0) throw new Error("Too much recursion reached!");
 
-  const lastCouple = tree.couples?.[tree.couples?.length ?? 0];
+  const lastCouple = tree.couples?.[tree.couples?.length - 1 ?? 0];
 
   // Preprocess children
   let childrenToProcess = tree.down;
@@ -137,9 +137,11 @@ export function SimpleFamilyTree(p: {
 function NodeArea(p: {
   x: number;
   y: number;
+  parentLinkDestX?: number;
+  parentLinkDestY?: number;
   node: SimpleTreeNode;
 }): React.ReactElement {
-  const couple_x_offset =
+  const parent_x_offset =
     p.x +
     Math.floor(
       (p.node.width -
@@ -152,16 +154,38 @@ function NodeArea(p: {
 
   let downXOffset = p.x;
 
+  let endFirstFaceX =
+    parent_x_offset +
+    Math.floor((memberCardWidth(p.node.member) - FACE_WIDTH) / 2) +
+    FACE_WIDTH;
+
+  let beginingOfSecondCardX =
+    parent_x_offset + memberCardWidth(p.node.member) + SPOUSE_SPACING;
+
+  let middleParentFaceY = p.y + Math.floor(FACE_HEIGHT / 2);
+
   return (
     <>
-      <MemberCard x={couple_x_offset} y={p.y} member={p.node.member} />
+      <MemberCard x={parent_x_offset} y={p.y} member={p.node.member} />
 
       {p.node.spouse && (
-        <MemberCard
-          x={couple_x_offset + memberCardWidth(p.node.member) + SPOUSE_SPACING}
-          y={p.y}
-          member={p.node.spouse.member}
-        />
+        <>
+          {/* Couple link */}
+          <path
+            className="link"
+            fill="none"
+            stroke="#000"
+            d={`M${endFirstFaceX} ${middleParentFaceY} H ${
+              beginingOfSecondCardX + memberCardWidth(p.node.spouse.member) / 2
+            }`}
+          ></path>
+
+          <MemberCard
+            x={beginingOfSecondCardX}
+            y={p.y}
+            member={p.node.spouse.member}
+          />
+        </>
       )}
 
       {p.node.down.map((n) => {