Automatically calculate PDF width

geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx

@@ -74,16 +74,18 @@ export function ComplexFamilyTree(p: {
   };
 
   const exportPDF = async () => {
+    const docWidth = treeWidth(p.tree) * 60;
     const docHeight = treeHeight(p.tree) * 41;
 
     const doc = new jsPDF({
       orientation: "l",
-      format: [docHeight, 351],
+      format: [docHeight, docWidth],
     });
 
     // Clone the SVG to manipulate it
     const container = document.createElement("div");
     container.classList.add("f3", "f3-export");
+    container.style.width = docWidth + "px";
     container.style.height = docHeight + "px";
     document.body.appendChild(container);
     applyTree(container);
@@ -114,7 +116,7 @@ export function ComplexFamilyTree(p: {
 
     await doc.svg(target, {
       height: docHeight,
-      width: 351,
+      width: docWidth,
     });
 
     container.remove();
@@ -154,6 +156,22 @@ function treeHeight(node: FamilyTreeNode): number {
   return res + 1;
 }
 
+function treeWidth(node: FamilyTreeNode): number {
+  const values = new Array(treeHeight(node)).fill(0);
+  treeWidthRecurse(node, values, 0);
+  return Math.max(...values);
+}
+
+function treeWidthRecurse(node: FamilyTreeNode, vals: number[], level: number) {
+  vals[level] += 1 + (node.couples?.length ?? 0) + (node.down ? 1 : 0);
+
+  node.down?.forEach((n) => treeWidthRecurse(n, vals, level + 1));
+
+  node.couples?.forEach((c) =>
+    c.down.forEach((n) => treeWidthRecurse(n, vals, level + 1))
+  );
+}
+
 function treeToF3Data(node: FamilyTreeNode, isUp: boolean): f3Data[] {
   const availableMembers = new Set<number>();
   getAvailableMembers(node, availableMembers);

geneit_app/src/widgets/complex_family_tree/family-chart.css

@@ -107,6 +107,5 @@
   left: 0px;
   /*width: 3508px;
   height: 2480px;*/
-  width: 351px;
   opacity: 0;
 }