From 5e33ab2c2f56b83aae4c8387439cb4bdca0f8877 Mon Sep 17 00:00:00 2001
From: Nayam Amarshe <25067102+NayamAmarshe@users.noreply.github.com>
Date: Sat, 24 Dec 2022 13:10:45 +0530
Subject: [PATCH] Added image options

---
 renderer/components/ImageOptions.tsx       | 116 ++++++++++-----------
 renderer/components/LeftPaneImageSteps.tsx |   4 +-
 renderer/pages/index.tsx                   |  43 +++++---
 3 files changed, 86 insertions(+), 77 deletions(-)

diff --git a/renderer/components/ImageOptions.tsx b/renderer/components/ImageOptions.tsx
index cd6f122..ef28513 100644
--- a/renderer/components/ImageOptions.tsx
+++ b/renderer/components/ImageOptions.tsx
@@ -3,15 +3,13 @@ import React, { useEffect } from "react";
 const ImageOptions = ({
   zoomAmount,
   setZoomAmount,
-  leftImageRef,
-  rightImageRef,
   resetImagePaths,
+  hideZoomOptions,
 }: {
   zoomAmount: string;
   setZoomAmount: (arg: any) => void;
-  leftImageRef: React.RefObject<HTMLImageElement>;
-  rightImageRef: React.RefObject<HTMLImageElement>;
   resetImagePaths: () => void;
+  hideZoomOptions?: boolean;
 }) => {
   useEffect(() => {
     if (!localStorage.getItem("zoomAmount")) {
@@ -22,7 +20,7 @@ const ImageOptions = ({
   }, []);
 
   return (
-    <div className="animate rounded-btn collapse absolute top-0 z-50 m-2 opacity-25 hover:opacity-100">
+    <div className="animate rounded-btn collapse absolute top-1 z-50 m-2 opacity-25 hover:opacity-100">
       <input type="checkbox" className="peer" />
       <div className="collapse-title bg-base-100 text-center text-sm font-semibold uppercase text-primary-content peer-checked:bg-base-300 peer-checked:text-base-content">
         Show/Hide Image Settings
@@ -33,59 +31,61 @@ const ImageOptions = ({
           <button className="btn-primary btn" onClick={resetImagePaths}>
             Reset Image
           </button>
-          <div className="flex flex-row items-center gap-2">
-            <p className="w-20">Zoom:</p>
-            <button
-              className={`btn-primary btn ${
-                zoomAmount === "100%" ? "btn-secondary" : "btn-primary"
-              }`}
-              onClick={() => {
-                setZoomAmount("100%");
-                localStorage.setItem("zoomAmount", "100%");
-              }}>
-              100%
-            </button>
-            <button
-              className={`btn-primary btn ${
-                zoomAmount === "125%" ? "btn-secondary" : "btn-primary"
-              }`}
-              onClick={() => {
-                setZoomAmount("125%");
-                localStorage.setItem("zoomAmount", "125%");
-              }}>
-              125%
-            </button>
-            <button
-              className={`btn-primary btn ${
-                zoomAmount === "150%" ? "btn-secondary" : "btn-primary"
-              }`}
-              onClick={() => {
-                setZoomAmount("150%");
-                localStorage.setItem("zoomAmount", "150%");
-              }}>
-              150%
-            </button>
-            <button
-              className={`btn-primary btn ${
-                zoomAmount === "175%" ? "btn-secondary" : "btn-primary"
-              }`}
-              onClick={() => {
-                setZoomAmount("175%");
-                localStorage.setItem("zoomAmount", "175%");
-              }}>
-              175%
-            </button>
-            <button
-              className={`btn-primary btn ${
-                zoomAmount === "200%" ? "btn-secondary" : "btn-primary"
-              }`}
-              onClick={() => {
-                setZoomAmount("200%");
-                localStorage.setItem("zoomAmount", "200%");
-              }}>
-              200%
-            </button>
-          </div>
+          {!hideZoomOptions && (
+            <div className="flex flex-row items-center gap-2">
+              <p className="w-20">Zoom:</p>
+              <button
+                className={`btn-primary btn ${
+                  zoomAmount === "100%" ? "btn-secondary" : "btn-primary"
+                }`}
+                onClick={() => {
+                  setZoomAmount("100%");
+                  localStorage.setItem("zoomAmount", "100%");
+                }}>
+                100%
+              </button>
+              <button
+                className={`btn-primary btn ${
+                  zoomAmount === "125%" ? "btn-secondary" : "btn-primary"
+                }`}
+                onClick={() => {
+                  setZoomAmount("125%");
+                  localStorage.setItem("zoomAmount", "125%");
+                }}>
+                125%
+              </button>
+              <button
+                className={`btn-primary btn ${
+                  zoomAmount === "150%" ? "btn-secondary" : "btn-primary"
+                }`}
+                onClick={() => {
+                  setZoomAmount("150%");
+                  localStorage.setItem("zoomAmount", "150%");
+                }}>
+                150%
+              </button>
+              <button
+                className={`btn-primary btn ${
+                  zoomAmount === "175%" ? "btn-secondary" : "btn-primary"
+                }`}
+                onClick={() => {
+                  setZoomAmount("175%");
+                  localStorage.setItem("zoomAmount", "175%");
+                }}>
+                175%
+              </button>
+              <button
+                className={`btn-primary btn ${
+                  zoomAmount === "200%" ? "btn-secondary" : "btn-primary"
+                }`}
+                onClick={() => {
+                  setZoomAmount("200%");
+                  localStorage.setItem("zoomAmount", "200%");
+                }}>
+                200%
+              </button>
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/renderer/components/LeftPaneImageSteps.tsx b/renderer/components/LeftPaneImageSteps.tsx
index a5332ea..d0fad10 100644
--- a/renderer/components/LeftPaneImageSteps.tsx
+++ b/renderer/components/LeftPaneImageSteps.tsx
@@ -24,7 +24,6 @@ interface IProps {
   setSaveImageAs: (arg: string) => void;
   gpuId: string;
   setGpuId: (arg: string) => void;
-  leftImageRef: any;
   dimensions: {
     width: number | null;
     height: number | null;
@@ -230,7 +229,8 @@ function LeftPaneImageSteps({
             </span>{" "}
             to{" "}
             <span className="font-bold">
-              {dimensions.width * 4}x{dimensions.height * 4}
+              {doubleUpscayl ? dimensions.width * 8 : dimensions.width * 4}x
+              {doubleUpscayl ? dimensions.height * 8 : dimensions.height * 4}
             </span>
           </p>
         )}
diff --git a/renderer/pages/index.tsx b/renderer/pages/index.tsx
index 752ab9d..3b6a658 100644
--- a/renderer/pages/index.tsx
+++ b/renderer/pages/index.tsx
@@ -499,21 +499,29 @@ const Home = () => {
           !isVideo &&
           upscaledImagePath.length === 0 &&
           imagePath.length > 0 && (
-            <img
-              className="h-full w-full object-contain"
-              src={
-                "file://" +
-                `${upscaledImagePath ? upscaledImagePath : imagePath}`
-              }
-              onLoad={(e: any) => {
-                setDimensions({
-                  width: e.target.naturalWidth,
-                  height: e.target.naturalHeight,
-                });
-              }}
-              draggable="false"
-              alt=""
-            />
+            <>
+              <ImageOptions
+                zoomAmount={zoomAmount}
+                setZoomAmount={setZoomAmount}
+                resetImagePaths={resetImagePaths}
+                hideZoomOptions={true}
+              />
+              <img
+                src={
+                  "file://" +
+                  `${upscaledImagePath ? upscaledImagePath : imagePath}`
+                }
+                onLoad={(e: any) => {
+                  setDimensions({
+                    width: e.target.naturalWidth,
+                    height: e.target.naturalHeight,
+                  });
+                }}
+                draggable="false"
+                alt=""
+                className={`h-full w-full bg-[#1d1c23] object-contain`}
+              />
+            </>
           )}
 
         {/* BATCH UPSCALE SHOW SELECTED FOLDER */}
@@ -562,9 +570,10 @@ const Home = () => {
                     <img
                       src={"file://" + imagePath}
                       alt="Original"
+                      onMouseMove={handleMouseMove}
                       style={{
                         objectFit: "contain",
-                        backgroundPosition: "0% 10%",
+                        backgroundPosition: "0% 0%",
                         transformOrigin: backgroundPosition,
                       }}
                       className={`h-full w-full bg-[#1d1c23] transition-transform group-hover:scale-[${zoomAmount}]`}
@@ -581,7 +590,7 @@ const Home = () => {
                       alt="Upscayl"
                       style={{
                         objectFit: "contain",
-                        backgroundPosition: "0% 10%",
+                        backgroundPosition: "0% 0%",
                         transformOrigin: backgroundPosition,
                       }}
                       onMouseMove={handleMouseMove}