feat(mermaid): better zoom mechanism (closes #474)

Author: eliandoran

package-lock.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",

package.json

@@ -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);