Zoom-on-Scroll Support in Image Preiew

frontend/src/components/Media/ImageViewer.tsx

@@ -13,6 +13,7 @@ interface ImageViewerProps {
   onMouseUp: () => void;
   onMouseLeave: () => void;
   onClick?: (e: React.MouseEvent) => void;
+  onWheel?: (e: React.WheelEvent) => void;
 }
 
 export const ImageViewer: React.FC<ImageViewerProps> = ({
@@ -27,33 +28,42 @@ export const ImageViewer: React.FC<ImageViewerProps> = ({
   onMouseUp,
   onMouseLeave,
   onClick,
+  onWheel,
 }) => {
   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 className="relative flex h-full w-full items-center justify-center overflow-hidden">
+      <div
+        id="zoomable-image"
+        className="relative"
+        onClick={onClick}
+        onMouseDown={onMouseDown}
+        onMouseMove={onMouseMove}
+        onMouseUp={onMouseUp}
+        onMouseLeave={onMouseLeave}
+      >
+        <img
+          src={convertFileSrc(imagePath) || '/placeholder.svg'}
+          alt={alt}
+          draggable={false}
+          onError={(e) => {
+            const img = e.target as HTMLImageElement;
+            img.onerror = null;
+            img.src = '/placeholder.svg';
+          }}
+          onWheel={onWheel}
+          style={{
+            transform: `translate(${position.x}px, ${position.y}px) scale(${scale}) rotate(${rotation}deg)`,
+            transformOrigin: '0 0',
+            transition: isDragging ? 'none' : 'transform 0.2s ease-in-out',
+            cursor: isDragging ? 'grabbing' : 'grab',
+            maxWidth: '100%',
+            maxHeight: '100%',
+            userSelect: 'none',
+            objectFit: 'contain',
+            display: 'block',
+          }}
+        />
+      </div>
     </div>
   );
 };

frontend/src/components/Media/MediaView.tsx

@@ -35,7 +35,6 @@ export function MediaView({ onClose, images, type = 'image' }: MediaViewProps) {
     }
     return null;
   }, [images, currentViewIndex]);
-  console.log(currentViewIndex);
 
   // Local UI state
   const [showInfo, setShowInfo] = useState(false);
@@ -104,7 +103,7 @@ export function MediaView({ onClose, images, type = 'image' }: MediaViewProps) {
 
   const currentImagePath = currentImage.path;
   const currentImageAlt = `image-${currentViewIndex}`;
-
+  // const [mouselocation, setMouselocation] = useState({x:0,y:0});
   return (
     <div className="fixed inset-0 z-50 mt-0 flex flex-col bg-gradient-to-b from-black/95 to-black/98 backdrop-blur-lg">
       {/* Controls */}
@@ -121,7 +120,7 @@ export function MediaView({ onClose, images, type = 'image' }: MediaViewProps) {
 
       {/* Main viewer area */}
       <div
-        className="relative flex h-full w-full items-center justify-center"
+        className="relativflex h-full w-full"
         onClick={(e) => {
           if (e.target === e.currentTarget) handleClose();
         }}
@@ -139,13 +138,11 @@ export function MediaView({ onClose, images, type = 'image' }: MediaViewProps) {
             onMouseUp={handlers.handleMouseUp}
             onMouseLeave={handlers.handleMouseUp}
             onClick={(e) => {
-              if (e.target === e.currentTarget) {
-                handleClose();
-              }
+              if (e.target === e.currentTarget) handleClose();
             }}
+            onWheel={handlers.handleWheelZoom}
           />
         )}
-
         {/* Navigation buttons */}
         <NavigationButtons
           onPrevious={handlePreviousImage}

frontend/src/hooks/useImageViewControls.ts

@@ -17,6 +17,33 @@ export const useImageViewControls = () => {
     dragStart: { x: 0, y: 0 },
   });
 
+  // handlewheel zoom
+  const handleWheelZoom = useCallback((e: React.WheelEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const container = e.currentTarget.parentElement;
+    if (!container) return;
+    const containerRect = container.getBoundingClientRect();
+    const mouseX = e.clientX - containerRect.left;
+    const mouseY = e.clientY - containerRect.top;
+    const deltaY = e.deltaY;
+    setViewState((prev) => {
+      const delta = deltaY > 0 ? -0.1 : 0.1;
+      const newScale = Math.min(4, Math.max(0.5, prev.scale + delta));
+      if (newScale === prev.scale) return prev;
+      const scaleDiff = newScale - prev.scale;
+      const newPosX =
+        prev.position.x - (mouseX - prev.position.x) * (scaleDiff / prev.scale);
+      const newPosY =
+        prev.position.y - (mouseY - prev.position.y) * (scaleDiff / prev.scale);
+      return {
+        ...prev,
+        scale: newScale,
+        position: { x: newPosX, y: newPosY },
+      };
+    });
+  }, []);
+
   const handleZoomIn = useCallback(() => {
     setViewState((prev) => ({
       ...prev,
@@ -89,6 +116,7 @@ export const useImageViewControls = () => {
       handleMouseDown,
       handleMouseMove,
       handleMouseUp,
+      handleWheelZoom,
     },
   };
 };