sgpl/components/image-uploader.js

import { Component, h } from 'preact'
import { connect } from 'redux-bundler-preact'
import Button from './button'
import './image-uploader.css'

const preventDefault = e => e.preventDefault()
const noOp = () => { }

class ImageUploader extends Component {
  constructor (props) {
    super(props)
    this.state = this.getInitialState()
    this.onRef = this.onRef.bind(this)
    this.onInputRef = this.onInputRef.bind(this)
    this.onTouchStart = this.onTouchStart.bind(this)
    this.onTouchMove = this.onTouchMove.bind(this)
    this.onMouseDown = this.onMouseDown.bind(this)
    this.onMouseMove = this.onMouseMove.bind(this)
    this.onRangeChange = this.onRangeChange.bind(this)
    this.onEnd = this.onEnd.bind(this)
    this.imageOnLoad = this.imageOnLoad.bind(this)
    this.onChange = this.onChange.bind(this)
    this.onCancelClick = this.onCancelClick.bind(this)
  }

  // this is necessary to prevent infinite recursion
  shouldComponentUpdate (nextProps, nextState) {
    if (nextProps.previousSrc !== this.props.previousSrc) {
      return true
    }
    for (const item in nextState) {
      if (nextState[item] !== this.state[item]) {
        return true
      }
    }

    // hacky ugliness, update references anyway
    this.props.updateSrc = nextProps.updateSrc
    this.props.updateValue = nextProps.updateValue

    return false
  }

  getInitialState () {
    return {
      src: null,
      zoom: 1,
      dragStartX: 0,
      dragStartY: 0,
      midDragX: 0,
      midDragY: 0,
      x: 0,
      y: 0,
      isMoving: false
    }
  }

  onChange ({ target }) {
    this.onFile(target.files && target.files[0])
  }

  onInputRef (el) {
    if (el) {
      this.fileInput = el
    }
  }

  onFile (file) {
    if (!file) {
      return
    }
    const reader = new window.FileReader()
    reader.onload = (e) => {
      const src = e.target.result
      this.setState({ src })
    }
    reader.readAsDataURL(file)
  }

  onCancelClick () {
    this.setState(this.getInitialState())
    delete this.image
    if (this.fileInput) {
      this.fileInput.value = ''
    }
  }

  onRangeChange ({ target }) {
    this.setState({ zoom: target.value })
  }

  onDragOver (e) {
    e.preventDefault()
  }

