setup zoom on model svg/mermaid

Signed-off-by: Stefan Bischof <[email protected]>

Author: stbischof

docs/.vitepress/config.mts

@@ -22,6 +22,10 @@ defineConfig({
     wrap: true
   },
 
+  head: [
+    ['script', { src: 'https://unpkg.com/[email protected]/dist/panzoom.min.js' }]
+  ],
+
   title: "Eclipse Daanse",
   description: "Data Analysis Services",
   base: "/",

docs/.vitepress/theme/index.ts

@@ -1,4 +1,28 @@
 import DefaultTheme from 'vitepress/theme'
-export default DefaultTheme
-
+import { onMounted } from 'vue'
 import './styles.css'
+
+export default {
+  extends: DefaultTheme,
+  setup() {
+    onMounted(() => {
+      // Wait for Mermaid diagrams to be rendered
+      setTimeout(() => {
+        const mermaidElements = document.querySelectorAll('.mermaid svg')
+        mermaidElements.forEach(svg => {
+          // Check if panzoom is available globally
+          if (typeof window !== 'undefined' && (window as any).panzoom) {
+            // Initialize panzoom for each Mermaid SVG
+            (window as any).panzoom(svg, {
+              maxZoom: 5,
+              minZoom: 0.1,
+              zoomDoubleClickSpeed: 1.5,
+              bounds: true,
+              boundsPadding: 0.1
+            })
+          }
+        })
+      }, 2000) // Give Mermaid time to render
+    })
+  }
+}

docs/.vitepress/theme/styles.css

@@ -57,3 +57,20 @@ h3 {
 code {
   background: #f
 }
+
+/* Mermaid diagram zoom styles */
+.mermaid {
+  overflow: visible;
+  cursor: grab;
+  user-select: none;
+}
+
+.mermaid:active {
+  cursor: grabbing;
+}
+
+.mermaid svg {
+  max-width: 100%;
+  height: auto;
+  transition: transform 0.2s ease;
+}