Fix PDF export
This commit is contained in:
parent
947ab0277e
commit
852354b739
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user