Fix PDF export
This commit is contained in:
parent
947ab0277e
commit
852354b739
@ -16,7 +16,7 @@ export function ComplexFamilyTree(p: {
|
||||
}): React.ReactElement {
|
||||
const darkTheme = useDarkTheme();
|
||||
|
||||
const refCb = (container: HTMLDivElement) => {
|
||||
const applyTree = (container: HTMLDivElement) => {
|
||||
if (!container) return;
|
||||
|
||||
const store = f3.createStore({
|
||||
@ -26,7 +26,7 @@ export function ComplexFamilyTree(p: {
|
||||
}),
|
||||
view = f3.d3AnimationView({
|
||||
store,
|
||||
cont: document.querySelector("#FamilyChart"),
|
||||
cont: container,
|
||||
}),
|
||||
Card = f3.elements.Card({
|
||||
store,
|
||||
@ -70,21 +70,27 @@ export function ComplexFamilyTree(p: {
|
||||
|
||||
view.setCard(Card);
|
||||
store.setOnUpdate((props) => view.update(props || {}));
|
||||
store.update.tree({ initial: true });
|
||||
store.update.tree({ initial: false, transition_time: 0 });
|
||||
};
|
||||
|
||||
const exportPDF = async () => {
|
||||
const doc = new jsPDF({
|
||||
orientation: "l",
|
||||
format: [1000, 1000],
|
||||
format: [900, 1200],
|
||||
});
|
||||
|
||||
// Clone the SVG to manipulate it
|
||||
const srcEl = document.getElementById("FamilyChart")?.children[0]!;
|
||||
const srcSVG = srcEl.innerHTML!;
|
||||
const container = document.createElement("div");
|
||||
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)
|
||||
let dstSVG = srcSVG.replaceAll(
|
||||
let dstSVG = target.innerHTML.replaceAll(
|
||||
`<path class="link" fill="none" stroke="#fff"`,
|
||||
`<path class="link" fill="none" stroke="#000"`
|
||||
);
|
||||
@ -99,14 +105,14 @@ export function ComplexFamilyTree(p: {
|
||||
`class="text-overflow-mask" fill="transparent"`
|
||||
);
|
||||
|
||||
srcEl.innerHTML = dstSVG;
|
||||
target.innerHTML = dstSVG;
|
||||
|
||||
await doc.svg(srcEl, {
|
||||
height: 1000,
|
||||
width: 1000,
|
||||
await doc.svg(target, {
|
||||
height: 3508,
|
||||
width: 2480,
|
||||
});
|
||||
|
||||
srcEl.innerHTML = srcSVG;
|
||||
container.remove();
|
||||
|
||||
// Save the created pdf
|
||||
doc.save("myPDF.pdf");
|
||||
@ -122,7 +128,7 @@ export function ComplexFamilyTree(p: {
|
||||
<div
|
||||
className={`f3 ${darkTheme.enabled ? "f3-dark" : "f3-light"}`}
|
||||
id="FamilyChart"
|
||||
ref={refCb}
|
||||
ref={applyTree}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
|
@ -100,3 +100,12 @@
|
||||
.f3-light .link {
|
||||
stroke: black;
|
||||
}
|
||||
|
||||
.f3-export {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 3508px;
|
||||
height: 2480px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user