ShapeDrawer

Little web app that draws shapes on a page based on a user's commands.

Setup

The application uses Gulp for CSS and JS concatenation so:

npm install
gulp

Builds

The build version of the app is available as drawing.html file in the main repository's folder.

Architecture

CSS

The CSS styles are distributed to several files placed in app/css/src directory. There is a Gulp task that concatenates them. There is a little bit SMACSS organization of the files. We have basic styles, typography, layout, colors and component specific styles.

JavaScript

Similar like with the CSS we split the app into components. There is one main class called App.js that acts as a glue between the different parts.

Utils.js - contains helper functions
CLI.js - responsible for the input field in the button. Dispatches events command (when the Enter key is pressed), update (when the any other key is pressed) and autocomplete (when the TAB key is pressed).
Drawer.js - that's the module that draws on the canvas
Tooltip.js - that's the little popup shown above the input field. It displays the messages to the user
FloodFill.js - that's an algorithm of flood filling (It's not written by me. I just tweaked it a bit so it fits in my case.)
App.js - the main application's file

Building

We are using Gulp. It concatenates the CSS and the JavaScript to app/css/styles.css and app/js/scripts.js. Later these files are merged with app/drawing.html. There are also watchers setupped so the whole building process happen on every change.

API commands

? - displays all the available commands
clear - fills the whole canvas with particular color. The color is actually optional. It's default value is #FFF.
rectangle - draws a rectangle
line - draws a line
fill - flood filling
circle - draws a circle

Error handling

The most critical part of the application is app/js/src/03.Drawer.js. Its execution is wrapped in try-catch block. So all the errors are sent to the user in the tooltip above the input field.

Key shortcuts

Enter - sending the command
Tab - autocomplete (if there is any match)
Up - returns the last command

Room for improvements

The Gulp setup uses temporary files for the CSS and JS content. It should be made with streams.
There are some cases where the output to the tooltip is formated with tags. This is done in the JavaScript part which is wrong. The visual look of the tooltip messages should be controlled only by the CSS.
The errors should be displayed differently
Most of the commands require numbers. There should be check for that.
There are no tests

krasimir / shape-drawer