Fix lens

renderer/components/main-content/lens-view.tsx

@@ -1,31 +1,5 @@
 import React, { useRef, useState } from "react";
 
-const LensImage = ({
-  src,
-  alt,
-  lensPosition,
-  zoomAmount,
-}: {
-  src: string;
-  alt: string;
-  lensPosition: { x: number; y: number };
-  zoomAmount: number;
-}) => (
-  <div className="h-full w-full overflow-hidden">
-    <img
-      src={src}
-      alt={alt}
-      className="h-full w-full"
-      style={{
-        objectFit: "contain",
-        objectPosition: `${-lensPosition.x}px ${-lensPosition.y}px`,
-        transform: `scale(${zoomAmount / 100})`,
-        transformOrigin: "top left",
-      }}
-    />
-  </div>
-);
-
 const LensViewer = ({
   zoomAmount,
   lensSize,
@@ -38,9 +12,9 @@ const LensViewer = ({
   sanitizedUpscaledImagePath: string;
 }) => {
   const [hoverPosition, setHoverPosition] = useState({ x: 0, y: 0 });
-  const [isHovering, setIsHovering] = useState(false);
+  const zoomLevel = 4; // Adjust zoom level as needed
 
-  const handleMouseMove = (e) => {
+  const handleMouseMove = (e: React.MouseEvent) => {
     const { left, top, width, height } =
       e.currentTarget.getBoundingClientRect();
     const x = ((e.clientX - left) / width) * 100;
@@ -49,45 +23,37 @@ const LensViewer = ({
     setHoverPosition({ x, y });
   };
 
-  const handleMouseEnter = () => setIsHovering(true);
-  const handleMouseLeave = () => setIsHovering(false);
-
   const originalImage = "file:///" + sanitizedImagePath;
   const upscaledImage = "file:///" + sanitizedUpscaledImagePath;
 
   return (
-    <div className="relative flex h-screen flex-col items-center">
+    <div className="group relative flex h-screen flex-col items-center">
       {/* Main image container */}
       <div
         className="relative h-full w-full cursor-crosshair bg-cover bg-no-repeat"
         onMouseMove={handleMouseMove}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
       >
         <img
           src={originalImage}
           alt="Original"
           className="h-full w-full object-contain"
         />
-        {isHovering && (
         <div
-            className="pointer-events-none absolute h-12 w-12 border-2 border-white"
+          className="pointer-events-none absolute hidden h-12 w-12 border-2 border-white group-hover:block"
           style={{
             left: `${hoverPosition.x}%`,
             top: `${hoverPosition.y}%`,
             transform: "translate(-50%, -50%)",
           }}
         />
-        )}
       </div>
 
       {/* Enlarged views for original and upscaled images */}
-      {isHovering && (
       <div
-          className="absolute flex gap-4"
+        className="pointer-events-none absolute hidden gap-4 group-hover:flex "
         style={{
           left: `${hoverPosition.x}%`,
-            top: `${hoverPosition.y + 10}%`, // Position below the cursor
+          top: `${hoverPosition.y}%`, // Position below the cursor
           transform: "translate(-50%, 0)",
         }}
       >
@@ -96,7 +62,7 @@ const LensViewer = ({
           style={{
             backgroundImage: `url(${originalImage})`,
             backgroundPosition: `${hoverPosition.x}% ${hoverPosition.y}%`,
-              backgroundSize: "200%", // Increase zoom level to match the zoomed box
+            backgroundSize: `${100 * zoomLevel}%`, // Increase zoom level to match the white box
           }}
         >
           <span className="absolute bottom-1 left-1 rounded bg-black bg-opacity-60 px-2 py-1 text-sm text-white">
@@ -108,7 +74,7 @@ const LensViewer = ({
           style={{
             backgroundImage: `url(${upscaledImage})`,
             backgroundPosition: `${hoverPosition.x}% ${hoverPosition.y}%`,
-              backgroundSize: "200%", // Increase zoom level to match the zoomed box
+            backgroundSize: `${100 * zoomLevel}%`, // Increase zoom level to match the white box
           }}
         >
           <span className="absolute bottom-1 left-1 rounded bg-black bg-opacity-60 px-2 py-1 text-sm text-white">
@@ -116,7 +82,6 @@ const LensViewer = ({
           </span>
         </div>
       </div>
-      )}
     </div>
   );
 };