Cool_Tools/upscayl
1
0
Fork 0
mirror of https://github.com/upscayl/upscayl.git synced 2024-11-27 17:00:52 +01:00
Code Releases Wiki Activity

Fix lens

Browse Source
This commit is contained in:
Nayam Amarshe 2024-10-30 20:18:32 +05:30
parent 97699bff28
commit fbe3143ff6
1 changed files with 39 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
renderer/components/main-content/lens-view.tsx
View File

@ -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,74 +23,65 @@ 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"
style={{
left: `${hoverPosition.x}%`,
top: `${hoverPosition.y}%`,
transform: "translate(-50%, -50%)",
}}
/>
)}
<div
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="pointer-events-none absolute hidden gap-4 group-hover:flex "
style={{
left: `${hoverPosition.x}%`,
top: `${hoverPosition.y}%`, // Position below the cursor
transform: "translate(-50%, 0)",
}}
>
<div
className="absolute flex gap-4"
className="relative h-48 w-48 border border-gray-300 bg-cover bg-no-repeat"
style={{
left: `${hoverPosition.x}%`,
top: `${hoverPosition.y + 10}%`, // Position below the cursor
transform: "translate(-50%, 0)",
backgroundImage: `url(${originalImage})`,
backgroundPosition: `${hoverPosition.x}% ${hoverPosition.y}%`,
backgroundSize: `${100 * zoomLevel}%`, // Increase zoom level to match the white box
}}
>
<div
className="relative h-48 w-48 border border-gray-300 bg-cover bg-no-repeat"
style={{
backgroundImage: `url(${originalImage})`,
backgroundPosition: `${hoverPosition.x}% ${hoverPosition.y}%`,
backgroundSize: "200%", // Increase zoom level to match the zoomed box
}}
>
<span className="absolute bottom-1 left-1 rounded bg-black bg-opacity-60 px-2 py-1 text-sm text-white">
Original
</span>
</div>
<div
className="relative h-48 w-48 border border-gray-300 bg-cover bg-no-repeat"
style={{
backgroundImage: `url(${upscaledImage})`,
backgroundPosition: `${hoverPosition.x}% ${hoverPosition.y}%`,
backgroundSize: "200%", // Increase zoom level to match the zoomed box
}}
>
<span className="absolute bottom-1 left-1 rounded bg-black bg-opacity-60 px-2 py-1 text-sm text-white">
AI Upscaled
</span>
</div>
<span className="absolute bottom-1 left-1 rounded bg-black bg-opacity-60 px-2 py-1 text-sm text-white">
Original
</span>
</div>
)}
<div
className="relative h-48 w-48 border border-gray-300 bg-cover bg-no-repeat"
style={{
backgroundImage: `url(${upscaledImage})`,
backgroundPosition: `${hoverPosition.x}% ${hoverPosition.y}%`,
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">
AI Upscaled
</span>
</div>
</div>
</div>
);
};