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

Make simple tree browsable
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Pierre HUBERT 2023-08-26 14:54:17 +02:00
parent cbaabb34d5
commit 96ca6fd7af
4 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
geneit_app/package-lock.json generated
View File

@ -35,6 +35,7 @@
"react-easy-crop": "^5.0.0", "react-easy-crop": "^5.0.0",
"react-router-dom": "^6.11.2", "react-router-dom": "^6.11.2",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"react-zoom-pan-pinch": "^3.1.0",
"svg2pdf.js": "^2.2.2", "svg2pdf.js": "^2.2.2",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
@ -13603,6 +13604,19 @@
"react-dom": ">=16.6.0" "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": { "node_modules/read-cache": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "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-easy-crop": "^5.0.0",
"react-router-dom": "^6.11.2", "react-router-dom": "^6.11.2",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"react-zoom-pan-pinch": "^3.1.0",
"svg2pdf.js": "^2.2.2", "svg2pdf.js": "^2.2.2",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"web-vitals": "^2.1.4" "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> </div>
{/* the tree itself */} {/* the tree itself */}
<Paper style={{ flex: "1" }}> <Paper style={{ flex: "1", display: "flex", flexDirection: "column" }}>
{currTab === CurrTab.BasicTree ? ( {currTab === CurrTab.BasicTree ? (
<BasicFamilyTree tree={tree!} depth={currDepth} /> <BasicFamilyTree tree={tree!} depth={currDepth} />
) : currTab === CurrTab.SimpleTree ? ( ) : 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 { 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";
const FACE_WIDTH = 60; const FACE_WIDTH = 60;
const FACE_HEIGHT = 70; const FACE_HEIGHT = 70;
@ -174,9 +175,17 @@ export function SimpleFamilyTree(p: {
console.info(`tree width=${tree.width} height=${height}`); console.info(`tree width=${tree.width} height=${height}`);
return ( return (
<svg width={tree.width} height={height} xmlns="http://www.w3.org/2000/svg"> <TransformWrapper maxScale={15} minScale={0.2}>
<NodeArea node={tree} x={0} y={0} /> <TransformComponent wrapperStyle={{ width: "100%", flex: "1" }}>
</svg> <svg
width={tree.width}
height={height}
xmlns="http://www.w3.org/2000/svg"
>
<NodeArea node={tree} x={0} y={0} />
</svg>
</TransformComponent>
</TransformWrapper>
); );
} }