Draw couples links

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;
 }

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) => {