This commit is contained in:
parent
784f7ecb6b
commit
881b8c0d60
File diff suppressed because one or more lines are too long
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user