quiz-interactions/lib/components/hotspot/common/Square/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"));

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

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

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

  function Square() {
    var _getPrototypeOf2;

    var _this;

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

    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)(Square)).call.apply(_getPrototypeOf2, [this].concat(args)));

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

    _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 startPoint = coordinates[0];
        var endPoint = coordinates[1];
        var minX = Math.min(endPoint.x, startPoint.x);
        var minY = Math.min(endPoint.y, startPoint.y);
        var maxX = Math.max(endPoint.x, startPoint.x);
        var maxY = Math.max(endPoint.y, startPoint.y);
        var width = maxX - minX;
        var height = maxY - minY;

        _this.canvas.setFillStyle(); // content


        ctx.fillRect(minX, minY, width, height);

        _this.canvas.setStrokeStyle(); // border


        ctx.strokeRect(minX, minY, width, height);
      }
    };

    _this.onMouseMove = function (e) {
      if (_this.canvas.isDrawing()) {
        var coordinates = _this.__getSquareCoordinates(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.__getSquareCoordinates(e);

        var firstPoint = coordinates[0];
        var nextPoint = coordinates[1];
        var pointsDiffer = firstPoint.x !== nextPoint.x || firstPoint.y !== nextPoint.y;

        if (pointsDiffer) {
          _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)(Square, [{
    key: "__getSquareCoordinates",
    value: function __getSquareCoordinates(e) {
      var startPoint = this.canvas.getInitialCoordinate();
      var x = e.nativeEvent.offsetX;
      var y = e.nativeEvent.offsetY;
      return [{
        x: startPoint.x,
        y: startPoint.y
      }, {
        x: x,
        y: y
      }];
    } // this type needs exactly 2 coordinates to draw a square

  }, {
    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)));
    }
  }]);
  Square.displayName = "Square";
  return Square;
}(_react.Component);

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