<commit_before>import React from 'react'
import {observable} from 'mobx'
import {observer} from 'mobx-react'
import classNames from 'classnames'

import styles from './style.less'

import {UiState} from '~/src/business/UiState'
import {Modals} from '~/src/business/Modals'

import {Rectangle} from '~/src/util/geometry/Rectangle'

import {ComponentUsage} from '~/src/tickator/definition/ComponentUsage'
import {ComponentImplementation} from '~/src/tickator/definition/ComponentImplementation'

import {InterfaceUsageVisualization} from './InterfaceUsageVisualization'

@observer
export class ComponentUsageVisualization extends React.Component {

  static propTypes = {
    componentUsage: React.PropTypes.instanceOf(ComponentUsage).isRequired,
    componentImplementation: React.PropTypes.instanceOf(ComponentImplementation).isRequired,
    geometry: React.PropTypes.object.isRequired,
    registerDrag: React.PropTypes.func.isRequired,
    clientToPoint: React.PropTypes.func.isRequired
  }

  static contextTypes = {
    uiState: React.PropTypes.instanceOf(UiState).isRequired
  }

  render() {
    const {geometry} = this.props

    return <g
        onMouseDown={e=>this._dragStart(e)}
        onTouchStart={e=>this._dragStart(e)}
      >
      <rect
        className={styles.usageFrame}
        x={geometry.boundary.x}
        y={geometry.boundary.y}
        width={geometry.boundary.width}
        height={geometry.boundary.height}
        />

      <text
        className={styles.centeredLabel}
        x={geometry.center.x}
        y={geometry.center.y}
        onClick={e=>this._editText(e)}
      >
        {this.props.componentUsage.name}
      </text>

      {this.props.componentUsage.refComponentDefinition.refsInterfaceUsage.map(interfaceUsage=>{
        return <InterfaceUsageVisualization
          key={interfaceUsage.businessObject.uuid}
          geometry={geometry.items[interfaceUsage.businessObject.uuid]}
          interfaceUsage={interfaceUsage}
          componentImplementation={this.props.componentImplementation}
          registerDrag={this.props.registerDrag}
          boundary={geometry.boundary}
          passive
        />
      })}
    </g>
  }

  _editText(e) {
    if (this._dragInProcess) {
      return
    }

    this.context.uiState.openModal(Modals.TEXT_MODAL, {value: this.props.componentUsage.name}, e=>{
      if (e.confirmed) {
        this.props.componentUsage.name = e.value
      }
    })

    e.stopPropagation()
  }

  _dragStart(e) {
    this._dragInProcess = false

    const startPoint = this.props.clientToPoint(e.clientX, e.clientY)

    const dx = startPoint.x-this.props.componentUsage.x
    const dy = startPoint.y-this.props.componentUsage.y

    this.props.registerDrag(point=>{
      this._dragInProcess = true

      this.props.componentUsage.x = point.x-dx
      this.props.componentUsage.y = point.y-dy
    })
  }
}<commit_msg>Prepared for wire d&d<commit_after>import React from 'react'
import {observable} from 'mobx'
import {observer} from 'mobx-react'
import classNames from 'classnames'

import styles from './style.less'

import {UiState} from '~/src/business/UiState'
import {Modals} from '~/src/business/Modals'

import {Rectangle} from '~/src/util/geometry/Rectangle'

import {ComponentUsage} from '~/src/tickator/definition/ComponentUsage'
import {ComponentImplementation} from '~/src/tickator/definition/ComponentImplementation'

import {InterfaceUsageVisualization} from './InterfaceUsageVisualization'

@observer
export class ComponentUsageVisualization extends React.Component {

  static propTypes = {
    componentUsage: React.PropTypes.instanceOf(ComponentUsage).isRequired,
    componentImplementation: React.PropTypes.instanceOf(ComponentImplementation).isRequired,
    geometry: React.PropTypes.object.isRequired,
    registerDrag: React.PropTypes.func.isRequired,
    clientToPoint: React.PropTypes.func.isRequired
  }

  static contextTypes = {
    uiState: React.PropTypes.instanceOf(UiState).isRequired
  }

  render() {
    const {geometry} = this.props

    return <g>
      <rect
        className={styles.usageFrame}
        x={geometry.boundary.x}
        y={geometry.boundary.y}
        width={geometry.boundary.width}
        height={geometry.boundary.height}
        onMouseDown={e=>this._dragStart(e)}
        onTouchStart={e=>this._dragStart(e)}
        />

      <text
        className={styles.centeredLabel}
        x={geometry.center.x}
        y={geometry.center.y}
        onClick={e=>this._editText(e)}
      >
        {this.props.componentUsage.name}
      </text>

      {this.props.componentUsage.refComponentDefinition.refsInterfaceUsage.map(interfaceUsage=>{
        return <g
          onMouseDown={e=>this._dragWireStart(e)}
          onTouchStart={e=>this._dragWireStart(e)}
        >
          <InterfaceUsageVisualization
            key={interfaceUsage.businessObject.uuid}
            geometry={geometry.items[interfaceUsage.businessObject.uuid]}
            interfaceUsage={interfaceUsage}
            componentImplementation={this.props.componentImplementation}
            registerDrag={this.props.registerDrag}
            boundary={geometry.boundary}
            passive
          />
        </g>
      })}
    </g>
  }

  _editText(e) {
    if (this._dragInProcess) {
      return
    }

    this.context.uiState.openModal(Modals.TEXT_MODAL, {value: this.props.componentUsage.name}, e=>{
      if (e.confirmed) {
        this.props.componentUsage.name = e.value
      }
    })

    e.stopPropagation()
  }

  _dragStart(e) {
    this._dragInProcess = false

    const startPoint = this.props.clientToPoint(e.clientX, e.clientY)

    const dx = startPoint.x-this.props.componentUsage.x
    const dy = startPoint.y-this.props.componentUsage.y

    this.props.registerDrag(point=>{
      this._dragInProcess = true

      this.props.componentUsage.x = point.x-dx
      this.props.componentUsage.y = point.y-dy
    })
  }

  _dragWireStart(e) {
    this._dragInProcess = false

    const startPoint = this.props.clientToPoint(e.clientX, e.clientY)

    this.props.registerDrag(point=>{
      this._dragInProcess = true

      console.log("from", startPoint, point)
    })
  }
}
{'fraction_non_alphanumeric': 0.11689777491131893, 'fraction_numerical': 0.0, 'mean_word_length': 3.1325782811459026, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 32, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7148985', 'n_tokens_mistral': 1873, 'n_tokens_neox': 1810, 'n_words': 282}