Custom color picker

[swissspidy]

What this PR does:

Implement a color picker where one can change the hue and alpha channel of the color.

See #106.

What it does not:

• There is no gradient picker. See Color Picker - Gradient Editing #263 for that.
• Eye dropper has not been implemented. See Implement eyedropper using SVG rendered page #262 for that.
• The color picker isn't used in the actual design panel just yet. See Implement form elements for the design panel #271 for that.

To do:

• Fix alpha picker which is currently broken for some reason
• Fix editable hex preview to enable cancel using ESC
• Actually leverage color picker in design panel -> Implement form elements for the design panel #271
• Implement eyedropper (needs canvas, see DRAFT/Discovery: render elements to 2d canvas ampproject/amp-wp#4024) -> Implement eyedropper using SVG rendered page #262
• Implement gradient picker and controls -> Color Picker - Gradient Editing #263

Current screenshot:

[swissspidy]

@wassgha Since you've used react-color in the past, any ideas on why the alpha picker isn't working?

@dvoytenko Any thoughts on the eyedropper? It should probably only work on the canvas area, which means your prior work at ampproject/amp-wp#4024 might become more relevant again

[dvoytenko]

@dvoytenko Any thoughts on the eyedropper? It should probably only work on the canvas area, which means your prior work at ampproject/amp-wp#4024 might become more relevant again

Hmm. Just realized we have eyedropper. So, yeah, we'll probably have to do something like that.

[wassgha]

Looks great! The dragging on the pointers feels a bit tricky, might need to increate the hit box on it (and maybe try it on an iPad and see how it feels). Also I'd disable text selection on the component to avoid accidentally activating it while dragging:

[github-actions]

Size Change: +50 B (0%)

Total Size: 234 kB

Filename	Size	Change
assets/js/edit-story.js	233 kB	+50 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
assets/css/edit-story.css	178 B	0 B

_{compressed-size-action}

[swissspidy]

Also I'd disable text selection on the component to avoid accidentally activating it while dragging

Done now in 09a4dd4. There wasn't an easy way to disable it only while dragging (react-color doesn't seem to offer that), so I disabled it now generally.

[barklund]

Here it is with the alpha-pointer displaying color on top of white and the other pointers displaying the color without the alpha applied. I think that works pretty well:

Maybe the hue picker pointer should only display the hue picked without brightness applied? It's pretty simple to add.

@dvoytenko and @wassgha, you have requested changes. Are you able to convert those to a ✅ now? I really want this merged, so I can continue with #263.

[wassgha]

The performance on this is still suboptimal, the dragging feels a bit sluggish because of long tasks. Not sure if these are coming from the underlaying component or our implementation.

[swissspidy]

Interesting, thanks for pointing out @wassgha!

I believe onChange is fired a lot, which is probably causing this. Let's check whether a combination of onChange and onChangeComplete works here.

[wassgha]

This demonstrates two of the causing problems: small hitboxes on the handles and re-painting on every mousemove:

[swissspidy]

Definitely not ideal.

The hitboxes are bigger now than before FWIW, twice the size of the circle.

Now outdated review

[barklund]

The performance on this is still suboptimal, the dragging feels a bit sluggish because of long tasks. Not sure if these are coming from the underlaying component or our implementation.

Excellent spotted. I did see some problems but di not investigate further.

Great job on optimizing, @swissspidy, it seems to work a lot better now and profiling both overall app and react in particular seems to indicate, it's running a lot better now.

@wassgha, can you re-evaluate?

[wassgha]

Great job!

[swissspidy]

Awesome, thanks a lot for testing @barklund @wassgha!