Start to generate PDF export

geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx

@@ -5,6 +5,10 @@ import { FamilyTreeNode } from "../../utils/family_tree";
 import { Member, fmtDate } from "../../api/MemberApi";
 import { Couple } from "../../api/CoupleApi";
 import { useDarkTheme } from "../../hooks/context_providers/DarkThemeProvider";
+import { IconButton } from "@mui/material";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import { jsPDF } from "jspdf";
+import "svg2pdf.js";
 
 export function ComplexFamilyTree(p: {
   tree: FamilyTreeNode;
@@ -69,12 +73,58 @@ export function ComplexFamilyTree(p: {
     store.update.tree({ initial: true });
   };
 
+  const exportPDF = async () => {
+    const doc = new jsPDF({
+      orientation: "l",
+      format: [1000, 1000],
+    });
+
+    // Clone the SVG to manipulate it
+    const srcEl = document.getElementById("FamilyChart")?.children[0]!;
+    const srcSVG = srcEl.innerHTML!;
+
+    // SVG manipulations (adaptations to export)
+    let dstSVG = srcSVG.replaceAll(
+      `<path class="link" fill="none" stroke="#fff"`,
+      `<path class="link" fill="none" stroke="#000"`
+    );
+
+    dstSVG = dstSVG.replaceAll(
+      `class="card-body-rect"`,
+      `class="card-body-rect" fill="white"`
+    );
+
+    dstSVG = dstSVG.replaceAll(
+      `class="text-overflow-mask"`,
+      `class="text-overflow-mask" fill="transparent"`
+    );
+
+    srcEl.innerHTML = dstSVG;
+
+    await doc.svg(srcEl, {
+      height: 1000,
+      width: 1000,
+    });
+
+    srcEl.innerHTML = srcSVG;
+
+    // Save the created pdf
+    doc.save("myPDF.pdf");
+  };
+
   return (
-    <div
+    <div>
-      className={`f3 ${darkTheme.enabled ? "f3-dark" : "f3-light"}`}
+      <div style={{ textAlign: "right" }}>
-      id="FamilyChart"
+        <IconButton onClick={exportPDF}>
-      ref={refCb}
+          <PictureAsPdfIcon />
-    ></div>
+        </IconButton>
+      </div>
+      <div
+        className={`f3 ${darkTheme.enabled ? "f3-dark" : "f3-light"}`}
+        id="FamilyChart"
+        ref={refCb}
+      ></div>
+    </div>
   );
 }
 
@@ -211,21 +261,3 @@ function treeToF3DataDownRecurse(
     }
   }
 }
-
-/*
-import { jsPDF } from "jspdf";
-import "svg2pdf.js";
-
-setTimeout(() => {
-      const doc = new jsPDF({
-        orientation: "l",
-        format: [1000, 1000],
-      });
-
-      const element = document.getElementById("FamilyChart");
-      console.log(element);
-      doc.svg(element!.children[0], { height: 1000, width: 1000 }).then(() => {
-        // save the created pdf
-        //doc.save("myPDF.pdf");
-      });
-    }, 6000);*/