iro.js 5.0 discussion

[jaames]

What a wild year! iro.js hit 500 stars on Github, over 1000 NPM installs per week, and was featured on a number of web publications such as Creative Bloq, Codrops and JS Weekly!

I've been thinking a lot about what the next steps for this project might look like now that it's finally stable and fitting most people's requirements pretty well. I figured it would be worth sharing my ideas for discussion:

• I'd like to provide official iro.js components for popular frontend frameworks, namely React and Vue. I think the best way to tackle this would be to split off core functionality (things like color conversion) into a separate "iro-core" package that is shared between various UI implementations for specific frameworks. These components would have the benefit of being much more lightweight, performant and easy to work with than hacky wrappers around iro.js, and of course there can also still be a standalone version like there is currently.
• Svelte has matured a lot recently, and it seems like a good time to investigate whether it's worth using it for the standalone version instead of Preact. Wasn't worth it, trying Preact X instead.
• A lot of people like iro.js for its color wheel, but what if other colorpicker types (such as the common hue-saturation square) were available, with the same frictionless API?
• An option to choose a vertical layout has been requested for a long time, it's probably time to make an effort to implement that. Pull request #85 adds a global layoutDirection option, this will be merged after the Typescript + Preact X ports are completed
• The typescript port was making good progress, and I think it could perhaps be used as a base for the new iro-core package.
• I intend to redesign the iro.js.org landing page with more examples, features, and a "getting started" guide. It would also be nice to have a live codepen-style editor so that people can play with the library alongside the documentation.
• I've noticed that there's quite a few people who are using iro.js to control lighting, which is really cool! I'd like to make a plugin for some lighting-specific utilities and UI components for working with kelvin scale colors, since no other javascript color pickers seem to be targeting that. See #69 for more info
• It would be nice to have a proper set of usage examples here on github as well as codepen
• Custom layouts need to be easier to use and better documented. This feature is definitely a candidate for a few examples too.
• Overall, no major deprecations to the current featureset, but will have to be careful about plugins that add extra UI functionality if I go ahead with the split core idea.

I think this would take iro.js to the next level and make it one of the best damn color picker libraries out there. I welcome everybody's opinions though!

[jaames]

@rwwagner90 Things are going alright! I'm still working away on updating the documentation website, progress has been a little slow since I've also been busy with freelance work and applying to a job, but it is very nearly done now. I just need to give it a bit more polish and write some examples to demonstrate new features.

At the moment the handle for the currently active color should always be drawn on top of the others. SVG doesn't really support anything like CSS' z-index, so the 'top' handle is always last. As such, it's possible to target the 'active' color's handle with a CSS selector like .IroColorPicker .IroHandle:last-of-type, but it's not possible to target any handle by its associated color.

I'll look into making it a bit easier to target specific handles after the docs are done :)

[RobbieTheWagner]

@jaames sounds good! Docs in general are definitely more important.

At the moment the handle for the currently active color should always be drawn on top of the others. SVG doesn't really support anything like CSS' z-index, so the 'top' handle is always last. As such, it's possible to target the 'active' color's handle with a CSS selector like .IroColorPicker .IroHandle:last-of-type, but it's not possible to target any handle by its associated color.

Sounds like we may need a function like makeActiveColor where we could set which color / handle are active and move that svg to last in the list, so it is on top.

[jaames]

@rwwagner90 There's a setActiveColor method that should do the trick!

Obviously the multicolor stuff isn't publicly documented yet (...heh), but here's the relevant part of the source if you want to see what's available: https://github.com/jaames/iro.js/blob/e66e0ee560bc0be31fe2fb8d8e0af203057380ac/src/ColorPicker.tsx#L79-L113

[RobbieTheWagner]

@jaames setActiveColor doesn't seem to change the color selected. Are you sure it is working as intended?

[jaames]

@rwwagner90 It's the same method called internally when you interact with one of the UI handles, so as long as the last handle you interacted with is shown on top of all the others, it should definitely be working correctly. setActiveColor expects to be passed the color index rather than the color value though, maybe that's catching you out?

In lieu of documentation I put together a quick Codepen demo, hopefully that will help make things a bit clearer :) https://codepen.io/rakujira/pen/bGddRyq?editors=0010

[RobbieTheWagner]

@jaames I was passing the index. It still doesn't seem to work for me. However, I do not have a reference to the actual color index, I was just setting to the index it was from the order of colors I had. If I set all the colors a few times, does the index keep growing? I wonder if with several palettes, my indices are like 15, even though I only have 4-5 colors.

I suppose I should find a way to store the index somehow to be sure.

[jaames]

