Draw first links

geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx

@@ -137,8 +137,8 @@ export function SimpleFamilyTree(p: {
 function NodeArea(p: {
   x: number;
   y: number;
-  parentLinkDestX?: number;
-  parentLinkDestY?: number;
+  childrenLinkDestX?: number;
+  childrenLinkDestY?: number;
   node: SimpleTreeNode;
 }): React.ReactElement {
   const parent_x_offset =
@@ -169,7 +169,10 @@ function NodeArea(p: {
 
   let middleParentFaceY = p.y + Math.floor(FACE_HEIGHT / 2);
 
-  // Compute point for link between children and parent
+  // Compute points for link between children and parent
+  let parentLinkX =
+    parent_x_offset + Math.floor(memberCardWidth(p.node.member) / 2);
+  let parentLinkY = p.y;
 
   let childrenLinkX: number;
   let childrenLinkY: number;
@@ -185,6 +188,18 @@ function NodeArea(p: {
 
   return (
     <>
+      {/* Parent link */}
+      {p.childrenLinkDestX && (
+        <path
+          className="link"
+          fill="none"
+          stroke="#000"
+          d={`M${p.childrenLinkDestX} ${p.childrenLinkDestY} V ${
+            parentLinkY - Math.floor(LEVEL_SPACING / 2)
+          } H${parentLinkX} V${parentLinkY}`}
+        ></path>
+      )}
+
       <MemberCard x={parent_x_offset} y={p.y} member={p.node.member} />
 
       {p.node.spouse && (
@@ -210,6 +225,8 @@ function NodeArea(p: {
           <NodeArea
             x={downXOffset}
             y={p.y + CARD_HEIGHT + LEVEL_SPACING}
+            childrenLinkDestX={childrenLinkX}
+            childrenLinkDestY={childrenLinkY}
             node={n}
           />
         );
@@ -217,7 +234,8 @@ function NodeArea(p: {
         return el;
       })}
 
-      {/*<circle cx={childrenLinkX} cy={childrenLinkY} r="2" fill="red" />*/}
+      {/*<circle cx={childrenLinkX} cy={childrenLinkY} r="2" fill="red" />
+      <circle cx={parentLinkX} cy={parentLinkY} r="2" fill="green" />*/}
     </>
   );
 }