component/Cropper.js
// initialize style, component did mount or component updated.
initialize style, component did mount or component updated.
initialize style component did mount or component updated .
initStyles () {
    const container = findDOMNode(this.container)
    this.setState({
      imgWidth: container.offsetWidth
    }, () => {
      let {
        originX,
        originY,
        disabled
      } = this.props
      if (disabled) return
      const {
        imgWidth,
        imgHeight
      } = this.state
      let {
        frameWidth,
        frameHeight
      } = this.state
      const maxLeft = imgWidth - frameWidth
      const maxTop = imgHeight - frameHeight
      if (originX + frameWidth >= imgWidth) {
        originX = imgWidth - frameWidth
        this.setState({
          originX
        })
      }
      if (originY + frameHeight >= imgHeight) {
        originY = imgHeight - frameHeight
        this.setState({
          originY
        })
      }
      this.setState({
        maxLeft,
        maxTop
      })
      this.calcPosition(frameWidth, frameHeight, originX, originY, () => {
        const {
          frameWidth4Style,
          frameHeight4Style,
          toImgTop4Style,
          toImgLeft4Style
        } = this.state
        this.setState({
          frameWidth: frameWidth4Style,
          frameHeight: frameHeight4Style,
          originX: toImgLeft4Style,
          originY: toImgTop4Style
        })
      })
    })
  }
initStyles ( ) { const container = findDOMNode ( this . container ) this . setState ( { imgWidth : container . offsetWidth } , ( ) => { let { originX , originY , disabled } = this . props if ( disabled ) return const { imgWidth , imgHeight } = this . state let { frameWidth , frameHeight } = this . state const maxLeft = imgWidth - frameWidth const maxTop = imgHeight - frameHeight if ( originX + frameWidth >= imgWidth ) { originX = imgWidth - frameWidth this . setState ( { originX } ) } if ( originY + frameHeight >= imgHeight ) { originY = imgHeight - frameHeight this . setState ( { originY } ) } this . setState ( { maxLeft , maxTop } ) this . calcPosition ( frameWidth , frameHeight , originX , originY , ( ) => { const { frameWidth4Style , frameHeight4Style , toImgTop4Style , toImgLeft4Style } = this . state this . setState ( { frameWidth : frameWidth4Style , frameHeight : frameHeight4Style , originX : toImgLeft4Style , originY : toImgTop4Style } ) } ) } ) }
initialize style, component did mount or component updated.
initialize style component did mount or component updated .
// calc frame width height // calc clone position