function MainComponent() { const [pdfFile, setPdfFile] = React.useState(null); const [scale, setScale] = React.useState(1); const canvasRef = React.useRef(null); const [tool, setTool] = React.useState("pen"); const [color, setColor] = React.useState("#000000"); const handleUpload = (e)=>{ const file = e.target.files[0]; if (file && file.type === "application/pdf") { setPdfFile(URL.createObjectURL(file)); } }; const handleZoomIn = ()=>{ setScale(scale * 1.2); }; const handleZoomOut = ()=>{ setScale(scale / 1.2); }; const drawOnCanvas = (event)=>{ const rect = canvasRef.current.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; const context = canvasRef.current.getContext('2d'); if (tool === "pen" || tool === "eraser") { const drawColor = tool === "pen" ? color : "white"; context.fillStyle = drawColor; context.beginPath(); context.arc(x, y, 5, 0, 2 * Math.PI); context.fill(); } }; const fillArea = (event)=>{ if (tool === "paint") { const rect = canvasRef.current.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; const context = canvasRef.current.getContext('2d'); context.fillStyle = color; context.floodFill(x, y, 100); } }; React.useEffect(()=>{ const canvas = canvasRef.current; if (pdfFile) { const context = canvas.getContext('2d'); const renderPdfPage = async ()=>{ const pdfjsLib = await import('pdfjs-dist/webpack'); const pdf = await pdfjsLib.getDocument(pdfFile).promise; const firstPage = await pdf.getPage(1); const viewport = firstPage.getViewport({ scale: scale }); canvas.height = viewport.height; canvas.width = viewport.width; firstPage.render({ canvasContext: context, viewport: viewport }); }; renderPdfPage(); } }, [ pdfFile, scale ]); const handleToolChange = (newTool)=>{ setTool(newTool); }; const handleColorChange = (e)=>{ setColor(e.target.value); }; let uploadButtonContent = /*#__PURE__*/ React.createElement("label", { className: "flex items-center gap-2 text-white font-roboto cursor-pointer", __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-upload", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }), "Upload PDF", /*#__PURE__*/ React.createElement("input", { type: "file", className: "hidden", onChange: handleUpload, accept: "application/pdf", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this })); let zoomControls = /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-4", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white bg-[#007bff] hover:bg-[#0056b3] font-semibold py-2 px-4 rounded inline-flex items-center", onClick: handleZoomOut, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search-minus", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-white bg-[#007bff] hover:bg-[#0056b3] font-semibold py-2 px-4 rounded inline-flex items-center", onClick: handleZoomIn, __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search-plus", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }))); let toolControls = /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mt-2", __source: { fileName: "", lineNumber: 93, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `py-2 px-4 rounded ${tool === "pen" ? "bg-[#007bff]" : "bg-[#6c757d]"} text-white`, onClick: ()=>handleToolChange("pen"), __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, "ペン"), /*#__PURE__*/ React.createElement("button", { className: `py-2 px-4 rounded ${tool === "paint" ? "bg-[#007bff]" : "bg-[#6c757d]"} text-white`, onClick: ()=>handleToolChange("paint"), __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, "ペンキ"), /*#__PURE__*/ React.createElement("button", { className: `py-2 px-4 rounded ${tool === "eraser" ? "bg-[#007bff]" : "bg-[#6c757d]"} text-white`, onClick: ()=>handleToolChange("eraser"), __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, "消しゴム"), /*#__PURE__*/ React.createElement("input", { type: "color", value: color, onChange: handleColorChange, className: "w-12", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this })); let sketchArea = /*#__PURE__*/ React.createElement("div", { className: "w-[600px] h-[400px] bg-white mt-4 border-2 border-dashed border-[#adb5bd] relative", __source: { fileName: "", lineNumber: 108, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, width: "600", height: "400", className: "w-full h-full", onMouseDown: (e)=>tool !== "paint" && drawOnCanvas(e), onMouseMove: (e)=>e.buttons === 1 && drawOnCanvas(e), onClick: (e)=>tool === "paint" && fillArea(e), __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this })); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f8f9fa]", __source: { fileName: "", lineNumber: 117, columnNumber: 5 }, __self: this }, uploadButtonContent, zoomControls, toolControls, sketchArea); }