GeometryRenderer

Source

index.js

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

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

export default class GeometryRenderer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 200,
      height: 200,
    };

    // Bind callback
    this.updateDimensions = this.updateDimensions.bind(this);
    this.resetCamera = this.resetCamera.bind(this);
  }

  componentDidMount() {
    // Listen to window resize
    this.sizeSubscription = sizeHelper.onSizeChangeForElement(
      this.canvasRenderer.parentNode,
      this.updateDimensions
    );

    // Make sure we monitor window size if it is not already the case
    sizeHelper.startListening();
    if (this.props.geometryBuilder) {
      this.props.geometryBuilder.configureRenderer(this.canvasRenderer);
      this.props.geometryBuilder.render();
    }
    this.updateDimensions();
  }

  componentDidUpdate(nextProps, nextState) {
    this.updateDimensions();
  }

  componentWillUnmount() {
    // Remove window listener
    if (this.sizeSubscription) {
      this.sizeSubscription.unsubscribe();
      this.sizeSubscription = null;
    }
  }

  updateDimensions() {
    const el = this.canvasRenderer.parentNode;
    const elSize = sizeHelper.getSize(el);

    if (
      el &&
      (this.state.width !== elSize.clientWidth ||
        this.state.height !== elSize.clientHeight)
    ) {
      this.setState({
        width: elSize.clientWidth,
        height: elSize.clientHeight,
      });

      if (this.props.geometryBuilder && this.props.geometryBuilder.updateSize) {
        this.props.geometryBuilder.updateSize(
          elSize.clientWidth,
          elSize.clientHeight
        );
      }
      return true;
    }
    return false;
  }

  resetCamera() {
    if (this.props.geometryBuilder) {
      this.props.geometryBuilder.resetCamera();
    }
  }

  render() {
    return (
      <canvas
        className="CanvasImageRenderer"
        ref={(c) => {
          this.canvasRenderer = c;
        }}
        width={this.state.width}
        height={this.state.height}
      />
    );
  }
}

GeometryRenderer.propTypes = {
  geometryBuilder: PropTypes.object.isRequired,
};

GeometryRenderer.defaultProps = {};