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

Start to test family-chart module

Browse Source
This commit is contained in:
Pierre HUBERT
2023-08-22 16:12:55 +02:00
parent cae70ee738
commit b502e99c22
5 changed files with 645 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
View File

@@ -21,6 +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";
enum CurrTab {
BasicTree,
@@ -37,7 +38,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
const family = useFamily();
const [currTab, setCurrTab] = React.useState(CurrTab.BasicTree);
const [currTab, setCurrTab] = React.useState(CurrTab.AdvancedTree);
const [currMode, setCurrMode] = React.useState(TreeMode.Descending);
const member = family.members.get(Number(memberId));
@@ -121,7 +122,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
{currTab === CurrTab.BasicTree ? (
<BasicFamilyTree tree={tree!} />
) : (
<>todo</>
<ComlexFamilyTree />
)}
</Paper>
</div>

227
geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.jsx Normal file
View File

@@ -0,0 +1,227 @@
import React from "react";
import f3 from "family-chart";
import "./family-chart.css";
export default class ComlexFamilyTree extends React.Component {
cont = React.createRef();
componentDidMount() {
if (!this.cont.current) return;
const store = f3.createStore({
data: data(),
node_separation: 250,
level_separation: 150,
}),
view = f3.d3AnimationView({
store,
cont: document.querySelector("#FamilyChart"),
}),
Card = f3.elements.Card({
store,
svg: view.svg,
card_dim: {
w: 220,
h: 70,
text_x: 75,
text_y: 15,
img_w: 60,
img_h: 60,
img_x: 5,
img_y: 5,
},
card_display: [
(d) => `${d.data["first name"] || ""} ${d.data["last name"] || ""}`,
(d) => `${d.data["birthday"] || ""}`,
],
mini_tree: true,
link_break: false,
});
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"],
},
},
];
}
}
render() {
return <div className="f3" id="FamilyChart" ref={this.cont}></div>;
}
}

97
geneit_app/src/widgets/complex_family_tree/family-chart.css Normal file
View File

@@ -0,0 +1,97 @@
.f3 {
height: 700px;
max-height: calc(100vh - 80px);
width: 900px;
max-width: 100%;
margin: auto;
position: relative;
}
.f3 .cursor-pointer {
cursor: pointer;
}
.f3 svg.main_svg {
width: 100%;
height: 100%;
background-color: #3b5560;
color: #3b5560;
}
.f3 svg.main_svg text {
fill: currentColor;
}
.f3 rect.card-female,
.f3 .card-female .card-body-rect,
.f3 .card-female .text-overflow-mask {
fill: lightpink;
}
.f3 rect.card-male,
.f3 .card-male .card-body-rect,
.f3 .card-male .text-overflow-mask {
fill: lightblue;
}
.f3 .card-genderless .card-body-rect,
.f3 .card-genderless .text-overflow-mask {
fill: lightgray;
}
.f3 .card_add .card-body-rect {
fill: #3b5560;
stroke-width: 4px;
stroke: #fff;
cursor: pointer;
}
.f3 g.card_add text {
fill: #fff;
}
.f3 .card-main {
stroke: #000;
}
.f3 .card_family_tree rect {
transition: 0.3s;
}
.f3 .card_family_tree:hover rect {
transform: scale(1.1);
}
.f3 .card_add_relative {
cursor: pointer;
color: #fff;
transition: 0.3s;
}
.f3 .card_add_relative circle {
fill: rgba(0, 0, 0, 0);
}
.f3 .card_add_relative:hover {
color: black;
}
.f3 .card_edit.pencil_icon {
color: #fff;
transition: 0.3s;
}
.f3 .card_edit.pencil_icon:hover {
color: black;
}
.f3 .card_break_link,
.f3 .link_upper,
.f3 .link_lower,
.f3 .link_particles {
transform-origin: 50% 50%;
transition: 1s;
}
.f3 .card_break_link {
color: #fff;
}
.f3 .card_break_link.closed .link_upper {
transform: translate(-140.5px, 655.6px);
}
.f3 .card_break_link.closed .link_upper g {
transform: rotate(-58deg);
}
.f3 .card_break_link.closed .link_particles {
transform: scale(0);
}
.f3 .input-field input {
height: 2.5rem !important;
}
.f3 .input-field > label:not(.label-icon).active {
-webkit-transform: translateY(-8px) scale(0.8);
transform: translateY(-8px) scale(0.8);
}