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

A React UI component Library for quiz interaction types.

import React, {Component} from 'react'

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

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

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

  __getOvalCoordinates(e) {
    const startPoint = this.canvas.getInitialCoordinate()
    const x2 = e.nativeEvent.offsetX
    const y2 = e.nativeEvent.offsetY

    return [startPoint, {x: x2, y: y2}]
  }

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

      const radiusX = (pointB.x - pointA.x) * 0.5
      const radiusY = (pointB.y - pointA.y) * 0.5
      const centerX = pointA.x + radiusX
      const centerY = pointA.y + radiusY

      this.canvas.setFillStyle() // content
      ctx.beginPath()
      ctx.ellipse(centerX, centerY, Math.abs(radiusX), Math.abs(radiusY), 0, 0, 2 * Math.PI)
      ctx.fill()

      this.canvas.setStrokeStyle() // border
      ctx.stroke()
    }
  }

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

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

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

  onMouseUp = e => {
    if (this.canvas.isDrawing()) {
      const coordinates = this.__getOvalCoordinates(e)
      const c1 = coordinates[0]
      const c2 = coordinates[1]

      // if the release is not at the same position
      if (c1.x !== c2.x || c1.y !== c2.y) {
        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)}
      />
    )
  }
}