EqualizerState

EqualizerState represents a set of feature list where each feature can
vary in intensity and a color/scalar can be associated with.
This state is used within the React/Widgets/EqualizerWidget.

The class can be imported with the following command:

import EqualizerState from 'paraviewweb/src/Common/State/EqualizerState';

constructor({size=1, colors=[‘#cccccc’], lookupTable=null, scalars=[]})

Create an instance of an equalizer state.

The size is used to determine how many features should be used.

The color array will be used by the widget to color each column.
If the array of colors is smaller than the size, then the widget will
loop through them indefinitely. So that array can contain a single
color without issue.

In case a lookupTable is provided, scalars should be provided as well
so the colors of each feature can be defined based on those scalars and
lookuptable.

getOpacities(): [0…1]

Return an array of the size given at construction time with values between
0 and 1.

getColors(): [‘#fff’]

Return the color table which can be smaller than the actual size of
the equalizer. Unless a lookupTable with scalars are used.

onChange(callback):subscription

Register a callback to any possible change of the model.
The callback method profile is as follow.

function(equalizerStateInstance, envelope){}

destroy()

Free memory and detatch any listener.

Source

index.js

import Monologue from 'monologue.js';

const CHANGE_TOPIC = 'model.change';

export default class EqualizerState {
  constructor({
    size = 1,
    colors = ['#cccccc'],
    lookupTable = null,
    scalars = [],
  }) {
    this.size = size;
    this.scalars = scalars;
    this.lookupTable = lookupTable;
    this.colors = colors;

    // Handle colors
    if (lookupTable) {
      const convertColor = (color) => {
        const R = Math.floor(color[0] * 255);
        const G = Math.floor(color[1] * 255);
        const B = Math.floor(color[2] * 255);
        return `rgb(${R},${G},${B})`;
      };
      const callback = (data, envelope) => {
        for (let idx = 0; idx < this.size; idx++) {
          const color = this.lookupTable.getColor(this.scalars[idx]);
          this.colors[idx] = convertColor(color);
        }
        if (envelope) {
          this.emit(CHANGE_TOPIC, this);
        }
      };

      this.lutChangeSubscription = this.lookupTable.onChange(callback);
      callback();
    }

    // Fill opacity
    this.opacities = [];
    while (this.opacities.length < this.size) {
      this.opacities.push(-1);
    }

    // Make the updateOpacities a closure to prevent any this issue
    // when using it as a callback
    this.updateOpacities = (values) => {
      let changeDetected = false;
      for (let i = 0; i < this.size; i++) {
        changeDetected = changeDetected || this.opacities[i] !== values[i];
        this.opacities[i] = values[i];
      }
      if (changeDetected) {
        this.emit(CHANGE_TOPIC, this);
      }
    };

    // Make the resetOpacities a closure to prevent any this issue
    // when using it as a callback
    this.resetOpacities = () => {
      const opacityStep = 1.0 / this.size;
      let opacity = 0.0;
      let changeDetected = false;

      for (let i = 0; i < this.size; i++) {
        opacity += opacityStep;
        changeDetected = changeDetected || this.opacities[i] !== opacity;
        this.opacities[i] = opacity;
      }
      if (changeDetected) {
        this.emit(CHANGE_TOPIC, this);
      }
    };
    this.resetOpacities();
  }

  // ------------------------------------------------------------------------

  getOpacities() {
    return this.opacities;
  }

  // ------------------------------------------------------------------------

  getColors() {
    return this.colors;
  }

  // ------------------------------------------------------------------------

  onChange(callback) {
    return this.on(CHANGE_TOPIC, callback);
  }

  // ------------------------------------------------------------------------

  /* eslint-disable */
  bind(listOfStateToBind) {
    let changeInProgress = false;
    const applyChange = (instance) => {
      if (changeInProgress) {
        return;
      }
      changeInProgress = true;
      const newValues = instance.getOpacities();
      listOfStateToBind.forEach((other) => {
        if (other !== instance) {
          other.updateOpacities(newValues);
        }
      });
      changeInProgress = false;
    };

    listOfStateToBind.forEach((toMonitor) => {
      toMonitor.onChange(applyChange);
    });
  }
  /* eslint-enable */

  // ------------------------------------------------------------------------

  destroy() {
    this.off();

    this.lutChangeSubscription.unsubscribe();
    this.lutChangeSubscription = null;
  }
}

// Add Observer pattern using Monologue.js
Monologue.mixInto(EqualizerState);