rreusser / controls-state Goto Github PK

Hey, looking at the onChange api:

t.test('emits onChange events', function (t) {
  var c = Controls({foo: 5});

  var called = false;
  c.$path.foo.onChange(function (event) {
    t.equal(event.field, c.$path.foo);
    t.equal(event.name, 'foo');
    t.equal(event.fullPath, 'foo');
    t.equal(event.path, '');
    t.equal(event.oldValue, 5);
    t.equal(event.value, 7);
    called = true;
  });

  c.foo = 7;

  raf(function () {
    t.equal(called, true);
    t.end();
  });
});

It would be actually easier to use if the .onChange function was attached to the foo property directly. But is this even possible to do with a getter?

Another thing, in an onChange listener, almost always, the only property needed is the value. The full event is useful only in the onChanges listener.

So it would be awesome to have an api that works like this:

t.test('emits onChange events', function (t) {
  var c = Controls({foo: 5});

  var called = false;
  c.foo.onChange(function (foo) {
    t.equal(foo, 7);
    called = true;
  });

  c.foo = 7;

  raf(function () {
    t.equal(called, true);
    t.end();
  });
});

What is your opinion?

Hi! I guess the slider was designed with the options as a second argument was because they are optional, so If I do something like this

State.Slider(10)

or just

10

a slider with a default min and max would be created.

Now by default min is 0 and max is the value itself.
However after using it I think it would be more useful if the default max would be the value * 2. As a user I often also want to increase the value.

I think this would be a more reasonable default, I am willing to do a PR if you agreee with me.

Hey, just an heads up, the main example on observable is broken

https://observablehq.com/@rreusser/control-panel-2-prototype-test

The API works, but it's a bit confusing. I'd love to just rename everything (the internal APIs, really) a bit more consistently so that they're a bit easy and more natural to comprehend. I wrote it and I still struggle to remember how to navigate the hierarchy.

I've used it a couple of times, and it was really useful, being able to see the effect of a really high value when selecting the end of the slider.

It's the scale: 'log' option of the Slider, like it's implemented in control-panel.

It would be awesome to have it in controls-state as well.

It seems that values that aren't primitive or Object types are destructively handled - for example, if an Array is passed to a state field, it does not keep its length property or the other Array behaviour; instead, it's replaced with a proxy of type Object.
This makes it hard to use the state objects in a transparent way, as though working with the original values passed in, in these cases.

One solution might be to allow a field type similar to the raw field, or to keep the original values in-place at each level (not just the primitive level, as is currently stored in the value get/set property)...?

Example:
State({ test: [0, 1, 2, 3] }).test.length !== [0, 1, 2, 3].length;

Other than this minor frustration, loving these tools!