function MainComponent() { const canvasRef = React.useRef(null); const [color, setColor] = React.useState('#000000'); const [isDrawing, setIsDrawing] = React.useState(false); const [lineWidth, setLineWidth] = React.useState(1); const [history, setHistory] = React.useState([]); const [step, setStep] = React.useState(0); const canvas = canvasRef.current; React.useEffect(()=>{ if (!canvas) return; const ctx = canvas.getContext('2d'); let img = new Image(); img.onload = ()=>ctx.drawImage(img, 0, 0); if (history[step]) img.src = history[step]; }, [ step, history ]); const saveDrawing = ()=>{ const link = document.createElement('a'); link.download = 'drawing.png'; link.href = canvas.toDataURL(); link.click(); }; const startDrawing = ({ nativeEvent })=>{ const { offsetX, offsetY } = nativeEvent; const ctx = canvasRef.current.getContext('2d'); ctx.beginPath(); ctx.moveTo(offsetX, offsetY); setIsDrawing(true); }; const draw = ({ nativeEvent })=>{ if (!isDrawing) return; const { offsetX, offsetY } = nativeEvent; const ctx = canvasRef.current.getContext('2d'); ctx.lineTo(offsetX, offsetY); ctx.strokeStyle = color; ctx.lineWidth = lineWidth; ctx.stroke(); }; const endDrawing = ()=>{ const ctx = canvasRef.current.getContext('2d'); ctx.closePath(); setIsDrawing(false); const newHistory = [ ...history ]; while(newHistory.length > step)newHistory.pop(); newHistory.push(canvas.toDataURL()); setHistory(newHistory); setStep(newHistory.length); }; const undoLastAction = ()=>{ if (step > 0) setStep(step - 1); }; const redoLastAction = ()=>{ if (step < history.length - 1) setStep(step + 1); }; const handleColorChange = (newColor)=>()=>setColor(newColor); const handleLineWidthChange = (newWidth)=>()=>{ setLineWidth(newWidth === 'pencil' ? 1 : 5); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen px-4 font-roboto bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, width: 800, height: 600, className: "border border-gray-300 mt-4", onMouseDown: startDrawing, onMouseUp: endDrawing, onMouseMove: draw, onMouseLeave: endDrawing, __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mt-4", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 p-2 rounded", onClick: handleColorChange('#008000'), __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 p-2 rounded", onClick: handleColorChange('#FF0000'), __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 p-2 rounded", onClick: handleColorChange('#0000FF'), __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#00008B] p-2 rounded", onClick: handleColorChange('#00008B'), __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-black p-2 rounded", onClick: handleColorChange('#000000'), __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-white p-2 border border-gray-400 rounded", onClick: handleColorChange('#FFFFFF'), __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-pink-500 p-2 rounded", onClick: handleColorChange('#FFC0CB'), __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-purple-500 p-2 rounded", onClick: handleColorChange('#800080'), __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "border border-gray-400 px-4 py-2 bg-white", onClick: handleLineWidthChange('pencil'), __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "Pencil"), /*#__PURE__*/ React.createElement("button", { className: "border border-gray-400 px-4 py-2 bg-white", onClick: handleLineWidthChange('pen'), __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "Pen"), /*#__PURE__*/ React.createElement("button", { className: "border border-gray-400 px-4 py-2 bg-white", onClick: undoLastAction, __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Undo"), /*#__PURE__*/ React.createElement("button", { className: "border border-gray-400 px-4 py-2 bg-white", onClick: redoLastAction, __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, "Redo"), /*#__PURE__*/ React.createElement("button", { className: "border border-gray-400 px-4 py-2 bg-white", onClick: saveDrawing, __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Save"))); }