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

Fix couples spacing

Browse Source
This commit is contained in:
Pierre HUBERT 2023-08-26 14:34:11 +02:00
parent f135287257
commit 28d9b16239
1 changed files with 42 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,13 +26,28 @@ interface SimpleTreeNode {
member: Member; member: Member;
spouse?: SimpleTreeSpouseInfo; spouse?: SimpleTreeSpouseInfo;
down: SimpleTreeNode[]; down: SimpleTreeNode[];
/**
* The width of the parent and its children
*/
width: number; width: number;
/**
* The width of the parents
*/
parentWidth: number;
/**
* The sum of the width of the children
*/
childrenWidth: number;
} }
/** /**
* Get the width of a member card * Get the width of a member card
*/ */
function memberCardWidth(m: Member): number { function memberCardWidth(m?: Member): number {
if (!m) return 0;
const nameWidth = getTextWidth(m.fullName, NAME_FONT); const nameWidth = getTextWidth(m.fullName, NAME_FONT);
const birthDeathWidth = getTextWidth(m.displayBirthDeath, BIRTH_FONT); const birthDeathWidth = getTextWidth(m.displayBirthDeath, BIRTH_FONT);
return Math.max(FACE_WIDTH, nameWidth, birthDeathWidth); return Math.max(FACE_WIDTH, nameWidth, birthDeathWidth);
@ -58,7 +73,7 @@ function buildSimpleDownTreeNode(
); );
else childrenToProcess = []; else childrenToProcess = [];
const node = { const node: SimpleTreeNode = {
down: down:
childrenToProcess?.map((c) => buildSimpleDownTreeNode(c, depth - 1)) ?? childrenToProcess?.map((c) => buildSimpleDownTreeNode(c, depth - 1)) ??
[], [],
@ -69,20 +84,33 @@ function buildSimpleDownTreeNode(
member: lastCouple.member, member: lastCouple.member,
} }
: undefined, : undefined,
parentWidth: -1,
childrenWidth: -1,
width: -1, width: -1,
}; };
// Compute current level width // Compute current level width
let levelWidth = let levelWidth: number;
memberCardWidth(node.member) + if (node.spouse) {
(node.spouse ? SPOUSE_SPACING + memberCardWidth(node.spouse.member) : 0) + levelWidth =
CARD_SPACING; CARD_SPACING +
SPOUSE_SPACING +
2 *
Math.max(
memberCardWidth(node.member),
memberCardWidth(node.spouse.member)
);
} else {
levelWidth = memberCardWidth(node.member) + CARD_SPACING;
}
// Compute down level width // Compute down level width
const downWidth = const downWidth =
SIBLINGS_SPACING * node.down.length + SIBLINGS_SPACING * node.down.length +
node.down.reduce((prev, n) => prev + n.width, 0); node.down.reduce((prev, n) => prev + n.width, 0);
node.parentWidth = levelWidth;
node.childrenWidth = downWidth;
node.width = Math.max(levelWidth, downWidth); node.width = Math.max(levelWidth, downWidth);
return node; return node;
} }
@ -141,18 +169,12 @@ function NodeArea(p: {
childrenLinkDestY?: number; childrenLinkDestY?: number;
node: SimpleTreeNode; node: SimpleTreeNode;
}): React.ReactElement { }): React.ReactElement {
const parent_x_offset = let parent_x_offset: number;
p.x +
Math.floor(
(p.node.width -
(memberCardWidth(p.node.member) +
(p.node.spouse
? SPOUSE_SPACING + memberCardWidth(p.node.spouse.member)
: 0))) /
2
);
let downXOffset = p.x; parent_x_offset = p.x + center(p.node.width, p.node.parentWidth);
let unusedChildrenWidth = p.node.width - p.node.childrenWidth;
let downXOffset = p.x + Math.floor(unusedChildrenWidth / 2);
let endFirstFaceX = let endFirstFaceX =
parent_x_offset + parent_x_offset +
@ -160,7 +182,9 @@ function NodeArea(p: {
FACE_WIDTH; FACE_WIDTH;
let beginingOfSecondCardX = let beginingOfSecondCardX =
parent_x_offset + memberCardWidth(p.node.member) + SPOUSE_SPACING; parent_x_offset +
p.node.parentWidth -
memberCardWidth(p.node.spouse?.member);
let beginSecondFaceX = let beginSecondFaceX =
p.node.spouse && p.node.spouse &&