diff --git a/src/components/DrawingCanvas.js b/src/components/DrawingCanvas.js index 77c73f4..d28d8bb 100644 --- a/src/components/DrawingCanvas.js +++ b/src/components/DrawingCanvas.js @@ -33,8 +33,6 @@ const DrawingCanvas = () => { const canvasRef = useRef(null); const [isDrawing, setIsDrawing] = useState(false); const [lastPosition, setLastPosition] = useState(null); - const [history, setHistory] = useState([]); - const [undoHistory, setUndoHistory] = useState([]); const [shapes, setShapes] = useState([]); const [currentTool, setCurrentTool] = useState('pencil'); const [color, setColor] = useState('#000000'); @@ -45,6 +43,7 @@ const DrawingCanvas = () => { const [textInput, setTextInput] = useState(''); const [isTextInputVisible, setIsTextInputVisible] = useState(false); const [textPosition, setTextPosition] = useState({ x: 0, y: 0 }); + const [showColorPicker, setShowColorPicker] = useState(false); // Resize canvas on window resize useEffect(() => { @@ -68,11 +67,6 @@ const DrawingCanvas = () => { const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); shapes.forEach(shape => drawShape(ctx, shape)); - history.forEach(action => { - if (action.type === 'stroke') { - ctx.putImageData(action.imageData, 0, 0); - } - }); // After drawing all shapes if (selectedIndex !== null && shapes[selectedIndex]) { @@ -81,40 +75,20 @@ const DrawingCanvas = () => { ctx.save(); ctx.strokeStyle = 'red'; ctx.lineWidth = 2; - if (shape.type === 'rectangle' || shape.type === 'image' || shape.type === 'text') { + if (shape.type === 'rectangle' || shape.type === 'image') { 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(); } - }, [shapes, history, selectedIndex]); + }, [shapes, selectedIndex]); useEffect(() => { redraw(); - }, [shapes, history, redraw]); + }, [shapes, redraw]); // Get mouse or touch position const getPos = (e) => { @@ -253,33 +227,11 @@ const DrawingCanvas = () => { } }; - const deepCopyShapes = (shapesArr) => JSON.parse(JSON.stringify(shapesArr)); - + // Update handlePointerUp to not save history/undoHistory const handlePointerUp = () => { setIsDrawing(false); setLastPosition(null); setSelectedIndex(null); - // Save a deep copy of shapes for undo/redo - setHistory(prev => [...prev, deepCopyShapes(shapes)]); - setUndoHistory([]); - }; - - // Undo: restore the previous snapshot - const handleUndo = () => { - if (history.length === 0) return; - setUndoHistory(prev => [...prev, deepCopyShapes(shapes)]); - const prevShapes = history[history.length - 1]; - setShapes(deepCopyShapes(prevShapes)); - setHistory(prev => prev.slice(0, -1)); - }; - - // Redo: restore the next snapshot - const handleRedo = () => { - if (undoHistory.length === 0) return; - setHistory(prev => [...prev, deepCopyShapes(shapes)]); - const nextShapes = undoHistory[undoHistory.length - 1]; - setShapes(deepCopyShapes(nextShapes)); - setUndoHistory(prev => prev.slice(0, -1)); }; // Touch events for mobile @@ -316,9 +268,6 @@ const DrawingCanvas = () => { image: img } ]); - // Save to history for undo - setHistory(prev => [...prev, deepCopyShapes([...shapes, { type: 'image', x, y, width, height, image: img }])]); - setUndoHistory([]); }; img.src = URL.createObjectURL(file); // Reset input so same file can be uploaded again @@ -356,8 +305,6 @@ const DrawingCanvas = () => { - - { onChange={handleInsertImage} /> -
- setColor(c.hex)} /> -
+ + {showColorPicker && ( +
+ setColor(c.hex)} /> +
+ )}
{thickness} @@ -411,15 +366,6 @@ const DrawingCanvas = () => { thickness, } ]); - setHistory(prev => [...prev, deepCopyShapes([...shapes, { - type: 'text', - x: textPosition.x, - y: textPosition.y, - text: textInput, - color, - thickness, - }])]); - setUndoHistory([]); } setIsTextInputVisible(false); setTextInput('');