diff --git a/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx b/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
index ceda5b8..9e09d14 100644
--- a/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
+++ b/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
@@ -21,7 +21,7 @@ import { useFamily } from "../../widgets/BaseFamilyRoute";
import { MemberItem } from "../../widgets/MemberItem";
import { RouterLink } from "../../widgets/RouterLink";
import { BasicFamilyTree } from "../../widgets/BasicFamilyTree";
-import ComlexFamilyTree from "../../widgets/complex_family_tree/ComplexFamilyTree";
+import { ComplexFamilyTree } from "../../widgets/complex_family_tree/ComplexFamilyTree";
enum CurrTab {
BasicTree,
@@ -122,7 +122,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
{currTab === CurrTab.BasicTree ? (
) : (
-
+
)}
diff --git a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
index 33c33c6..370b50d 100644
--- a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
+++ b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
@@ -2,14 +2,9 @@ import React from "react";
import f3 from "family-chart";
import "./family-chart.css";
-import { jsPDF } from "jspdf";
-import "svg2pdf.js";
-
-export default class ComlexFamilyTree extends React.Component {
- cont = React.createRef();
-
- componentDidMount() {
- if (!this.cont.current) return;
+export function ComplexFamilyTree(): React.ReactElement {
+ const refCb = (container: HTMLDivElement) => {
+ if (!container) return;
const store = f3.createStore({
data: data(),
@@ -44,186 +39,193 @@ export default class ComlexFamilyTree extends React.Component {
view.setCard(Card);
store.setOnUpdate((props) => view.update(props || {}));
store.update.tree({ initial: true });
+ };
- function data() {
- return [
- {
- id: "0",
- rels: {
- spouses: ["8c92765f-92d3-4120-90dd-85a28302504c"],
- father: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19",
- mother: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56",
- children: [
- "ce2fcb9a-6058-4326-b56a-aced35168561",
- "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
- ],
- },
- data: {
- "first name": "Agnus",
- "last name": "",
- birthday: "1970",
- avatar:
- "https://static8.depositphotos.com/1009634/988/v/950/depositphotos_9883921-stock-illustration-no-user-profile-picture.jpg",
- gender: "M",
- },
- },
- {
- id: "8c92765f-92d3-4120-90dd-85a28302504c",
- data: {
- gender: "F",
- "first name": "Andrea",
- "last name": "",
- birthday: "",
- avatar: "",
- },
- rels: {
- spouses: ["0"],
- children: [
- "ce2fcb9a-6058-4326-b56a-aced35168561",
- "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
- ],
- },
- },
- {
- id: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19",
- data: {
- gender: "M",
- "first name": "Zen",
- "last name": "",
- birthday: "",
- avatar: "",
- },
- rels: {
- children: ["0"],
- spouses: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
- },
- },
- {
- id: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56",
- data: {
- gender: "F",
- "first name": "Zebra",
- "last name": "",
- birthday: "",
- avatar: "",
- },
- rels: {
- spouses: ["0c09cfa0-5e7c-4073-8beb-94f6c69ada19"],
- children: ["0"],
- father: "12a9bddf-855a-4583-a695-c73fa8c0e9b2",
- mother: "bd56a527-b613-474d-9f38-fcac0aae218b",
- },
- },
- {
- id: "ce2fcb9a-6058-4326-b56a-aced35168561",
- data: {
- gender: "M",
- "first name": "Ben",
- "last name": "",
- birthday: "",
- avatar: "",
- },
- rels: {
- mother: "8c92765f-92d3-4120-90dd-85a28302504c",
- father: "0",
- spouses: ["b4e33c68-20a7-47ba-9dcc-1168a07d5b52"],
- children: [
- "eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
- "240a3f71-c921-42d7-8a13-dec5e1acc4fd",
- ],
- },
- },
- {
- id: "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
- data: {
- gender: "F",
- "first name": "Becky",
- "last name": "",
- birthday: "",
- avatar: "",
- },
- rels: {
- mother: "8c92765f-92d3-4120-90dd-85a28302504c",
- father: "0",
- },
- },
- {
- id: "eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
- data: {
- gender: "M",
- "first name": "Carlos",
- "last name": "",
- birthday: "",
- avatar: "",
- },
- rels: {
- mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
- father: "ce2fcb9a-6058-4326-b56a-aced35168561",
- },
- },
- {
- id: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
- data: {
- gender: "F",
- "first name": "Branka",
- "last name": "",
- birthday: "",
- avatar: "",
- },
- rels: {
- spouses: ["ce2fcb9a-6058-4326-b56a-aced35168561"],
- children: [
- "eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
- "240a3f71-c921-42d7-8a13-dec5e1acc4fd",
- ],
- },
- },
- {
- id: "240a3f71-c921-42d7-8a13-dec5e1acc4fd",
- data: {
- gender: "F",
- "first name": "Carla",
- "last name": "",
- birthday: "",
- avatar: "",
- },
- rels: {
- mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
- father: "ce2fcb9a-6058-4326-b56a-aced35168561",
- },
- },
- {
- id: "12a9bddf-855a-4583-a695-c73fa8c0e9b2",
- data: {
- gender: "M",
- "first name": "Yvo",
- "last name": "",
- birthday: "",
- avatar: "",
- },
- rels: {
- children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
- spouses: ["bd56a527-b613-474d-9f38-fcac0aae218b"],
- },
- },
- {
- id: "bd56a527-b613-474d-9f38-fcac0aae218b",
- data: {
- gender: "F",
- "first name": "Yva",
- "last name": "",
- birthday: "",
- avatar: "",
- },
- rels: {
- spouses: ["12a9bddf-855a-4583-a695-c73fa8c0e9b2"],
- children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
- },
- },
- ];
- }
+ return
;
+}
- setTimeout(() => {
+const data = () =>
+ structuredClone([
+ {
+ id: "0",
+ rels: {
+ spouses: ["8c92765f-92d3-4120-90dd-85a28302504c"],
+ father: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19",
+ mother: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56",
+ children: [
+ "ce2fcb9a-6058-4326-b56a-aced35168561",
+ "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
+ ],
+ },
+ data: {
+ "first name": "Agnus",
+ "last name": "",
+ birthday: "1970",
+ avatar:
+ "https://static8.depositphotos.com/1009634/988/v/950/depositphotos_9883921-stock-illustration-no-user-profile-picture.jpg",
+ gender: "M",
+ },
+ },
+ {
+ id: "8c92765f-92d3-4120-90dd-85a28302504c",
+ data: {
+ gender: "F",
+ "first name": "Andrea",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ spouses: ["0"],
+ children: [
+ "ce2fcb9a-6058-4326-b56a-aced35168561",
+ "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
+ ],
+ },
+ },
+ {
+ id: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19",
+ data: {
+ gender: "M",
+ "first name": "Zen",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ children: ["0"],
+ spouses: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
+ },
+ },
+ {
+ id: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56",
+ data: {
+ gender: "F",
+ "first name": "Zebra",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ spouses: ["0c09cfa0-5e7c-4073-8beb-94f6c69ada19"],
+ children: ["0"],
+ father: "12a9bddf-855a-4583-a695-c73fa8c0e9b2",
+ mother: "bd56a527-b613-474d-9f38-fcac0aae218b",
+ },
+ },
+ {
+ id: "ce2fcb9a-6058-4326-b56a-aced35168561",
+ data: {
+ gender: "M",
+ "first name": "Ben",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ mother: "8c92765f-92d3-4120-90dd-85a28302504c",
+ father: "0",
+ spouses: ["b4e33c68-20a7-47ba-9dcc-1168a07d5b52"],
+ children: [
+ "eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
+ "240a3f71-c921-42d7-8a13-dec5e1acc4fd",
+ ],
+ },
+ },
+ {
+ id: "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
+ data: {
+ gender: "F",
+ "first name": "Becky",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ mother: "8c92765f-92d3-4120-90dd-85a28302504c",
+ father: "0",
+ },
+ },
+ {
+ id: "eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
+ data: {
+ gender: "M",
+ "first name": "Carlos",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
+ father: "ce2fcb9a-6058-4326-b56a-aced35168561",
+ },
+ },
+ {
+ id: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
+ data: {
+ gender: "F",
+ "first name": "Branka",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ spouses: ["ce2fcb9a-6058-4326-b56a-aced35168561"],
+ children: [
+ "eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
+ "240a3f71-c921-42d7-8a13-dec5e1acc4fd",
+ ],
+ },
+ },
+ {
+ id: "240a3f71-c921-42d7-8a13-dec5e1acc4fd",
+ data: {
+ gender: "F",
+ "first name": "Carla",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
+ father: "ce2fcb9a-6058-4326-b56a-aced35168561",
+ },
+ },
+ {
+ id: "12a9bddf-855a-4583-a695-c73fa8c0e9b2",
+ data: {
+ gender: "M",
+ "first name": "Yvo",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
+ spouses: ["bd56a527-b613-474d-9f38-fcac0aae218b"],
+ },
+ },
+ {
+ id: "bd56a527-b613-474d-9f38-fcac0aae218b",
+ data: {
+ gender: "F",
+ "first name": "Yva",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ spouses: ["12a9bddf-855a-4583-a695-c73fa8c0e9b2"],
+ children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
+ },
+ },
+ ]);
+
+/*
+import { jsPDF } from "jspdf";
+import "svg2pdf.js";
+
+setTimeout(() => {
const doc = new jsPDF({
orientation: "l",
format: [1000, 1000],
@@ -233,12 +235,6 @@ export default class ComlexFamilyTree extends React.Component {
console.log(element);
doc.svg(element!.children[0], { height: 1000, width: 1000 }).then(() => {
// save the created pdf
- doc.save("myPDF.pdf");
+ //doc.save("myPDF.pdf");
});
- }, 6000);
- }
-
- render() {
- return ;
- }
-}
+ }, 6000);*/