102 lines
2.2 KiB
HTML
102 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Graph Viewer</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; }
|
|
body {
|
|
background: #0a0e17;
|
|
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;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<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;
|
|
var x = 0, y = 0;
|
|
var dragging = false;
|
|
var startX, startY, startPanX, startPanY;
|
|
|
|
function apply() {
|
|
img.style.transform = 'translate(' + x + 'px,' + y + 'px) scale(' + scale + ')';
|
|
}
|
|
|
|
// Fit to screen on load
|
|
img.onload = function() {
|
|
var sw = window.innerWidth / img.naturalWidth;
|
|
var sh = window.innerHeight / img.naturalHeight;
|
|
scale = Math.min(sw, sh) * 0.95;
|
|
x = (window.innerWidth - img.naturalWidth * scale) / 2;
|
|
y = (window.innerHeight - img.naturalHeight * scale) / 2;
|
|
apply();
|
|
};
|
|
|
|
// Wheel zoom toward cursor
|
|
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;
|
|
var my = e.clientY - rect.top;
|
|
x = mx - (mx - x) * factor;
|
|
y = my - (my - y) * factor;
|
|
scale *= factor;
|
|
apply();
|
|
}, { passive: false });
|
|
|
|
// Pan
|
|
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');
|
|
});
|
|
|
|
// Double-click to reset
|
|
container.addEventListener('dblclick', function() {
|
|
img.onload();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|