This is an old version of the class. Please see the 2021 version instead.

Homework 5: Undo using Command Objects

Assigned: 10/22/2020; Due 11/4/2020 at 1:30pm ET (extended from 10/29/2020 and 11/3/2020)


In this assignment, you will be adding Undo to the graphical editor using the linear undo model, implemented using the Command Object pattern. Since there was a high variance in students' implementation of homework 3, and we didn't want you to have to convert your code into React, we have created a reference implementation of the editor in React, which you are required to use. Note that this version removes the canvas and the delete-all button, since we felt these would not contribute to your learning of undo.

As with previous homeworks, you are allowed to use certain libraries for homework 5, such as those used by our reference implementation of homework 3. In particular, allowed libraries include React, the ones that come with Create-React-App, ReactRouter, ReactStrap, and React Context API (which is a relatively newer API which is becoming a popular/standard way to pass data across components. Note: we recommend you read the documentation to help with understanding the supplied code.). The icons we used on the buttons came from the "react-icons" package. If you implement the extra-credit feature of having a list of command objects on the right, you might find the react-scroll-to-bottom package useful.

However, you may not use libraries that implement the command object pattern or Undo -- you must implement that yourself. If you have another package you would like to use, please ask on Piazza.

The user interface for homework is essentially identical to homework 3, with the added buttons for undo and redo, and removal of the Canvas and delete-all features. We include pictures of what the base looks like, what our reference implementation looks like, with the command list on the right, and we also provide the hw5 video to see the required behaviors for undo.


Michael Liu created an implementation of homework 3 in React, which you are required to download and use. It is in the zip file you will download.

We have created a set of JavaScript specification files for how command objects must be implemented, and then a non-working outline of how a command object for changing the fill color might start off. You should use these to structure your implementation of command objects and linear undo. These were extensively discussed in lecture 14 (which continued into the lecture 15 video), and are also included in the zip file..

You will download the file which will contain the following starter files:

In addition, we have supplied the following for your reference, also in the zip file:

base commands

Detailed Requirements

We have supplied a movie to define the required behaviors. As with previous homeworks, you should be careful to meet the specification below for full credit. If something is unclear about how it should work, or you want to deviate from the defined behavior, you might want to first ask on Piazza.

Extra Credit

Turn In

Please have a README file in your subfolder (as in hw3 and hw4), which can be in plain text, Microsoft Word, or pdf format, which should contain:

Please upload this README file to Canvas by 1:30pm on 11/3/2020, in addition to having the file in your subfolder.