jaames / iro.js

🎨 Modular color picker widget for JavaScript, with support for a bunch of color formats

Home Page:https://iro.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Refine color selection process

RobbieTheWagner opened this issue · comments

I think this applies to v4 and v5, but when clicking the handle for the color on the wheel, the handle often moves from just clicking it. Is there a way to make it less sensitive?

It would be nice to click it and have it become active, without accidentally moving the color. I was thinking perhaps it could only move if you drag the mouse, not just on click? I am not sure what potential options we have with svg though. Let me know if you have ideas!

commented

Ah, I think that's an oversight on my behalf, sorry about that! SVG events can be finicky at best of times so I ended up doing a lot of input handling stuff manually, but it looks some of that logic might be faulty.

I'll definitely look into refining it when I get the chance :)

@jaames if you can point me to the relevant code where the events are hooked up, I could also try to take a look.

commented

@rwwagner90 Oh, no worries! I just pushed a fix that should sort it out.

If you have multiple colors on the color picker and then click one of the handles, it should now only mark that handle as active. Dragging the handle afterwards will update the color as expected.

Awesome, thanks so much!

@jaames I am still experiencing this issue. For example, try clicking inside the handle, but not 100% perfectly in the center, the handle will move. Perhaps this is because the color wheel itself accepts clicks and those clicks move the handle? Maybe we need a stopPropagation?

commented

@rwwagner90 oops, sorry! I think I must have misunderstood what you meant by 'click' -- I made mousedown not update the color, but mouseup will still update it

I'll push another fix in a second :)

@jaames I think it would go something like:

  • if you click, and the click is on a handle, just select the handle and make the color active
  • if you drag a handle, update the color value
  • if you click the color wheel, and the click does not intersect a handle, move the currently active handle to that location

What do you think?

commented

@rwwagner90 sure, sounds good to me. I'll go ahead and implement that

commented

@rwwagner90 I just pushed a fix, hopefully that's got it this time! Let me know if you need anything else :)

I should note that if the user nudges their mouse at all while clicking the handle, it might still register as a drag. Not really sure if there's anything I can do about that without introducing timers or something.