Add simple tree graph mode #4
@ -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" />*/}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user