Skip to content

[Feature Request] .trigger() to call ._onChange() with current value #166

@nopeless

Description

@nopeless

I am using this library for a university class, and I feel like this is a missed DX opportunity

Frequently, my code would have the following pattern:

const state = {
  property: 42,
};

function updateExternalBasedOnValue(value) {
  // do some modifications to other objects
}

gui.add(state, 'property').onChange(updateExternalBasedOnValue);

updateExternalBasedOnValue(state.property);

Example

const state = {
  partsVisible: false
}

const myParts = [
  leftArmMesh,
  rightArmMesh,
  leftLegMesh,
  rightLegMesh,
]

function setPartsVisibility(visible) {
  for (const part of parts) {
    part.visible = visible;
  }
}

gui.add(state, 'partsVisible').onChange(setPartsVisibility);

setPartsVisibility(false);
// or
setPartsVisibility(state.partsVisible);

essentially having the source parameter affect dependencies when adding to GUI

In order to avoid having to write this out, I implemented my own pattern and have been using it for a while

Controller.prototype.trigger = function () {
  this._onChange(this.getValue());
  return this;
}

thus, the example transforms into

const state = {
  partsVisible: false
}

const myParts = [
  leftArmMesh,
  rightArmMesh,
  leftLegMesh,
  rightLegMesh,
]


gui.add(state, 'partsVisible').onChange(visible => {
  for (const part of parts) {
    part.visible = visible;
  }
}).trigger();

related: #131

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions