From 96ca6fd7af7bb2fad59ba0cd0707779f28278091 Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
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 {
       </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 ? (
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 (
-    <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>
   );
 }