diff --git a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx index c4b6abd..9170c01 100644 --- a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx +++ b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx @@ -16,7 +16,7 @@ export function ComplexFamilyTree(p: { }): React.ReactElement { const darkTheme = useDarkTheme(); - const refCb = (container: HTMLDivElement) => { + const applyTree = (container: HTMLDivElement) => { if (!container) return; const store = f3.createStore({ @@ -26,7 +26,7 @@ export function ComplexFamilyTree(p: { }), view = f3.d3AnimationView({ store, - cont: document.querySelector("#FamilyChart"), + cont: container, }), Card = f3.elements.Card({ store, @@ -70,21 +70,27 @@ export function ComplexFamilyTree(p: { view.setCard(Card); store.setOnUpdate((props) => view.update(props || {})); - store.update.tree({ initial: true }); + store.update.tree({ initial: false, transition_time: 0 }); }; const exportPDF = async () => { const doc = new jsPDF({ orientation: "l", - format: [1000, 1000], + format: [900, 1200], }); // Clone the SVG to manipulate it - const srcEl = document.getElementById("FamilyChart")?.children[0]!; - const srcSVG = srcEl.innerHTML!; + const container = document.createElement("div"); + container.classList.add("f3", "f3-export"); + document.body.appendChild(container); + applyTree(container); + + const target = container.children[0]; + + await new Promise((res) => setTimeout(() => res(null), 100)); // SVG manipulations (adaptations to export) - let dstSVG = srcSVG.replaceAll( + let dstSVG = target.innerHTML.replaceAll( ` ); 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 779824f..245032b 100644 --- a/geneit_app/src/widgets/complex_family_tree/family-chart.css +++ b/geneit_app/src/widgets/complex_family_tree/family-chart.css @@ -100,3 +100,12 @@ .f3-light .link { stroke: black; } + +.f3-export { + position: fixed; + top: 0px; + left: 0px; + width: 3508px; + height: 2480px; + opacity: 0; +}