Skip to content

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

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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