Merge branch 'fix/1293-production-zoom-scroll' into test-release/pr1295-workflow

Author: VanshajPoonia

frontend/src/components/Media/ZoomableImage.tsx

@@ -29,11 +29,13 @@ export const ZoomableImage = forwardRef<ZoomableImageRef, ZoomableImageProps>(
       contentDimensions,
       imageOffset,
       cursor,
+      isButtonZoom,
       handleImageLoad,
       handlePointerDown,
       handlePointerMove,
       handlePointerEnd,
       handlePointerLeave,
+      handleZoomTransitionEnd,
       zoomIn,
       zoomOut,
       reset,
@@ -67,6 +69,7 @@ export const ZoomableImage = forwardRef<ZoomableImageRef, ZoomableImageProps>(
       >
         <div
           data-testid="zoom-content"
+          onTransitionEnd={handleZoomTransitionEnd}
           style={{
             position: 'relative',
             width: contentDimensions
@@ -78,6 +81,7 @@ export const ZoomableImage = forwardRef<ZoomableImageRef, ZoomableImageProps>(
             transform: `translate3d(${transformState.positionX}px, ${transformState.positionY}px, 0) scale(${transformState.scale})`,
             transformOrigin: '0 0',
             willChange: 'transform',
+            transition: isButtonZoom ? 'transform 250ms ease-out' : undefined,
           }}
         >
           <img

frontend/src/components/Media/__tests__/ZoomableImage.test.tsx

@@ -286,7 +286,11 @@ describe('ZoomableImage controlled transform behavior', () => {
       clientY: 550,
     });
 
-    expectCurrentTransform(290, 245, 1.1);
+    expectCurrentTransform(
+      289.4829081924352,
+      244.7414540962176,
+      1.1051709180756477,
+    );
   });
 
   test('stops at the first viewport edge before mouse anchoring begins', () => {
@@ -336,7 +340,11 @@ describe('ZoomableImage controlled transform behavior', () => {
       clientY: 300,
     });
 
-    expectCurrentTransform(-71.25, 127.10526315789474, 1.1526315789473685);
+    expectCurrentTransform(
+      -78.87818855673584,
+      125.49932872489774,
+      1.1633378085006818,
+    );
   });
 
   test('anchors vertically only after height has reached the viewport edge', () => {
@@ -357,9 +365,9 @@ describe('ZoomableImage controlled transform behavior', () => {
     });
 
     expectCurrentTransform(
-      224.28571428571428,
-      -51.33333333333337,
-      1.1714285714285715,
+      222.3832453092709,
+      -57.84400494160627,
+      1.184111697938194,
     );
   });
 
@@ -380,7 +388,11 @@ describe('ZoomableImage controlled transform behavior', () => {
       clientY: 500,
     });
 
-    expectCurrentTransform(-78.75, -76.85185185185185, 0.9888888888888888);
+    expectCurrentTransform(
+      -73.61964265295342,
+      -73.05158715033576,
+      0.9823741494005757,
+    );
   });
 
   test('recenters when zooming back to minimum scale', () => {
@@ -420,7 +432,11 @@ describe('ZoomableImage controlled transform behavior', () => {
       clientY: 500,
     });
 
-    expectCurrentTransform(-43, -32, 0.55);
+    expectCurrentTransform(
+      -21.29705614748953,
+      -15.90707397752716,
+      0.5256355481880121,
+    );
   });
 
   test('panning clamps overflowing axes and keeps fitting axes centered', () => {
@@ -457,7 +473,7 @@ describe('ZoomableImage controlled transform behavior', () => {
       clientY: 1000,
     });
 
-    expectCurrentTransform(0, 127.10526315789474, 1.1526315789473685);
+    expectCurrentTransform(0, 125.49932872489774, 1.1633378085006818);
   });
 
   test('reuses the drag-start geometry while panning', () => {
@@ -771,16 +787,20 @@ describe('ZoomableImage controlled transform behavior', () => {
 
     // A line-mode wheel (deltaMode === 1) reports scroll in lines, not pixels.
     // It must be normalized by LINE_HEIGHT_MULTIPLIER (33), so a 3-line notch
-    // zooms by 3 * 33 * ZOOM_FACTOR(0.001) = 0.099 -> scale 1.099, identical to
-    // a 99px pixel-mode notch. Without the multiplier it would be only 0.003.
+    // produces the same zoomRatio as a 99px pixel-mode notch: exp(99 * 0.001).
+    // Without the multiplier, a 3-line notch would produce exp(3 * 0.001) instead.
     fireEvent.wheel(viewport, {
       deltaY: -3,
       deltaMode: 1,
       clientX: 400,
       clientY: 300,
     });
 
-    expectCurrentTransform(290.1, 245.05, 1.099);
+    expectCurrentTransform(
+      289.5933700441118,
+      244.7966850220559,
+      1.104066299558882,
+    );
   });
 
   test('retries the fit until the viewport can be measured', () => {

frontend/src/hooks/useZoomTransform.ts

@@ -6,13 +6,13 @@ import {
   type PointerEvent as ReactPointerEvent,
 } from 'react';
 import {
-  CONTROL_BUTTON_ZOOM_STEP,
+  CONTROL_BUTTON_ZOOM_RATIO,
   LINE_HEIGHT_MULTIPLIER,
   MAX_FIT_RETRY_FRAMES,
   MAX_SCALE,
   MIN_SCALE,
   SCALE_EPSILON,
-  ZOOM_FACTOR,
+  WHEEL_ZOOM_SENSITIVITY,
   clamp,
   computeZoomTransform,
   getAxisPosition,
@@ -67,6 +67,7 @@ export const useZoomTransform = ({
   const [rawDimensions, setRawDimensions] = useState<Size | null>(null);
   const [isOverflowing, setIsOverflowing] = useState(false);
   const [isPanning, setIsPanning] = useState(false);
+  const [isButtonZoom, setIsButtonZoom] = useState(false);
 
   const setRawImageDimensions = useCallback((dimensions: Size | null) => {
     rawDimensionsRef.current = dimensions;
@@ -243,7 +244,7 @@ export const useZoomTransform = ({
   }, [scheduleFitTransform]);
 
   const zoomBy = useCallback(
-    (zoomChange: number, clientX?: number, clientY?: number) => {
+    (zoomRatio: number, clientX?: number, clientY?: number) => {
       const geometry = getGeometry();
 
       if (!geometry) return false;
@@ -255,7 +256,7 @@ export const useZoomTransform = ({
         computeZoomTransform({
           geometry,
           currentTransform,
-          zoomChange,
+          zoomRatio,
           clientX,
           clientY,
         }),
@@ -323,11 +324,14 @@ export const useZoomTransform = ({
       e.stopPropagation();
       e.stopImmediatePropagation();
 
+      setIsButtonZoom(false);
+
       const isLineMode = e.deltaMode === 1;
       const multiplier = isLineMode ? LINE_HEIGHT_MULTIPLIER : 1;
-      const zoomChange = -e.deltaY * multiplier * ZOOM_FACTOR;
+      const normalizedDelta = -e.deltaY * multiplier;
+      const zoomRatio = Math.exp(normalizedDelta * WHEEL_ZOOM_SENSITIVITY);
 
-      zoomBy(zoomChange, e.clientX, e.clientY);
+      zoomBy(zoomRatio, e.clientX, e.clientY);
     };
 
     viewport.addEventListener('wheel', handleWheel, {
@@ -465,11 +469,17 @@ export const useZoomTransform = ({
     [endDrag],
   );
 
-  const zoomIn = useCallback(() => zoomBy(CONTROL_BUTTON_ZOOM_STEP), [zoomBy]);
-  const zoomOut = useCallback(
-    () => zoomBy(-CONTROL_BUTTON_ZOOM_STEP),
-    [zoomBy],
-  );
+  const zoomIn = useCallback(() => {
+    setIsButtonZoom(true);
+    zoomBy(CONTROL_BUTTON_ZOOM_RATIO);
+  }, [zoomBy]);
+  const zoomOut = useCallback(() => {
+    setIsButtonZoom(true);
+    zoomBy(1 / CONTROL_BUTTON_ZOOM_RATIO);
+  }, [zoomBy]);
+  const handleZoomTransitionEnd = useCallback(() => {
+    setIsButtonZoom(false);
+  }, []);
 
   const contentDimensions = rawDimensions
     ? getEffectiveDimensions(
@@ -495,11 +505,13 @@ export const useZoomTransform = ({
     contentDimensions,
     imageOffset,
     cursor,
+    isButtonZoom,
     handleImageLoad,
     handlePointerDown,
     handlePointerMove,
     handlePointerEnd,
     handlePointerLeave,
+    handleZoomTransitionEnd,
     zoomIn,
     zoomOut,
     reset: resetToFit,

frontend/src/utils/__tests__/zoomUtils.test.ts

@@ -56,7 +56,7 @@ describe('zoomUtils', () => {
     const next = computeZoomTransform({
       geometry,
       currentTransform: { positionX: 300, positionY: 250, scale: 1 },
-      zoomChange: 0.1,
+      zoomRatio: 1.1,
       clientX: 770,
       clientY: 560,
     });
@@ -78,7 +78,7 @@ describe('zoomUtils', () => {
     const next = computeZoomTransform({
       geometry,
       currentTransform: { positionX: 20, positionY: 150, scale: 1 },
-      zoomChange: 0.1,
+      zoomRatio: 1.1,
       clientX: 750,
       clientY: 300,
     });
@@ -100,14 +100,14 @@ describe('zoomUtils', () => {
     const next = computeZoomTransform({
       geometry,
       currentTransform: { positionX: -80, positionY: 135, scale: 1.1 },
-      zoomChange: 0.1,
+      zoomRatio: 1.1,
       clientX: 700,
       clientY: 50,
     });
 
-    expect(next.positionX).toBeCloseTo(-150.90909090909088);
-    expect(next.positionY).toBeCloseTo(120);
-    expect(next.scale).toBeCloseTo(1.2);
+    expect(next.positionX).toBeCloseTo(-158);
+    expect(next.positionY).toBeCloseTo(118.5);
+    expect(next.scale).toBeCloseTo(1.21);
   });
 
   test('blends overflowing axes back toward center while zooming out', () => {
@@ -122,21 +122,21 @@ describe('zoomUtils', () => {
     const zoomedIn = computeZoomTransform({
       geometry,
       currentTransform: getFitTransform(geometry),
-      zoomChange: 0.1,
+      zoomRatio: 1.1,
       clientX: 700,
       clientY: 500,
     });
     const zoomedOut = computeZoomTransform({
       geometry,
       currentTransform: zoomedIn,
-      zoomChange: -0.05,
+      zoomRatio: 0.95,
       clientX: 700,
       clientY: 500,
     });
 
-    expect(zoomedOut.positionX).toBeCloseTo(-43);
-    expect(zoomedOut.positionY).toBeCloseTo(-32);
-    expect(zoomedOut.scale).toBeCloseTo(0.55);
+    expect(zoomedOut.positionX).toBeCloseTo(-18.6075);
+    expect(zoomedOut.positionY).toBeCloseTo(-13.905);
+    expect(zoomedOut.scale).toBeCloseTo(0.5225);
   });
 
   test('anchors one axis or both axes according to overflow state', () => {
@@ -151,20 +151,20 @@ describe('zoomUtils', () => {
     const widthAtEdge = computeZoomTransform({
       geometry: widthOnlyGeometry,
       currentTransform: { positionX: 20, positionY: 150, scale: 1 },
-      zoomChange: 0.1,
+      zoomRatio: 1.1,
       clientX: 750,
       clientY: 300,
     });
     const widthAnchored = computeZoomTransform({
       geometry: widthOnlyGeometry,
       currentTransform: widthAtEdge,
-      zoomChange: 0.1,
+      zoomRatio: 1.1,
       clientX: 750,
       clientY: 300,
     });
 
-    expect(widthAnchored.positionX).toBeCloseTo(-71.25);
-    expect(widthAnchored.positionY).toBeCloseTo(127.10526315789474);
+    expect(widthAnchored.positionX).toBeCloseTo(-75);
+    expect(widthAnchored.positionY).toBeCloseTo(126.31578947368419);
 
     const bothAxisGeometry = makeGeometry({
       viewportWidth: 800,
@@ -177,19 +177,19 @@ describe('zoomUtils', () => {
     const bothAtEdge = computeZoomTransform({
       geometry: bothAxisGeometry,
       currentTransform: getFitTransform(bothAxisGeometry),
-      zoomChange: 0.1,
+      zoomRatio: 1.1,
       clientX: 700,
       clientY: 500,
     });
     const bothAnchored = computeZoomTransform({
       geometry: bothAxisGeometry,
       currentTransform: bothAtEdge,
-      zoomChange: 0.1,
+      zoomRatio: 1.1,
       clientX: 700,
       clientY: 500,
     });
 
-    expect(bothAnchored.positionX).toBeCloseTo(-78.75);
-    expect(bothAnchored.positionY).toBeCloseTo(-76.85185185185185);
+    expect(bothAnchored.positionX).toBeCloseTo(-70);
+    expect(bothAnchored.positionY).toBeCloseTo(-70.37037037037032);
   });
 });

frontend/src/utils/zoomUtils.ts

@@ -1,12 +1,15 @@
-export const ZOOM_FACTOR = 0.001;
 // Browser line-mode wheel events report lines, not pixels. This normalizes one
 // line-scroll notch to the commonly used 33px pixel delta.
 export const LINE_HEIGHT_MULTIPLIER = 33;
+// Sensitivity for exponential wheel zoom: ratio = exp(normalizedDelta * sensitivity).
+// A mouse notch (~100px delta) becomes ~10.5% scale change; trackpad stays smooth.
+export const WHEEL_ZOOM_SENSITIVITY = 0.001;
 export const MAX_SCALE = 8;
 export const MIN_SCALE = 1;
 export const SCALE_EPSILON = 0.0001;
 export const MAX_FIT_RETRY_FRAMES = 12;
-export const CONTROL_BUTTON_ZOOM_STEP = 0.5;
+// Multiplicative zoom ratio for the zoom-in/out buttons (50% per click).
+export const CONTROL_BUTTON_ZOOM_RATIO = 1.5;
 
 export type Size = {
   width: number;
@@ -37,7 +40,7 @@ export type Geometry = {
 type ComputeZoomTransformOptions = {
   geometry: Geometry;
   currentTransform: TransformState;
-  zoomChange: number;
+  zoomRatio: number;
   clientX?: number;
   clientY?: number;
 };
@@ -231,12 +234,12 @@ export const getElementSize = (element: HTMLElement) => {
 export const computeZoomTransform = ({
   geometry,
   currentTransform,
-  zoomChange,
+  zoomRatio,
   clientX,
   clientY,
 }: ComputeZoomTransformOptions): TransformState => {
   const desiredScale = clamp(
-    currentTransform.scale + zoomChange,
+    currentTransform.scale * zoomRatio,
     geometry.minScale,
     MAX_SCALE,
   );