ParaViewWeb

ColorMapEditorWidget

Live example

Source

import 'normalize.css';

import React from 'react';
import ReactDOM from 'react-dom';

import ColorMapEditorWidget from 'paraviewweb/src/React/Widgets/ColorMapEditorWidget';
import presets from 'paraviewweb/src/React/Widgets/ColorMapEditorWidget/example/presets.json';

const container = document.querySelector('.content');

class ColorMapEditorTestWidget extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPreset: 'Cool to Warm',
      rangeMin: 0,
      rangeMax: 200,
      points: [
        { x: 0, y: 0 },
        { x: 1, y: 1 },
      ],
    };

    // Bind callback
    this.updatePreset = this.updatePreset.bind(this);
    this.updateOpacityPoints = this.updateOpacityPoints.bind(this);
    this.updateRange = this.updateRange.bind(this);
    this.rangeToCurrent = this.rangeToCurrent.bind(this);
    this.rangeToTime = this.rangeToTime.bind(this);
  }

  updatePreset(name) {
    this.setState({ currentPreset: name });
  }

  updateOpacityPoints(points) {
    this.setState({ points });
  }

  updateRange(range) {
    this.setState({ rangeMin: range[0], rangeMax: range[1] });
  }

  rangeToCurrent() {
    this.setState({ rangeMin: 0, rangeMax: 150 });
  }

  rangeToTime() {
    this.setState({ rangeMin: 0, rangeMax: 200 });
  }

  render() {
    return (
      <ColorMapEditorWidget
        currentPreset={this.state.currentPreset}
        currentOpacityPoints={this.state.points}
        presets={presets}
        dataRangeMin={0}
        dataRangeMax={200}
        rangeMin={this.state.rangeMin}
        rangeMax={this.state.rangeMax}
        onOpacityTransferFunctionChanged={this.updateOpacityPoints}
        onPresetChanged={this.updatePreset}
        onRangeEdited={this.updateRange}
        onScaleRangeToCurrent={this.rangeToCurrent}
        onScaleRangeOverTime={this.rangeToTime}
      />
    );
  }
}

container.style.height = '50%';
container.style.width = '50%';

ReactDOM.render(React.createElement(ColorMapEditorTestWidget, {}), container);

document.body.style.margin = '10px';