drawingTool example

The Statechart design

  1. At the highest level, there are only two states: ACTIVE and TERMINATED.

  2. The ACTIVE state is subdivided into three orthogonal components corresponding to the three concurrent components of the drawingTool: Shapes, Modes and Canvas.

  3. Selecting a Mode (by clicking on a particular radioButton in our implementation) broadcasts and appropriate (Move, Insert, or Delete) event to the Canvas orthogonal component.

  4. Selecting a Shape (by clicking on a particular radioButton in our implementation) just changes the state of the Shapes orthogonal component. A [guard] in the Canvas orthogonal component will be used to check which state the Shapes orthogonal component is in.

  5. The Canvas orthogonal components has three states: Inserting, Deleting, and Moving. Transitions between these are triggered by events broadcast from the Modes orthognal component. When in the Inserting state, a Mouse1Press (parametrized with the clicking (x,y) coordinates) will check what state the Shapes orthogonal component is in. Based on that information, the appropriate shape is drawn on the canvas at position (x,y). When in the Deleting state, a Mouse1Press leads to the deletion of the nearest object on the canvas (if any). When in the Moving state, a Mouse1Press brings us into a Moving sub-state. The movingObject variable is set to remember the object-to-be moved. Subsequent Mouse1Motion events lead to moving the movingObject. A Mouse1Release event brings us back to an idle state (and Mouse1Motion events have again no special meaning).

The implementation

Though behaviourally equivalent, the implementation does not literally reflect the Statechart structure:

The drawingTool in action