Recently, I put my skills to the test with an interesting challenge. My main objective was to replace all HTML tags with div elements.
Objective: Develop a color picker similar to the one found in Photoshop
Requirements: Utilize HTML5, JavaScript, and CSS only (with ReactJS for structural development)
Accomplishments so far:
- Used onPointerMove and onPointerDown events to track pointer position in the viewport
- Successfully calculated and positioned the indicator based on pointer location
- Obtained selected color in RGB format
Current HTML structure:
let padding = props.size * 0.1;
<div className="color-picker">
<div className='color-picker-container' style={ { width: `${props.size + 2 * padding}px` } } onPointerMove={ onMove } onPointerDown={ onMove }>
<div className="color-picker-panel" style={ { width: `${props.size}px` } }/>
<div className="color-picker-indicator" style={ { left: pickerPos.left, top: pickerPos.top, borderColor: `rgb(${getInvertedColorChannel(ColorChannel.R, currentMaxColor)}, ${getInvertedColorChannel(ColorChannel.G, currentMaxColor)}, ${getInvertedColorChannel(ColorChannel.B, currentMaxColor)}` } }/>
</div>
</div>
Outcome:
https://i.sstatic.net/FwIai.png
Explanation of result:
- The background color changes according to the selected color
- The white area represents the padding of the container
- Used pointer event within the container as a workaround for adding padding (as mentioned in "Problem")
- The indicator can only be moved by dragging within the white area (including the color picker panel)
Challenge faced:
- Pointer events are triggered only when directly interacting with the div element, preventing movement of the indicator outside the div (white area) even when the pointer is down.
- The current solution involves adding padding to the color picker, but this method still limits interaction boundaries. The goal is to allow indicator movement after pointerdown, regardless of pointer position inside or outside the div.
Feel free to inquire for more details. Thank you!