hunkim98 / dotting

Dotting is a pixel art editor component library for react
https://hunkim98.github.io/dotting/
MIT License
43 stars 12 forks source link

Change brush tool to strategy pattern #13

Open hunkim98 opened 1 year ago

hunkim98 commented 1 year ago

Currently, when user changes the brush mode, different logic is called based on the brush mode when a user interacts with the canvas. This style can be cumbersome to manage when we have various drawing mechanisms.

For ease of creating other brush modes, @lerrybe has suggested that we could use a strategy pattern for changing brush modes.

A strategy pattern is a pattern where the context(In Dotting, it is class Canvas) does not need to know the specifics of a specific algorithm but instead chages its strategy(i.e. strategy) and simply calls on of the method inside the strategy. More Information

To implement this, one should create a generic interface for all brush strategy, and create classes for each brush mode based on the interface.

After the appropriate classes are created, one could create a new variable named brushWorker(or any name you would like) inside the Canvas class and change the brushWorker instance to another instance whenever a user changes the brush mode.


For your information, I leave you some useful links you could reference when you implement this

[Changing brush mode by changing the tool to another tool instance]

[A generic interface for all tools and the list of the tools]

hunkim98 commented 1 year ago

An opensource repository for pixel drawing named "piskel" also seems to use a strategy pattern for managing tools. Its applyToolAt method is overriden in other methods that implement BaseTool

https://github.com/piskelapp/piskel/blob/21b8bdd0f3602c455e89f25fb337068fd9ea3a35/src/js/tools/drawing/BaseTool.js