Я не хочу использовать «если» ⇐ CSS

[Anonymous]

Я хочу сделать копию области загрузки фотографий профиля, используемой в Instagram и Upwork, которая работает таким же образом. Я пытался некоторое время, и единственное решение, которое я смог найти, заключается в следующем. Мне пришлось использовать много «если», но я не хочу этого делать. Есть ли более простой, логичный или простой способ или что-то лучшее, что, по вашему мнению, лучше?
Я думаю, мне нужно изменить функцию handleMouseMove, пожалуйста, помогите !!
import React, { ChangeEvent, useEffect, useRef, useState } from "react";
import { Dialog, DialogContent, DialogTitle } from "./ui/dialog";
import { Button } from "./ui/button";
import { cn } from "@/lib/utils";
import "react-image-crop/dist/ReactCrop.css";

function EditProfilePhotoDialog({ open, setOpen, profilePic }: { open: boolean; setOpen: React.Dispatch; profilePic: React.Dispatch }) {
const fileInputRef = useRef(null);
const [scale, setScale] = useState(1);
const [error, setError] = useState("");
const [imgSrc, setImgSrc] = useState(null);
const canvasRef = useRef(null);
const imgRef = useRef(null);
const [position, setPosition] = useState({ x: 0, y: 0 }); // Canvas'ın konumunu takip etmek için state

// Mouse sürükleme olaylarını takip etmek için gerekli state'ler
const [dragging, setDragging] = useState(false);
const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });

console.log("render");

const handleImageUpload = (e: ChangeEvent) => {
const file = e.target.files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = () => {
const img = new window.Image();
img.onload = () => {
setImgSrc(reader.result as string);

const canvas = document.createElement("canvas");
canvasRef.current = canvas;
const container = document.getElementById("canvas-container");
if (container && canvas) {
container.appendChild(canvas);

const orgWidth = img.width;
const orgHeight = img.height;

const scl = 300 / Math.min(orgWidth, orgHeight);

const newWidth = orgWidth * scl;
const newHeight = orgHeight * scl;

canvas.width = newWidth;
canvas.height = newHeight;

canvas.className = `absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 ${dragging ? "cursor-grabbing" : "cursor-grab"}`;
canvas.id = "cnv";

const ctx = canvas.getContext("2d");
if (ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.globalAlpha = 0.3;
ctx.scale(scale, scale);
ctx.drawImage(img, 0, 0, newWidth, newHeight);
ctx.restore();
}
}
imgRef.current = img; // Resmi referansla sakla
};
img.src = reader.result as string;
};
reader.readAsDataURL(file);
}
};

useEffect(() => {
const canvas = canvasRef.current;
const container = document.getElementById("canvas-container");

if (canvas && container) {
const containerRect = container.getBoundingClientRect();
const canvasRect = canvas.getBoundingClientRect();

const handleMouseDown = (e: MouseEvent) => {
setDragging(true);
setPosition({ x: canvas.offsetLeft, y: canvas.offsetTop });
setStartPosition({ x: e.clientX, y: e.clientY });
};

const handleMouseMove = (e: MouseEvent) => {
if (!dragging) return;

let newX = position.x;
let newY = position.y;

if (canvasRect.width === 300) {
newX = position.x;
}

if (canvasRect.height === 300) {
newY = position.y;
}

let kilitTop = canvasRect.top = containerRect.right + 10;

if (kilitTop && kilitBot) {
newY = position.y + (e.clientY - startPosition.y);
}
if (kilitLeft && kilitRight) {
newX = position.x + (e.clientX - startPosition.x);
}
if (canvasRect.height !== 300 && !kilitTop && e.clientY - startPosition.y < 0) {
newY = position.y + (e.clientY - startPosition.y);
}
if (canvasRect.height !== 300 && !kilitTop && canvasRect.top > containerRect.top) {
newY = position.y + (containerRect.top - canvasRect.top);
}
if (canvasRect.height !== 300 && !kilitBot && e.clientY - startPosition.y > 0) {
newY = position.y + (e.clientY - startPosition.y);
}
if (canvasRect.height !== 300 && !kilitBot && canvasRect.bottom < containerRect.bottom) {
newY = position.y - (canvasRect.bottom - containerRect.bottom);
}
if (canvasRect.width !== 300 && !kilitLeft && e.clientX - startPosition.x < 0) {
newX = position.x + (e.clientX - startPosition.x);
}
if (canvasRect.width !== 300 && !kilitLeft && canvasRect.left > containerRect.left) {
newX = position.x + (containerRect.left - canvasRect.left);
}
if (canvasRect.width !== 300 && !kilitRight && e.clientX - startPosition.x > 0) {
newX = position.x + (e.clientX - startPosition.x);
}
if (canvasRect.width !== 300 && !kilitRight && canvasRect.right < containerRect.right) {
newX = position.x + (containerRect.right - canvasRect.right);
}

setPosition({ x: newX, y: newY });
setStartPosition({ x: e.clientX, y: e.clientY });
};

const handleMouseUp = () => setDragging(false);

const handleMouseLeave = () => setDragging(false);

canvas.addEventListener("mousedown", handleMouseDown);
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
canvas.addEventListener("mouseleave", handleMouseLeave);

return () => {
if (canvas) {
canvas.removeEventListener("mousedown", handleMouseDown);
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp);
canvas.removeEventListener("mouseleave", handleMouseLeave);
}
};
}
}, [imgSrc, dragging, position, setPosition]);

useEffect(() => {
const canvas = canvasRef.current;
if (canvas) {
canvas.style.left = `${position.x}px`;
canvas.style.top = `${position.y}px`;
}
}, [position]);

useEffect(() => {
const canvas = canvasRef.current;
if (canvas) canvas.style.cursor = dragging ? "grabbing" : "grab";
}, [dragging]);

useEffect(() => {
const canvas = canvasRef.current;

if (canvas) {
setPosition({ x: position.x, y: position.y });
canvas.style.transform = `scale(${scale})`;
canvas.style.transformOrigin = "center";
}
}, [scale]);

return (


Profil fotoğrafını düzenle

Fotoğrafı düzenle




{!imgSrc &&
Bir resim yükleyin
}





{imgSrc && (
{
setScale(Number(e.target.value));
}}
/>
)}














{imgSrc ? (
Farklı Resim Yükle
) : (
setOpen(false)}>
İptal et

)}

Resmi uygula




);
}

export default EditProfilePhotoDialog;



Подробнее здесь: https://stackoverflow.com/questions/793 ... -to-use-if