PieceWiseGaussianFunctionEditorWidget

Source

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

import vtkPiecewiseGaussianWidget from 'vtk.js/Sources/Interaction/Widgets/PiecewiseGaussianWidget';

import sizeHelper from '../../../Common/Misc/SizeHelper';

const defaultGaussians =
'[{ "position": 0.5, "height": 1, "width": 0.5, "xBias": 0.55, "yBias": 0.55 }]';

export default class PieceWiseGaussianFunctionEditorWidget extends React.Component {
constructor(props) {
super(props);
this.state = {
height: props.height,
width: props.width,
gaussians: props.gaussians
? props.gaussians
: JSON.parse(defaultGaussians),
};

this.widget = vtkPiecewiseGaussianWidget.newInstance({
numberOfBins: 256,
size: [props.width, props.height],
});
this.widget.updateStyle({
backgroundColor: 'rgba(100, 100, 100, 0.5)',
strokeColor: 'rgb(0, 0, 0)',
activeColor: 'rgb(255, 255, 255)',
handleColor: 'rgb(50, 150, 50)',
strokeWidth: 2,
activeStrokeWidth: 3,
iconSize: 0,
padding: 10,
});
this.bgImage = new Image();

// Bind methods
this.updateDimensions = this.updateDimensions.bind(this);
this.updateWidget = this.updateWidget.bind(this);
}

componentDidMount() {
this.widget.setContainer(this.rootContainer);
this.widget.bindMouseListeners();

if (this.props.onEditModeChange) {
this.widget.onAnimation((editting) => {
if (!editting) {
if (this.props.onChange) {
const gaussians = this.widget.get('gaussians').gaussians;
const nodes = this.widget.getOpacityNodes();
this.props.onChange(nodes, gaussians);
}
}
this.props.onEditModeChange(editting);
});
}

if (this.props.width === -1 || this.props.height === -1) {
this.sizeSubscription = sizeHelper.onSizeChangeForElement(
this.rootContainer,
this.updateDimensions
);
sizeHelper.startListening();
this.updateDimensions();
}
this.updateWidget();
}

componentWillReceiveProps(newProps) {
const gaussians = !newProps.gaussians
? JSON.parse(defaultGaussians)
: newProps.gaussians;
this.setState({ gaussians });
if (this.props.width === -1 || this.props.height === -1) {
this.updateDimensions();
}
}

componentDidUpdate(prevProps, prevState) {
this.updateWidget();
}

componentWillUnmount() {
if (this.sizeSubscription) {
this.sizeSubscription.unsubscribe();
this.sizeSubscription = null;
this.widget.unbindMouseListeners();
this.widget.delete(); // Remove subscriptions
this.widget = null;
}
}

updateDimensions() {
const { clientWidth, clientHeight } = sizeHelper.getSize(
this.rootContainer,
true
);
if (this.props.width === -1) {
this.setState({ width: clientWidth });
}
if (this.props.height === -1) {
this.setState({ height: clientHeight });
}
}

updateWidget() {
if (this.state.gaussians) {
this.widget.setGaussians(this.state.gaussians);
}
if (this.props.bgImage) {
this.bgImage.src = `data:image/png;base64,${this.props.bgImage}`;
this.widget.setBackgroundImage(this.bgImage);
}

this.widget.render();
}

render() {
this.widget.setSize(this.state.width, this.state.height);
return (
<div
style={{ overflow: 'hidden', minHeigh: '10px', minWidth: '10px' }}
ref={(c) => {
this.rootContainer = c;
}}
/>
);
}
}

PieceWiseGaussianFunctionEditorWidget.defaultProps = {
height: 200,
width: -1,
bgImage: null,

gaussians: undefined,
onChange: undefined,
onEditModeChange: undefined,
};

PieceWiseGaussianFunctionEditorWidget.propTypes = {
// points: PropTypes.array,
gaussians: PropTypes.array,
onChange: PropTypes.func,
onEditModeChange: PropTypes.func,
height: PropTypes.number,
width: PropTypes.number,
bgImage: PropTypes.string,
};