CMSC 437
Graphical User Interface Programming


TUE,THU 5:30-6:45 PM ACIV 015
Spring 1997


Project 3: An Object-based Draw Program


Date Due Thursday, April 17, 1997 before midnight.

Purpose

To introduce concepts of object-oriented graphics and direct manipulation and to gain experience designing and implementing a graphics display list.

Assignment

Project 2 allowed the user to interactively draw shapes, but not to modify them after they were drawn. The only graphical data structure necessary was a backing Pixmap which stored the pixel configuration of the drawing. In this project, you will extend Project 2 to allow manipulation and editing of shape objects. Instead of a backing Pixmap, the state of the figure will be represented by a graphical display list of simple shapes which can be edited interactively using direct manipulation techniques.

Just as in Project 2, shapes can be drawn by setting various drawing modes and using the mouse. In this project we will limit the number of kinds of shapes to the following: Rectangles, Ellipses and Lines (there will be no points or free-form lines). Later projects may add new types of shapes.

Like Project 2, a shape can be drawn by choosing a shape tool and dragging the mouse across the screen, using rubber-band drawing to display it as it is being drawn. Unlike Project 2, once a shape has been drawn it may be modified. In particular, the user can select a shape by clicking on it with a select tool, move it by dragging it with the mouse, change its color attributes, or delete it.

Any shape may be selected by picking it with the left mouse button. Selected shapes are indicated by displaying their control points, which are small black squares located at the four corners of the shape's bounding box. For this project, these control points are for display purposes only, but in future projects they will be used to change the dimensions of the shape. Shapes can be deselected by picking on them a second time with the left mouse button. A selected shape can be deleted by pushing a "delete" button.

The widget layout will be substantially the same as for Project 2. There will be no toolbar items for Points, Freeform and Polyline, but there will be a "select" tool for picking and moving shapes and an additional pushbutton for deleting selected shapes. When shapes are selected, the fill-mode toggles and color-mode indicators should change to reflect the selected shape.

Once an object has been selected, its color attributes may be changed by selecting colors from the color bar. Changing the color for a mode will change the color in that mode for the selected shape. The new selected color for that mode will also apply to new shapes drawn with the mode in that color. Example: The user selects a square in the drawing, and the mode is set to line color. If the user clicks on, say, "blue" in the color bar, then the line color for that square will become blue, and also the current line color will be blue.

The following may be done for extra credit (See the policy on extra credit):

Undo (10 pts)
You should extend the undo facility for Project 3. The user should be able to undo the last operation performed. This operation could be adding a shape, deleting a shape, moving a shape, or changing its color. As with project 2, you only need to provide one level of undo; that is, the user can only undo the last operation.

A simple approach such as an extra backup pixmap/image will not do the job here; you need to be able to restore the state of the display list and the objects in it. We suggest considering an Operation class, instances of which know how to "undo" themselves.

Hints

We suggest that you use Project 2 as a starting point. Whether or not you are using Java or C++, you should try to plan your design in an object-oriented way. In particular, you should replace the backing Pixmap data structure with a data structure consisting of a display list of shape nodes. The node object should contain all the information necessary for drawing and interacting with a shape or node. This includes geometric information, graphical attributes, bounding box, control points and state information such as whether or not the node has been selected. When the drawing area receives a "redraw" event it should traverse the node display list, sending a "redraw" message to each node which causes the node to draw its shape. Other events should be handled in a similar way. For example, there might be a "leftButtonDown" message which would be sent to each node in the display list, checking to see if the mouse click was within the bounding box of each node, and setting the "selected" state of the node accordingly.