Added zoom function

renderer/components/ImageOptions.tsx

@@ -3,9 +3,13 @@ import React from "react";
 const ImageOptions = ({
   zoomAmount,
   setZoomAmount,
+  leftImageRef,
+  rightImageRef,
 }: {
-  zoomAmount: number;
+  zoomAmount: string;
   setZoomAmount: (arg: any) => void;
+  leftImageRef: React.RefObject<HTMLImageElement>;
+  rightImageRef: React.RefObject<HTMLImageElement>;
 }) => {
   const [zoomLevel, setZoomLevel] = React.useState("125");
 
@@ -42,27 +46,40 @@ const ImageOptions = ({
           <div className="flex flex-row items-center gap-2">
             <p className="w-20">Zoom:</p>
             <button
-              className="btn-primary btn"
-              onClick={() => handleZoom(-1)}
-              disabled={zoomLevel === "100"}>
-              - 25%
-            </button>
-            <button className="btn-primary btn" onClick={() => handleZoom(0)}>
+              className={`btn-primary btn ${
+                zoomAmount === "100%" ? "btn-secondary" : "btn-primary"
+              }`}
+              onClick={() => setZoomAmount("100%")}>
               100%
             </button>
             <button
-              className="btn-primary btn"
-              onClick={() => handleZoom(1)}
-              disabled={zoomLevel === "200"}>
-              + 25%
+              className={`btn-primary btn ${
+                zoomAmount === "125%" ? "btn-secondary" : "btn-primary"
+              }`}
+              onClick={() => setZoomAmount("125%")}>
+              125%
+            </button>
+            <button
+              className={`btn-primary btn ${
+                zoomAmount === "150%" ? "btn-secondary" : "btn-primary"
+              }`}
+              onClick={() => setZoomAmount("150%")}>
+              150%
+            </button>
+            <button
+              className={`btn-primary btn ${
+                zoomAmount === "175%" ? "btn-secondary" : "btn-primary"
+              }`}
+              onClick={() => setZoomAmount("175%")}>
+              175%
+            </button>
+            <button
+              className={`btn-primary btn ${
+                zoomAmount === "200%" ? "btn-secondary" : "btn-primary"
+              }`}
+              onClick={() => setZoomAmount("200%")}>
+              200%
             </button>
-          </div>
-          <div className="flex flex-row items-center gap-2">
-            <p className="w-20">Position:</p>
-            <button className="btn-primary btn">Top</button>
-            <button className="btn-primary btn">Bottom</button>
-            <button className="btn-primary btn">Right</button>
-            <button className="btn-primary btn">Left</button>
           </div>
         </div>
       </div>

renderer/pages/index.tsx

@@ -13,6 +13,7 @@ import RightPaneInfo from "../components/RightPaneInfo";
 import ImageOptions from "../components/ImageOptions";
 import LeftPaneVideoSteps from "../components/LeftPaneVideoSteps";
 import LeftPaneImageSteps from "../components/LeftPaneImageSteps";
+import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 
 const Home = () => {
   // STATES
@@ -34,7 +35,12 @@ const Home = () => {
   const [doubleUpscaylCounter, setDoubleUpscaylCounter] = useState(0);
   const [gpuId, setGpuId] = useState("");
   const [saveImageAs, setSaveImageAs] = useState("png");
-  const [zoomAmount, setZoomAmount] = useState("");
+  const [zoomAmount, setZoomAmount] = useState("200%");
+  const [backgroundPosition, setBackgroundPosition] = useState("0% 0%");
+
+  // REFS
+  const leftImageRef = useRef();
+  const rightImageRef = useRef();
 
   // EFFECTS
   useEffect(() => {
@@ -185,6 +191,13 @@ const Home = () => {
   };
 
   // HANDLERS
+  const handleMouseMove = (e) => {
+    const { left, top, width, height } = e.target.getBoundingClientRect();
+    const x = ((e.pageX - left) / width) * 100;
+    const y = ((e.pageY - top) / height) * 100;
+    setBackgroundPosition(`${x}% ${y}%`);
+  };
+
   const selectVideoHandler = async () => {
     resetImagePaths();
 
@@ -521,6 +534,8 @@ const Home = () => {
               <ImageOptions
                 zoomAmount={zoomAmount}
                 setZoomAmount={setZoomAmount}
+                leftImageRef={leftImageRef}
+                rightImageRef={rightImageRef}
               />
               <ReactCompareSlider
                 itemOne={
@@ -528,13 +543,18 @@ const Home = () => {
                     <p className="absolute bottom-1 left-1 rounded-md bg-black p-1 text-sm font-medium text-white opacity-30">
                       Original
                     </p>
-                    <ReactCompareSliderImage
+
+                    <img
                       src={"file://" + imagePath}
                       alt="Original"
                       style={{
                         objectFit: "contain",
+                        backgroundPosition: "0% 10%",
+                        transformOrigin: backgroundPosition,
                       }}
-                      className={`bg-[#1d1c23] ${zoomAmount}`}
+                      onMouseMove={handleMouseMove}
+                      ref={leftImageRef}
+                      className={`h-full w-full bg-[#1d1c23] transition-transform group-hover:scale-[${zoomAmount}]`}
                     />
                   </>
                 }
@@ -543,17 +563,21 @@ const Home = () => {
                     <p className="absolute bottom-1 right-1 rounded-md bg-black p-1 text-sm font-medium text-white opacity-30">
                       Upscayled
                     </p>
-                    <ReactCompareSliderImage
+                    <img
                       src={"file://" + upscaledImagePath}
                       alt="Upscayl"
                       style={{
                         objectFit: "contain",
+                        backgroundPosition: "0% 10%",
+                        transformOrigin: backgroundPosition,
                       }}
-                      className="bg-[#1d1c23]"
+                      onMouseMove={handleMouseMove}
+                      ref={rightImageRef}
+                      className={`h-full w-full bg-[#1d1c23] transition-transform group-hover:scale-[${zoomAmount}]`}
                     />
                   </>
                 }
-                className="h-screen"
+                className="group h-screen"
               />
             </>
           )}

tailwind.config.js

@@ -4,9 +4,11 @@ module.exports = {
     "./renderer/components/**/*.{js,ts,jsx,tsx}",
   ],
   safelist: [
-    {
-      pattern: /scale-/,
-    },
+    "group-hover:scale-[100%]",
+    "group-hover:scale-[125%]",
+    "group-hover:scale-[150%]",
+    "group-hover:scale-[175%]",
+    "group-hover:scale-[200%]",
   ],
   theme: {
     extend: {