Fix PDF export

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(
       `<path class="link" fill="none" stroke="#fff"`,
       `<path class="link" fill="none" stroke="#000"`
     );
@@ -99,14 +105,14 @@ export function ComplexFamilyTree(p: {
       `class="text-overflow-mask" fill="transparent"`
     );
 
-    srcEl.innerHTML = dstSVG;
+    target.innerHTML = dstSVG;
 
-    await doc.svg(srcEl, {
-      height: 1000,
-      width: 1000,
+    await doc.svg(target, {
+      height: 3508,
+      width: 2480,
     });
 
-    srcEl.innerHTML = srcSVG;
+    container.remove();
 
     // Save the created pdf
     doc.save("myPDF.pdf");
@@ -122,7 +128,7 @@ export function ComplexFamilyTree(p: {
       <div
         className={`f3 ${darkTheme.enabled ? "f3-dark" : "f3-light"}`}
         id="FamilyChart"
-        ref={refCb}
+        ref={applyTree}
       ></div>
     </div>
   );

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