How to trigger cell update on modified properties by tweakpane

Community Help
1

Hey there!

I try to create an example for tweakpane but have a hard time to get the cell (params) update on change?

Anyone knows what I have to do?

Thank you!
Benny

2

Side effects aren’t recognized by Observable’s Runtime. You’d have to declare params via the mutable macro:

tweakpane = {
  // ...
  pane.addBinding(mutable params, 'one', { min: 0, max: 1, step: 0.1 });
  pane.addBinding(mutable params, 'two', { min: 0, max: 1, step: 0.1 });
  pane.addBinding(mutable params, 'three', { min: 0, max: 1, step: 0.1 });
  // invoke the Mutable's setter to trigger an update
  pane.on("change", () => mutable params = mutable params);
  // ...

mutable params = ({
  one: 0.1,
  two: 0.2,
  three: 0.3,
});

I would however recommend to use a view instead:

viewof params = {
  const fields = {
    one: {value: 0.1, min: 0, max: 1, step: 0.1 },
    two: {value: 0.2, min: 0, max: 1, step: 0.1 },
    three: {value: 0.3, min: 0, max: 1, step: 0.1 },
  };
  const container = htl.html`<div style="position:relative;display:flex">`;
  const pane = new Tweakpane.Pane({container});
  const state = Object.fromEntries(Object.entries(fields).map(([k, v]) => [k, v.value]));
  for(const [key, {value, ...options}] of Object.entries(fields)) pane.addBinding(state, key, options);

  let value;
  // Capture a snapshot of the object state
  const update = () => { value = ({...state}) };
  // Update the exposed value and let Runtime know about it.
  pane.on("change", () => {
    update();
    container.dispatchEvent(new Event("input", {bubbles: true}));
  });
  update(); // init
  
  return Object.defineProperty(container, "value", { get: () => value });
};

params

As an aside, try to avoid width wherever possible, because resizing the viewport would invalidate the referencing cell and all of its dependents.