updated docs
This commit is contained in:
56
docs/viewer.html
Normal file
56
docs/viewer.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Graph | soleprint</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; }
|
||||
body { background: #0a0a0a; overflow: hidden; width: 100vw; height: 100vh; }
|
||||
#container { width: 100vw; height: 100vh; overflow: hidden; cursor: grab; }
|
||||
#container.dragging { cursor: grabbing; }
|
||||
img { transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
|
||||
.back { position: fixed; top: 1rem; left: 1rem; color: #d4a574; text-decoration: none; font-family: system-ui; font-size: 0.85rem; z-index: 10; }
|
||||
.back:hover { text-decoration: underline; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a class="back" href="index.html">← docs</a>
|
||||
<div id="container"><img id="img"></div>
|
||||
<script>
|
||||
var src = new URLSearchParams(location.search).get('src');
|
||||
var img = document.getElementById('img');
|
||||
var container = document.getElementById('container');
|
||||
img.src = src;
|
||||
var scale = 1, x = 0, y = 0, dragging = false, startX, startY, startPanX, startPanY;
|
||||
function apply() { img.style.transform = 'translate(' + x + 'px,' + y + 'px) scale(' + scale + ')'; }
|
||||
img.onload = function() {
|
||||
var sw = window.innerWidth / img.naturalWidth;
|
||||
var sh = window.innerHeight / img.naturalHeight;
|
||||
scale = Math.min(sw, sh) * 0.9;
|
||||
x = (window.innerWidth - img.naturalWidth * scale) / 2;
|
||||
y = (window.innerHeight - img.naturalHeight * scale) / 2;
|
||||
apply();
|
||||
};
|
||||
container.addEventListener('wheel', function(e) {
|
||||
e.preventDefault();
|
||||
var factor = e.deltaY < 0 ? 1.12 : 0.89;
|
||||
var rect = container.getBoundingClientRect();
|
||||
var mx = e.clientX - rect.left, my = e.clientY - rect.top;
|
||||
x = mx - (mx - x) * factor; y = my - (my - y) * factor;
|
||||
scale *= factor; apply();
|
||||
}, { passive: false });
|
||||
container.addEventListener('mousedown', function(e) {
|
||||
if (e.button !== 0) return;
|
||||
dragging = true; startX = e.clientX; startY = e.clientY;
|
||||
startPanX = x; startPanY = y;
|
||||
container.classList.add('dragging'); e.preventDefault();
|
||||
});
|
||||
window.addEventListener('mousemove', function(e) {
|
||||
if (!dragging) return;
|
||||
x = startPanX + (e.clientX - startX); y = startPanY + (e.clientY - startY); apply();
|
||||
});
|
||||
window.addEventListener('mouseup', function() { dragging = false; container.classList.remove('dragging'); });
|
||||
container.addEventListener('dblclick', function() { img.onload(); });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user