import React, { useState, useRef, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function App() {
const [image, setImage] = useState(null);
const [text, setText] = useState("Enter text here");
const [textPosition, setTextPosition] = useState({ x: 250, y: 250 });
const [isDragging, setIsDragging] = useState(false);
const [canvasSize, setCanvasSize] = useState({ width: window.innerWidth, height: window.innerHeight });
const [textColor, setTextColor] = useState("#ffffff");
const [fontSize, setFontSize] = useState(30);
const [fontFamily, setFontFamily] = useState("Caveat");
const canvasRef = useRef(null);
useEffect(() => {
drawCanvas();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [image, text, textPosition, canvasSize, textColor, fontSize, fontFamily]);
const handleResize = () => {
if (!image) {
setCanvasSize({ width: window.innerWidth, height: window.innerHeight });
}
};
const drawCanvas = () => {
const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (image) {
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
} else {
ctx.fillStyle = "#f0f0f0";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#999";
ctx.font = "20px Caveat";
ctx.textAlign = "center";
ctx.fillText("Drop an image here", canvas.width / 2, canvas.height / 2);
}
ctx.font = `${fontSize}px ${fontFamily}`;
ctx.fillStyle = textColor;
ctx.textAlign = "center";
ctx.fillText(text, textPosition.x, textPosition.y);
};
const handleCanvasMouseDown = (e) => {
const canvas = canvasRef.current;
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const textWidth = canvasRef.current.getContext("2d").measureText(text).width;
if (Math.abs(x - textPosition.x) < textWidth / 2 && Math.abs(y - textPosition.y) < fontSize / 2) {
setIsDragging(true);
} else {
setTextPosition({ x, y });
}
};
const handleCanvasMouseMove = (e) => {
if (isDragging) {
const canvas = canvasRef.current;
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
setTextPosition({ x, y });
}
};
const handleCanvasMouseUp = () => {
setIsDragging(false);
};
const handleKeyPress = (e) => {
e.preventDefault();
if (e.key === 'Backspace') {
setText(text.slice(0, -1));
} else if (e.key.length === 1) {
setText(text + e.key);
}
};
const handleDrop = (e) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (event) => {
const img = new Image();
img.onload = () => {