  onFileDrop (e) {
    e.preventDefault()
    this.onFile(e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0])
  }

  componentDidMount () {
    this.canvas.addEventListener('touchstart', this.onTouchStart)
    this.canvas.addEventListener('touchmove', this.onTouchMove)
    this.canvas.addEventListener('touchend', this.onEnd)
    this.canvas.addEventListener('mousedown', this.onMouseDown)
    this.canvas.addEventListener('mousemove', this.onMouseMove)
    document.addEventListener('mouseup', this.onEnd)
  }

  componentWillUnmount () {
    this.canvas.removeEventListener('touchstart', this.onTouchStart)
    this.canvas.removeEventListener('touchmove', this.onTouchMove)
    this.canvas.removeEventListener('touchend', this.onEnd)
    this.canvas.removeEventListener('mousedown', this.onMouseDown)
    this.canvas.removeEventListener('mousemove', this.onMouseMove)
    document.removeEventListener('mouseup', this.onEnd)
  }

  getDiff (newPageX, newPageY) {
    const { dragStartX, dragStartY, x, y } = this.state
    const deltaX = (dragStartX - newPageX) * -2
    const deltaY = (dragStartY - newPageY) * -2
    return {
      midDragX: x + deltaX,
      midDragY: y + deltaY
    }
  }

  onMove (newPageX, newPageY) {
    this.setState(this.getDiff(newPageX, newPageY))
  }

  onTouchMove (e) {
    e.preventDefault()
    const touch = e.targetTouches[0]
    this.onMove(touch.pageX, touch.pageY)
  }

  onTouchStart (e) {
    const { pageX, pageY } = e.targetTouches[0]
    this.setState({
      isMoving: true,
      dragStartX: pageX,
      dragStartY: pageY
    })
  }

  onMouseDown (e) {
    this.setState({
      isMoving: true,
      dragStartX: e.pageX,
      dragStartY: e.pageY
    })
  }

  onEnd () {
    if (!this.state.isMoving) {
      return
    }
    this.setState({
      isMoving: false,
      dragStartX: 0,
      dragStartY: 0,
      midDragX: 0,
      midDragY: 0,
      x: this.state.midDragX,
      y: this.state.midDragY
    })
  }

  onMouseMove (e) {
    if (!this.state.isMoving) {
      return
    }
    this.onMove(e.pageX, e.pageY)
  }

  imageOnLoad () {
    const { height, width } = this.image
    const max = Math.max(height, width)

    window.comp = this

    let zoom = max > 512 ? 512 / max : 1

    this.setState({ zoom, loaded: true })
  }

  componentDidUpdate (prevProps, prevState) {
    if (prevState && prevState.src !== this.state.src) {
      const once = (el) => {
        this.image.removeEventListener('load', once)
        this.imageOnLoad()
      }
      this.image.addEventListener('load', once)
    }

    const { canvas } = this
    if (canvas) {
      const ctx = canvas.getContext('2d')
      window.requestAnimationFrame(() => {
        if (this.image && this.image.height) {
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          const { width, height } = this.image
          const { zoom, x, y, midDragX, midDragY } = this.state
          const targetX = midDragX || x
          const targetY = midDragY || y
          ctx.drawImage(this.image, targetX, targetY, width * zoom, height * zoom)
        }

        const { previousSrc, updateSrc, updateValue } = this.props
        const { src } = this.state
        const newDataUrl = canvas.toDataURL('image/png')

        if (!src) {
          updateSrc(previousSrc)
        } else if (src !== newDataUrl) {
          updateSrc(newDataUrl)
          canvas.toBlob(updateValue)
        }
      })
    }
  }

  onRef (el) {
    if (el) {
      this.canvas = el
    }
  }

  render () {
    const { src } = this.state
    const { previousSrc, width, height } = this.props
    const noImageAtAll = (!previousSrc && !src)
    const onlyPreviousImage = previousSrc && !src
    const message = noImageAtAll ? 'Select an image from your computer' : 'Select a different image'

    return (
      h('div', {
        onDragOver: preventDefault,
        onDrop: this.onFileDrop,
        className: 'imageUploader cf'
      },
        h('label', { htmlFor: 'imageUpload' },
          h('img', {
            src: previousSrc,
            className: `w3 h3 v-mid mr2 ${!onlyPreviousImage ? 'dn' : ''}`
          }),
          h('input', {
            disabled: !!src,
            onChange: this.onChange,
            ref: this.onInputRef,
            type: 'file',
            name: 'file',
            id: 'imageUpload'
          }),
          h('p', {
            className: !src ? 'dn' : ''
          }, 'Drag to adjust position, use the slider to zoom.'),
          h('img', {
            className: 'dn',
            src,
            ref: (el) => {
              if (el) {
                this.image = el
              }
            }
          }),
          h('canvas', {
            className: `${src ? '' : 'dn'} ba br3`,
            ref: this.onRef,
            width,
            height
          }),
          h(Button, {
            extraClasses: src ? 'dn' : '',
            tagName: 'span',
            empty: true
          }, message)
        ),
        h('input', {
          className: !src ? 'dn' : '',
          onInput: this.onRangeChange,
          value: this.state.zoom,
          type: 'range',
          max: '2',
          min: '0',
          step: '0.05'
        }),
        h('div', {
          className: `pt2 ${!src ? 'dn' : ''}`
        },
          h(Button, {
            type: 'button',
            empty: true,
            onClick: this.onCancelClick
          }, 'Cancel')
        )
      )
    )
  }
}

ImageUploader.defaultProps = {
  width: 200,
  height: 200,
  previousSrc: '',
  updateValue: noOp,
  updateSrc: noOp
}

export default connect('doUploadFile', ImageUploader)