Initial commit

2 files changed, 65 insertions, 15 deletions

diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor
index 46cbc45..70fff4c 100644
--- a/Pages/ViewMedia.razor
+++ b/Pages/ViewMedia.razor
@@ -28,15 +28,59 @@
 			if(e.key == 's')
 				toggleSidebar();
 	}
+
+	function imageScrollHandler(e) {
+		e.preventDefault();
+
+		let zoom = (imageScrollHandler.zoom ?? 1) + (e.deltaY * -0.01);
+		zoom = Math.max(1, Math.min(zoom, 5));
+
+		document.getElementById('image').style.transform = `scale(${zoom})`;
+
+		imageScrollHandler.zoom = zoom;
+	}
+
+	function imageMouseDownHandler(e) {
+		let img = document.getElementById('image');
+
+		img.dataset.dragging = true;
+		window.lastMouseX    = e.clientX;
+		window.lastMouseY    = e.clientY;
+	}
+
+	function pageMouseMoveHandler(e) {
+		let img = document.getElementById('image');
+
+		if(img.dataset.dragging !== 'true')
+			return;
+
+		let div = document.getElementById('image-container');
+
+		div.scrollBy(window.lastMouseX - e.clientX, window.lastMouseY - e.clientY);
+
+		window.lastMouseX = e.clientX;
+		window.lastMouseY = e.clientY;
+	}
+
+	function pageMouseUpHandler(e) {
+		document.getElementById('image').dataset.dragging = false;
+	}
+
+	window.onmousemove = (e) => pageMouseMoveHandler(e);
+	window.onmouseup = (e) => pageMouseUpHandler(e);
 </script>
 
 <div id="vcontainer">
 	<div id="hcontainer">
 		<div id="image-container" class="mobile-pane-image visible">
 			<img
+				id="image"
 				src="/media/@(media.Guid)"
 				width=@media.CurrentUploadedFile.Width
-				height=@media.CurrentUploadedFile.Height/>
+				height=@media.CurrentUploadedFile.Height
+				draggable="false"
+				onmousedown="imageMouseDownHandler(event)"
+				onwheel="imageScrollHandler(event)"/>
 		</div>
 		<div id="metadata-show-button">
 			<a href="javascript:toggleSidebar();" title="Toggle sidebar (S)"></a>
diff --git a/Pages/ViewMedia.razor.css b/Pages/ViewMedia.razor.css
index 60b04be..924691d 100644
--- a/Pages/ViewMedia.razor.css
+++ b/Pages/ViewMedia.razor.css
@@ -17,23 +17,29 @@ div#hcontainer {
 }
 
 div#image-container {
-    box-sizing: border-box;
-    flex:       1 0 0;
-    height:     100%;
-    overflow:   auto;
-    padding:    var(--size-default-gap);
-    width:      100%;
+    align-items:     center;
+    box-sizing:      border-box;
+    cursor:          grab;
+    display:         flex;
+    flex:            1 0 0;
+    height:          100%;
+    justify-content: center;
+    overflow:        hidden;
+    padding:         var(--size-default-gap);
+    width:           100%;
+}
+
+div#image-container:active {
+    cursor: grabbing;
 }
 
 div#image-container > img {
-    display:    block;
-    left:       50%;
-    max-height: 100%;
-    max-width:  100%;
-    object-fit: contain;
-    position:   relative;
-    top:        50%;
-    transform:  translate(-50%, -50%);
+    display:     block;
+    max-height:  100%;
+    max-width:   100%;
+    object-fit:  contain;
+    transition:  transform 0.1s ease-out;
+    user-select: none;
 }
 
 div#metadata-show-button {