quiz-interactions/lib/components/hotspot/common/Oval/index.js

A React UI component Library for quiz interaction types.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

require("../ellipsePolyfill");

var _Canvas = _interopRequireDefault(require("../Canvas"));

var _propTypes = _interopRequireWildcard(require("../Canvas/propTypes"));

var Oval =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Oval, _Component);

  function Oval() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, Oval);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(Oval)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.canvasRef = function (node) {
      _this.canvas = node;
    };

    _this.drawShape = function () {
      var coordinates = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];

      if (coordinates.length === 2) {
        var ctx = _this.canvas.canvasElement.getContext('2d');

        var pointA = coordinates[0];
        var pointB = coordinates[1];
        var radiusX = (pointB.x - pointA.x) * 0.5;
        var radiusY = (pointB.y - pointA.y) * 0.5;
        var centerX = pointA.x + radiusX;
        var 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();
      }
    };

    _this.onMouseMove = function (e) {
      if (_this.canvas.isDrawing()) {
        var coordinates = _this.__getOvalCoordinates(e);

        _this.canvas.drawShape(coordinates);
      }
    };

    _this.onMouseDown = function (e) {
      if (!_this.canvas.isDrawing()) {
        _this.canvas.startDrawing(e);
      }
    };

    _this.onMouseUp = function (e) {
      if (_this.canvas.isDrawing()) {
        var coordinates = _this.__getOvalCoordinates(e);

        var c1 = coordinates[0];
        var 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);
        }
      }
    };

    _this.onTouchStart = function (e) {
      e.preventDefault();

      var evt = _this.canvas.convertTouchCoordinates(e);

      _this.onMouseDown(evt);
    };

    _this.onTouchMove = function (e) {
      var evt = _this.canvas.convertTouchCoordinates(e);

      _this.onMouseMove(evt);
    };

    _this.onTouchEnd = function (e) {
      e.preventDefault();

      var evt = _this.canvas.convertTouchCoordinates(e);

      _this.onMouseUp(evt);
    };

    return _this;
  }

  (0, _createClass2.default)(Oval, [{
    key: "__getOvalCoordinates",
    value: function __getOvalCoordinates(e) {
      var startPoint = this.canvas.getInitialCoordinate();
      var x2 = e.nativeEvent.offsetX;
      var y2 = e.nativeEvent.offsetY;
      return [startPoint, {
        x: x2,
        y: y2
      }];
    } // this type needs exactly 2 coordinates to draw a ellipsis

  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement(_Canvas.default, Object.assign({
        realRef: this.canvasRef,
        drawShape: this.drawShape,
        onMouseMove: this.onMouseMove,
        onMouseDown: this.onMouseDown,
        onMouseUp: this.onMouseUp,
        onTouchStart: this.onTouchStart,
        onTouchMove: this.onTouchMove,
        onTouchEnd: this.onTouchEnd
      }, (0, _propTypes.pickProps)(this.props)));
    }
  }]);
  Oval.displayName = "Oval";
  return Oval;
}(_react.Component);

exports.default = Oval;
Oval.propTypes = _propTypes.default;
Oval.defaultProps = _propTypes.defaultProps;