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

Add simple tree graph mode #4

Merged
pierre merged 16 commits from simple_tree into master 2023-08-26 14:00:00 +00:00
Conversation 0 Commits 16 Files Changed 9 +22 -4
1 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f135287257 - Show all commits

26
geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx
View File

@ -137,8 +137,8 @@ export function SimpleFamilyTree(p: {
function NodeArea(p: {
x: number;
y: number;
parentLinkDestX?: number;
parentLinkDestY?: number;
childrenLinkDestX?: number;
childrenLinkDestY?: number;
node: SimpleTreeNode;
}): React.ReactElement {
const parent_x_offset =
@ -169,7 +169,10 @@ function NodeArea(p: {
let middleParentFaceY = p.y + Math.floor(FACE_HEIGHT / 2);
// Compute point for link between children and parent
// Compute points for link between children and parent
let parentLinkX =
parent_x_offset + Math.floor(memberCardWidth(p.node.member) / 2);
let parentLinkY = p.y;
let childrenLinkX: number;
let childrenLinkY: number;
@ -185,6 +188,18 @@ function NodeArea(p: {
return (
<>
{/* Parent link */}
{p.childrenLinkDestX && (
<path
className="link"
fill="none"
stroke="#000"
d={`M${p.childrenLinkDestX} ${p.childrenLinkDestY} V ${
parentLinkY - Math.floor(LEVEL_SPACING / 2)
} H${parentLinkX} V${parentLinkY}`}
></path>
)}
<MemberCard x={parent_x_offset} y={p.y} member={p.node.member} />
{p.node.spouse && (
@ -210,6 +225,8 @@ function NodeArea(p: {
<NodeArea
x={downXOffset}
y={p.y + CARD_HEIGHT + LEVEL_SPACING}
childrenLinkDestX={childrenLinkX}
childrenLinkDestY={childrenLinkY}
node={n}
/>
);
@ -217,7 +234,8 @@ function NodeArea(p: {
return el;
})}
{/*<circle cx={childrenLinkX} cy={childrenLinkY} r="2" fill="red" />*/}
{/*<circle cx={childrenLinkX} cy={childrenLinkY} r="2" fill="red" />
<circle cx={parentLinkX} cy={parentLinkY} r="2" fill="green" />*/}
</>
);
}