quiz-interactions/lib/components/hotspot/common/Polygon/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 Polygon =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Polygon, _Component);

  function Polygon() {
    var _getPrototypeOf2;

    var _this;

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

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

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

    _this.drawShape = function (coordinates) {
      if (coordinates.length === 0) return;

      var ctx = _this.canvas.canvasElement.getContext('2d');

      _this.canvas.setStrokeStyle();

      coordinates.forEach(function (item, index, array) {
        var nextCoordinate = array[index + 1];

        if (nextCoordinate !== void 0) {
          var initialCoord = null;

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

          _this.__drawLine(initialCoord, nextCoordinate);
        }
      });

      _this.canvas.setFillStyle();

      ctx.fill();
    };

    _this.onMouseMove = function (e) {
      if (_this.canvas.isDrawing()) {
        _this.clearCanvas();

        var currentCoordinate = _this.canvas.getCurrentCoordinates(e);

        var 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);
      }
    };

    _this.onMouseOut = function (e) {
      if (_this.canvas.isDrawing()) {
        var initialCoordinate = _this.canvas.getInitialCoordinate();

        var newCoordinates = _this.props.coordinates.concat([initialCoordinate]);

        _this.clearCanvas();

        _this.drawShape(newCoordinates);

        _this.canvas.stopDrawing(newCoordinates);
      }
    };

    _this.onDoubleClick = function () {
      _this.clearCanvas();

      var initialCoordinate = _this.canvas.getInitialCoordinate();

      var newCoordinates = _this.props.coordinates.concat([initialCoordinate]);

      _this.drawShape(newCoordinates);

      if (_this.canvas.isDrawing()) {
        _this.canvas.stopDrawing(newCoordinates);
      }
    };

    _this.onClick = function (e) {
      if (_this.canvas.isDrawing()) {
        _this.clearCanvas();

        var currentCoordinate = _this.canvas.getCurrentCoordinates(e);

        var 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
        }

        var newCoordinates = _this.props.coordinates.concat([currentCoordinate]);

        _this.drawShape(newCoordinates);

        _this.props.handleSetCoordinates(newCoordinates);
      } else {
        _this.canvas.startDrawing(e);
      }
    };

    return _this;
  }

  (0, _createClass2.default)(Polygon, [{
    key: "__drawLine",
    value: function __drawLine(begin, end) {
      var 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
    // ===========

  }, {
    key: "clearCanvas",
    value: function clearCanvas() {
      var ctx = this.canvas.canvasElement.getContext('2d');
      ctx.clearRect(0, 0, this.canvas.canvasElement.width, this.canvas.canvasElement.height);
      ctx.beginPath();
      ctx.closePath();
    }
  }, {
    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,
          onMouseMove: this.onMouseMove,
          onMouseOut: this.onMouseOut,
          onDoubleClick: this.onDoubleClick,
          onClick: this.onClick
        }, (0, _propTypes.pickProps)(this.props)))
      );
    }
  }]);
  Polygon.displayName = "Polygon";
  return Polygon;
}(_react.Component);

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