A simple and free graphic editor for novice artists
- Layers
- Operation history
- Projects (saved in browser)
- Customizable color palettes
- Tools: brush, eraser, shapes
- Image export
This project is implemented following the Feature-Sliced Design methodology.
Disclaimer: the project was originally implemented using Svelte 3. The initial version of the source code can be found here.
There is a single main page.
- tool panel
- about modal
- create project
- dock panels
- hotkeys manager
- tools
- api - indexed db adapter
- lib
- actions - svelte actions
- decorators
- dom - dom helpers
- persistent store - svelte persistent store implementation
- strings
- typed event emitter - types for event emitter with context support
- url - url helpers
- styles - sass theme, mixins, functions, etc.
- ui - ui-kit components
- Create
.npmrc
file in the root directory with given contents:@rastrr-editor:registry=https://npm.pkg.github.com //npm.pkg.github.com/:_authToken=<PERSONAL ACCESS TOKEN WITH read:packages SCOPE>
npm i
npm run dev
npm run format
- format code using prettiernpm run check
- check code for svelte errorsnpm run format:check
- check formatting errorsnpm run build
- build projectnpm run preview
- launch built projectnpm run lint
- lint code
Add this to .vscode/settings.json
:
{
"editor.tabSize": 2,
"typescript.tsdk": "node_modules\\typescript\\lib",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"svelte.enable-ts-plugin": true
}