Feature: Implement Paint Bucket Mode

[lerrybe]

🚀 [Issue #3]

Changes

🪣 Paint Bucket (BrushMode)

• paint bucket brush mode was added. (The implementation is in drawPixel method)
• To Optimize.. When thinking about how to search same color pixels, If the number of pixels increases, there are concerns about call stack accumulation. so I implemented it with BFS which looking at the adjacent pixels first. (We couldn't enque at constant time with array. Queue is implemented in utils/queue.ts.)

🍓 Modify DOCS (useBrush story)

• [hooks] useBrush has been modified to reflect the relevant information.

Notes

• If brush mode is added more, how about managing it with a map in the form of [mode name]: Function to make it easier to manage? (I thought the idea of a strategy pattern, I'm going to look for related content more..!)
• If there's anything I'm missing or need to correct please leave a comment. Thank you for reading

ScreenShot

[hunkim98]

Thank you for your contribution🚀! @lerrybe

Your job looks amazing!!!

Your point on changing the brush mode using strategy pattern is worth discussion

I believe we could later change the whole drawing method using such pattern.

For your information, I give you an example of an editor that seems to use strategy pattern for changing its editing method.

[Yorkie Toonie set tool(worker)] https://github.com/yorkie-team/toonie/blob/79f9a7c6033fceb5d23bb335d35bf8e66ec8361f/src/components/Editor/DrawingBoard/Canvas/Board.ts#L275-L305

[Yorke Toonie list of workers] https://github.com/yorkie-team/toonie/tree/79f9a7c6033fceb5d23bb335d35bf8e66ec8361f/src/components/Editor/DrawingBoard/Canvas/Worker

The above examples are what I wrote last year in Naver (By the way, the code is quite similar to dotting)

If I find other better example, I will update you.

[lerrybe]

I modified reflecting reviews. Thank you for your helpful references and reviews! 🤩 @hunkim98