From d72ed4efa463364c671e4fbc3cd7edd13fe8fc1c Mon Sep 17 00:00:00 2001
From: "hamza.haddou" <hamza.haddou@fifthingenium.com>
Date: Wed, 13 Mar 2024 12:19:54 +0100
Subject: [PATCH] feat: mermaid zoom & pan

---
 markdownPreview/index.ts | 13 ++++++++++++-
 package-lock.json        |  8 +++++++-
 package.json             |  3 ++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/markdownPreview/index.ts b/markdownPreview/index.ts
index 0ea81b3..cd3c8fb 100644
--- a/markdownPreview/index.ts
+++ b/markdownPreview/index.ts
@@ -1,5 +1,6 @@
 import mermaid from 'mermaid';
 import { renderMermaidBlocksInElement } from './mermaid';
+import * as svgPanZoom from 'svg-pan-zoom';
 
 function init() {
     const configSpan = document.getElementById('markdown-mermaid');
@@ -16,7 +17,17 @@ function init() {
 
     renderMermaidBlocksInElement(document.body, (mermaidContainer, content) => {
         mermaidContainer.innerHTML = content;
-    });
+        mermaidContainer.style.height = "30rem";
+        const svgEl = mermaidContainer.querySelector("svg");
+        
+        if (svgEl) {
+          svgEl.style.height = "100%";
+          svgPanZoom(svgEl, {
+            center: true,
+            minZoom: 0.1,
+          });
+        }
+  });
 }
 
 
diff --git a/package-lock.json b/package-lock.json
index 9c3c9b4..e29d420 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "1.22.0",
       "license": "MIT",
       "dependencies": {
-        "markdown-it-container": "^3.0.0"
+        "markdown-it-container": "^3.0.0",
+        "svg-pan-zoom": "^3.6.1"
       },
       "devDependencies": {
         "@babel/core": "^7.15.0",
@@ -4339,6 +4340,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pan-zoom": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/svg-pan-zoom/-/svg-pan-zoom-3.6.1.tgz",
+      "integrity": "sha512-JaKkGHHfGvRrcMPdJWkssLBeWqM+Isg/a09H7kgNNajT1cX5AztDTNs+C8UzpCxjCTRrG34WbquwaovZbmSk9g=="
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
diff --git a/package.json b/package.json
index 09d665b..0b73109 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,8 @@
     }
   },
   "dependencies": {
-    "markdown-it-container": "^3.0.0"
+    "markdown-it-container": "^3.0.0",
+    "svg-pan-zoom": "^3.6.1"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",