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