Doodle, A Demo Drawing Program - Part 3 | 2

[previous][next]

Doodle, A Demo Drawing Program - Part 3

The Canvas and the Widget

While the document's purpose is to model the information required to represent the user's drawing, the Canvas, as a view, projects this model onto the screen and enables the user to manipulate the information that makes sense visually. Now that the document has a rudimentary shape class heirarchy it makes sense to mirror this heirarchy in the Canvas as different shape types will behave differently on the screen. Since the Canvas class provides a view into the document, the canvas will use a Widget class heirarchy to represent the document's shapes.

The Widget class supports a number of generic functions that all widgets will in some way need.

Since the document already defines a unique identifier system for each and every shape,  the widget's getID() function returns the id of the shape it represents.

The destroy() function is used to clean up the widget and its resources before being deleted. Note that this operation doesn't affect the document in any way.

The remove() function is used to remove the widget's shape from the document. The reason these two functions are separated is so one may be called without necessarily calling the other. For example, if we were to offer a zoom canvas (separate from the main canvas) we may wish to destroy the zoom canvas once we have finished with it without causing the whole document to be destroyed.

The functions select() and unselect() are used to control selection.

The draw() and undraw() functions are called by the canvas to show and hide the shape on the screen.

While the above functions seem rather simplistic, they'll be overridden in the concrete Widget classes. In each case the overriding function must call the base class implementation.

The Line Widget class inherits from Widget and adds handlers specific to manipulating and displaying the line on the canvas.

The draw() function gets the start and end points of the line shape and uses the graphics canvas to display the line to the user.

  The undraw() function cleans up by undrawing the line on the graphics canvas and removing the reference to it.

  When the widget is unselected, the line must set the callback so it can remove itself when the user clicks on it.

The setTrigger() function modifies the line on the graphics canvas by giving it the pointer cursor and binding a callback on mouse down.

The onMouseDown function (called when the user clicks on the line) causes the shape to be removed from the document, and the widget to be removed from the canvas.

[previous][next]

Created: October 13, 2006
Revised: November 29, 2006

URL: https://webreference.com/programming/javascript/gr/column22/1