Add SVG export

geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx

@@ -1,15 +1,17 @@
-import React from "react";
+import { mdiXml } from "@mdi/js";
-import f3, { f3Data } from "family-chart";
+import Icon from "@mdi/react";
-import "./family-chart.css";
-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 { IconButton } from "@mui/material";
+import f3, { f3Data } from "family-chart";
 import { jsPDF } from "jspdf";
+import React from "react";
 import "svg2pdf.js";
-import { getAllIndexes } from "../../utils/string_utils";
+import { Couple } from "../../api/CoupleApi";
+import { Member, fmtDate } from "../../api/MemberApi";
+import { useDarkTheme } from "../../hooks/context_providers/DarkThemeProvider";
+import { FamilyTreeNode } from "../../utils/family_tree";
+import { downloadBlob } from "../../utils/files_utils";
+import "./family-chart.css";
 
 export function ComplexFamilyTree(p: {
   tree: FamilyTreeNode;
@@ -34,11 +36,11 @@ export function ComplexFamilyTree(p: {
       svg: view.svg,
       card_dim: {
         w: 210,
-        h: 118,
+        h: 120,
         text_x: 5,
-        text_y: 70,
+        text_y: 75,
         img_w: 60,
-        img_h: 60,
+        img_h: 70,
         img_x: 5,
         img_y: 5,
       },
@@ -93,16 +95,11 @@ export function ComplexFamilyTree(p: {
     store.update.tree({ initial: false, transition_time: 0 });
   };
 
-  const exportPDF = async () => {
+  const doExport = async (onlySVG: boolean) => {
     const docWidth = treeWidth(p.tree) * 65;
     const docHeight = treeHeight(p.tree) * 60;
     console.info(`Tree w=${treeWidth(p.tree)} h=${treeHeight(p.tree)}`);
 
-    const doc = new jsPDF({
-      orientation: "l",
-      format: [docHeight, docWidth],
-    });
-
     // Clone the SVG to manipulate it
     const container = document.createElement("div");
     container.classList.add("f3", "f3-export");
@@ -135,9 +132,32 @@ export function ComplexFamilyTree(p: {
 
     dstSVG = dstSVG.replaceAll("✝", " ");
 
+    // Download in SVG format
+    if (onlySVG) {
+      // Fix background color (first rect background)
+      dstSVG = dstSVG.replace(
+        `fill="transparent"></rect>`,
+        `fill="white"></rect>`
+      );
+
+      const blob = new Blob([`<svg>${dstSVG}</svg>`], {
+        type: "image/svg+xml",
+      });
+
+      downloadBlob(blob, "ArbreGenealogique.svg");
+
+      return;
+    }
+
+    // Download in PDF format
     //navigator.clipboard.writeText(dstSVG);
     target.innerHTML = dstSVG;
 
+    const doc = new jsPDF({
+      orientation: "l",
+      format: [docHeight, docWidth],
+    });
+
     await doc.svg(target, {
       height: docHeight,
       width: docWidth,
@@ -149,12 +169,19 @@ export function ComplexFamilyTree(p: {
     doc.save("ArbreGenealogique.pdf");
   };
 
+  const exportPDF = () => doExport(false);
+
+  const exportSVG = () => doExport(true);
+
   return (
     <div>
       <div style={{ textAlign: "right" }}>
         <IconButton onClick={exportPDF}>
           <PictureAsPdfIcon />
         </IconButton>
+        <IconButton onClick={exportSVG}>
+          <Icon path={mdiXml} size={1} />
+        </IconButton>
       </div>
       <div
         style={{ width: "100%" }}