@instructure/quiz-interactions/src/components/hotspot/common/Square/index.js

A React UI component Library for quiz interaction types.

import React, {Component} from 'react'

import Canvas from '../Canvas'
import canvasPropTypes, {pickProps, defaultProps} from '../Canvas/propTypes'

export default class Square extends Component {
  static propTypes = canvasPropTypes
  static defaultProps = defaultProps

  canvasRef = ref => {
    this.canvas = ref
  }

  __getSquareCoordinates(e) {
    const startPoint = this.canvas.getInitialCoordinate()
    const x = e.nativeEvent.offsetX
    const y = e.nativeEvent.offsetY

    return [
      {x: startPoint.x, y: startPoint.y},
      {x, y},
    ]
  }

  // this type needs exactly 2 coordinates to draw a square
  drawShape = (coordinates = []) => {
    if (coordinates.length === 2) {
      const ctx = this.canvas.canvasElement.getContext('2d')
      const startPoint = coordinates[0]
      const endPoint = coordinates[1]

      const minX = Math.min(endPoint.x, startPoint.x)
      const minY = Math.min(endPoint.y, startPoint.y)

      const maxX = Math.max(endPoint.x, startPoint.x)
      const maxY = Math.max(endPoint.y, startPoint.y)

      const width = maxX - minX
      const height = maxY - minY

      this.canvas.setFillStyle() // content
      ctx.fillRect(minX, minY, width, height)

      this.canvas.setStrokeStyle() // border
      ctx.strokeRect(minX, minY, width, height)
    }
  }

  // ===========
  //   ACTIONS
  // ===========

  onMouseMove = e => {
    if (this.canvas.isDrawing()) {
      const coordinates = this.__getSquareCoordinates(e)
      this.canvas.drawShape(coordinates)
    }
  }

  onMouseDown = e => {
    if (!this.canvas.isDrawing()) {
      this.canvas.startDrawing(e)
    }
  }

  onMouseUp = e => {
    if (this.canvas.isDrawing()) {
      const coordinates = this.__getSquareCoordinates(e)
      const firstPoint = coordinates[0]
      const nextPoint = coordinates[1]
      const pointsDiffer = firstPoint.x !== nextPoint.x || firstPoint.y !== nextPoint.y

      if (pointsDiffer) {
        this.canvas.stopDrawing(coordinates)
      }
    }
  }

  onTouchStart = e => {
    e.preventDefault()
    const evt = this.canvas.convertTouchCoordinates(e)
    this.onMouseDown(evt)
  }

  onTouchMove = e => {
    const evt = this.canvas.convertTouchCoordinates(e)
    this.onMouseMove(evt)
  }

  onTouchEnd = e => {
    e.preventDefault()
    const evt = this.canvas.convertTouchCoordinates(e)
    this.onMouseUp(evt)
  }

  render() {
    return (
      <Canvas
        realRef={this.canvasRef}
        drawShape={this.drawShape}
        onMouseMove={this.onMouseMove}
        onMouseDown={this.onMouseDown}
        onMouseUp={this.onMouseUp}
        onTouchStart={this.onTouchStart}
        onTouchMove={this.onTouchMove}
        onTouchEnd={this.onTouchEnd}
        {...pickProps(this.props)}
      />
    )
  }
}