Full Sail University에서 Final Project로 진행한 복분자막걸리(Raspberry Rice Wine, RRW) 개발 과정에서 작성한 글입니다.
In this week, I have worked on various small-sized features/issues and then worked on implementing the color picker. The list of features/issues includes a button for adding a new layer, improved multi-root-layer template rendering, annoying layer editor bug, and more. Although the features/issues took some time to finish, there were no interesting technical issues to share in this post. So I'll focus on sharing experiences about implementing the color picker.
The color picker is used for modifying color values in the layer editor. The color picker is based on the HSVA color system. There is a box for pointing SV parts of the color, and there are two sliders for adjusting H and A of it. Things are implemented using mousedown/move/up events. During the implementation, the most interesting - and annoying - part was converting the coordinates of the pointer to a color parameter value. To make it work even when the mouse pointer is outside of the slider(but still holding the button), it was essential to handle the mouse event based on the global position. So I have used getBoundingClientRect() to retrieve the global position of the slider/box, and then subtracted the coordinates from the mouse event coordinates to get the local position. Converting the local position to color parameters was also challenging, but once getting one working, others were easy to implement. The key was finding the correct value range - one has 0~360 range, the other one has 0~100 range, etc, and then doing some math to convert numbers.
Although I didn't make that much progress this week, I am pretty satisfied with the progress since the color picker is working well and the code is so clean. For the next week's goal, I'm going to implement the multi-select feature to boost productivity. Still thinking about more features to implement, but the multi-select feature should be the primary goal.
