Homework Assignment 4 (JS project 1)

Mandatory part:

1. Extending your simple drawing program.

For this exercise you need to add a number of new features to the drawing program of homework 3. The new features are as follows:

1. Your program should now have an undo and redo button. The undo button removes the last item placed on the canvas. If clicked multiple times it should remove several items, in reverse chronological order (the last item placed is removed first). The redo button "undoes" the undo.
2. The program should allow the user to save his work in an XML format. Since we have not discussed saving files in javascript, your page should display the XML file that corresponds to the current image. Then, the user will be able to simply copy-paste the XML to a file if he wants to save. The XML displayed should change dynamically while the image is being edited.
3. The program should also allow the user to load an XML file containing the description of a previous image.
4. Add to the collection of drawing tools a "select" tool. This tool should allow the user to click on an item he has already placed on the canvas (a line, a cycle, etc.). This item will then become highlighted to show that it has been selected. For example, you could increase its thickness or change its color.
5. Finally, implement item dragging. If the user selects an item (as above) and keeps the mouse button pressed while moving the mouse, this should move the selected item around on the canvas. To make things easier, it's OK if this feature is not "undoable".

XML format: For saving/loading images you are expected to use an XML format we created for this exercise. The format is very simple: the main tag is called <action> and describes a user action (e.g. a rectangle, cycle, etc). For most of the available actions it is enough to store attributes that describe the current pen (color, width) as well as the start and end coordinates. The only complication is with free-hand drawing (with a pencil). For this, you should use an extra tag, called <point>. The idea is that an action tag that corresponds to a pencil action should contain a series of <point> tags describing the series of points through which the pencil passed.

The easiest way to understand this format is through some examples. Here are some XML files created by the program demonstrated in class. Here are a few examples of XML files file1, file2, file3.

Attention: Your program must be able to read the files given above! Do not use a different XML format.

Here is a screenshot of a solution