Saturation/Lightness Triangle UI Component

[WojciechKrakowiak]

I'm working on TriangleWheel picker for Iro.js and ico-core. For me (as graphic designer) it's the best color picker type, as it covers all HSL without additional sliders and is the most intuitive one (as opposite to HSL circle with white in the middle makes selecting pure white really hard).

I've H selecting done, generating triangle done and now it's time to add second drag.

@jaames I'd be happy for TriangleWhell to become a part of IRO when it's ready, if you'd agree.
If yes, I would like to consult which approach should I choose:

1. I can make 1 component with ring, triangle and two handles (one on the ring and one in the triangle)
2. I can make two separate components: H ring and SL triangle (something like Box but in triangular shape), and a third component that connects theese two into complete triangleWheel. This one gives 3 picker types. The question is, would it be nice to have them separately or is it useless mess?

small GIF of current progress:

[jaames]

@WojciechKrakowiak Wow! That's really great! I've been wanting to add this for a while :)

Personally I think separate components for the hue ring and the triangle would be perfect. Feel free to ping me if you need help with that.

You don't have to do this, but in the future I was planning to implement a radial slider that supports all the current slider types, like requested in #128. These radial sliders would also have some way to insert any other component inside them, whether that's your triangle, the box, or another radial slider. So I think treating the hue ring as a separate component would be a good way to get started on that.

[WojciechKrakowiak]

Ok, I'll make them separately :) – I'll write when it's ready or I'll have some questions.
When it comes to #128, performance wise, it'd be better to make a linear gradient fill inside the ring than generating strokes.

I checked out Canva's code in inspektor, and the ring is a rounded div with a linear gradient, and hsl whell inside is made out of several css radial gradients on a single div: https://www.canva.com/colors/color-wheel/ (Another solution can be css conic gradient – it's supported by most of browsers (not by IE and android Firefox), but there's a polyfill: https://projects.verou.me/conic-gradient/)

For now, I stick to your method - in fact to create hsl ring I had to just change a couple of values from hsl circle.

[jaames]

Yeah, I've been wanting to move to proper conic gradients for a while, but in the past support for it wasn't where I wanted it to be. I suppose it could be worth looking into that again, would make a lot of things easier :)

[jaames]

Hey @WojciechKrakowiak ! Wondering if you got anywhere with this? I recently moved to using conical gradients in iro.js, and I'm working on other changes that would make this a lot easier to implement. I'm curious how you did this?

[WojciechKrakowiak]

Hey @jaames, sorry for silence, I stuck and didn't really had time to solve it. Here's, what I have:

http://wojciechkrakowiak.com/iro/

https://github.com/WojciechKrakowiak/iro.js
https://github.com/WojciechKrakowiak/iro-core
(branch "triangle" on both sources. They need to have common parent directory, because temporary iro.js imports from "../iro-core"). I just rebased everything to work with newest version, however old gradient drawing method is used.

The problem is inside combination of hueRing with triangle:
When you rotate hue color on ring, there's strange offset in handle's position on triangle inside ring and this offset varies depending on rotation. And I have no idea where does this offset comes from.

If you have any idea or anybody else would like to dig into it feel free to continue with my changes.

[unstopp]

Hey @WojciechKrakowiak @jaames,

Have you guys merged this in the iro.js repo?
I see @WojciechKrakowiak solved the ring feature that was requested as well. Any idea how I can implement it?

Thank you, looking forward to your thoughts!

Best,
Marius

[jaames]

No worries @WojciechKrakowiak! Thank you very much for sharing what you have anyway. I'll see if I can get it finished :)