Feature: Implement checkerboard

[Lee-Si-Yoon]

[Issue #10]

Changes

• added three props to control checkerboard(base layer)
• updated change log to story doc

ScreenShot

[hunkim98]

Thank you for your active commits! However, the issue's goal is to make the background of the canvas element to a checkered one!

[hunkim98]

I was thinking of implementing something like this! @Lee-Si-Yoon

In the above image you can see that we have a checkered background!

[Lee-Si-Yoon]

I was thinking of implementing something like this! @Lee-Si-Yoon

In the above image you can see that we have a checkered background!

fixed

I fixed to match your intention, but got some question. for now checkerboard's check cell size follows grid size but in photoshop no matter how much you zoom in or out the cell's size is constant would it be better to follow photoshop's way or are you okay with this? @hunkim98

+a) size adjuster buttons might need to be darkened if checkerboard is on. it is not much visible for now

[hunkim98]

Two thumbs up for your great work!👍👍

About your question on cell size: Frankly speaking, I am not sure which would be better. But if I had to choose one, I would choose the photoshop method: the cell size being constant no matter what the zoom scale is. The reason behind this is because the cell grid being zoomed together seems to distract the user from the pixel grid. I think the current version is good enough. However, there seems to be a slight mismatch between the pixel grids and the pattern when you zoom in and out. It is not a big problem, but it would be great if the lines are aligned when zoomed. However, beware that aligning the lines will not be an easy task since you do have to know how the pan zoom works in Dotting. I tried to do it myself, but it seems that I must draw on the pixel grid canvas itself instead of using the createPattern api to make it work.

No matter what I say, this is your contribution, and I think your thoughts on this matter the most.

---

About your comment on size adjustor buttons:

It seems we need to adjust the color of size adjustor buttons. If you have time, you could change the color to any color you think is best. If you think I am asking too much, just create an issue for it so that others can do that instead!

Thank you for your great work @Lee-Si-Yoon, We really appreciate it🚀

[Lee-Si-Yoon]

I think the current version is good enough. However, there seems to be a slight mismatch between the pixel grids and the pattern when you zoom in and out. It is not a big problem, but it would be great if the lines are aligned when zoomed.

I was planning to make checkerboard's cell sizes constant, if I go with that the mismatch will be impossible to solve because the cell sizes are different to each other

I tried to do it myself, but it seems that I must draw on the pixel grid canvas itself instead of using the createPattern api to make it work.

I assume this also could be solved if I make checkerboard's cell sizes constant. I used createPattern api because when zoomed out there were too many cells that have to be rendered and it caused some lag. If cell size is constant it means quantity of cells is fixed.

[Lee-Si-Yoon]

updates

1. changed to fixed cell size
2. a little bit of styling to size adjuster buttons
3. checkerboard props -> background props
4. fixed some typo

notes

1. Will be there a way to optimize the background logic?
2. Would adding a prop to control cell size be helpful?
3. Size adjuster buttons is not that cool, maybe change the design of it later?

[hunkim98]

Thank you @Lee-Si-Yoon for your thoughtful comments. Some of the notes that you have written are the topics that I had in mind also.

Will be there a way to optimize the background logic?

I think we have to find it out! Actually this optimization problem also applies to our canvas grid drawRect method. When the pixel grid size is small, there is no lag. However, the more the user increase the grid size, the more the noticeable the lags are. This is due to the increase of the data size resulting in a slow nested loop. I believe we need some discussion on this matter.

Would adding a prop to control cell size be helpful?

I am not sure. Let us not add that prop. It is true that the goal of dotting is to make pixel canvas editor customizeable, but it seems that we might add too much props to users. If you have any other ideas, please contact me or else leave an issue!🙇‍♂️

Size adjuster buttons is not that cool, maybe change the design of it later?

This is exactly what I had in mind since the start of this dotting project. In fact your question is closely related to issue #7 which is about creating a more user-friendly extend grid mechanism. Though I have not written much in the issue, the preview that you have shown me is one of the goals that I have in mind for dotting. For quick development, the extension happens through ugly buttons. However it would be best if we could eradicate all those buttons and just show border controls when the user hovers their mouse on the outer borders.

I will later add more details on issue #7 to include your considerations. Changing the design of the size adjuster is a challenging task but it is something that is quite entertaining since it requires some use of smart tricks. If you think about it, the new design you proposed (allowing size adjust when user hovers outer border), needs to be designed intricately to allow users to easily zoom in when the pixel canvas size is small. The smaller the pixel canvas grid, the more difficult it is for the user to put their cursor on the border of the pixel canvas. This means that we should designate a larger area for the activation of size adjustment when the user is zoomed out. If you have any other questions on this issue, feel free to contact me or just add a comment to issue #7. Thank you!🚀

[hunkim98]

I will merge this request once you have reacted to my comment. Thank you!