Fix expanded image pan and zoom

frontend/app.js

@@ -15,7 +15,14 @@ const POST_ID_RE = /\d+/g
 const PAGE_SIZE = 60
 const SEARCH_PAGE_SIZE = 10
 const IMAGE_URL_VERSION = 2
+const VIEWER_GAP = 16
+const VIEWER_MIN_SCALE = .25
+const VIEWER_MAX_SCALE = 6
+const VIEWER_BUTTON_STEP = .25
+const VIEWER_WHEEL_STEP = .15
 let viewerScale = 1
+let viewerX = 0
+let viewerY = VIEWER_GAP
 let viewerDrag = null
 let viewerPostId = ""
 let viewerPages = []
@@ -696,6 +703,8 @@ function showViewerPage() {
   $("#viewer-prev").classList.toggle("hidden", viewerPages.length <= 1)
   $("#viewer-next").classList.toggle("hidden", viewerPages.length <= 1)
   viewerScale = 1
+  viewerX = 0
+  viewerY = VIEWER_GAP
   applyViewerZoom()
 }
 
@@ -728,18 +737,38 @@ function closeViewer() {
 }
 
 function applyViewerZoom() {
-  $("#viewer-img").style.transform = `scale(${viewerScale})`
+  $("#viewer-img").style.transform = `translate3d(${viewerX}px, ${viewerY}px, 0) scale(${viewerScale})`
   $("#viewer-zoom").textContent = `${Math.round(viewerScale * 100)}%`
 }
 
-$("#viewer-zoom-in").addEventListener("click", () => {
-  viewerScale = Math.min(viewerScale + .25, 6)
+function resetViewerZoom() {
+  const stage = $("#viewer-stage")
+  viewerScale = 1
+  viewerX = (stage.clientWidth - $("#viewer-img").naturalWidth) / 2
+  viewerY = VIEWER_GAP
   applyViewerZoom()
+}
+
+function zoomViewer(scale, x, y) {
+  const next = Math.min(Math.max(scale, VIEWER_MIN_SCALE), VIEWER_MAX_SCALE)
+  if (next === viewerScale) return
+  const rect = $("#viewer-stage").getBoundingClientRect()
+  const anchorX = (x ?? rect.left + rect.width / 2) - rect.left
+  const anchorY = (y ?? rect.top + rect.height / 2) - rect.top
+  const ratio = next / viewerScale
+  viewerX = anchorX - (anchorX - viewerX) * ratio
+  viewerY = anchorY - (anchorY - viewerY) * ratio
+  viewerScale = next
+  applyViewerZoom()
+}
+
+$("#viewer-img").addEventListener("load", resetViewerZoom)
+$("#viewer-zoom-in").addEventListener("click", () => {
+  zoomViewer(viewerScale + VIEWER_BUTTON_STEP)
 })
 
 $("#viewer-zoom-out").addEventListener("click", () => {
-  viewerScale = Math.max(viewerScale - .25, .25)
-  applyViewerZoom()
+  zoomViewer(viewerScale - VIEWER_BUTTON_STEP)
 })
 
 $("#viewer-close").addEventListener("click", closeViewer)
@@ -748,26 +777,26 @@ $("#viewer-next").addEventListener("click", () => moveViewerPage(1))
 $("#viewer").addEventListener("click", e => { if (e.target.id === "viewer") closeViewer() })
 $("#viewer-stage").addEventListener("wheel", e => {
   e.preventDefault()
-  viewerScale = Math.min(Math.max(viewerScale + (e.deltaY < 0 ? .15 : -.15), .25), 6)
-  applyViewerZoom()
+  zoomViewer(viewerScale + (e.deltaY < 0 ? VIEWER_WHEEL_STEP : -VIEWER_WHEEL_STEP), e.clientX, e.clientY)
 })
 $("#viewer-stage").addEventListener("pointerdown", e => {
   if (e.button !== 0 || e.target.closest(".viewer-nav")) return
+  e.preventDefault()
   const stage = $("#viewer-stage")
   viewerDrag = {
     x: e.clientX,
     y: e.clientY,
-    left: stage.scrollLeft,
-    top: stage.scrollTop,
+    left: viewerX,
+    top: viewerY,
   }
   stage.classList.add("dragging")
   stage.setPointerCapture(e.pointerId)
 })
 $("#viewer-stage").addEventListener("pointermove", e => {
   if (!viewerDrag) return
-  const stage = $("#viewer-stage")
-  stage.scrollLeft = viewerDrag.left - e.clientX + viewerDrag.x
-  stage.scrollTop = viewerDrag.top - e.clientY + viewerDrag.y
+  viewerX = viewerDrag.left + e.clientX - viewerDrag.x
+  viewerY = viewerDrag.top + e.clientY - viewerDrag.y
+  applyViewerZoom()
 })
 $("#viewer-stage").addEventListener("pointerup", e => {
   viewerDrag = null

frontend/index.html

@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="icon" href="data:;base64,=">
 <title>Pixif2</title>
-<link rel="stylesheet" href="style.css?v=20260716-1">
+<link rel="stylesheet" href="style.css?v=20260720-1">
 </head>
 <body>
 <div class="topbar">
@@ -115,10 +115,10 @@
   </div>
   <div id="viewer-stage">
     <button id="viewer-prev" class="viewer-nav" aria-label="Previous result page">&lsaquo;</button>
-    <img id="viewer-img" alt="">
+    <img id="viewer-img" draggable="false" alt="">
     <button id="viewer-next" class="viewer-nav" aria-label="Next result page">&rsaquo;</button>
   </div>
 </div>
-<script src="app.js?v=20260718-1"></script>
+<script src="app.js?v=20260720-1"></script>
 </body>
 </html>

frontend/style.css

@@ -550,11 +550,7 @@ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--a
 #viewer-stage {
   position: relative;
   flex: 1;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  overflow: auto;
-  padding: 1rem;
+  overflow: hidden;
   cursor: grab;
   touch-action: none;
 }
@@ -576,10 +572,14 @@ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--a
 #viewer-next { right: 1rem; }
 #viewer-stage.dragging { cursor: grabbing; }
 #viewer-img {
+  position: absolute;
+  top: 0;
+  left: 0;
   max-width: none;
   max-height: none;
-  transform-origin: top center;
+  transform-origin: top left;
   user-select: none;
+  -webkit-user-drag: none;
 }
 @media (max-width: 860px) {
   .topbar { align-items: stretch; min-height: 64px; padding: .7rem 4vw; flex-direction: column; }