This is a web application that allows users to draw and edit shapes on a canvas. The application was developed using Vue.js and Express.js.

1. Open the Painter folder using an IDE such as IntelliJ IDEA.
2. Run src\main\java\eg.edu.alexu.csd.oo.p.draw.cs\CsApplication (Port:8090).
3. Open the Paint folder using an IDE such as Visual Studio Code.
4. Install "axios" (npm install axios).
5. Run src\components\Paint.vue (npm run serve).
6. Open http://localhost:8080/ in your web browser.

We used the Factory design pattern to generate new shapes depending on the type of the shape.

The project supports geometric shapes, including:

• Line Segment
• Circle
• Ellipse
• Triangle
• Rectangle
• Square

The application allows the following functionalities on all shapes:

• Draw
• Color
• Resize
• Move
• Copy
• Delete

It also allows users to undo or redo any action performed.

We have decided to put two toolboxes, one on the left and the other on the right, with a canvas between them that users can draw on. The left toolbox includes the group of shapes, and the border color picker. The right toolbox includes the group of possible operations, the group of tools, and the fill color picker.

To draw a shape, click on any icon, then go to the canvas and click and drag. If the user clicks on any shape icon, the shape will stay with them until they click on another icon.

If the user wants to make a shape that has a border color, they should pick a color from the color picker that lies in the left toolbox before they draw the selected shape. If the user wants to make a shape that is filled with a color, they should pick this color from the color picker that lies in the right toolbox before they draw the selected shape. Every time the user picks a new shape, they must pick a new fill color, but the border color stays the same.

To delete a shape, the user must click on the delete icon, then click on the shape they want to delete. The delete operation is permanent, and the user cannot undo it. Every time the user wants to delete a shape, they must go back to the delete icon, then click on it again (You cannot delete many shapes at the same time).

To copy a shape, the user must click on the copy icon, then click on the shape they want to copy. Every time the user wants to copy a shape, they must go back to the copy icon, then click on it again (You cannot copy many shapes at the same time).

To move a shape, the user must click on the move icon, then click on the shape they want to move and drag it. Every time the user wants to move a shape, they must go back to the move icon, then click on it again (You cannot move many shapes at the same time).

To resize a shape, the user must click on the resize icon, then click on the shape they want to resize and drag it. Every time the user wants to resize a shape, they must go back to the resize icon, then click on it again (You cannot resize many shapes at the same time).