I know, I know, too many releases in too short a time. But I think this is the last minor release for a while. Pretty sure I’ve done most of what I really want to do with these for a v1. And I have no idea what v2 will look like. So from here on out it should be mostly patches with bug fixes and minor tweaks.

https://github.com/bit101/minimalcomps2/releases/tag/v1.5.0

What’s in it?

HSlider label positions

Up to now you could only change the position of the text label on an HSlider. Now you can put the value slider just about wherever you want it as well. Both can be placed top, left, right or bottom. There’s some logic in there to make sure they don’t overlap. A change on this one is that previously the value label would be to the right of the slider. Like this:

Now it defaults to on top. Like this:

I think this looks a lot better, but it might mess things up for you. You can easily manually change it back to the right side.

ColorPicker with sliders

When you tab or click into the color picker’s input field, the panel will drop down, giving you RGB sliders to adjust your color. I like this SO much better. My favorite update for this release! You can make it drop up if you want, or turn this feature off altogether to just use the text field.

Dropdown drop up

You can now make the Dropdown component drop up if you don’t have room for it to drop down. This is not automatic. It’s a setting. Hey, these are minimal components.

VSlider swap labels

You can swap the position of the text and value labels on the VSlider, like you can on the Knob. Not a big deal, but someone might use it.

PlayButton component

Yup, a new component.

Functionally, this is the same as a Checkbox or Toggle. You click it to toggle it back and forth between two states (checked / not checked, toggled / not toggled, playing / not playing). But who wants to use a checkbox to start and stop an animation or audio?

Summary

That’s all folks. Like I said, I don’t anticipate a v1.6 for a while. But probably some v1.5.x patches here and there to fix bugs and give minor tweaks. Mostly I’m just going to be using them as much as I can in various experiments.

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.

Defaults

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.

Chainable setters

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

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;

to this:

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.

Other stuff

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!