panning

frontend/src/detail/DetailPanel.jsx

@@ -990,6 +990,33 @@ const DetailPanel = ({
     [endZoomDrag],
   );
 
+  const handleZoomStageWheel = useCallback(
+    (event) => {
+      if (!zoomNative) {
+        return;
+      }
+      const deltaX = Number.isFinite(event.deltaX) ? event.deltaX : 0;
+      const deltaY = Number.isFinite(event.deltaY) ? event.deltaY : 0;
+      if (!deltaX && !deltaY) {
+        return;
+      }
+      let updated = false;
+      setZoomPan((current) => {
+        const clamped = clampPan(current.x - deltaX, current.y - deltaY);
+        if (clamped.x === current.x && clamped.y === current.y) {
+          return current;
+        }
+        updated = true;
+        return clamped;
+      });
+      if (updated) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [zoomNative, clampPan],
+  );
+
   const zoomDisplay = useMemo(() => {
     if (!zoomedPreview) {
       return null;
@@ -1644,7 +1671,11 @@ const DetailPanel = ({
               aria-label="Enlarged document preview"
               onClick={closeZoomPreview}
             >
-              <div ref={zoomStageRef} className={zoomStageClassName}>
+              <div
+                ref={zoomStageRef}
+                className={zoomStageClassName}
+                onWheel={handleZoomStageWheel}
+              >
                 <img
                   src={zoomDisplay.url}
                   alt={zoomDisplay.alt}