function MainComponent() { const [text, setText] = React.useState(''); const [uploadedImg, setUploadedImg] = React.useState(null); const [imgDimensions, setImgDimensions] = React.useState({ width: 200, height: 200, x: 100, y: 100 }); const [textSize, setTextSize] = React.useState(20); const canvasRef = React.useRef(null); const handleTextChange = (e)=>{ setText(e.target.value); }; const handleImageUpload = (e)=>{ if (e.target.files && e.target.files[0]) { setUploadedImg(e.target.files[0]); } }; const handleMoveImage = (direction)=>{ setImgDimensions((prevDimensions)=>{ const update = { ...prevDimensions }; switch(direction){ case 'left': update.x = Math.max(update.x - 10, 0); break; case 'right': update.x = Math.min(update.x + 10, canvasRef.current.width - update.width); break; case 'up': update.y = Math.max(update.y - 10, 0); break; case 'down': update.y = Math.min(update.y + 10, canvasRef.current.height - update.height); break; default: break; } return update; }); }; const updateCanvas = ()=>{ const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.font = `${textSize}px Arial`; ctx.fillText(text, 100, 50); if (uploadedImg) { const img = new Image(); img.src = URL.createObjectURL(uploadedImg); img.onload = ()=>{ ctx.drawImage(img, imgDimensions.x, imgDimensions.y, imgDimensions.width, imgDimensions.height); }; } }; React.useEffect(()=>{ updateCanvas(); }, [ text, uploadedImg, textSize, imgDimensions ]); const handleResizeText = (e)=>{ setTextSize(e.target.value); }; const handleSaveDesign = ()=>{ const canvas = canvasRef.current; const dataURL = canvas.toDataURL('image/jpeg'); const a = document.createElement('a'); a.href = dataURL; a.download = 'custom-product-design.jpg'; a.click(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, "Custom Product Designer"), /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, className: "border-2 border-gray-300", width: "800", height: "600", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-start mt-4", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-2", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "text_input", className: "block mb-2 text-lg", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Text:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "text_input", name: "text_input", placeholder: "Enter text here", className: "w-full p-2 border-2 border-gray-300", onChange: handleTextChange, __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "text_size", className: "block mt-3 mb-2 text-lg", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Text Size:"), /*#__PURE__*/ React.createElement("input", { type: "range", id: "text_size", name: "text_size", min: "10", max: "60", value: textSize, className: "w-full", onChange: handleResizeText, __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-2", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "image_upload", className: "block mb-2 text-lg", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "Upload Image:"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "image_upload", name: "image_upload", className: "w-full p-2 border-2 border-gray-300", onChange: handleImageUpload, __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around my-2", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleMoveImage('left'), className: "px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "Left"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleMoveImage('right'), className: "px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "Right"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleMoveImage('up'), className: "px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, "Up"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleMoveImage('down'), className: "px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "Down")), /*#__PURE__*/ React.createElement("button", { onClick: handleSaveDesign, className: "w-full mt-4 p-2 bg-blue-500 text-white rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Save Design")))); }