jaames/iro.js

Add a configuration property for the active colorHandle / colorHandleRadius

mheirendt opened this issue · 4 comments

mheirendt commented

It would be useful when there are multiple colors to be able to discern which color is active. This could be as simple as having a configuration property to have a larger colorHandleRadius for the active color as opposed to the handleRadius.

jaames commented

Yeah, there is currently a handleRadius config option for adjusting global handle radius, so I think it would make sense to add an activeHandleRadius for the active color handle specifically.

Should be an easy addition, I'll look into it for the next update :)

BTW, it's a bit of a hack, but for now can achieve this with some CSS:

// outer circle
.IroHandle--isActive circle:first-of-type {
    r: 11;
}
// inner circle
.IroHandle--isActive circle:last-of-type {
    r: 9;
}
  • 🎉1
mheirendt commented

Thank you!

Well done on this library, I assumed you were using an HTML canvas under the hood. SVG makes this change trivial.

jaames commented

No worries!

Thanks :) Yeah, I originally went the HTML5 canvas route early on actually, but found a combo of HTML with CSS gradients and SVG is easier to hack around. I suppose I should advertise that aspect a little more.

jaames commented

activeHandleRadius will be available in the next release (v 5.5.0). Thanks for the suggestion!