The App draws boxes (rectangles) on a web page and allows an User to drag & drop them. The app was developed within my JS practices (Modules, Bundler, TDD, CI).
Canvas is used to render shapes. The draw area has size of the page viewport with some padding. Several rectangles of different sizes are displayed on the page load one under the other. An end User can drag & drop shapes via a mouse.
If a shape intersects with other shapes during the mouse move event then all intersecting shapes should change the color in red. Mouse up event is allowed only if none of shapes intersect with draggable one. Otherwise the draggable shapes gets back to the initial position.
A shape can be snapped to the nearest one on moving action. Snapping occurs when any side of a shape being moved approaches a side of other shape closer then a distance <= X. Shapes get positioned close to each other in relation of bordering edges. In order to split shapes a User should drag a shape on a distance > X. Snapping should work in a way to avoid shapes intersections.
There should be a canvas with rectangles of different sizes one under the other on the page load.
The app should not use any 3d party libs.
- Checkout git repository
- Run
npm installto install dependencies - Run
npm run testto test the App - Run
npm run buildto build the App - Run
npm run karmato run visual tests - Open
dist/index.htmlin a Browser (preferably in Chrome)
Drag and drop rectangles.
Source code is located in src folder. Tests are in spec and visualSpec folders (see the TDD section).
The codebase uses ESModule definition. During the development it is productive to see the results of you
feature. To enable live rebuild start Webpack Dev server by command npm run start.
Run npm run dev to build the app with source maps enabled.
Jasmine is used as a testing framework. Karma is used to run browser specific tests.
In case you're adding a business logic with no dependency on a window object then you add test with
no web browser required. These tests are in spec folder. The command to run tests is
npm run test
If your feature requires a Web Browser then you'll have to add tests to visualSpec folder. The command to run
tests is npm run karma. Open visualSpec/index.html to run visual tests.
Once a feature is done make sure the code passes ES Lint. Run npm run cs-fix-src or npm run cs-fix-spec
- release version 1
- add Karma to Travis CI
- enable animation in boxApp
- refactor the App in more Event Driven Approach
- split webpack prod/test config
- rethink Babel usage
- refactor console.log calls
- add demos on github pages
- add generated docuementation