diff --git a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx index 204678b..fad47ef 100644 --- a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx +++ b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx @@ -1,15 +1,17 @@ -import React from "react"; -import f3, { f3Data } from "family-chart"; -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 { mdiXml } from "@mdi/js"; +import Icon from "@mdi/react"; 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">`, + `fill="white">` + ); + + const blob = new Blob([``], { + 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 (