Add simple tree graph mode #4

Merged
pierre merged 16 commits from simple_tree into master 2023-08-26 14:00:00 +00:00
Showing only changes of commit 474a614130 - Show all commits

View File

@ -162,8 +162,27 @@ function NodeArea(p: {
let beginingOfSecondCardX = let beginingOfSecondCardX =
parent_x_offset + memberCardWidth(p.node.member) + SPOUSE_SPACING; parent_x_offset + memberCardWidth(p.node.member) + SPOUSE_SPACING;
let beginSecondFaceX =
p.node.spouse &&
beginingOfSecondCardX +
(memberCardWidth(p.node.spouse.member) - FACE_WIDTH) / 2;
let middleParentFaceY = p.y + Math.floor(FACE_HEIGHT / 2); let middleParentFaceY = p.y + Math.floor(FACE_HEIGHT / 2);
// Compute point for link between children and parent
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;
}
return ( return (
<> <>
<MemberCard x={parent_x_offset} y={p.y} member={p.node.member} /> <MemberCard x={parent_x_offset} y={p.y} member={p.node.member} />
@ -175,9 +194,7 @@ function NodeArea(p: {
className="link" className="link"
fill="none" fill="none"
stroke="#000" stroke="#000"
d={`M${endFirstFaceX} ${middleParentFaceY} H ${ d={`M${endFirstFaceX} ${middleParentFaceY} H ${beginSecondFaceX}`}
beginingOfSecondCardX + memberCardWidth(p.node.spouse.member) / 2
}`}
></path> ></path>
<MemberCard <MemberCard
@ -199,6 +216,8 @@ function NodeArea(p: {
downXOffset += n.width + SIBLINGS_SPACING; downXOffset += n.width + SIBLINGS_SPACING;
return el; return el;
})} })}
{/*<circle cx={childrenLinkX} cy={childrenLinkY} r="2" fill="red" />*/}
</> </>
); );
} }