diff --git a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx index 718620d..e1106f0 100644 --- a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx +++ b/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(); getAvailableMembers(node, availableMembers); diff --git a/geneit_app/src/widgets/complex_family_tree/family-chart.css b/geneit_app/src/widgets/complex_family_tree/family-chart.css index 9fab263..08be3ec 100644 --- a/geneit_app/src/widgets/complex_family_tree/family-chart.css +++ b/geneit_app/src/widgets/complex_family_tree/family-chart.css @@ -107,6 +107,5 @@ left: 0px; /*width: 3508px; height: 2480px;*/ - width: 351px; opacity: 0; }