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 ? ( {currTab === CurrTab.BasicTree ? (
<BasicFamilyTree tree={tree!} depth={currDepth} /> <BasicFamilyTree tree={tree!} depth={currDepth} />
) : currTab === CurrTab.SimpleTree ? ( ) : currTab === CurrTab.SimpleTree ? (
<SimpleFamilyTree <SimpleFamilyTree tree={tree!} depth={currDepth} />
tree={tree!}
isUp={currMode === TreeMode.Ascending}
depth={currDepth}
/>
) : ( ) : (
<ComplexFamilyTree <ComplexFamilyTree
tree={tree!} tree={tree!}

View File

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

View File

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