diff --git a/src/components/DrawingCanvas.js b/src/components/DrawingCanvas.js
index 28c0027..b607ca5 100644
--- a/src/components/DrawingCanvas.js
+++ b/src/components/DrawingCanvas.js
@@ -34,6 +34,8 @@ const DrawingCanvas = () => {
const [currentTool, setCurrentTool] = useState('pencil');
const [color, setColor] = useState('#000000');
const [thickness, setThickness] = useState(2);
+ const [selectedIndex, setSelectedIndex] = useState(null);
+ const [offset, setOffset] = useState({ x: 0, y: 0 });
const fileInputRef = useRef(null);
// Resize canvas on window resize
@@ -63,7 +65,24 @@ const DrawingCanvas = () => {
ctx.putImageData(action.imageData, 0, 0);
}
});
- }, [shapes, history]);
+
+ // After drawing all shapes
+ if (selectedIndex !== null && shapes[selectedIndex]) {
+ const ctx = canvasRef.current.getContext('2d');
+ const shape = shapes[selectedIndex];
+ ctx.save();
+ ctx.strokeStyle = 'red';
+ ctx.lineWidth = 2;
+ if (shape.type === 'rectangle' || shape.type === 'image') {
+ ctx.strokeRect(shape.x, shape.y, shape.width, shape.height);
+ } else if (shape.type === 'circle') {
+ ctx.beginPath();
+ ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
+ ctx.stroke();
+ }
+ ctx.restore();
+ }
+ }, [shapes, history, selectedIndex]);
useEffect(() => {
redraw();
@@ -88,6 +107,32 @@ const DrawingCanvas = () => {
const handlePointerDown = (e) => {
e.preventDefault();
const { x, y } = getPos(e);
+
+ if (currentTool === 'select') {
+ // Find the topmost shape under the pointer
+ for (let i = shapes.length - 1; i >= 0; i--) {
+ const shape = shapes[i];
+ if (
+ (shape.type === 'rectangle' &&
+ x >= shape.x && x <= shape.x + shape.width &&
+ y >= shape.y && y <= shape.y + shape.height) ||
+ (shape.type === 'circle' &&
+ Math.sqrt((x - shape.x) ** 2 + (y - shape.y) ** 2) <= shape.radius) ||
+ (shape.type === 'image' &&
+ x >= shape.x && x <= shape.x + shape.width &&
+ y >= shape.y && y <= shape.y + shape.height)
+ ) {
+ setSelectedIndex(i);
+ setOffset({ x: x - shape.x, y: y - shape.y });
+ setIsDrawing(true);
+ return;
+ }
+ }
+ setSelectedIndex(null);
+ setIsDrawing(false);
+ return;
+ }
+
setIsDrawing(true);
if (currentTool === 'pencil') {
@@ -120,6 +165,19 @@ const DrawingCanvas = () => {
if (!isDrawing) return;
const { x, y } = getPos(e);
+ if (currentTool === 'select' && selectedIndex !== null) {
+ setShapes(prev => {
+ const updated = [...prev];
+ const shape = { ...updated[selectedIndex] };
+ // Move shape based on offset
+ shape.x = x - offset.x;
+ shape.y = y - offset.y;
+ updated[selectedIndex] = shape;
+ return updated;
+ });
+ return;
+ }
+
if (currentTool === 'pencil') {
setShapes(prev => {
if (prev.length === 0) return prev;
@@ -151,6 +209,7 @@ const DrawingCanvas = () => {
const handlePointerUp = () => {
setIsDrawing(false);
setLastPosition(null);
+ setSelectedIndex(null);
// Save a deep copy of shapes for undo/redo
setHistory(prev => [...prev, deepCopyShapes(shapes)]);
setUndoHistory([]);
@@ -232,6 +291,7 @@ const DrawingCanvas = () => {
+