Cubic Bezier: On is not a function

[jwagner]

I'm trying to use the cubic bezier blade. I'm following the example from the README:

import {Pane} from 'tweakpane';
import * as EssentialsPlugin from '@tweakpane/plugin-essentials';

const pane = new Pane();
pane.registerPlugin(EssentialsPlugin);
// ...
pane.addBlade({
  view: 'cubicbezier',
  value: [0.5, 0, 0.5, 1],

  expanded: true,
  label: 'cubicbezier',
  picker: 'inline',
}).on('click', (ev) => {
  console.log(ev);
});

Which leads to the following type error when using typescript: "Property 'on' does not exist on type 'BladeApi<BladeController<View>>'.".

Even when ignoring the type error at compile time I still get a runtime error: TypeError: pane.addBlade(...).on.

Digging into the code I can't find a definition of on in BladeApi: https://github.com/cocopon/tweakpane/blob/e6b0ee6a8dbe0ee06951ee098cc833cb6fcec0fe/packages/core/src/blade/common/api/blade.ts#L4

Or the specific implementation of CubicBezierApi: https://github.com/tweakpane/plugin-cubic-bezier/blob/main/src/api/cubic-bezier.ts

$ cat package.json |grep tweakpane
    "@tweakpane/core": "^1.0.6",
    "@tweakpane/plugin-essentials": "^0.1.1",
    "tweakpane": "^3.0.5"

What am I missing?

[cocopon]

Sorry, my fault... Added the missing function to CubicBezierApi in the latest version 0.1.2, please try it.

[jwagner]

Hi @cocopon , Thanks a lot for the quick reply. I do get events now but the casting to get to the API is a bit awkward.

import { CubicBezierApi } from '@tweakpane/plugin-essentials/dist/types/cubic-bezier/api/cubic-bezier.js';
const cubicBezierBlade: CubicBezierApi = pane.addBlade({
  view: 'cubicbezier',
  value: [0.25, 0.25, 0.75, 0.75],

  expanded: true,
  label: 'curve',
  picker: 'inline',
}) as CubicBezierApi;
cubicBezierBlade.on('change', (ev) => {
  console.log(ev);
});

I also can't find a reasonable way to set the value.

Is there a reason why cubicbezier is implemented as a regular blade rather than an input?

Oh one more thing, the README still mentions on('click') rather than change.

[cocopon]

Sorry for the late reply...

I also can't find a reasonable way to set the value.

Fair enough. Added set value to the API in 31a224612f9403bcc4094642b6153054f7dad50b, so you'll be able to set a value like this:

import {CubicBezier} from '@tweakpane/plugin-essentials';

api.value = new CubicBezier(x1, y1, x2, y2);

Is there a reason why cubicbezier is implemented as a regular blade rather than an input?

It's just not implemented yet because I am not sure that there is demand.

const params = {
  bezier: [0, 0, 1, 1],
};

pane.addInput(params, 'bezier', {
  view: 'cubicbezier',
}).on('change', (ev) => {
  // ev.value is [n, n, n, n] because this is a binding... do you really want to get it?
  console.log(ev.value);
});

[cocopon]

set is added to cubic-bezier API in 0.1.3.

Cubic-bezier input binding has been implemented in wip-cubic-bezier-binding, but I'm still not sure about its demand. If you are still interested in this feature, feel free to open a new issue (because it is a different topic from this issue).

[jwagner]

Thanks a lot for the addition @cocopon ! I'll try it on my project soon. I don't strictly need input binding, I just wondered why it was different from the other inputs.