function MainComponent() { const canvasRef = React.useRef(null); const [isDrawing, setIsDrawing] = React.useState(false); const [tool, setTool] = React.useState('pen'); const [color, setColor] = React.useState('#000000'); const [lineWidth, setLineWidth] = React.useState(5); React.useEffect(()=>{ const canvas = canvasRef.current; if (canvas) { const context = canvas.getContext('2d'); if (context) { context.lineCap = 'round'; context.lineJoin = 'round'; } } }, []); const startDrawing = (e)=>{ const canvas = canvasRef.current; if (canvas) { const context = canvas.getContext('2d'); if (context) { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; context.beginPath(); context.moveTo(x, y); setIsDrawing(true); } } }; const draw = (e)=>{ if (!isDrawing) return; const canvas = canvasRef.current; if (canvas) { const context = canvas.getContext('2d'); if (context) { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; context.lineTo(x, y); context.strokeStyle = tool === 'eraser' ? '#FFFFFF' : color; context.lineWidth = lineWidth; context.stroke(); } } }; const endDrawing = ()=>{ setIsDrawing(false); }; const clearCanvas = ()=>{ const canvas = canvasRef.current; if (canvas) { const context = canvas.getContext('2d'); if (context) { context.clearRect(0, 0, canvas.width, canvas.height); } } }; const exportPDF = ()=>{ const canvas = canvasRef.current; if (canvas) { const dataURL = canvas.toDataURL('image/png'); const pdf = new jsPDF(); pdf.addImage(dataURL, 'PNG', 0, 0); pdf.save('drawing.pdf'); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, "絵を描くプログラム"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex flex-wrap justify-center gap-2", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTool('pen'), className: `px-4 py-2 font-roboto rounded ${tool === 'pen' ? 'bg-blue-500 text-white' : 'bg-white text-[#121212] border border-gray-300'}`, __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "ペン"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTool('eraser'), className: `px-4 py-2 font-roboto rounded ${tool === 'eraser' ? 'bg-blue-500 text-white' : 'bg-white text-[#121212] border border-gray-300'}`, __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, "消しゴム"), /*#__PURE__*/ React.createElement("button", { onClick: clearCanvas, className: "px-4 py-2 font-roboto rounded bg-red-500 text-white", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "削除"), /*#__PURE__*/ React.createElement("button", { onClick: exportPDF, className: "px-4 py-2 font-roboto rounded bg-green-500 text-white", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, "PDF出力"), /*#__PURE__*/ React.createElement("input", { type: "color", value: color, onChange: (e)=>setColor(e.target.value), className: "w-10 h-10 rounded", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", min: "1", max: "20", value: lineWidth, onChange: (e)=>setLineWidth(parseInt(e.target.value)), className: "w-32", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, width: 800, height: 600, onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: endDrawing, onMouseOut: endDrawing, className: "border border-gray-300 bg-white max-w-full h-auto", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this })); }