Add PDF export
Some checks failed
continuous-integration/drone/push Build is failing

This commit is contained in:
Pierre HUBERT 2023-08-26 15:25:53 +02:00
parent 784f7ecb6b
commit 881b8c0d60
2 changed files with 85 additions and 15 deletions

File diff suppressed because one or more lines are too long

View File

@ -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}>
<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>
<div style={{ textAlign: "right" }}>
<Tooltip title="Exporter le graphique au format PDF">
<IconButton onClick={exportPDF}>
<PictureAsPdfIcon />
</IconButton>
</Tooltip>
<Tooltip title="Exporter le graphique au format SVG">
<IconButton onClick={exportSVG}>
<Icon path={mdiXml} size={1} />
</IconButton>
</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>
);
}