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 { 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; /** * Vertical space between faces and text */ const FACE_TEXT_SPACING = 2; /** * Cards height */ const CARD_HEIGHT = 114; /** * Space between spouse cards */ const SPOUSE_SPACING = 10; /** * Space between two siblings hierachy */ const SIBLINGS_SPACING = 0; /** * Vertical space between two generations */ const LEVEL_SPACING = 25; const NAME_FONT = "13px Roboto"; const BIRTH_FONT = "10px Roboto"; interface SimpleTreeSpouseInfo { member: Member; couple: Couple; } interface SimpleTreeNode { member: Member; spouse?: SimpleTreeSpouseInfo; down: SimpleTreeNode[]; /** * The width of the parent and its children */ width: number; /** * The width of the parents */ parentWidth: number; /** * The sum of the width of the children */ childrenWidth: number; } /** * Get the width of a member card */ function memberCardWidth(m?: Member): number { if (!m) return 0; const nameWidth = getTextWidth(m.fullName, NAME_FONT); const birthDeathWidth = getTextWidth(m.displayBirthDeath, BIRTH_FONT); return Math.max(FACE_WIDTH, nameWidth, birthDeathWidth); } function center(container_width: number, el_width: number): number { return Math.floor((container_width - el_width) / 2); } function buildSimpleTreeNode( tree: FamilyTreeNode, depth: number ): SimpleTreeNode { if (depth === 0) throw new Error("Too much recursion reached!"); const lastCouple = tree.couples?.[tree.couples?.length - 1 ?? 0]; // Preprocess children let childrenToProcess = tree.down; if (depth > 1) tree.couples?.forEach( (c) => (childrenToProcess = childrenToProcess?.concat(c.down)) ); else childrenToProcess = []; const node: SimpleTreeNode = { down: childrenToProcess?.map((c) => buildSimpleTreeNode(c, depth - 1)) ?? [], member: tree.member, spouse: lastCouple ? { couple: lastCouple.couple, member: lastCouple.member, } : undefined, parentWidth: -1, childrenWidth: -1, width: -1, }; // Compute current level width let levelWidth: number; if (node.spouse) { levelWidth = SPOUSE_SPACING + memberCardWidth(node.member) + memberCardWidth(node.spouse.member); } else { levelWidth = memberCardWidth(node.member); } // Compute down level width const downWidth = SIBLINGS_SPACING * node.down.length - SIBLINGS_SPACING + node.down.reduce((prev, n) => prev + n.width, 0); node.parentWidth = levelWidth; node.childrenWidth = downWidth; node.width = Math.max(levelWidth, downWidth); return node; } /** * Simple family tree * * Only one couple can be shown in this version */ export function SimpleFamilyTree(p: { tree: FamilyTreeNode; depth: number; }): React.ReactElement { const darkTheme = useDarkTheme(); const tree = React.useMemo( () => buildSimpleTreeNode(p.tree, p.depth), [p.tree, p.depth] ); const height = p.depth * (CARD_HEIGHT + LEVEL_SPACING) - LEVEL_SPACING; 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 (
); } function NodeArea(p: { x: number; y: number; childrenLinkDestX?: number; childrenLinkDestY?: number; node: SimpleTreeNode; }): React.ReactElement { let parent_x_offset: number; parent_x_offset = p.x + center(p.node.width, p.node.parentWidth); let unusedChildrenWidth = p.node.width - p.node.childrenWidth; let downXOffset = p.x + Math.floor(unusedChildrenWidth / 2); let endFirstFaceX = parent_x_offset + Math.floor((memberCardWidth(p.node.member) - FACE_WIDTH) / 2) + FACE_WIDTH; let beginingOfSecondCardX = parent_x_offset + p.node.parentWidth - memberCardWidth(p.node.spouse?.member); let beginSecondFaceX = p.node.spouse && beginingOfSecondCardX + (memberCardWidth(p.node.spouse.member) - FACE_WIDTH) / 2; let middleParentFaceY = p.y + Math.floor(FACE_HEIGHT / 2); // Compute points for link between children and parent let parentLinkX = parent_x_offset + Math.floor(memberCardWidth(p.node.member) / 2); let parentLinkY = p.y; // Remove ugly little shifts if (Math.abs(parentLinkX - (p.childrenLinkDestX ?? 0)) < 10) parentLinkX = p.childrenLinkDestX!; let childrenLinkX: number; let childrenLinkY: number; if (p.node.spouse) { childrenLinkX = Math.floor((endFirstFaceX + beginSecondFaceX!) / 2); childrenLinkY = middleParentFaceY; } else { childrenLinkX = parent_x_offset + Math.floor(memberCardWidth(p.node.member) / 2); childrenLinkY = p.y + CARD_HEIGHT + 2; } return ( <> {/* Parent link */} {p.childrenLinkDestX && ( )} {p.node.spouse && ( <> {/* Couple link */} )} {p.node.down.map((n) => { const el = ( ); downXOffset += n.width + SIBLINGS_SPACING; return el; })} {/* */} ); } function MemberCard(p: { x: number; y: number; member: Member; }): React.ReactElement { const w = memberCardWidth(p.member); return ( {/* Member image */} {p.member.hasPhoto ? ( ) : ( )} {/* Member text */} {p.member.first_name ?? ""} {p.member.lastNameUpperCase ?? ""} {p.member.displayBirthDeath} ); } function GenderlessIcon(p: { x?: number; width: number; height: number; }): React.ReactElement { return ( ); }