141 lines
5.2 KiB
HTML
141 lines
5.2 KiB
HTML
|
<!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>
|