function MainComponent() { const fonts = [ "Arial", "Times New Roman", "Courier New", "Georgia", "Verdana", "Roboto", "Open Sans", "Lato", "Montserrat", "Poppins", "Playfair Display", "Merriweather", "Comic Sans MS", "Pacifico", "Dancing Script" ]; const canvasRef = React.useRef(null); const contextRef = React.useRef(null); const [isInitialized, setIsInitialized] = React.useState(false); const [drawing, setDrawing] = React.useState(false); const [position, setPosition] = React.useState({ x: 0, y: 0 }); const [lastPosition, setLastPosition] = React.useState({ x: 0, y: 0 }); const [lastTimestamp, setLastTimestamp] = React.useState(0); const [lastVelocity, setLastVelocity] = React.useState(0); const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 }); const [dragStart, setDragStart] = React.useState({ x: 0, y: 0 }); const [dragging, setDragging] = React.useState(false); const [tool, setTool] = React.useState("pencil"); const [color, setColor] = React.useState("#000000"); const [size, setSize] = React.useState(5); const [opacity, setOpacity] = React.useState(1); const [hardness, setHardness] = React.useState(0.5); const [softness, setSoftness] = React.useState(0.5); const [textBoxes, setTextBoxes] = React.useState([]); const [selectedTextBox, setSelectedTextBox] = React.useState(null); const [textSize, setTextSize] = React.useState(16); const [selectedFont, setSelectedFont] = React.useState("Arial"); const [selectedAlignment, setSelectedAlignment] = React.useState("left"); const [showTextBackground, setShowTextBackground] = React.useState(false); useEffect(()=>{ if (!isInitialized && canvasRef.current) { const canvas = canvasRef.current; canvas.width = window.innerWidth - 40; canvas.height = window.innerHeight - 200; const context = canvas.getContext("2d"); context.fillStyle = "white"; context.fillRect(0, 0, canvas.width, canvas.height); context.lineCap = "round"; context.lineJoin = "round"; context.strokeStyle = color; context.lineWidth = size; contextRef.current = context; setIsInitialized(true); } }, [ isInitialized, color, size ]); useEffect(()=>{ if (contextRef.current) { const currentContext = contextRef.current; currentContext.strokeStyle = tool === "eraser" ? "#FFFFFF" : color; currentContext.globalAlpha = opacity; currentContext.lineWidth = size; currentContext.lineCap = "round"; currentContext.lineJoin = "round"; } }, [ color, size, tool, opacity ]); useEffect(()=>{ const handleMouseMove = (e)=>{ if (dragging && selectedTextBox !== null) { const canvas = canvasRef.current; const rect = canvas.getBoundingClientRect(); const newX = e.clientX - dragStart.x + dragOffset.x; const newY = e.clientY - dragStart.y + dragOffset.y; const boundedX = Math.max(0, Math.min(newX, rect.width - 120)); const boundedY = Math.max(0, Math.min(newY, rect.height - 32)); setTextBoxes((prev)=>prev.map((box, i)=>{ if (i !== selectedTextBox) return box; return { ...box, x: boundedX, y: boundedY }; })); } }; const handleMouseUp = ()=>{ if (dragging) { setDragging(false); } }; const handleClickOutside = (e)=>{ if (!e.target.closest(".text-box")) { setSelectedTextBox(null); } }; if (dragging) { document.addEventListener("mousemove", handleMouseMove); document.addEventListener("mouseup", handleMouseUp); document.addEventListener("mouseleave", handleMouseUp); } document.addEventListener("mousedown", handleClickOutside); return ()=>{ document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); document.removeEventListener("mousedown", handleClickOutside); document.removeEventListener("mouseleave", handleMouseUp); }; }, [ dragging, selectedTextBox, dragStart, dragOffset ]); const startDrawing = ({ nativeEvent })=>{ const { offsetX, offsetY } = nativeEvent; if (tool === "text") { const newTextBox = { x: offsetX, y: offsetY, content: "", color: color, fontSize: textSize, fontFamily: selectedFont, textAlign: selectedAlignment, showBackground: showTextBackground }; setTextBoxes((prev)=>[ ...prev, newTextBox ]); setSelectedTextBox(textBoxes.length); return; } contextRef.current.beginPath(); contextRef.current.moveTo(offsetX, offsetY); setDrawing(true); setPosition({ x: offsetX, y: offsetY }); setLastPosition({ x: offsetX, y: offsetY }); setLastTimestamp(Date.now()); }; const draw = ({ nativeEvent })=>{ if (!drawing || tool === "text") return; const { offsetX, offsetY } = nativeEvent; if (tool === "pencil") { contextRef.current.lineTo(offsetX, offsetY); contextRef.current.stroke(); } else if (tool === "brush") { const currentTime = Date.now(); const dt = currentTime - lastTimestamp || 1; const dx = offsetX - lastPosition.x; const dy = offsetY - lastPosition.y; const velocity = Math.sqrt(dx * dx + dy * dy) / dt; const speedFactor = Math.min(velocity / 2, 1) * (1 - softness); const currentSize = size * (1 + speedFactor); contextRef.current.lineWidth = currentSize; contextRef.current.quadraticCurveTo(lastPosition.x, lastPosition.y, (offsetX + lastPosition.x) / 2, (offsetY + lastPosition.y) / 2); contextRef.current.stroke(); } else { contextRef.current.lineTo(offsetX, offsetY); contextRef.current.stroke(); } setPosition({ x: offsetX, y: offsetY }); setLastPosition({ x: offsetX, y: offsetY }); setLastTimestamp(Date.now()); }; const stopDrawing = ()=>{ contextRef.current.closePath(); setDrawing(false); }; const clearCanvas = ()=>{ const canvas = canvasRef.current; const context = canvas.getContext("2d"); context.fillStyle = "white"; context.fillRect(0, 0, canvas.width, canvas.height); setTextBoxes([]); setSelectedTextBox(null); }; const updateTextBox = (index, updates)=>{ setTextBoxes((prev)=>prev.map((box, i)=>i === index ? { ...box, ...updates } : box)); }; const updateSelectedTextBox = (updates)=>{ if (selectedTextBox !== null) { updateTextBox(selectedTextBox, updates); } }; const exportImage = ()=>{ const canvas = canvasRef.current; const tempCanvas = document.createElement("canvas"); tempCanvas.width = canvas.width; tempCanvas.height = canvas.height; const tempContext = tempCanvas.getContext("2d"); tempContext.fillStyle = "white"; tempContext.fillRect(0, 0, canvas.width, canvas.height); tempContext.drawImage(canvas, 0, 0); textBoxes.forEach((textBox)=>{ tempContext.font = `${textBox.fontSize}px ${textBox.fontFamily}`; tempContext.fillStyle = textBox.color; tempContext.textAlign = textBox.textAlign; if (textBox.showBackground) { tempContext.fillStyle = "white"; const metrics = tempContext.measureText(textBox.content); tempContext.fillRect(textBox.x, textBox.y - textBox.fontSize / 2, metrics.width + 16, textBox.fontSize + 16); tempContext.fillStyle = textBox.color; } tempContext.fillText(textBox.content, textBox.x + 8, textBox.y + textBox.fontSize / 2 + 8); }); const link = document.createElement("a"); link.download = "drawing.png"; link.href = tempCanvas.toDataURL("image/png"); link.click(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-5", __source: { fileName: "", lineNumber: 238, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 239, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-800 font-montserrat", __source: { fileName: "", lineNumber: 240, columnNumber: 9 }, __self: this }, "Wolf Paint")), /*#__PURE__*/ React.createElement("div", { className: "mb-4 bg-white rounded-lg shadow-lg p-4", __source: { fileName: "", lineNumber: 245, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 items-center", __source: { fileName: "", lineNumber: 246, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 247, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTool("pencil"), className: `p-2 rounded ${tool === "pencil" ? "bg-blue-500 text-white" : "hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 248, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-pencil-alt", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTool("brush"), className: `p-2 rounded ${tool === "brush" ? "bg-blue-500 text-white" : "hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paint-brush", __source: { fileName: "", lineNumber: 258, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTool("eraser"), className: `p-2 rounded ${tool === "eraser" ? "bg-blue-500 text-white" : "hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 260, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-eraser", __source: { fileName: "", lineNumber: 264, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTool("text"), className: `p-2 rounded ${tool === "text" ? "bg-blue-500 text-white" : "hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 266, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-font", __source: { fileName: "", lineNumber: 270, columnNumber: 15 }, __self: this }))), tool === "text" && /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap items-center gap-4", __source: { fileName: "", lineNumber: 275, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: selectedFont, onChange: (e)=>setSelectedFont(e.target.value), className: "p-2 border rounded", __source: { fileName: "", lineNumber: 276, columnNumber: 15 }, __self: this }, fonts.map((font)=>/*#__PURE__*/ React.createElement("option", { key: font, value: font, __source: { fileName: "", lineNumber: 282, columnNumber: 19 }, __self: this }, font))), /*#__PURE__*/ React.createElement("input", { type: "number", value: textSize, onChange: (e)=>setTextSize(Number(e.target.value)), className: "w-20 p-2 border rounded", min: "8", max: "72", __source: { fileName: "", lineNumber: 287, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex border rounded", __source: { fileName: "", lineNumber: 295, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedAlignment("left"), className: `p-2 ${selectedAlignment === "left" ? "bg-blue-100" : ""}`, __source: { fileName: "", lineNumber: 296, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-align-left", __source: { fileName: "", lineNumber: 300, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedAlignment("center"), className: `p-2 ${selectedAlignment === "center" ? "bg-blue-100" : ""}`, __source: { fileName: "", lineNumber: 302, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-align-center", __source: { fileName: "", lineNumber: 306, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedAlignment("right"), className: `p-2 ${selectedAlignment === "right" ? "bg-blue-100" : ""}`, __source: { fileName: "", lineNumber: 308, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-align-right", __source: { fileName: "", lineNumber: 312, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 318, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "color", value: color, onChange: (e)=>setColor(e.target.value), className: "w-10 h-10 rounded cursor-pointer", __source: { fileName: "", lineNumber: 319, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 325, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 326, columnNumber: 15 }, __self: this }, "Size:"), /*#__PURE__*/ React.createElement("input", { type: "range", value: size, onChange: (e)=>setSize(Number(e.target.value)), min: "1", max: "50", className: "w-32", __source: { fileName: "", lineNumber: 327, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 335, columnNumber: 15 }, __self: this }, size, "px")), tool === "brush" && /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 338, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 339, columnNumber: 17 }, __self: this }, "Softness:"), /*#__PURE__*/ React.createElement("input", { type: "range", value: softness, onChange: (e)=>setSoftness(Number(e.target.value)), min: "0", max: "1", step: "0.1", className: "w-32", __source: { fileName: "", lineNumber: 340, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 ml-auto", __source: { fileName: "", lineNumber: 352, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: clearCanvas, className: "px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600", __source: { fileName: "", lineNumber: 353, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash mr-2", __source: { fileName: "", lineNumber: 357, columnNumber: 15 }, __self: this }), "Clear"), /*#__PURE__*/ React.createElement("button", { onClick: exportImage, className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 359, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 363, columnNumber: 15 }, __self: this }), "Export")))), /*#__PURE__*/ React.createElement("div", { className: "relative bg-white rounded-lg shadow-lg p-4", __source: { fileName: "", lineNumber: 369, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { className: "border border-gray-300 rounded-lg cursor-crosshair", ref: canvasRef, onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing, __source: { fileName: "", lineNumber: 370, columnNumber: 9 }, __self: this }), textBoxes.map((textBox, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `absolute text-box ${selectedTextBox === index ? "ring-2 ring-blue-500" : ""}`, style: { left: textBox.x, top: textBox.y, color: textBox.color, fontSize: `${textBox.fontSize}px`, fontFamily: textBox.fontFamily, textAlign: textBox.textAlign, background: textBox.showBackground ? "white" : "transparent", padding: "8px", cursor: "move", minWidth: "120px" }, onMouseDown: (e)=>{ e.stopPropagation(); setSelectedTextBox(index); setDragging(true); setDragStart({ x: e.clientX, y: e.clientY }); setDragOffset({ x: textBox.x, y: textBox.y }); }, __source: { fileName: "", lineNumber: 379, columnNumber: 11 }, __self: this }, selectedTextBox === index && /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); setTextBoxes((prev)=>prev.filter((_, i)=>i !== index)); setSelectedTextBox(null); }, className: "absolute -top-3 -right-3 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 shadow-lg", __source: { fileName: "", lineNumber: 403, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xs", __source: { fileName: "", lineNumber: 411, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("textarea", { value: textBox.content, onChange: (e)=>setTextBoxes((prev)=>prev.map((box, i)=>i === index ? { ...box, content: e.target.value } : box)), className: "w-full bg-transparent border-none outline-none resize-none", placeholder: "Enter text...", style: { fontFamily: textBox.fontFamily, fontSize: `${textBox.fontSize}px`, textAlign: textBox.textAlign }, __source: { fileName: "", lineNumber: 414, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4 text-gray-600 text-sm font-montserrat", __source: { fileName: "", lineNumber: 435, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 436, columnNumber: 9 }, __self: this }, "Version 0.01 beta - New features coming soon!"))); }