Book Image

TypeScript Essentials

By : Christopher Nance
Book Image

TypeScript Essentials

By: Christopher Nance

Overview of this book

Table of Contents (15 chapters)

Making the application interactive


Now we have the ability to make any number of shapes and present them to the user. This, however, is very limited in functionality and doesn't allow for any interaction between the application and the consumer. Most drawing applications allow for basic movement and resizing of the objects on the canvas. This requires the application to redraw itself each time the user attempts to change one of the shapes.

The engine

To handle the drawing and updating of the canvas state, we will need a new type that is focused around maintaining this. This type, which we'll call CanvasEngine, should have a very simple abstraction since it only needs to perform a few basic tasks: drawing the canvas, clearing the canvas, and receiving requests to redraw the current frame:

interface ICanvasEngine {
    invalidate();
    clear();
    draw();
}

The object will do more under the covers, but any object consuming the engine needs only these functions to interact with it. Now let's...