quiz-interactions/lib/components/hotspot/Take/Target/index.js

A React UI component Library for quiz interaction types.

"use strict";

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

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

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 _uiThemeable = require("@instructure/ui-themeable");

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

require("../../common/ellipsePolyfill");

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

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

var _theme = _interopRequireDefault(require("./theme"));

var _dec, _class, _class2, _temp;

var Target = (_dec = (0, _uiThemeable.themeable)(_theme.default), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Target, _Component);

  function Target() {
    var _getPrototypeOf2;

    var _this;

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

    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)(Target)).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 === 1) {
        var internalGap = 2;
        var pointA = {
          x: coordinates[0].x - internalGap,
          y: coordinates[0].y - internalGap
        };
        var pointB = {
          x: coordinates[0].x + internalGap,
          y: coordinates[0].y + internalGap
        };
        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;
        var externalGap = 10;

        _this.__drawEllipse( // internal circle
        radiusX, radiusY, centerX, centerY);

        _this.__drawEllipse( // external circle
        radiusX + externalGap, radiusY + externalGap, centerX, centerY);
      }
    };

    _this.onMouseUp = function (e) {
      var coordinates = _this.__getCoordinates(e);

      _this.canvas.drawShape(coordinates);

      _this.canvas.stopDrawing(coordinates);
    };

    _this.onMouseOut = function () {};

    return _this;
  }

  (0, _createClass2.default)(Target, [{
    key: "__getCoordinates",
    value: function __getCoordinates(e) {
      var x = e.nativeEvent.offsetX;
      var y = e.nativeEvent.offsetY;
      return [{
        x: x,
        y: y
      }];
    }
  }, {
    key: "__drawEllipse",
    value: function __drawEllipse(radiusX, radiusY, centerX, centerY) {
      var ctx = this.canvas.canvasElement.getContext('2d');
      this.canvas.setStrokeStyle();
      ctx.globalAlpha = 1;
      ctx.lineWidth = 4;
      ctx.beginPath();
      ctx.ellipse(centerX, centerY, Math.abs(radiusX), Math.abs(radiusY), 0, 0, 2 * Math.PI);
      ctx.closePath();
      ctx.shadowColor = this.theme.shadowColor;
      ctx.shadowBlur = 1;
      ctx.shadowOffsetX = 0;
      ctx.shadowOffsetY = 0;
      ctx.stroke(); // render border
    }
  }, {
    key: "render",
    value: function render() {
      return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
        _react.default.createElement(_Canvas.default, Object.assign({
          realRef: this.canvasRef,
          drawShape: this.drawShape,
          onMouseUp: this.onMouseUp,
          onMouseOut: this.onMouseOut
        }, (0, _propTypes.pickProps)(this.props)))
      );
    }
  }]);
  Target.displayName = "Target";
  return Target;
}(_react.Component), _class2.propTypes = _propTypes.default, _class2.defaultProps = _propTypes.defaultProps, _temp)) || _class);
exports.default = Target;