Add pan, zoom and resize for mermaid diagrams

background/inject.js

@@ -33,7 +33,7 @@ md.inject = ({storage: {state}}) => (id) => {
       '/vendor/mithril.min.js',
       state.content.syntax && ['/vendor/prism.min.js', '/vendor/prism-autoloader.min.js', '/content/prism.js'],
       state.content.emoji && '/content/emoji.js',
-      state.content.mermaid && ['/vendor/mermaid.min.js', '/content/mermaid.js'],
+      state.content.mermaid && ['/vendor/mermaid.min.js', '/vendor/panzoom.min.js', '/content/mermaid.js'],
       state.content.mathjax && ['/content/mathjax.js', '/vendor/mathjax/tex-mml-chtml.js'],
       '/content/index.js',
       '/content/scroll.js',

build/package.sh

@@ -30,6 +30,7 @@ sh mathjax/build.sh
 sh mdc/build.sh
 sh mermaid/build.sh
 sh mithril/build.sh
+sh panzoom/build.sh
 sh prism/build.sh
 sh remark/build.sh
 sh themes/build.sh

build/panzoom/build.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+# set current working directory to directory of the shell script
+cd "$(dirname "$0")"
+
+# before
+npm ci 2> /dev/null || npm i
+
+# copy
+cp node_modules/@panzoom/panzoom/dist/panzoom.min.js ../../vendor/panzoom.min.js
+
+# after
+rm -rf node_modules/

build/panzoom/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "markdown-viewer",
+  "version": "0.0.0",
+  "description": "Markdown Viewer / Browser Extension",
+  "private": true,
+  "dependencies": {
+    "@panzoom/panzoom": "4.5.1"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

content/index.css

@@ -315,6 +315,17 @@ body._toc-right { padding-right: 300px !important; }
 /*---------------------------------------------------------------------------*/
 /*misc*/
 
+/*resize*/
+pre:has(> code.mermaid) {
+  resize: vertical;
+}
+/*pan/zoom*/
+.markdown-body code.mermaid,
+.markdown-theme code.mermaid {
+  display: block;
+  height: 100%;
+}
+
 /*mermaid text bold effect*/
 svg[id^=mermaid] text {
   stroke: none !important;

content/mermaid.js

@@ -22,6 +22,21 @@ var mmd = (() => {
       mermaid.initialize({theme})
       mermaid.init({theme}, 'code.mermaid')
       loaded = true
+
+      var diagrams = Array.from(document.querySelectorAll('code.mermaid'))
+      var timeout = setInterval(() => {
+        var svg = Array.from(document.querySelectorAll('pre code.mermaid svg'))
+        if (diagrams.length === svg.length) {
+          clearInterval(timeout)
+          svg.forEach((diagram) => {
+            var panzoom = Panzoom(diagram, {canvas: true})
+            diagram.parentElement.parentElement.addEventListener('wheel', (e) => {
+              if (!e.shiftKey) return
+              panzoom.zoomWithWheel(e)
+            })
+          })
+        }
+      }, 50)
     }
   }
 })()

content/themes.css

@@ -170,6 +170,20 @@
 ._theme-semantic a:visited { color: #800080; }
 ._theme-semantic a:active { color: #ff0000; }
 
+/*---------------------------------------------------------------------------*/
+/*mermaid pan/zoom*/
+
+._theme-mini pre > code.mermaid { padding: 0; }
+._theme-superstylin pre > code.mermaid { background: none; padding: 0; margin: 0; border-radius: 0; }
+._theme-superstylin pre:has(> code.mermaid) { background: #f6f6f6; padding: 1rem; margin-bottom: 1.563rem; border-radius: 10px; }
+._theme-water pre > code.mermaid { padding: 0; background: none; border-radius: 0; }
+._theme-water pre:has(> code.mermaid) { padding: 10px; background: #efefef; border-radius: 6px; }
+._theme-water-dark pre > code.mermaid { padding: 0; background: none; border-radius: 0; }
+._theme-water-dark pre:has(> code.mermaid) { padding: 10px; background: #161f27; border-radius: 6px; }
+@media (prefers-color-scheme: dark) {
+  ._theme-superstylin pre:has(> code.mermaid) { background: #595859; }
+}
+
 /*---------------------------------------------------------------------------*/
 /*theme fixes*/