pierre/GeneIT
1
0
Fork 0
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

Fix PDF export

Browse Source
This commit is contained in:
Pierre HUBERT 2023-08-23 15:18:23 +02:00
parent 947ab0277e
commit 852354b739
2 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
View File

@ -16,7 +16,7 @@ export function ComplexFamilyTree(p: {
}): React.ReactElement { }): React.ReactElement {
const darkTheme = useDarkTheme(); const darkTheme = useDarkTheme();
const refCb = (container: HTMLDivElement) => { const applyTree = (container: HTMLDivElement) => {
if (!container) return; if (!container) return;
const store = f3.createStore({ const store = f3.createStore({
@ -26,7 +26,7 @@ export function ComplexFamilyTree(p: {
}), }),
view = f3.d3AnimationView({ view = f3.d3AnimationView({
store, store,
cont: document.querySelector("#FamilyChart"), cont: container,
}), }),
Card = f3.elements.Card({ Card = f3.elements.Card({
store, store,
@ -70,21 +70,27 @@ export function ComplexFamilyTree(p: {
view.setCard(Card); view.setCard(Card);
store.setOnUpdate((props) => view.update(props || {})); store.setOnUpdate((props) => view.update(props || {}));
store.update.tree({ initial: true }); store.update.tree({ initial: false, transition_time: 0 });
}; };
const exportPDF = async () => { const exportPDF = async () => {
const doc = new jsPDF({ const doc = new jsPDF({
orientation: "l", orientation: "l",
format: [1000, 1000], format: [900, 1200],
}); });
// Clone the SVG to manipulate it // Clone the SVG to manipulate it
const srcEl = document.getElementById("FamilyChart")?.children[0]!; const container = document.createElement("div");
const srcSVG = srcEl.innerHTML!; container.classList.add("f3", "f3-export");
document.body.appendChild(container);
applyTree(container);
const target = container.children[0];
await new Promise((res) => setTimeout(() => res(null), 100));
// SVG manipulations (adaptations to export) // SVG manipulations (adaptations to export)
let dstSVG = srcSVG.replaceAll( let dstSVG = target.innerHTML.replaceAll(
`<path class="link" fill="none" stroke="#fff"`, `<path class="link" fill="none" stroke="#fff"`,
`<path class="link" fill="none" stroke="#000"` `<path class="link" fill="none" stroke="#000"`
); );
@ -99,14 +105,14 @@ export function ComplexFamilyTree(p: {
`class="text-overflow-mask" fill="transparent"` `class="text-overflow-mask" fill="transparent"`
); );
srcEl.innerHTML = dstSVG; target.innerHTML = dstSVG;
await doc.svg(srcEl, { await doc.svg(target, {
height: 1000, height: 3508,
width: 1000, width: 2480,
}); });
srcEl.innerHTML = srcSVG; container.remove();
// Save the created pdf // Save the created pdf
doc.save("myPDF.pdf"); doc.save("myPDF.pdf");
@ -122,7 +128,7 @@ export function ComplexFamilyTree(p: {
<div <div
className={`f3 ${darkTheme.enabled ? "f3-dark" : "f3-light"}`} className={`f3 ${darkTheme.enabled ? "f3-dark" : "f3-light"}`}
id="FamilyChart" id="FamilyChart"
ref={refCb} ref={applyTree}
></div> ></div>
</div> </div>
); );

9
geneit_app/src/widgets/complex_family_tree/family-chart.css
View File

@ -100,3 +100,12 @@
.f3-light .link { .f3-light .link {
stroke: black; stroke: black;
} }
.f3-export {
position: fixed;
top: 0px;
left: 0px;
width: 3508px;
height: 2480px;
opacity: 0;
}