From 6f15169b180514f27e73d402baf7112e840e9156 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 18 Mar 2025 18:31:22 +0200
Subject: [PATCH] feat(mermaid): better zoom mechanism (closes #474)

---
 package-lock.json                 |  8 ++++++++
 package.json                      |  1 +
 src/public/app/widgets/mermaid.ts | 18 +++++++++---------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 679aa3162..ce6b94862 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -185,6 +185,7 @@
         "sass-loader": "16.0.5",
         "split.js": "1.6.5",
         "supertest": "7.0.0",
+        "svg-pan-zoom": "3.6.2",
         "swagger-jsdoc": "6.2.8",
         "ts-loader": "9.5.2",
         "tslib": "2.8.1",
@@ -19769,6 +19770,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pan-zoom": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/svg-pan-zoom/-/svg-pan-zoom-3.6.2.tgz",
+      "integrity": "sha512-JwnvRWfVKw/Xzfe6jriFyfey/lWJLq4bUh2jwoR5ChWQuQoOH8FEh1l/bEp46iHHKHEJWIyFJETbazraxNWECg==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
     "node_modules/swagger-jsdoc": {
       "version": "6.2.8",
       "resolved": "https://registry.npmjs.org/swagger-jsdoc/-/swagger-jsdoc-6.2.8.tgz",
diff --git a/package.json b/package.json
index 47d3d1be4..2a889f2f6 100644
--- a/package.json
+++ b/package.json
@@ -242,6 +242,7 @@
     "sass-loader": "16.0.5",
     "split.js": "1.6.5",
     "supertest": "7.0.0",
+    "svg-pan-zoom": "3.6.2",
     "swagger-jsdoc": "6.2.8",
     "ts-loader": "9.5.2",
     "tslib": "2.8.1",
diff --git a/src/public/app/widgets/mermaid.ts b/src/public/app/widgets/mermaid.ts
index 54f44825b..878a90af7 100644
--- a/src/public/app/widgets/mermaid.ts
+++ b/src/public/app/widgets/mermaid.ts
@@ -71,8 +71,6 @@ export default class MermaidWidget extends NoteContextAwareWidget {
 
         this.$display.empty();
 
-        const wheelZoomLoaded = libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM);
-
         this.$errorContainer.hide();
 
         try {
@@ -93,15 +91,17 @@ export default class MermaidWidget extends NoteContextAwareWidget {
             }
 
             this.$display.html(svg);
-
-            await wheelZoomLoaded;
-
             this.$display.attr("id", `mermaid-render-${idCounter}`);
 
-            WZoom.create(`#mermaid-render-${idCounter}`, {
-                maxScale: 50,
-                speed: 1.3,
-                zoomOnClick: false
+            // Fit the image to bounds.
+            const $svg = this.$display.find("svg");
+            $svg.attr("width", "100%").attr("height", "100%");
+
+            // Enable pan to zoom.
+            import("svg-pan-zoom").then(svgPanZoom => {
+                svgPanZoom.default($svg[0], {
+                    controlIconsEnabled: true
+                });
             });
         } catch (e: any) {
             console.warn(e);