Add simple tree graph mode #4

Merged
pierre merged 16 commits from simple_tree into master 2023-08-26 14:00:00 +00:00
3 changed files with 17 additions and 31 deletions
Showing only changes of commit 784f7ecb6b - Show all commits

View File

@ -158,11 +158,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
{currTab === CurrTab.BasicTree ? (
<BasicFamilyTree tree={tree!} depth={currDepth} />
) : currTab === CurrTab.SimpleTree ? (
<SimpleFamilyTree
tree={tree!}
isUp={currMode === TreeMode.Ascending}
depth={currDepth}
/>
<SimpleFamilyTree tree={tree!} depth={currDepth} />
) : (
<ComplexFamilyTree
tree={tree!}

View File

@ -4,6 +4,8 @@ import { Member } from "../../api/MemberApi";
import { FamilyTreeNode } from "../../utils/family_tree";
import { getTextWidth } from "../../utils/render_utils";
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
import { useDarkTheme } from "../../hooks/context_providers/DarkThemeProvider";
import "./simpletree.css";
const FACE_WIDTH = 60;
const FACE_HEIGHT = 70;
@ -76,7 +78,7 @@ function center(container_width: number, el_width: number): number {
return Math.floor((container_width - el_width) / 2);
}
function buildSimpleDownTreeNode(
function buildSimpleTreeNode(
tree: FamilyTreeNode,
depth: number
): SimpleTreeNode {
@ -94,8 +96,7 @@ function buildSimpleDownTreeNode(
const node: SimpleTreeNode = {
down:
childrenToProcess?.map((c) => buildSimpleDownTreeNode(c, depth - 1)) ??
[],
childrenToProcess?.map((c) => buildSimpleTreeNode(c, depth - 1)) ?? [],
member: tree.member,
spouse: lastCouple
? {
@ -131,23 +132,6 @@ function buildSimpleDownTreeNode(
return node;
}
// TODO : if useless, remove and merge up and down techniques
function buildSimpleUpTreeNode(
tree: FamilyTreeNode,
depth: number
): SimpleTreeNode {
/*if (depth === 0) throw new Error("Too much recursion reached!");
return {
member: tree.member,
children:
depth === 1
? []
: tree.down?.map((c) => buildSimpleUpTreeNode(c, depth - 1)) ?? [],
};*/
return buildSimpleDownTreeNode(tree, depth);
}
/**
* Simple family tree
*
@ -156,15 +140,13 @@ function buildSimpleUpTreeNode(
export function SimpleFamilyTree(p: {
tree: FamilyTreeNode;
isUp: boolean;
depth: number;
}): React.ReactElement {
const darkTheme = useDarkTheme();
const tree = React.useMemo(
() =>
p.isUp
? buildSimpleUpTreeNode(p.tree, p.depth)
: buildSimpleDownTreeNode(p.tree, p.depth),
[p.tree, p.isUp, p.depth]
() => buildSimpleTreeNode(p.tree, p.depth),
[p.tree, p.depth]
);
const height = p.depth * (CARD_HEIGHT + LEVEL_SPACING) - LEVEL_SPACING;
@ -175,6 +157,7 @@ export function SimpleFamilyTree(p: {
<TransformWrapper maxScale={15} minScale={0.2}>
<TransformComponent wrapperStyle={{ width: "100%", flex: "1" }}>
<svg
className={`simpletree ${darkTheme.enabled ? "simpletree-dark" : ""}`}
width={tree.width}
height={height}
xmlns="http://www.w3.org/2000/svg"

View File

@ -0,0 +1,7 @@
.simpletree-dark path {
stroke: white;
}
.simpletree-dark tspan {
fill: white;
}