Cool_Tools/upscayl
1
0
Fork 0
mirror of https://github.com/upscayl/upscayl.git synced 2024-11-24 07:30:19 +01:00
Code Releases Wiki Activity

Last working lens

Browse Source
This commit is contained in:
Nayam Amarshe 2024-09-22 07:06:13 +05:30
parent 42dec3abdf
commit 7077edb448
1 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
renderer/pages/index.tsx
View File

@ -1,5 +1,5 @@
"use client"; "use client";
import { useState, useEffect, useCallback, useMemo } from "react"; import { useState, useEffect, useCallback, useMemo, useRef } from "react";
import COMMAND from "../../common/commands"; import COMMAND from "../../common/commands";
import { ReactCompareSlider } from "react-compare-slider"; import { ReactCompareSlider } from "react-compare-slider";
import Header from "../components/Header"; import Header from "../components/Header";
@ -79,6 +79,8 @@ const Home = () => {
const [showCloudModal, setShowCloudModal] = useState(false); const [showCloudModal, setShowCloudModal] = useState(false);
const [minSize, setMinSize] = useState(22); const [minSize, setMinSize] = useState(22);
const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 }); const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
const upscaledImageRef = useRef<HTMLImageElement>(null);
const [lensPosition, setLensPosition] = useState({ x: 0, y: 0 });
// ATOMIC STATES // ATOMIC STATES
const [outputPath, setOutputPath] = useAtom(savedOutputPathAtom); const [outputPath, setOutputPath] = useAtom(savedOutputPathAtom);
@ -116,14 +118,16 @@ const Home = () => {
); );
const handleMouseMoveCompare = (e: React.MouseEvent) => { const handleMouseMoveCompare = (e: React.MouseEvent) => {
const { left, top, height, width } = if (upscaledImageRef.current) {
e.currentTarget.getBoundingClientRect(); const { left, top, width, height } =
const x = e.clientX - left; upscaledImageRef.current.getBoundingClientRect();
const y = e.clientY - top; const x = e.clientX - left;
setCursorPosition({ x, y }); const y = e.clientY - top;
const xZoom = ((e.pageX - left) / width) * 100; setLensPosition({
const yZoom = ((e.pageY - top) / height) * 100; x: Math.max(0, Math.min(x - lensSize, width - lensSize * 2)),
setBackgroundPosition(`${xZoom}% ${yZoom}%`); y: Math.max(0, Math.min(y - lensSize / 2, height - lensSize)),
});
}
}; };
// SET CONFIG VARIABLES ON FIRST RUN // SET CONFIG VARIABLES ON FIRST RUN
@ -816,13 +820,14 @@ const Home = () => {
className="h-full w-full object-contain" className="h-full w-full object-contain"
src={"file:///" + sanitizedUpscaledImagePath} src={"file:///" + sanitizedUpscaledImagePath}
alt="Upscaled" alt="Upscaled"
ref={upscaledImageRef}
/> />
{/* LENS */} {/* LENS */}
<div <div
className="pointer-events-none absolute opacity-0 transition-opacity before:absolute before:left-1/2 before:h-full before:w-[2px] before:bg-white group-hover:opacity-100" className="pointer-events-none absolute opacity-0 transition-opacity before:absolute before:left-1/2 before:h-full before:w-[2px] before:bg-white group-hover:opacity-100"
style={{ style={{
left: cursorPosition.x - lensSize, left: `${lensPosition.x}px`,
top: cursorPosition.y - lensSize / 2, top: `${lensPosition.y}px`,
width: lensSize * 2, width: lensSize * 2,
height: lensSize, height: lensSize,
border: "2px solid white", border: "2px solid white",
@ -833,12 +838,13 @@ const Home = () => {
<div className="h-full w-full overflow-hidden"> <div className="h-full w-full overflow-hidden">
<img <img
src={"file:///" + sanitizedImagePath} src={"file:///" + sanitizedImagePath}
alt="Original Image" alt="Original"
className="h-full w-full"
style={{ style={{
objectFit: "cover", objectFit: "contain",
objectPosition: `${-cursorPosition.x + lensSize}px ${-cursorPosition.y + lensSize / 2}px`, objectPosition: `${-lensPosition.x}px ${-lensPosition.y}px`,
width: `${zoomAmount}%`, transform: `scale(${parseInt(zoomAmount) / 100})`,
height: `${zoomAmount}%`, transformOrigin: "top left",
}} }}
/> />
</div> </div>
@ -846,11 +852,12 @@ const Home = () => {
<img <img
src={"file:///" + sanitizedUpscaledImagePath} src={"file:///" + sanitizedUpscaledImagePath}
alt="Upscaled" alt="Upscaled"
className="h-full w-full"
style={{ style={{
objectFit: "cover", objectFit: "contain",
objectPosition: `${-cursorPosition.x - lensSize}px ${-cursorPosition.y + lensSize / 2}px`, objectPosition: `${-lensPosition.x}px ${-lensPosition.y}px`,
width: `${zoomAmount}%`, transform: `scale(${parseInt(zoomAmount) / 100})`,
height: `${zoomAmount}%`, transformOrigin: "top left",
}} }}
/> />
</div> </div>