function DrawingToolCustomizer({ brushSize, setBrushSize, brushColor, setBrushColor }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4 bg-gray-200 w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center w-full", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "range", min: "1", max: "50", value: brushSize, name: "brushSize", className: "w-1/3 mx-2", onChange: (e)=>setBrushSize(e.target.value), __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mx-2 rounded-full", style: { backgroundColor: brushColor, width: `${brushSize}px`, height: `${brushSize}px` }, __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FFFFFF] p-2 m-1 font-roboto", onClick: ()=>setBrushColor('#FFFFFF'), __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "wh"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#000000] p-2 m-1 text-white font-roboto", onClick: ()=>setBrushColor('#000000'), __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "bk"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF0000] p-2 m-1 text-white font-roboto", onClick: ()=>setBrushColor('#FF0000'), __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "rd"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#0000FF] p-2 m-1 text-white font-roboto", onClick: ()=>setBrushColor('#0000FF'), __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "bl"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#008000] p-2 m-1 text-white font-roboto", onClick: ()=>setBrushColor('#008000'), __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "gr"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FFFF00] p-2 m-1 text-white font-roboto", onClick: ()=>setBrushColor('#FFFF00'), __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "yl"))); } function DrawingToolCustomizerStory() { const [brushSize, setBrushSize] = React.useState(25); const [brushColor, setBrushColor] = React.useState('#000000'); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(DrawingToolCustomizer, { brushSize: brushSize, setBrushSize: setBrushSize, brushColor: brushColor, setBrushColor: setBrushColor, __source: { fileName: "", lineNumber: 22, columnNumber: 16 }, __self: this })); } function MainComponent() { const [brushSize, setBrushSize] = React.useState(25); const [brushColor, setBrushColor] = React.useState('#000000'); const [isDrawing, setIsDrawing] = React.useState(false); const canvasRef = React.useRef(null); const contextRef = React.useRef(null); const adjustDrawingCoordinates = (event)=>{ const canvas = canvasRef.current; const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; let x, y; if (event.touches) { x = (event.touches[0].clientX - rect.left) * scaleX; y = (event.touches[0].clientY - rect.top) * scaleY; } else { x = (event.clientX - rect.left) * scaleX; y = (event.clientY - rect.top) * scaleY; } return { x, y }; }; React.useEffect(()=>{ const canvas = canvasRef.current; const resizeCanvas = ()=>{ const temp_canvas = document.createElement('canvas'); const temp_context = temp_canvas.getContext('2d'); temp_canvas.width = canvas.width; temp_canvas.height = canvas.height; temp_context.drawImage(canvas, 0, 0); canvas.style.width = "100%"; canvas.style.maxWidth = "500px"; canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; const context = canvas.getContext('2d'); context.drawImage(temp_canvas, 0, 0); }; window.addEventListener('resize', resizeCanvas); resizeCanvas(); canvas.style.width = "100%"; canvas.style.maxWidth = "500px"; canvas.style.touchAction = "none"; const context = canvas.getContext("2d"); context.fillStyle = "#FFFFFF"; context.fillRect(0, 0, canvas.width, canvas.height); context.lineCap = "round"; context.strokeStyle = brushColor; context.lineWidth = brushSize; contextRef.current = context; return ()=>window.removeEventListener('resize', resizeCanvas); }, []); React.useEffect(()=>{ contextRef.current.strokeStyle = brushColor; contextRef.current.lineWidth = brushSize; }, [ brushColor, brushSize ]); const startDrawing = (e)=>{ const coordinates = adjustDrawingCoordinates(e.nativeEvent); contextRef.current.beginPath(); contextRef.current.moveTo(coordinates.x, coordinates.y); setIsDrawing(true); }; const draw = (e)=>{ if (!isDrawing) { return; } const coordinates = adjustDrawingCoordinates(e.nativeEvent); contextRef.current.lineTo(coordinates.x, coordinates.y); contextRef.current.stroke(); }; const stopDrawing = ()=>{ contextRef.current.closePath(); setIsDrawing(false); }; const exportDrawing = ()=>{ const canvas = canvasRef.current; const image = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); const link = document.createElement('a'); link.download = 'drawing.jpeg'; link.href = image; link.click(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full", __source: { fileName: "", lineNumber: 96, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DrawingToolCustomizer, { brushSize: brushSize, setBrushSize: setBrushSize, brushColor: brushColor, setBrushColor: setBrushColor, __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing, onTouchStart: startDrawing, onTouchMove: draw, onTouchEnd: stopDrawing, className: "mt-4 border border-gray-200", width: "500", height: "500", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: exportDrawing, className: "mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, "Export")); }