geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx

@@ -1,11 +1,18 @@
+import { mdiXml } from "@mdi/js";
+import Icon from "@mdi/react";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import { IconButton, Tooltip } from "@mui/material";
+import jsPDF from "jspdf";
 import React from "react";
+import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import { Couple } from "../../api/CoupleApi";
 import { Member } from "../../api/MemberApi";
-import { FamilyTreeNode } from "../../utils/family_tree";
-import { getTextWidth } from "../../utils/render_utils";
-import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import { useDarkTheme } from "../../hooks/context_providers/DarkThemeProvider";
+import { FamilyTreeNode } from "../../utils/family_tree";
+import { downloadBlob } from "../../utils/files_utils";
+import { getTextWidth } from "../../utils/render_utils";
 import "./simpletree.css";
+import "./Roboto-normal";
 
 const FACE_WIDTH = 60;
 const FACE_HEIGHT = 70;
@@ -153,19 +160,75 @@ export function SimpleFamilyTree(p: {
 
   console.info(`tree width=${tree.width} height=${height}`);
 
+  const doExport = async (onlySVG: boolean) => {
+    const el = document.querySelector(".simpletree")!;
+    const svg = el.outerHTML;
+
+    // Download in SVG format
+    if (onlySVG) {
+      const blob = new Blob([svg], {
+        type: "image/svg+xml",
+      });
+
+      downloadBlob(blob, "ArbreGenealogique.svg");
+
+      return;
+    }
+
+    const PDF_MARGIN = 10;
+
+    // Download in PDF format
+    const doc = new jsPDF({
+      orientation: "l",
+      format: [height + PDF_MARGIN * 2, tree.width + PDF_MARGIN * 2],
+    });
+
+    doc.setFont("Roboto", "normal");
+
+    await doc.svg(el, {
+      x: PDF_MARGIN,
+      y: PDF_MARGIN,
+      height: height,
+      width: tree.width,
+    });
+
+    // Save the created pdf
+    doc.save("ArbreGenealogique.pdf");
+  };
+
+  const exportPDF = () => doExport(false);
+
+  const exportSVG = () => doExport(true);
+
   return (
-    <TransformWrapper maxScale={15} minScale={0.2}>
+    <div>
-      <TransformComponent wrapperStyle={{ width: "100%", flex: "1" }}>
+      <div style={{ textAlign: "right" }}>
-        <svg
+        <Tooltip title="Exporter le graphique au format PDF">
-          className={`simpletree ${darkTheme.enabled ? "simpletree-dark" : ""}`}
+          <IconButton onClick={exportPDF}>
-          width={tree.width}
+            <PictureAsPdfIcon />
-          height={height}
+          </IconButton>
-          xmlns="http://www.w3.org/2000/svg"
+        </Tooltip>
-        >
+        <Tooltip title="Exporter le graphique au format SVG">
-          <NodeArea node={tree} x={0} y={0} />
+          <IconButton onClick={exportSVG}>
-        </svg>
+            <Icon path={mdiXml} size={1} />
-      </TransformComponent>
+          </IconButton>
-    </TransformWrapper>
+        </Tooltip>
+      </div>
+      <TransformWrapper maxScale={15} minScale={0.2}>
+        <TransformComponent wrapperStyle={{ width: "100%", flex: "1" }}>
+          <svg
+            className={`simpletree ${
+              darkTheme.enabled ? "simpletree-dark" : ""
+            }`}
+            width={tree.width}
+            height={height}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <NodeArea node={tree} x={0} y={0} />
+          </svg>
+        </TransformComponent>
+      </TransformWrapper>
+    </div>
   );
 }