Fix image options

renderer/components/upscayl-tab/view/ImageOptions.tsx

@@ -53,23 +53,34 @@ const ImageOptions = ({
           <button className="btn-primary btn" onClick={resetImagePaths}>
             Reset Image
           </button>
-          {!hideZoomOptions && (
-            <div className="flex flex-col gap-2">
-              <p className="font-medium text-sm">Zoom Amount ({zoomAmount}%)</p>
-              <input
-                type="range"
-                min="100"
-                max="990"
-                step={10}
-                className="range range-md"
-                value={parseInt(zoomAmount)}
-                onChange={(e) => {
-                  setZoomAmount(e.target.value);
-                  localStorage.setItem("zoomAmount", e.target.value);
-                }}
-              />
-            </div>
-          )}
+
+          <div className="flex flex-row items-center gap-2">
+            <p className="font-medium text-sm">Lens View</p>
+            <input
+              type="checkbox"
+              className="toggle"
+              onChange={(e) => {
+                setViewType(e.target.checked ? "slider" : "lens");
+              }}
+            />
+            <p className="font-medium text-sm">Slider View</p>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <p className="font-medium text-sm">Zoom Amount ({zoomAmount}%)</p>
+            <input
+              type="range"
+              min="100"
+              max="1000"
+              step={10}
+              className="range range-md"
+              value={parseInt(zoomAmount)}
+              onChange={(e) => {
+                setZoomAmount(e.target.value);
+                localStorage.setItem("zoomAmount", e.target.value);
+              }}
+            />
+          </div>
 
           <div className="flex flex-col gap-2">
             <p className="font-medium text-sm">Lens Size ({lensSize / 10})</p>

renderer/pages/index.tsx

@@ -696,7 +696,7 @@ const Home = () => {
               className="relative group overflow-hidden h-full w-full"
               onMouseMove={handleMouseMoveCompare}>
               <img
-                className={`absolute left-0 top-0 object-contain w-full h-full group-hover:scale-[${
+                className={`absolute left-0 top-0 object-contain w-full h-full transition-transform group-hover:scale-[${
                   zoomAmount + "%"
                 }]`}
                 src={"file:///" + imagePath}
@@ -706,7 +706,7 @@ const Home = () => {
                 }}
               />
               <div
-                className={`absolute left-0 top-0 bg-white mix-blend-difference w-full h-full group-hover:visible invisible group-hover:scale-[${
+                className={`absolute left-0 top-0 bg-white mix-blend-difference w-full h-full transition-transform group-hover:visible invisible group-hover:scale-[${
                   zoomAmount + "%"
                 }]`}
                 style={{
@@ -718,7 +718,7 @@ const Home = () => {
                 }}
               />
               <img
-                className={`absolute top-0 object-contain left-0 w-full h-full group-hover:scale-[${
+                className={`absolute top-0 object-contain left-0 w-full h-full transition-transform group-hover:scale-[${
                   zoomAmount + "%"
                 }]`}
                 src={"file:///" + upscaledImagePath}
@@ -755,9 +755,7 @@ const Home = () => {
                         backgroundPosition: "0% 0%",
                         transformOrigin: backgroundPosition,
                       }}
-                      className={`h-full w-full bg-gradient-to-br from-base-300 to-base-100 transition-transform group-hover:scale-[${
-                        parseInt(zoomAmount.slice(0, -1)) / 100
-                      }]`}
+                      className={`h-full w-full bg-gradient-to-br from-base-300 to-base-100 transition-transform group-hover:scale-[${zoomAmount}%]`}
                     />
                   </>
                 }

tailwind.config.js

@@ -4,7 +4,7 @@ module.exports = {
     "./renderer/components/**/*.{js,ts,jsx,tsx}",
   ],
   safelist: [
-    ...[...Array(99).keys()].flatMap((index) => [
+    ...[...Array(101).keys()].flatMap((index) => [
       `group-hover:scale-[${index * 10}%]`,
       `group-hover:scale-[${index * 10}%]`,
     ]),