Draw first links
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Pierre HUBERT 2023-08-26 14:13:35 +02:00
parent 474a614130
commit f135287257

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" />*/}
</>
);
}