ProbeControl

Source

index.js

import React from 'react';
import PropTypes from 'prop-types';

import NumberSliderWidget from '../../Widgets/NumberSliderWidget';
import CollapsibleWidget from '../../Widgets/CollapsibleWidget';

function getImageBuilder(props) {
  let imageBuilder = props.imageBuilder;

  if (!imageBuilder) {
    const key = Object.keys(props.imageBuilders)[0];
    imageBuilder = props.imageBuilders[key].builder;
  }

  return imageBuilder;
}

export default class ProbeControl extends React.Component {
  constructor(props) {
    super(props);

    const imageBuilder = getImageBuilder(props);
    this.state = {
      probe: [
        imageBuilder.getProbe()[0],
        imageBuilder.getProbe()[1],
        imageBuilder.getProbe()[2],
      ],
      showFieldValue: true,
    };

    // Bind callback
    this.getImageBuilder = getImageBuilder;
    this.onProbeVisibilityChange = this.onProbeVisibilityChange.bind(this);
    this.getImageBuilder = this.getImageBuilder.bind(this);
    this.attachImageBuilderListeners = this.attachImageBuilderListeners.bind(
      this
    );
    this.detachImageBuilderListeners = this.detachImageBuilderListeners.bind(
      this
    );
    this.updateRenderMethod = this.updateRenderMethod.bind(this);
    this.probeChange = this.probeChange.bind(this);
  }

  componentWillMount() {
    this.attachImageBuilderListeners(this.getImageBuilder(this.props));
  }

  /* eslint-disable */
  componentDidMount() {
    this.isReady = true;
    this.setState({
      showFieldValue: this.probeInput.isExpanded(),
    });
  }
  /* eslint-enable */

  componentWillReceiveProps(nextProps) {
    const previousImageBuilder = this.getImageBuilder(this.props);
    const nextImageBuilder = this.getImageBuilder(nextProps);

    if (previousImageBuilder !== nextImageBuilder) {
      this.attachImageBuilderListeners(nextImageBuilder);
    }
  }

  componentWillUnmount() {
    this.isReady = false;
    this.detachImageBuilderListeners();
  }

  onProbeVisibilityChange(isProbeOpen) {
    this.setState({
      showFieldValue: isProbeOpen,
    });

    setTimeout(() => {
      if (this.props.imageBuilders) {
        Object.keys(this.props.imageBuilders).forEach((key) => {
          const builder = this.props.imageBuilders[key].builder;
          builder.setCrossHairEnable(isProbeOpen);
          builder.render();
        });
      }
      if (this.props.imageBuilder) {
        this.props.imageBuilder.setCrossHairEnable(isProbeOpen);
        this.props.imageBuilder.render();
      }
    }, 0);
  }

  attachImageBuilderListeners(imageBuilder) {
    this.detachImageBuilderListeners();
    this.probeListenerSubscription = imageBuilder.onProbeChange(
      (probe, envelope) => {
        const field = imageBuilder.getFieldValueAtProbeLocation();
        if (this.isReady) {
          this.setState({
            probe,
            field,
          });
        }
      }
    );

    this.probeDataListenerSubscription = imageBuilder.onProbeLineReady(
      (data, envelope) => {
        const field = imageBuilder.getFieldValueAtProbeLocation();
        if (this.isReady && field !== this.state.field) {
          this.setState({
            field,
          });
        }
      }
    );
  }

  detachImageBuilderListeners() {
    if (this.probeListenerSubscription) {
      this.probeListenerSubscription.unsubscribe();
      this.probeListenerSubscription = null;
    }
    if (this.probeDataListenerSubscription) {
      this.probeDataListenerSubscription.unsubscribe();
      this.probeDataListenerSubscription = null;
    }
  }

  updateRenderMethod(event) {
    if (this.props.imageBuilder) {
      this.props.imageBuilder.setRenderMethod(event.target.value);
      this.props.imageBuilder.render();
      this.forceUpdate();
    }
  }

  probeChange(event) {
    const value = Number(event.target.value);
    const probe = this.state.probe;
    const idx = Number(event.target.name);

    probe[idx] = value;

    this.getImageBuilder(this.props).setProbe(probe[0], probe[1], probe[2]);
  }

  render() {
    const imageBuilder = this.getImageBuilder(this.props);
    const value =
      this.state.field || imageBuilder.getFieldValueAtProbeLocation();
    let valueStr = `${value}`;

    if (value === undefined) {
      valueStr = '';
    } else {
      if (valueStr && valueStr.length > 6) {
        valueStr = value.toFixed(5);
      }
      if (Math.abs(value) < 0.00001) {
        valueStr = '0';
      }
    }

    return (
      <div>
        <CollapsibleWidget
          title="Render method"
          visible={imageBuilder.isRenderMethodMutable()}
        >
          <select
            style={{ width: '100%' }}
            value={imageBuilder.getRenderMethod()}
            onChange={this.updateRenderMethod}
          >
            {imageBuilder.getRenderMethods().map((v) => (
              <option key={v} value={v}>
                {v}
              </option>
            ))}
          </select>
        </CollapsibleWidget>
        <CollapsibleWidget
          title="Probe"
          subtitle={this.state.showFieldValue ? valueStr : ''}
          ref={(c) => {
            this.probeInput = c;
          }}
          onChange={this.onProbeVisibilityChange}
          open={imageBuilder.isCrossHairEnabled()}
        >
          <NumberSliderWidget
            name="0"
            min="0"
            max={imageBuilder.metadata.dimensions[0] - 1}
            key="slider-x"
            value={this.state.probe[0]}
            onChange={this.probeChange}
          />
          <NumberSliderWidget
            name="1"
            min="0"
            max={imageBuilder.metadata.dimensions[1] - 1}
            key="slider-Y"
            value={this.state.probe[1]}
            onChange={this.probeChange}
          />
          <NumberSliderWidget
            name="2"
            min="0"
            max={imageBuilder.metadata.dimensions[2] - 1}
            key="slider-Z"
            value={this.state.probe[2]}
            onChange={this.probeChange}
          />
        </CollapsibleWidget>
      </div>
    );
  }
}

ProbeControl.propTypes = {
  imageBuilder: PropTypes.object.isRequired,
  imageBuilders: PropTypes.object,
};

ProbeControl.defaultProps = {
  imageBuilders: {},
};