From 96ca6fd7af7bb2fad59ba0cd0707779f28278091 Mon Sep 17 00:00:00 2001 From: Pierre Hubert Date: Sat, 26 Aug 2023 14:54:17 +0200 Subject: [PATCH] Make simple tree browsable --- geneit_app/package-lock.json | 14 ++++++++++++++ geneit_app/package.json | 1 + .../src/routes/family/FamilyMemberTreeRoute.tsx | 2 +- .../simple_family_tree/SimpleFamilyTree.tsx | 15 ++++++++++++--- 4 files changed, 28 insertions(+), 4 deletions(-) diff --git a/geneit_app/package-lock.json b/geneit_app/package-lock.json index ff0fe03..fa3fd5f 100644 --- a/geneit_app/package-lock.json +++ b/geneit_app/package-lock.json @@ -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", diff --git a/geneit_app/package.json b/geneit_app/package.json index 20a8583..3f224df 100644 --- a/geneit_app/package.json +++ b/geneit_app/package.json @@ -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" diff --git a/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx b/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx index 687ca6a..82b258a 100644 --- a/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx +++ b/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx @@ -154,7 +154,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement { {/* the tree itself */} - + {currTab === CurrTab.BasicTree ? ( ) : currTab === CurrTab.SimpleTree ? ( diff --git a/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx b/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx index af39767..84c2215 100644 --- a/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx +++ b/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx @@ -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 ( - - - + + + + + + + ); }