Zoom-on-Scroll Support in Image Viewer (#530)

Author: DecodeX15

docs/backend/backend_python/openapi.json

@@ -2003,6 +2003,7 @@
           "metadata": {
             "anyOf": [
               {
+                "additionalProperties": true,
                 "type": "object"
               },
               {

frontend/package-lock.json

@@ -61,6 +61,7 @@
     "react-image-crop": "^11.0.7",
     "react-redux": "^9.2.0",
     "react-router": "^7.6.2",
+    "react-zoom-pan-pinch": "^3.7.0",
     "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.8",
     "ts-node": "^10.9.2",

frontend/package.json

@@ -1,59 +1,79 @@
+import React, { useRef, useImperativeHandle, forwardRef } from 'react';
+import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 import { convertFileSrc } from '@tauri-apps/api/core';
-import React from 'react';
 
 interface ImageViewerProps {
   imagePath: string;
   alt: string;
-  scale: number;
-  position: { x: number; y: number };
   rotation: number;
-  isDragging: boolean;
-  onMouseDown: (e: React.MouseEvent) => void;
-  onMouseMove: (e: React.MouseEvent) => void;
-  onMouseUp: () => void;
-  onMouseLeave: () => void;
-  onClick?: (e: React.MouseEvent) => void;
+  resetSignal?: number;
 }
 
-export const ImageViewer: React.FC<ImageViewerProps> = ({
-  imagePath,
-  alt,
-  scale,
-  position,
-  rotation,
-  isDragging,
-  onMouseDown,
-  onMouseMove,
-  onMouseUp,
-  onMouseLeave,
-  onClick,
-}) => {
-  return (
-    <div
-      id="zoomable-image"
-      onClick={onClick}
-      onMouseDown={onMouseDown}
-      onMouseMove={onMouseMove}
-      onMouseUp={onMouseUp}
-      onMouseLeave={onMouseLeave}
-      className="relative flex h-full w-full items-center justify-center overflow-hidden"
-    >
-      <img
-        src={convertFileSrc(imagePath) || '/placeholder.svg'}
-        alt={alt}
-        draggable={false}
-        className="h-full w-full object-contain select-none"
-        onError={(e) => {
-          const img = e.target as HTMLImageElement;
-          img.onerror = null;
-          img.src = '/placeholder.svg';
-        }}
-        style={{
-          transform: `translate(${position.x}px, ${position.y}px) scale(${scale}) rotate(${rotation}deg)`,
-          transition: isDragging ? 'none' : 'transform 0.2s ease-in-out',
-          cursor: isDragging ? 'grabbing' : 'grab',
-        }}
-      />
-    </div>
-  );
-};
+export interface ImageViewerRef {
+  zoomIn: () => void;
+  zoomOut: () => void;
+  reset: () => void;
+}
+
+export const ImageViewer = forwardRef<ImageViewerRef, ImageViewerProps>(
+  ({ imagePath, alt, rotation, resetSignal }, ref) => {
+    const transformRef = useRef<any>(null);
+
+    // Expose zoom functions to parent
+    useImperativeHandle(ref, () => ({
+      zoomIn: () => transformRef.current?.zoomIn(),
+      zoomOut: () => transformRef.current?.zoomOut(),
+      reset: () => transformRef.current?.resetTransform(),
+    }));
+
+    // Reset on signal change
+    React.useEffect(() => {
+      transformRef.current?.resetTransform();
+    }, [resetSignal]);
+
+    return (
+      <TransformWrapper
+        ref={transformRef}
+        initialScale={1}
+        minScale={0.1}
+        maxScale={8}
+        centerOnInit
+        limitToBounds={false}
+      >
+        <TransformComponent
+          wrapperStyle={{
+            width: '100%',
+            height: '100%',
+            overflow: 'visible',
+          }}
+          contentStyle={{
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <img
+            src={convertFileSrc(imagePath) || '/placeholder.svg'}
+            alt={alt}
+            draggable={false}
+            className="select-none"
+            onError={(e) => {
+              const img = e.target as HTMLImageElement;
+              img.onerror = null;
+              img.src = '/placeholder.svg';
+            }}
+            style={{
+              maxWidth: '100%',
+              maxHeight: '100%',
+              objectFit: 'contain',
+              zIndex: 50,
+              transform: `rotate(${rotation}deg)`,
+            }}
+          />
+        </TransformComponent>
+      </TransformWrapper>
+    );
+  },
+);

frontend/src/components/Media/ImageViewer.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { MediaViewProps } from '@/types/Media';
 import { selectCurrentViewIndex } from '@/features/imageSelectors';
@@ -8,14 +8,14 @@ import {
   previousImage,
   closeImageView,
 } from '@/features/imageSlice';
-
 // Modular components
 import { MediaViewControls } from './MediaViewControls';
 import { ZoomControls } from './ZoomControls';
 import { MediaThumbnails } from './MediaThumbnails';
 import { MediaInfoPanel } from './MediaInfoPanel';
 import { ImageViewer } from './ImageViewer';
 import { NavigationButtons } from './NavigationButtons';
+import type { ImageViewerRef } from './ImageViewer';
 
 // Custom hooks
 import { useImageViewControls } from '@/hooks/useImageViewControls';
@@ -29,17 +29,20 @@ export function MediaView({ onClose, images, type = 'image' }: MediaViewProps) {
   // Redux selectors
   const currentViewIndex = useSelector(selectCurrentViewIndex);
   const totalImages = images.length;
+
   const currentImage = useMemo(() => {
     if (currentViewIndex >= 0 && currentViewIndex < images.length) {
       return images[currentViewIndex];
     }
     return null;
   }, [images, currentViewIndex]);
-  console.log(currentViewIndex);
+
+  const imageViewerRef = useRef<ImageViewerRef>(null);
 
   // Local UI state
   const [showInfo, setShowInfo] = useState(false);
   const [showThumbnails, setShowThumbnails] = useState(false);
+  const [resetSignal, setResetSignal] = useState(0);
 
   // Custom hooks
   const { viewState, handlers } = useImageViewControls();
@@ -69,39 +72,54 @@ export function MediaView({ onClose, images, type = 'image' }: MediaViewProps) {
     [dispatch, handlers],
   );
 
-  // Slideshow functionality
-  const { isSlideshowActive, toggleSlideshow } = useSlideshow(
-    totalImages,
-    handleNextImage,
-  );
-
-  // Toggle functions
   const toggleInfo = useCallback(() => {
     setShowInfo((prev) => !prev);
   }, []);
 
+  // Hooks that depend on currentImage but always declared
   const handleToggleFavorite = useCallback(() => {
     if (currentImage) {
       toggleFavorite(currentImage.path);
     }
   }, [currentImage, toggleFavorite]);
 
+  const handleZoomIn = useCallback(() => {
+    imageViewerRef.current?.zoomIn();
+  }, []);
+
+  const handleZoomOut = useCallback(() => {
+    imageViewerRef.current?.zoomOut();
+  }, []);
+
+  const handleResetZoom = useCallback(() => {
+    imageViewerRef.current?.reset();
+    handlers.resetZoom();
+    setResetSignal((s) => s + 1);
+  }, [handlers]);
+
   // Keyboard navigation
   useKeyboardNavigation({
     onClose: handleClose,
     onNext: handleNextImage,
     onPrevious: handlePreviousImage,
-    onZoomIn: handlers.handleZoomIn,
-    onZoomOut: handlers.handleZoomOut,
+    onZoomIn: handleZoomIn,
+    onZoomOut: handleZoomOut,
     onRotate: handlers.handleRotate,
     onToggleInfo: toggleInfo,
   });
 
+  // Slideshow functionality
+  const { isSlideshowActive, toggleSlideshow } = useSlideshow(
+    totalImages,
+    handleNextImage,
+  );
+
   // Early return if no images or invalid index
   if (!images.length || currentViewIndex === -1 || !currentImage) {
     return null;
   }
 
+  // Safe variables
   const currentImagePath = currentImage.path;
   const currentImageAlt = `image-${currentViewIndex}`;
 
@@ -121,28 +139,18 @@ export function MediaView({ onClose, images, type = 'image' }: MediaViewProps) {
 
       {/* Main viewer area */}
       <div
-        className="relative flex h-full w-full items-center justify-center"
+        className="relative flex h-full w-full items-center justify-center overflow-visible"
         onClick={(e) => {
           if (e.target === e.currentTarget) handleClose();
         }}
       >
         {type === 'image' && (
           <ImageViewer
+            ref={imageViewerRef}
             imagePath={currentImagePath}
             alt={currentImageAlt}
-            scale={viewState.scale}
-            position={viewState.position}
             rotation={viewState.rotation}
-            isDragging={viewState.isDragging}
-            onMouseDown={handlers.handleMouseDown}
-            onMouseMove={handlers.handleMouseMove}
-            onMouseUp={handlers.handleMouseUp}
-            onMouseLeave={handlers.handleMouseUp}
-            onClick={(e) => {
-              if (e.target === e.currentTarget) {
-                handleClose();
-              }
-            }}
+            resetSignal={resetSignal}
           />
         )}
 
@@ -156,10 +164,10 @@ export function MediaView({ onClose, images, type = 'image' }: MediaViewProps) {
       {/* Zoom controls */}
       {type === 'image' && (
         <ZoomControls
-          onZoomIn={handlers.handleZoomIn}
-          onZoomOut={handlers.handleZoomOut}
+          onZoomIn={handleZoomIn}
+          onZoomOut={handleZoomOut}
           onRotate={handlers.handleRotate}
-          onReset={handlers.resetZoom}
+          onReset={handleResetZoom}
           showThumbnails={showThumbnails}
         />
       )}