ohif-viewer/src/components/Labelling/LabellingManager.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import cloneDeep from 'lodash.clonedeep'

import EditDescriptionDialog from './../EditDescriptionDialog/EditDescriptionDialog.js'
import LabellingFlow from './LabellingFlow.js'

import './LabellingManager.css'

export default class LabellingManager extends Component {
  static propTypes = {
    eventData: PropTypes.object.isRequired,
    measurementData: PropTypes.object.isRequired,

    labellingDoneCallback: PropTypes.func.isRequired,
    updateLabelling: PropTypes.func.isRequired,

    skipAddLabelButton: PropTypes.bool,
    editLocation: PropTypes.bool,
    editDescription: PropTypes.bool,
    editDescriptionOnDialog: PropTypes.bool,
  }

  static defaultProps = {
    skipAddLabelButton: false,
    editLocation: false,
    editDescription: false,
    editDescriptionOnDialog: false,
  }

  constructor(props) {
    super(props)

    const measurementData = cloneDeep(props.measurementData)
    this.treatMeasurementData(measurementData)

    let editLocation = props.editLocation
    if (!props.editDescription && !props.editLocation) {
      editLocation = true
    }

    this.state = {
      componentStyle: getComponentPosition(props.eventData),
      skipAddLabelButton: props.skipAddLabelButton,
      editLocation: editLocation,
      editDescription: props.editDescription,
      editDescriptionOnDialog: props.editDescriptionOnDialog,
      measurementData: measurementData,
    }
  }

  componentDidMount = () => {
    document.addEventListener('touchstart', this.onTouchStart)
  }

  componentWillUnmount = () => {
    document.removeEventListener('touchstart', this.onTouchStart)
  }

  render() {
    return this.getRenderComponent()
  }

  getRenderComponent = () => {
    const {
      editLocation,
      editDescription,
      editDescriptionOnDialog,
      measurementData,
    } = this.state

    if (editDescriptionOnDialog) {
      return (
        <EditDescriptionDialog
          onCancel={this.props.labellingDoneCallback}
          onUpdate={this.descriptionDialogUpdate}
          componentRef={this.editDescriptionDialog}
          componentStyle={this.state.componentStyle}
          measurementData={measurementData}
        />
      )
    }

    if (editLocation || editDescription) {
      return (
        <LabellingFlow
          {...this.props}
          componentStyle={this.state.componentStyle}
        />
      )
    }
  }

  treatMeasurementData = measurementData => {
    const { editDescription, editLocation } = this.props

    if (editDescription) {
      measurementData.description = undefined
    }
    if (editLocation) {
      measurementData.location = undefined
    }
  }

  responseDialogUpdate = response => {
    this.props.updateLabelling({
      response,
    })
    this.props.labellingDoneCallback()
  }

  descriptionDialogUpdate = description => {
    this.props.updateLabelling({
      description,
    })
    this.props.labellingDoneCallback()
  }
}

function getComponentPosition(eventData) {
  const {
    event: { clientX: left, clientY: top },
  } = eventData

  return {
    left,
    top,
  }
}