I gotta admin, I’m not crazy about how the 2 in MinimalComps2 works with the semantic versioning. Version 1.4 of version 2? Whatever.
Anyway… VERSION 1.4.0!!!
No new components this time, but some super useful features, as well as a bunch of bug fixes.
There are some new defaults in the
Defaults object. These are mostly useful if you are creating a bunch of components that need some specific property that is not settable in the constructor. Like HSlider’s text position. Rather than doing something like:
const hs1 = new HSlider(panel, x, y, "one", 0, 0, 100); hs1.textPosition = "left"; const hs2 = new HSlider(panel, x, y, "two", 0, 0, 100); hs2.textPosition = "left"; const hs3 = new HSlider(panel, x, y, "three", 0, 0, 100); hs3.textPosition = "left";
You can do:
Defaults.hslider.textPosition = "left"; const hs1 = new HSlider(panel, x, y, "one", 0, 0, 100); const hs2 = new HSlider(panel, x, y, "two", 0, 0, 100); const hs3 = new HSlider(panel, x, y, "three", 0, 0, 100);
You can see all the properties that use this technique here.
Another ease of use improvement. Basically, all settable properties now have a setter method that returns the current instance of the component. This lets you set a bunch of properties in a row and assign the result back to a variable that holds the instance. Especially useful for those properties that aren’t in the constructor, but some people don’t like the long constructors either. Along with this work, I made sure that just about all the constructor parameters are optional and have sensible defaults.
So now, if you want, you can do stuff like this:
const velSlider = new HSlider(panel) .setText("velocity") .move(x, y) .setSize(200, 30) .setHandleSize(30) .setMin(50) .setMax(200) .setValue(175) .setTextPosition("left") .setDecimals(2) .addHandler(handleSlider);
Maybe a little overboard with that example, but you get the idea.
Binding is one of my favorite features. It turns this:
new HSlider(panel, 20, 20, "velocity", 0, 0, 100, event => model.velocity = event.target.value;
new HSlider(panel, 20, 20, "velocity", 0, 0, 100) .bind(model, "velocity");
I wrote about this in a lot more detail here: https://www.minimalcomps2.com/docs/bind/ . So I’ll leave you with that.
I also upgraded the API docs a bit, both in style and content.
A bunch of bug fixes, more demos
Also, check my last few posts here for some more examples of the components in action.
I hope to get a showcase up eventually, linking to other real world uses of the library beyond my own. So if you do something with these, let me know!