VolumeControl

Source

index.js
import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactCollapsibleControls/VolumeControl.mcss';

import CollapsibleWidget from '../../Widgets/CollapsibleWidget';
import EqualizerWidget from '../../Widgets/EqualizerWidget';
import LightButton from '../../Widgets/ToggleIconButtonWidget';
import LookupTableWidget from '../../Widgets/LookupTableWidget';

export default class VolumeControl extends React.Component {
componentWillMount() {
this.equalizerSubscription = this.props.equalizer.onChange(() => {
this.forceUpdate();
});
this.intensitySubscription = this.props.intensity.onChange(() => {
this.forceUpdate();
});
this.computationSubscription = this.props.computation.onChange(() => {
this.forceUpdate();
});
}

componentWillUnmount() {
if (this.equalizerSubscription) {
this.equalizerSubscription.unsubscribe();
this.equalizerSubscription = null;
}
if (this.intensitySubscription) {
this.intensitySubscription.unsubscribe();
this.intensitySubscription = null;
}
if (this.computationSubscription) {
this.computationSubscription.unsubscribe();
this.computationSubscription = null;
}
}

render() {
const equalizer = this.props.equalizer;
const lut = this.props.lookupTable;
const intensityButton = (
<LightButton
key="toggle-intensity"
onChange={this.props.intensity.toggleState}
value={this.props.intensity.getState()}
/>
);
const resetOpacityButton = (
<LightButton
key="reset"
icon={style.undoIcon}
toggle={false}
onChange={this.props.equalizer.resetOpacities}
value
/>
);
const cpuGpuButton = (
<LightButton
key="toggle-gpu"
icon={style.mobileIcon}
onChange={this.props.computation.toggleState}
value={!this.props.computation.getState()}
/>
);

return (
<div>
<CollapsibleWidget
title="LookupTable"
key="LookupTableWidget_parent"
subtitle={intensityButton}
activeSubTitle
>
<LookupTableWidget
key="LookupTableWidget"
originalRange={lut.originalRange}
lookupTable={lut.lookupTable}
lookupTableManager={lut.lookupTableManager}
/>
</CollapsibleWidget>
<CollapsibleWidget
title="Opacity Control"
subtitle={[cpuGpuButton, resetOpacityButton]}
activeSubTitle
>
<EqualizerWidget
key="Equalizer"
layers={equalizer.getOpacities()}
onChange={equalizer.updateOpacities}
colors={equalizer.getColors()}
spacing={5}
/>
</CollapsibleWidget>
</div>
);
}
}

VolumeControl.propTypes = {
computation: PropTypes.object.isRequired,
equalizer: PropTypes.object.isRequired,
intensity: PropTypes.object.isRequired,
lookupTable: PropTypes.object.isRequired,
};