<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mermaid Flowchart Pan Zoom Demo</title> <script src="https://bumbu.github.io/svg-pan-zoom/dist/svg-pan-zoom.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <style> #svg-container { width: 100%; height: 600px; border: 1px solid black; overflow: hidden; } #mermaid-diagram { width: 100%; height: 100%; } #mermaid-diagram svg { width: 100%; height: 100%; } </style> </head> <body> <div id="svg-container"> <div id="mermaid-diagram" class="mermaid"> flowchart TD A["Cloud User"] -- CHF/EUR/... --> B("CLOUD MARKET PLACE<br>Discount based on position<br>in TF Liquidity Pool.") & B2(("ThreeFold<br>Liquidity Pool")) B2 -- TFT or INCA --> B B -- TFT or INCA --> C{"Proof Of Utilization"} G["FARMING GRANTS<br>40m Tokens / Month"] --> I{"Proof Of Capacity<br>uptime, location, ..."} I --> D["ThreeFold Farmers"] C -- 80% --> D C -- 10% --> E["ThreeFold Cooperative"] & F["Validators<br>Commercial Partners"] </div> </div> <div> <button id="zoom-in">Zoom In</button> <button id="zoom-out">Zoom Out</button> <button id="reset">Reset</button> <button id="center">Center</button> <button id="fit">Fit</button> <button id="toggle-pan">Toggle Pan</button> <button id="toggle-zoom">Toggle Zoom</button> </div> <script> mermaid.initialize({ startOnLoad: true }); // Wait for Mermaid to render the flowchart mermaid.init(undefined, "#mermaid-diagram").then(function() { // Get the SVG element created by Mermaid var svgElement = document.querySelector("#mermaid-diagram svg"); // Initialize svg-pan-zoom var panZoomInstance = svgPanZoom(svgElement, { zoomEnabled: true, controlIconsEnabled: true, fit: true, center: true, minZoom: 0.1, maxZoom: 10, zoomScaleSensitivity: 0.3 }); svgElement.addEventListener('touchstart', function(){}, { passive: true }); svgElement.addEventListener('touchmove', function(){}, { passive: true }); svgElement.addEventListener('touchend', function(){}, { passive: true }); // Event listeners for buttons document.getElementById('zoom-in').addEventListener('click', function() { panZoomInstance.zoomIn(); }); document.getElementById('zoom-out').addEventListener('click', function() { panZoomInstance.zoomOut(); }); document.getElementById('reset').addEventListener('click', function() { panZoomInstance.resetZoom(); panZoomInstance.resetPan(); }); document.getElementById('center').addEventListener('click', function() { panZoomInstance.center(); }); document.getElementById('fit').addEventListener('click', function() { panZoomInstance.fit(); }); document.getElementById('toggle-pan').addEventListener('click', function() { if (panZoomInstance.isPanEnabled()) { panZoomInstance.disablePan(); this.textContent = 'Enable Pan'; } else { panZoomInstance.enablePan(); this.textContent = 'Disable Pan'; } }); document.getElementById('toggle-zoom').addEventListener('click', function() { if (panZoomInstance.isZoomEnabled()) { panZoomInstance.disableZoom(); this.textContent = 'Enable Zoom'; } else { panZoomInstance.enableZoom(); this.textContent = 'Disable Zoom'; } }); // Example of programmatic panning setTimeout(function() { panZoomInstance.panBy({x: 50, y: 50}); }, 1000); // Example of getting sizes console.log('SVG Sizes:', panZoomInstance.getSizes()); // Example of zoom at a specific point setTimeout(function() { panZoomInstance.zoomAtPoint(2, {x: 300, y: 200}); }, 2000); // Example of setting a custom beforeZoom function panZoomInstance.setBeforeZoom(function(oldZoom, newZoom) { console.log('Zoom is about to change from', oldZoom, 'to', newZoom); return true; // Allows zooming to continue }); // Example of setting a custom onZoom function panZoomInstance.setOnZoom(function(newZoom) { console.log('Zoom has changed to', newZoom); }); }); </script> </body> </html>