@instructure/quiz-interactions/src/components/hotspot/common/Polygon/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 Polygon extends Component {
  static propTypes = canvasPropTypes
  static defaultProps = defaultProps

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

  __drawLine(begin, end) {
    const ctx = this.canvas.canvasElement.getContext('2d')

    if (begin) {
      ctx.beginPath()
      ctx.moveTo(begin.x, begin.y)
    }

    ctx.lineTo(end.x, end.y)
    ctx.stroke()
  }

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

  clearCanvas() {
    const ctx = this.canvas.canvasElement.getContext('2d')
    ctx.clearRect(0, 0, this.canvas.canvasElement.width, this.canvas.canvasElement.height)
    ctx.beginPath()
    ctx.closePath()
  }

  drawShape = coordinates => {
    if (coordinates.length === 0) return

    const ctx = this.canvas.canvasElement.getContext('2d')
    this.canvas.setStrokeStyle()

    coordinates.forEach((item, index, array) => {
      const nextCoordinate = array[index + 1]

      if (nextCoordinate !== void 0) {
        let initialCoord = null

        if (index === 0) {
          initialCoord = item
        }

        this.__drawLine(initialCoord, nextCoordinate)
      }
    })

    this.canvas.setFillStyle()
    ctx.fill()
  }

  onMouseMove = e => {
    if (this.canvas.isDrawing()) {
      this.clearCanvas()

      const currentCoordinate = this.canvas.getCurrentCoordinates(e)
      let lines = this.props.coordinates.concat([currentCoordinate]) // add temporary coordinate

      // add initial coordinate at the end of the array to close the polygon
      if (lines.length > 2) {
        lines = lines.concat([lines[0]])
      }

      this.drawShape(lines)
    }
  }

  onMouseOut = e => {
    if (this.canvas.isDrawing()) {
      const initialCoordinate = this.canvas.getInitialCoordinate()
      const newCoordinates = this.props.coordinates.concat([initialCoordinate])
      if (newCoordinates.length > 3) {
        this.clearCanvas()
        this.drawShape(newCoordinates)
        this.canvas.stopDrawing(newCoordinates)
      }
    }
  }

  onDoubleClick = () => {
    this.clearCanvas()

    const initialCoordinate = this.canvas.getInitialCoordinate()
    const newCoordinates = this.props.coordinates.concat([initialCoordinate])
    this.drawShape(newCoordinates)

    if (this.canvas.isDrawing()) {
      this.canvas.stopDrawing(newCoordinates)
    }
  }

  onClick = e => {
    if (this.canvas.isDrawing()) {
      this.clearCanvas()

      const currentCoordinate = this.canvas.getCurrentCoordinates(e)
      const lastCoordinate = this.canvas.getLastCoordinate()

      if (currentCoordinate.x === lastCoordinate.x && currentCoordinate.y === lastCoordinate.y) {
        return // in case the user click at the same point, this click is discarded
      }

      const newCoordinates = this.props.coordinates.concat([currentCoordinate])
      this.drawShape(newCoordinates)
      this.props.handleSetCoordinates(newCoordinates, true)
    } else {
      this.canvas.startDrawing(e)
    }
  }

  render() {
    return (
      <Canvas
        realRef={this.canvasRef}
        drawShape={this.drawShape}
        onMouseMove={this.onMouseMove}
        onMouseOut={this.onMouseOut}
        onDoubleClick={this.onDoubleClick}
        onClick={this.onClick}
        {...pickProps(this.props)}
      />
    )
  }
}