@rwwagner90 Ah, my bad. The color index shouldn't keep growing, assuming that you're using the setColors() method I posted whenever you switch the color palette? Are you setting the palette as a series of color values (like hex strings or whatever) or are you using the iro.Color objects that iro.js provides?

I'll take a deeper look tomorrow since it's getting late here, but sounds like there might be a bug on my end somewhere if that doesn't work as expected.

[RobbieTheWagner]

@jaames I'm doing this this.colorPicker.setColors(this.selectedPalette.colors.mapBy('hex')); so I am setting colors as hex. Should I be doing something else?

[jaames]

@rwwagner90 That looks correct to me.

I made a basic multi-palette demo on Codepen to test, and everything seems to be working okay as far as I can tell. Not sure if there was something I missed? The only change I made was having setColors fire its own event so I could re-render the color swatch HTML whenever the selected palette is switched.

https://codepen.io/rakujira/pen/poJJYVP?editors=0010

I should maybe mention that only the active color handle is guaranteed to be drawn on top of the other ones. The other handles will be drawn in the same order that they're provided to the color picker with.

[RobbieTheWagner]

@jaames when I call setActiveColor nothing happens at all for me. The handle does not move, and the slider does not switch to the new color. I'll try to debug more later today. Should I be creating iro color objects instead of using hex values?

[jaames]

@rwwagner90 That's really strange. Just to rule out any potential browser differences, does that last Codepen work for you? It shouldn't matter whether you use color objects or hex values, etc -- setColors() will work with either.

I'm not extremely familiar with Ember, but is there a chance that it's doing something that affects the color picker in some way? If you don't manage to get to the bottom of it, I think a reproduction repo would be helpful.

[RobbieTheWagner]

@jaames yeah, the codepen works for me. I will debug more later and report back. To confirm, this should work in 5.0.0-5 right?

[jaames]

@rwwagner90 Yeah, 5.0.0-5 is the right version.

[RobbieTheWagner]

@jaames I got it to work. I was doing something dumb. Sorry about that!

I was just looking at the image above of the new stuff like the square picker, additional slider types, etc and I was curious if that stuff had also been implemented? I would love to try some of it out 😃

[jaames]

@rwwagner90 Hah, no worries!

Yep, those are implemented now! The documentation can be found here: https://iro.js.org/advanced.html#custom-ui-layouts

[jaames]

Also, I finally published iro.js v5 and the new documentation site! I'm going to continue working on things over the course of the next week or two, so there's still some pending changes on the docsite and little bits like the readme that I need to finish. :)

But without further ado, here's the full v5 changelog! 🎉

• Rewritten entire library in Typescript (thanks KaanMol and mksglu for getting me started!)
• Split color and generic UI coordinate logic into a separate package (iro-core), in preparation for creating dedicated React and Vue packages on top of the same core logic
• Added support for kelvin temperatures (with color.kelvin, iro.Color.rgbToKelvin() and iro.Color.kelvinToRgb()).
• Added transparency support without the need for a separate plugin
• Added some shorthand color properties for common color channels (red, green, blue, hue, saturation, value, alpha)
• Added new color properties for color-with-alpha formats (rgba, hslaString, hex8String, etc.)
• New API for handling multiple selectable colors on the same color picker:
  • Added color objects index property, for keeping track of their position in the color array
  • Color pickers now have a colors property which provides an array of its selectable colors
  • Color pickers now have addColor, removeColor, setActiveColor and setColors methods for manipulating the color array
  • Added color:setActive and color:remove and color:setAll events
• UI additions:
  • Customisable layout direction with the new layoutDirection property (thanks asonix!)
  • New saturation-value box component
  • New slider types for kelvin temperatures and transparency
  • New circular slider shape
  • Improved touch input handling
• Breaking changes:
  • Removed plugin API
  • sliderHeight option renamed to sliderSize
  • handleOrigin option renamed to handleProps
  • iro.Color.onChange no longer external
  • color:init event no longer provides color changes
• Added color picker setOptions method to update config options at any point
• Added color picker reset method to reset all colors back to their initial values
• Redesigned the project website so that it does a better job of showing off what the library can do 😎

Additionally, there's some smaller features that I'm hoping to add next week:

• A way to responsively resize color pickers
• Some presets/shorthands for the layout config option
• Bringing back the transparency option from the transparency plugin, to quickly add a transparency slider to the color picker

I'm sorry that it's taken me so long to finish all of this - it's been a pretty big undertaking! I also owe a huge thanks to @rwwagner90 from Ship Shape for sponsoring the project, it's really helped out a lot :)

---

I'm going to close this thread now, but please feel free to continue the conversation! You can also reach me via email, Twitter or Discord (jaames#9860)

[RobbieTheWagner]

Thanks so much for all the hard work @jaames! We'll hopefully be announcing our product using your library soon 😃