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",

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"

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 ? (

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">
+    <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>
   );
 }