feat(svg): add svg-pan-zoom

- added zoom/pan feature by applying `svg-pan-zoom` to the `svg-pan-zoom` function
imjuni · Mar 14, 2024 · cdf4eba · cdf4eba
1 parent 5264c17
commit cdf4eba
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 6 deletions.
diff --git a/src/template/html/mermaid-script.ts b/src/template/html/mermaid-script.ts
@@ -1,2 +1,2 @@
 export const mermaidScript = `<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.0/mermaid.min.js"></script>
-<script>mermaid.initialize({ startOnLoad: true });</script>`;
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg-pan-zoom.min.js"></script>`;
diff --git a/src/template/html/mermaid.ts b/src/template/html/mermaid.ts
@@ -57,11 +57,13 @@ export const mermaid = `<!DOCTYPE html>
       </h2>
 
       <h3 class="title is-4">Diagram</h3>
-      <pre class="mermaid">
-      <% it.versions.filter((version) => version.latest).forEach((version) => { -%>
-      <%~ include('${CE_TEMPLATE_NAME.MERMAID_DOCUMENT}', { entities: version.entities, option: it.option, metadata: it.metadata }) %>
-      <% }) -%>
-      </pre>
+      <div class="mermaid-box">
+        <pre id="mermaid-pre" class="mermaid">
+        <% it.versions.filter((version) => version.latest).forEach((version) => { -%>
+        <%~ include('${CE_TEMPLATE_NAME.MERMAID_DOCUMENT}', { entities: version.entities, option: it.option, metadata: it.metadata }) %>
+        <% }) -%>
+        </pre>
+      </div>
 
       <% if (!it.option.skipImageInHtml) { %>
       <h3 class="title is-4">
@@ -88,5 +90,18 @@ export const mermaid = `<!DOCTYPE html>
   </div>
 
 </body>
+<script>
+  mermaid.initialize({ startOnLoad: true, er:{ useMaxWidth:false } });
+  setTimeout(() => {
+    svgPanZoom(document.querySelector('#mermaid-pre>svg'), { 
+      minZoom: 0.5, 
+      maxZoom: 10, 
+      fit: true, 
+      contain: false, 
+      controlIconsEnabled: true, center: true, 
+      refreshRate: 'auto'
+    });
+  }, 200);
+</script>
 
 </html>`;
diff --git a/src/template/html/style.ts b/src/template/html/style.ts
@@ -128,4 +128,22 @@ export const style = `<style>
     .hide {
       display: none !important;
     }
+
+    .mermaid-box {
+      height: 60vh;
+      min-height: 600px;
+      width: 85vw;
+    }
+
+    .mermaid {
+      height: 60vh;
+      min-height: 600px;
+      width: 85vw;
+      overflow: hidden;
+
+      svg {
+        height: 100% !important;
+        width: 100%  !important;
+      }
+    }
   </style>`;