diff --git a/src/components/DrawingCanvas.js b/src/components/DrawingCanvas.js index 0bfa18f..77c73f4 100644 --- a/src/components/DrawingCanvas.js +++ b/src/components/DrawingCanvas.js @@ -21,6 +21,11 @@ const drawShape = (ctx, shape) => { ctx.stroke(); } else if (shape.type === 'image' && shape.image) { ctx.drawImage(shape.image, shape.x, shape.y, shape.width, shape.height); + } else if (shape.type === 'text' && shape.text) { + ctx.fillStyle = shape.color; + ctx.font = `${shape.thickness * 6}px sans-serif`; // Match input font size + ctx.textBaseline = 'top'; + ctx.fillText(shape.text, shape.x, shape.y); } }; @@ -37,6 +42,9 @@ const DrawingCanvas = () => { const [selectedIndex, setSelectedIndex] = useState(null); const [offset, setOffset] = useState({ x: 0, y: 0 }); const fileInputRef = useRef(null); + const [textInput, setTextInput] = useState(''); + const [isTextInputVisible, setIsTextInputVisible] = useState(false); + const [textPosition, setTextPosition] = useState({ x: 0, y: 0 }); // Resize canvas on window resize useEffect(() => { @@ -73,12 +81,32 @@ const DrawingCanvas = () => { ctx.save(); ctx.strokeStyle = 'red'; ctx.lineWidth = 2; - if (shape.type === 'rectangle' || shape.type === 'image') { + if (shape.type === 'rectangle' || shape.type === 'image' || shape.type === 'text') { ctx.strokeRect(shape.x, shape.y, shape.width, shape.height); + // Draw resize handles (corners) + const handleSize = 8; + const handles = [ + [shape.x, shape.y], + [shape.x + shape.width, shape.y], + [shape.x, shape.y + shape.height], + [shape.x + shape.width, shape.y + shape.height], + ]; + ctx.fillStyle = 'white'; + ctx.strokeStyle = 'black'; + handles.forEach(([hx, hy]) => { + ctx.fillRect(hx - handleSize/2, hy - handleSize/2, handleSize, handleSize); + ctx.strokeRect(hx - handleSize/2, hy - handleSize/2, handleSize, handleSize); + }); } else if (shape.type === 'circle') { ctx.beginPath(); ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2); ctx.stroke(); + // Draw handle at the edge (right) + const handleSize = 8; + ctx.fillStyle = 'white'; + ctx.strokeStyle = 'black'; + ctx.fillRect(shape.x + shape.radius - handleSize/2, shape.y - handleSize/2, handleSize, handleSize); + ctx.strokeRect(shape.x + shape.radius - handleSize/2, shape.y - handleSize/2, handleSize, handleSize); } ctx.restore(); } @@ -108,6 +136,13 @@ const DrawingCanvas = () => { e.preventDefault(); const { x, y } = getPos(e); + if (currentTool === 'text') { + setTextPosition({ x, y }); + setIsTextInputVisible(true); + setTextInput(''); + return; + } + if (currentTool === 'select') { // Find the topmost shape under the pointer for (let i = shapes.length - 1; i >= 0; i--) { @@ -299,6 +334,20 @@ const DrawingCanvas = () => { link.click(); }; + const getCursor = () => { + switch (currentTool) { + case 'pencil': + return 'crosshair'; + case 'rectangle': + case 'circle': + return 'crosshair'; + case 'select': + return 'move'; + default: + return 'default'; + } + }; + return (