Add zoom control of family graph

core/static/bundled/user/family-graph-index.ts

@@ -16,6 +16,10 @@ type GraphData = (
   | { data: { source: number; target: number } }
 )[];
 
+function isMobile() {
+  return window.innerWidth < 500;
+}
+
 async function getGraphData(
   userId: number,
   godfathersDepth: number,
@@ -151,7 +155,6 @@ function createGraph(container: HTMLDivElement, data: GraphData, activeUserId: n
   cy.on("tap", "node", (tapped) => {
     onNodeTap(tapped.target);
   });
-  cy.zoomingEnabled(false);
 
   /* Add context menu */
   cy.cxtmenu({
@@ -200,6 +203,7 @@ document.addEventListener("alpine:init", () => {
     reverse: initialUrlParams.get("reverse")?.toLowerCase?.() === "true",
     graph: undefined as cytoscape.Core,
     graphData: {},
+    isZoomEnabled: !isMobile(),
 
     getInitialDepth(prop: string) {
       const value = Number.parseInt(initialUrlParams.get(prop));
@@ -235,6 +239,9 @@ document.addEventListener("alpine:init", () => {
           await this.reverseGraph();
         }
       });
+      this.$watch("isZoomEnabled", () => {
+        this.graph.userZoomingEnabled(this.isZoomEnabled);
+      });
       await this.fetchGraphData();
     },
 
@@ -279,6 +286,7 @@ document.addEventListener("alpine:init", () => {
         this.graphData,
         config.activeUser,
       );
+      this.graph.userZoomingEnabled(this.isZoomEnabled);
       this.loading = false;
     },
   }));

core/templates/core/user_godfathers_tree.jinja

@@ -77,6 +77,7 @@
               ></i></button>
           </span>
         </div>
+
       </div>
 
       <div class="toolbar-column">
@@ -91,6 +92,31 @@
           <i class="fa fa-camera"></i>
           {% trans %}Save{% endtrans %}
         </button>
+
+        <div class="toolbar-input">
+          <button
+            @click="() => graph.zoom(graph.zoom() + 1)"
+          >
+            <i class="fa-solid fa-magnifying-glass-plus"></i>
+          </button>
+          <button
+            @click="() => graph.zoom(graph.zoom() - 1)"
+          >
+            <i class="fa-solid fa-magnifying-glass-minus"></i>
+          </button>
+          <button
+            x-show="isZoomEnabled"
+            @click="() => isZoomEnabled = false"
+          >
+            <i class="fa-solid fa-unlock"></i>
+          </button>
+          <button
+            x-show="!isZoomEnabled"
+            @click="() => isZoomEnabled = true"
+          >
+            <i class="fa-solid fa-lock"></i>
+          </button>
+        </div>
       </div>
     </div>
     <div x-ref="graph" class="graph"></div>