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

Add simple tree graph mode #4

Merged
pierre merged 16 commits from simple_tree into master 2023-08-26 14:00:00 +00:00
Conversation 0 Commits 16 Files Changed 9 +28 -4
4 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 96ca6fd7af - Show all commits

14
geneit_app/package-lock.json generated
View File

@ -35,6 +35,7 @@
"react-easy-crop": "^5.0.0",
"react-router-dom": "^6.11.2",
"react-scripts": "^5.0.1",
"react-zoom-pan-pinch": "^3.1.0",
"svg2pdf.js": "^2.2.2",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
@ -13603,6 +13604,19 @@
"react-dom": ">=16.6.0"
}
},
"node_modules/react-zoom-pan-pinch": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.1.0.tgz",
"integrity": "sha512-a3LlP8QPgTikvteCNkZ3X6wIWC0lrg1geP5WkUJyx2MXXAhHQek3r17N1nT/esOiWGuPIECnsd9AGoK8jOeGcg==",
"engines": {
"node": ">=8",
"npm": ">=5"
},
"peerDependencies": {
"react": "*",
"react-dom": "*"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

1
geneit_app/package.json
View File

@ -30,6 +30,7 @@
"react-easy-crop": "^5.0.0",
"react-router-dom": "^6.11.2",
"react-scripts": "^5.0.1",
"react-zoom-pan-pinch": "^3.1.0",
"svg2pdf.js": "^2.2.2",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"

2
geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
View File

@ -154,7 +154,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
</div>
{/* the tree itself */}
<Paper style={{ flex: "1" }}>
<Paper style={{ flex: "1", display: "flex", flexDirection: "column" }}>
{currTab === CurrTab.BasicTree ? (
<BasicFamilyTree tree={tree!} depth={currDepth} />
) : currTab === CurrTab.SimpleTree ? (

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

@ -3,6 +3,7 @@ import { Couple } from "../../api/CoupleApi";
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";
const FACE_WIDTH = 60;
const FACE_HEIGHT = 70;
@ -174,9 +175,17 @@ export function SimpleFamilyTree(p: {
console.info(`tree width=${tree.width} height=${height}`);
return (
<svg width={tree.width} height={height} xmlns="http://www.w3.org/2000/svg">
<NodeArea node={tree} x={0} y={0} />
</svg>
<TransformWrapper maxScale={15} minScale={0.2}>
<TransformComponent wrapperStyle={{ width: "100%", flex: "1" }}>
<svg
width={tree.width}
height={height}
xmlns="http://www.w3.org/2000/svg"
>
<NodeArea node={tree} x={0} y={0} />
</svg>
</TransformComponent>
</TransformWrapper>
);
}