The finest way to run this application is to use Github Codespaces. I've set up a devcontainer that will install all dependencies and run the application in your browser.
- Clone the repository
- Run
npm installto install all dependencies - Run
npm startto start the application - Open http://localhost:3000 to view it in the browser.
Run npm test to run all tests
Run npm run build to build the application
When the app starts, it first sets up a canvas with a default background and counts the amount of red pixels, storing these values. The drag and drop feature is managed with a custom React hook.
The magic happens when you drop them; it redraws the SVGs onto the canvas and updates the count of red pixels using ImageData.
- Draggable element should not have red pixels
- Touch gestures are not supported
- Window resizing is not supported
- Draggable component is not fully accessible