function MainComponent() { const [isDrawing, setIsDrawing] = React.useState(false); const [isErasing, setIsErasing] = React.useState(false); const [mode, setMode] = React.useState('draw'); const [shape, setShape] = React.useState(''); const [size, setSize] = React.useState(30); const [eraserSize, setEraserSize] = React.useState(30); const [color, setColor] = React.useState('#000000'); const [rotation, setRotation] = React.useState(0); const canvasRef = React.useRef(null); const contextRef = React.useRef(null); React.useEffect(()=>{ const canvas = canvasRef.current; const context = canvas.getContext("2d"); const resizeCanvas = ()=>{ canvas.width = window.innerWidth * 2; canvas.height = window.innerHeight * 2; canvas.style.width = `${window.innerWidth}px`; canvas.style.height = `${window.innerHeight}px`; context.scale(2, 2); context.lineCap = "round"; context.lineWidth = 5; context.fillStyle = 'white'; context.fillRect(0, 0, canvas.width, canvas.height); }; resizeCanvas(); window.addEventListener('resize', resizeCanvas); contextRef.current = context; return ()=>window.removeEventListener('resize', resizeCanvas); }, []); const startDrawing = ({ nativeEvent })=>{ const { offsetX, offsetY, which } = nativeEvent; if (which === 1) { setIsDrawing(true); contextRef.current.beginPath(); contextRef.current.moveTo(offsetX, offsetY); } }; const startErasing = ({ nativeEvent })=>{ const { offsetX, offsetY, which } = nativeEvent; if (which === 1) { setIsErasing(true); erase(offsetX, offsetY); } }; const finishDrawing = ()=>{ setIsDrawing(false); setIsErasing(false); contextRef.current.closePath(); }; const draw = ({ nativeEvent })=>{ if (!isDrawing) return; const { offsetX, offsetY } = nativeEvent; contextRef.current.strokeStyle = color; contextRef.current.lineWidth = 5; contextRef.current.lineTo(offsetX, offsetY); contextRef.current.stroke(); }; const erase = (x, y)=>{ contextRef.current.globalCompositeOperation = "destination-out"; contextRef.current.arc(x, y, eraserSize / 2, 0, Math.PI * 2, false); contextRef.current.fill(); contextRef.current.globalCompositeOperation = "source-over"; }; const mouseMoveHandler = (event)=>{ const { offsetX, offsetY } = event.nativeEvent; if (isErasing) { erase(offsetX, offsetY); } else if (isDrawing) { draw(event); } }; const handleEraserSizeChange = (event)=>{ setEraserSize(Number(event.target.value)); }; const handleShapeChange = (event)=>{ setShape(event.target.value); }; const handleModeChange = (newMode)=>{ if (newMode === 'erase') { setMode('erase'); setIsErasing(false); setIsDrawing(false); } else { setMode('draw'); setIsErasing(false); setIsDrawing(false); } }; const handleSizeChange = (event)=>{ setSize(Number(event.target.value)); }; const handleColorChange = (event)=>{ setColor(event.target.value); }; const handleRotationChange = (event)=>{ setRotation(Number(event.target.value)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen", __source: { fileName: "", lineNumber: 114, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-opacity-0 p-2 w-[150px] flex flex-col items-center shadow-lg z-10", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "draw", className: "p-2 mb-1 bg-white rounded cursor-pointer focus:outline-none font-roboto w-full", onClick: ()=>handleModeChange('draw'), __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, "✏️"), /*#__PURE__*/ React.createElement("button", { name: "erase", className: "p-2 mb-1 bg-white rounded cursor-pointer focus:outline-none font-roboto w-full", onMouseDown: startErasing, onMouseUp: finishDrawing, onMouseMove: mouseMoveHandler, __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, "🧽"), /*#__PURE__*/ React.createElement("input", { name: "eraserSize", type: "range", min: "15", max: "100", value: eraserSize, onChange: handleEraserSizeChange, className: "w-full mb-1", disabled: mode !== 'erase', __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "shape", className: "p-2 mb-1 bg-white rounded cursor-pointer focus:outline-none font-roboto w-full", onChange: handleShapeChange, __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, "Select Shape"), /*#__PURE__*/ React.createElement("option", { value: "triangle", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, "Triangle"), /*#__PURE__*/ React.createElement("option", { value: "square", __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, "Square"), /*#__PURE__*/ React.createElement("option", { value: "pentagon", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, "Pentagon"), /*#__PURE__*/ React.createElement("option", { value: "hexagon", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, "Hexagon")), /*#__PURE__*/ React.createElement("input", { name: "size", type: "range", min: "15", max: "100", value: size, onChange: handleSizeChange, className: "w-full mb-1", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "color", value: color, onChange: handleColorChange, className: "mb-1 w-full h-8", __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "rotation", type: "range", min: "0", max: "360", value: rotation, onChange: handleRotationChange, className: "w-full", __source: { fileName: "", lineNumber: 164, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("canvas", { onMouseDown: mode === 'draw' ? startDrawing : startErasing, onMouseUp: finishDrawing, onMouseOut: finishDrawing, onMouseMove: mouseMoveHandler, ref: canvasRef, className: "flex-grow bg-white cursor-crosshair", __source: { fileName: "", lineNumber: 174, columnNumber: 7 }, __self: this })); }