LightControl

Source

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

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

import CollapsibleWidget from '../../Widgets/CollapsibleWidget';
import Coordinate2DWidget from '../../Widgets/Coordinate2DWidget';
import LightButton from '../../Widgets/ToggleIconButtonWidget';
import NumberInputWidget from '../../Widgets/NumberInputWidget';

export default class LightControl extends React.Component {
constructor(props) {
super(props);
this.state = props.light.getLightProperties().lightTerms;

// Bind callback
this.onLightTermsChange = this.onLightTermsChange.bind(this);
this.onLightPositionChange = this.onLightPositionChange.bind(this);
this.toggleLight = this.toggleLight.bind(this);
}

onLightTermsChange(newVal, name) {
const newState = {};
newState[name] = newVal;
this.setState(newState);
setTimeout(() => {
this.props.light.setLightProperties({
lightTerms: newState,
});
}, 0);
}

onLightPositionChange(event) {
this.props.light.setLightProperties({
lightPosition: event,
});
}

toggleLight(enabled) {
this.props.light.setLightingEnabled(enabled);
}

render() {
const lightButton = (
<LightButton
key="enable-light-button"
onChange={this.toggleLight}
value={this.props.light.getLightingEnabled()}
/>
);
return (
<CollapsibleWidget
title="Light Properties"
subtitle={lightButton}
activeSubTitle
>
<section className={style.container}>
<Coordinate2DWidget
onChange={this.onLightPositionChange}
width={114}
height={114}
hideXY
/>
<section className={style.controls}>
<div className={style.inputRow}>
<label>Ambient</label>
<NumberInputWidget
className={style.property}
step={0.05}
min={0.0}
max={1.0}
key="ka"
value={this.state.ka}
name="ka"
onChange={this.onLightTermsChange}
/>
</div>
<div className={style.inputRow}>
<label>Diffuse</label>
<NumberInputWidget
className={style.property}
step={0.05}
min={0.0}
max={1.0}
key="kd"
value={this.state.kd}
name="kd"
onChange={this.onLightTermsChange}
/>
</div>
<div className={style.inputRow}>
<label>Specular</label>
<NumberInputWidget
className={style.property}
step={0.05}
min={0.0}
max={1.0}
key="ks"
value={this.state.ks}
name="ks"
onChange={this.onLightTermsChange}
/>
</div>
<div className={style.inputRow}>
<label>Alpha</label>
<NumberInputWidget
className={style.property}
step={1}
min={0.0}
max={100}
key="alpha"
value={this.state.alpha}
name="alpha"
onChange={this.onLightTermsChange}
/>
</div>
</section>
</section>
</CollapsibleWidget>
);
}
}

LightControl.propTypes = {
light: PropTypes.object.isRequired,
};