rastrr-editor / core

Rastrr editor core

Rastrr editor core

Core of the rastrr editor client

Install

1. Create file .npmrc in the root of the project with given contents:

   @rastrr-editor:registry=https://npm.pkg.github.com
   //npm.pkg.github.com/:_authToken=<PERSONAL ACCESS TOKEN WITH read:packages SCOPE>
   

2. Run npm install @rastrr-editor/core
3. Add to your *.d.ts file:

   /// <reference types="@rastrr-editor/core/global" />

Architecture

Main classes

Interfaces

Base commands

Development

Quick Start

1. npm i
2. npm run serve

NPM Scripts

• npm run serve - run server for example on localhost:4200
• npm run watch - run watcher for example
• npm run dev - build example in directory 'example'
• npm run format - format code using prettier
• npm run format:check - check formatting errors
• npm run lint - lint code

Debug

1. Open browser console
2. Execute code: localStorage.debug = '@rastrr-editor/core*'

Publish to github npm registry

1. Login: npm login --scope=@rastrr-editor --registry=https://npm.pkg.github.com. You need to use specific access token.
2. Execute the command: npm publish

Upgrade package version

1. Execute the command: npm version patch|minor|major -m "Version description"

Development with realtime integration

Sometimes you need to test package integration and make some changes in realtime.

1. Create link to the package npm link
2. Run command npm build:watch
3. Go to the project and add package via link npm link @rastrr-editor/core

P.s. if you are using vite, it must be run with force flag, i.e.: npx vite --force.

core's Issues

If layer opacity is changed to 0% - all colors of the layer are reset to black

Reproduction steps:

1. Create new project
2. Change opacity of the background layer to 0%
3. Change opacity of the background layer to 100%
4. Background color becomes completely black

Implement fill command

Should fill adjacent pixels matching the threshold

Export canvas to png/jpg

Download function example: https://github.com/ericdrowell/concrete/blob/master/src/concrete.js#L371

Handle pointer pressure (touch force)

Initiate a project

Add CI/CD for core

Incorrect undo of the eraser (wrong intersection of modified area with the layer area)

Reproduction steps

1. Draw rectangle
2. Apply eraser on the right side of the rectangle
3. Undo the eraser command

Bug

Erased area:

Restored area after undo (there is small 1px line which is not restored):

Add playwright unit tests

Add async iterator helpers to core

Core documentation

Design class diagram

Implement brush tool

Implement viewport and render strategy (working canvas)

Shapes can be drawn outside of an image

Reproduce steps:

1. Choose the rect tool and start to draw it
2. Move the pointer outside the layer
3. Finish drawing

Implement rectangle command

Implement rulers

Incorrect offset for the brush when drawing on rectangle

Implement ellipse command

Eraser should use layer background color

If layer is transparent eraser should delete the pixels, otherwise it should draw like a brush with the background color.

We will need too add extra prop for the layer interface.

Layer prototype

Handle interactions with viewport

• Hover
• Pick
• Click
• Mousemove
• etc.

Implement core interfaces: layer, viewport, etc.

Incorrect undo

Reproduction steps

1. Take brush of size 1 or 3
2. Draw straight line and make minor movements to the side
3. Finish the line
4. Undo the operation

Bug
Drawn line:

Undo:

Couldn't reproduce this bug with larger odd size or any even size.

Implement eraser command

Eraser should change opacity of the underlying pixels, if eraser opacity is 100% than it replaces pixels with fully transparent pixels, otherwise it changes opacity of the underlying pixels.

For example eraser with opacity 70% should change underlying pixel rgba(255, 0, 0, 1) to rgba(255, 0, 0, 0.3).

Eraser size can be changed similarly as for the brush.

Implement history

Commands must have "undo" method.

They must store backup data for the layer.

They should be able to "redo" the action.

Drawn shapes don't preserve original opacity after multiple changes of the layer opacity

Reproduction steps:

1. Draw with a brush
2. Set the layer opacity to 50%
3. Draw again with a brush
4. Set the layer opacity to 100%

Bug: The first line does not return to the original opacity

Implement layer list

Refactoring

Fix current problems and improve codebase