<!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>