@instructure/quiz-interactions/lib/components/hotspot/Edit/DrawingContainer/index.js

A React UI component Library for quiz interaction types.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
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 _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _uiButtons = require("@instructure/ui-buttons");
var _uiIcons = require("@instructure/ui-icons");
var _uiText = require("@instructure/ui-text");
var _uiSpinner = require("@instructure/ui-spinner");
var _uiPopover = require("@instructure/ui-popover");
var _emotion = require("@instructure/emotion");
var _quizCommon = require("@instructure/quiz-common");
var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _uiA11yContent = require("@instructure/ui-a11y-content");
var _dec, _class, _DrawingContainer;
/** @jsx jsx */
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _callSuper(_this, derived, args) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;
    try {
      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
    } catch (e) {
      return false;
    }
  }
  derived = (0, _getPrototypeOf2["default"])(derived);
  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
}
var DrawingContainer = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_DrawingContainer = /*#__PURE__*/function (_Component) {
  function DrawingContainer() {
    var _this2;
    (0, _classCallCheck2["default"])(this, DrawingContainer);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this2 = _callSuper(this, DrawingContainer, [].concat(args));
    (0, _defineProperty2["default"])(_this2, "state", {
      imageWidth: 0,
      imageHeight: 0,
      isModalOpen: false,
      currentPolygonCoordinates: null
    });
    (0, _defineProperty2["default"])(_this2, "drawingContainerRef", (0, _react.createRef)());
    (0, _defineProperty2["default"])(_this2, "modalDrawingContainerRef", (0, _react.createRef)());
    // ===========
    //   HELPERS
    // ===========
    (0, _defineProperty2["default"])(_this2, "currentImageWidth", function () {
      return _this2.state.imageWidth;
    });
    (0, _defineProperty2["default"])(_this2, "currentImageHeight", function () {
      return _this2.state.imageHeight;
    });
    (0, _defineProperty2["default"])(_this2, "updateSize", (0, _debounce["default"])(function () {
      if (_this2.props.url && _this2.image) {
        // ref element (this.image) is not enough to get the updated image dimensions
        var rectObject = _reactDom["default"].findDOMNode(_this2.image).getBoundingClientRect();
        _this2.setDimensions(rectObject);
      }
    }, 50));
    (0, _defineProperty2["default"])(_this2, "setDimensions", function (rectObject) {
      _this2.setState({
        imageWidth: rectObject.width,
        imageHeight: rectObject.height
      });
    });
    (0, _defineProperty2["default"])(_this2, "transformCoordinates", function (coordinates, imageWidth, imageHeight) {
      return coordinates === null || coordinates === void 0 ? void 0 : coordinates.map(function (_ref) {
        var x = _ref.x,
          y = _ref.y;
        return {
          x: x * imageWidth,
          y: y * imageHeight
        };
      });
    });
    (0, _defineProperty2["default"])(_this2, "updateCoordinates", function (coordinates, key, increment, imageWidth, imageHeight, shiftKey, altKey) {
      var updatedCoordinates = (0, _toConsumableArray2["default"])(coordinates);
      var _updatedCoordinates = (0, _slicedToArray2["default"])(updatedCoordinates, 2),
        topLeft = _updatedCoordinates[0],
        bottomRight = _updatedCoordinates[1];
      if (shiftKey && altKey) {
        switch (key) {
          case 'ArrowLeft':
            bottomRight.x = Math.max(topLeft.x + increment, bottomRight.x - increment);
            break;
          case 'ArrowRight':
            topLeft.x = Math.min(bottomRight.x - increment, topLeft.x + increment);
            break;
          case 'ArrowUp':
            bottomRight.y = Math.max(topLeft.y + increment, bottomRight.y - increment);
            break;
          case 'ArrowDown':
            topLeft.y = Math.min(bottomRight.y - increment, topLeft.y + increment);
            break;
          default:
            break;
        }
      } else if (shiftKey) {
        switch (key) {
          case 'ArrowUp':
            topLeft.y = Math.max(0, topLeft.y - increment);
            break;
          case 'ArrowDown':
            bottomRight.y = Math.min(imageHeight, bottomRight.y + increment);
            break;
          case 'ArrowLeft':
            topLeft.x = Math.max(0, topLeft.x - increment);
            break;
          case 'ArrowRight':
            bottomRight.x = Math.min(imageWidth, bottomRight.x + increment);
            break;
          default:
            break;
        }
      } else {
        switch (key) {
          case 'ArrowUp':
            topLeft.y = Math.max(0, topLeft.y - increment);
            bottomRight.y = Math.max(0, bottomRight.y - increment);
            break;
          case 'ArrowDown':
            topLeft.y = Math.min(imageHeight, topLeft.y + increment);
            bottomRight.y = Math.min(imageHeight, bottomRight.y + increment);
            break;
          case 'ArrowLeft':
            topLeft.x = Math.max(0, topLeft.x - increment);
            bottomRight.x = Math.max(0, bottomRight.x - increment);
            break;
          case 'ArrowRight':
            topLeft.x = Math.min(imageWidth, topLeft.x + increment);
            bottomRight.x = Math.min(imageWidth, bottomRight.x + increment);
            break;
          default:
            break;
        }
      }
      return updatedCoordinates;
    });
    (0, _defineProperty2["default"])(_this2, "isImageUploaded", function () {
      return !!_this2.image;
    });
    (0, _defineProperty2["default"])(_this2, "isArrowKey", function (key) {
      return ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key);
    });
    (0, _defineProperty2["default"])(_this2, "isLetterKey", function (key) {
      return ['b', 'B', 'd', 'D', 'e', 'E', 'f', 'F', 'i', 'I', 'o', 'O', 'p', 'P', 'r', 'R'].includes(key);
    });
    (0, _defineProperty2["default"])(_this2, "getCurrentHotspot", function () {
      return _this2.props.multipleHotSpotEnabled ? _this2.props.hotspots.find(function (hotspot) {
        return hotspot.id === _this2.props.currentHotspotId;
      }) : _this2.props.hotspots[0];
    });
    (0, _defineProperty2["default"])(_this2, "isOutsideDrawingContainer", function () {
      var _this2$drawingContain, _this2$modalDrawingCo;
      var activeElement = document.activeElement;
      return !((_this2$drawingContain = _this2.drawingContainerRef) !== null && _this2$drawingContain !== void 0 && (_this2$drawingContain = _this2$drawingContain.current) !== null && _this2$drawingContain !== void 0 && _this2$drawingContain.contains(activeElement)) && !((_this2$modalDrawingCo = _this2.modalDrawingContainerRef) !== null && _this2$modalDrawingCo !== void 0 && (_this2$modalDrawingCo = _this2$modalDrawingCo.current) !== null && _this2$modalDrawingCo !== void 0 && _this2$modalDrawingCo.contains(activeElement));
    });
    (0, _defineProperty2["default"])(_this2, "isBankOrOutcomesModalOpen", function () {
      return !!document.querySelector('[data-automation="sdk-add-to-bank-modal"], [data-automation="outcomePicker__modal"]');
    });
    // ===========
    //   HANDLERS
    // ============
    (0, _defineProperty2["default"])(_this2, "handleImageLoad", function (e) {
      _this2.setDimensions({
        height: e.target.offsetHeight,
        width: e.target.offsetWidth
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleSelectDrawOption", function (type) {
      _this2.props.onSetType(type);
    });
    (0, _defineProperty2["default"])(_this2, "handleExpandImage", function () {
      if (_this2.isOutsideDrawingContainer()) {
        return;
      }
      _this2.props.onModalOpen();
      _this2.setState({
        isModalOpen: true
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleCloseModal", function () {
      _this2.props.onModalClose();
      _this2.setState({
        isModalOpen: false
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleCanvasRef", function (node) {
      _this2.canvas = node && node.canvas;
    });
    (0, _defineProperty2["default"])(_this2, "handleImageRef", function (node) {
      _this2.image = node;
    });
    (0, _defineProperty2["default"])(_this2, "handleFileDropRef", function (node) {
      _this2.fileDrop = node;
    });
    (0, _defineProperty2["default"])(_this2, "moveOrResizePolygon", function (key, shiftKey, altKey) {
      var hotspot = _this2.getCurrentHotspot();
      var coordinates = _this2.transformCoordinates(hotspot.coordinates, _this2.state.imageWidth, _this2.state.imageHeight);
      var increment = 10;
      var updatedCoordinates = (0, _toConsumableArray2["default"])(coordinates);
      var lastCoordinate = updatedCoordinates[updatedCoordinates.length - 1];
      var lastCoordinatesCopy = _objectSpread({}, lastCoordinate);
      _this2.canvas = _this2.canvas || _this2.props.canvasRef;
      if (_this2.props.currentType !== 'polygon' || !_this2.canvas.isDrawing()) {
        return;
      }
      if (altKey && shiftKey) {
        switch (key) {
          case 'ArrowUp':
            lastCoordinatesCopy.y = Math.max(0, lastCoordinatesCopy.y + increment);
            break;
          case 'ArrowDown':
            lastCoordinatesCopy.y = Math.min(_this2.state.imageHeight, lastCoordinatesCopy.y - increment);
            break;
          case 'ArrowLeft':
            lastCoordinatesCopy.x = Math.max(0, lastCoordinatesCopy.x - increment);
            break;
          case 'ArrowRight':
            lastCoordinatesCopy.x = Math.min(_this2.state.imageWidth, lastCoordinatesCopy.x + increment);
            break;
          default:
            return;
        }
        if (updatedCoordinates.length > 1) {
          var lastIndex = updatedCoordinates.length - 1;
          var secondLastIndex = lastIndex - 1;
          if (updatedCoordinates[lastIndex].x === updatedCoordinates[secondLastIndex].x && updatedCoordinates[lastIndex].y === updatedCoordinates[secondLastIndex].y || updatedCoordinates[lastIndex].x === updatedCoordinates[0].x && updatedCoordinates[lastIndex].y === updatedCoordinates[0].y) {
            updatedCoordinates.pop();
          }
        }
        updatedCoordinates = updatedCoordinates.slice(0, -1).concat(lastCoordinatesCopy);
        _this2.setState({
          currentPolygonCoordinates: lastCoordinatesCopy
        });
      } else if (shiftKey) {
        switch (key) {
          case 'ArrowUp':
            lastCoordinatesCopy.y = Math.max(0, lastCoordinatesCopy.y - increment);
            break;
          case 'ArrowDown':
            lastCoordinatesCopy.y = Math.min(_this2.state.imageHeight, lastCoordinatesCopy.y + increment);
            break;
          case 'ArrowLeft':
            lastCoordinatesCopy.x = Math.max(0, lastCoordinatesCopy.x - increment);
            break;
          case 'ArrowRight':
            lastCoordinatesCopy.x = Math.min(_this2.state.imageWidth, lastCoordinatesCopy.x + increment);
            break;
          default:
            return;
        }
        _this2.setState({
          currentPolygonCoordinates: lastCoordinatesCopy
        });
        updatedCoordinates = updatedCoordinates.slice(0, -1).concat(lastCoordinatesCopy);
      } else {
        updatedCoordinates = updatedCoordinates.map(function (coord) {
          switch (key) {
            case 'ArrowUp':
              return _objectSpread(_objectSpread({}, coord), {}, {
                y: Math.max(0, coord.y - increment)
              });
            case 'ArrowDown':
              return _objectSpread(_objectSpread({}, coord), {}, {
                y: Math.min(_this2.state.imageHeight, coord.y + increment)
              });
            case 'ArrowLeft':
              return _objectSpread(_objectSpread({}, coord), {}, {
                x: Math.max(0, coord.x - increment)
              });
            case 'ArrowRight':
              return _objectSpread(_objectSpread({}, coord), {}, {
                x: Math.min(_this2.state.imageWidth, coord.x + increment)
              });
            default:
              return coord;
          }
        });
      }
      var lines = (0, _toConsumableArray2["default"])(updatedCoordinates);
      if (lines.length > 2) {
        lines.push(lines[0]);
      }
      _this2.canvas.drawShape(lines);
      _this2.props.convertCoordinates(updatedCoordinates, true, true);
    });
    (0, _defineProperty2["default"])(_this2, "calculateCoordinates", function (shapeType, imageWidth, imageHeight) {
      var x1 = (imageWidth - 50) / 2;
      var y1 = (imageHeight - 50) / 2;
      var coordinates;
      switch (shapeType) {
        case 'square':
          coordinates = [{
            x: x1,
            y: y1
          }, {
            x: x1 + 50,
            y: y1 + 50
          }];
          break;
        case 'oval':
          coordinates = [{
            x: imageWidth / 2 - 50,
            y: imageHeight / 2 - 50
          }, {
            x: imageWidth / 2 + 50,
            y: imageHeight / 2 + 50
          }];
          break;
        case 'polygon':
          coordinates = [{
            x: x1,
            y: y1
          }, {
            x: x1 + 50,
            y: y1
          }];
          break;
        default:
          coordinates = [];
      }
      return coordinates;
    });
    (0, _defineProperty2["default"])(_this2, "addSquareHotspot", function () {
      _this2.props.onSetType('square');
      var initialCoordinate = _this2.calculateCoordinates('square', _this2.state.imageWidth, _this2.state.imageHeight);
      _this2.props.convertCoordinates(initialCoordinate, _this2.props.tempHotspot ? true : false);
    });
    (0, _defineProperty2["default"])(_this2, "addOvalHotspot", function () {
      _this2.props.onSetType('oval');
      var initialCoordinate = _this2.calculateCoordinates('oval', _this2.state.imageWidth, _this2.state.imageHeight);
      _this2.props.convertCoordinates(initialCoordinate, _this2.props.tempHotspot ? true : false);
    });
    (0, _defineProperty2["default"])(_this2, "drawPolygonHotspot", function () {
      var _this2$canvas, _this2$canvas2;
      if ((_this2$canvas = _this2.canvas) !== null && _this2$canvas !== void 0 && _this2$canvas.isDrawing()) {
        return;
      }
      _this2.props.onSetType('polygon');
      var initialCoordinate = _this2.calculateCoordinates('polygon', _this2.state.imageWidth, _this2.state.imageHeight);
      var currentHotspot = _this2.getCurrentHotspot();
      var lines = currentHotspot.coordinates.concat(initialCoordinate);
      // add initial coordinate at the end of the array to close the polygon
      if (lines.length > 2) {
        lines = lines.concat([lines[0]]);
      }
      _this2.props.setCanvasRef(_this2.canvas);
      _this2.props.convertCoordinates(initialCoordinate, _this2.props.tempHotspot ? true : false);
      _this2.canvas = _this2.canvas || _this2.props.canvasRef;
      (_this2$canvas2 = _this2.canvas) === null || _this2$canvas2 === void 0 || _this2$canvas2.setState({
        isDrawing: true
      });
    });
    (0, _defineProperty2["default"])(_this2, "addPolygonPoint", function () {
      var _this2$props = _this2.props,
        currentType = _this2$props.currentType,
        convertCoordinates = _this2$props.convertCoordinates;
      var _this2$state = _this2.state,
        currentPolygonCoordinates = _this2$state.currentPolygonCoordinates,
        imageWidth = _this2$state.imageWidth,
        imageHeight = _this2$state.imageHeight;
      var currentHotspot = _this2.getCurrentHotspot();
      if (currentType !== 'polygon' || !_this2.canvas.isDrawing() || !currentHotspot.coordinates || !currentPolygonCoordinates && currentHotspot.coordinates.length !== 2) {
        _this2.setState({
          currentPolygonCoordinates: null
        });
        return;
      }
      var transformedCoordinates = _this2.transformCoordinates(currentHotspot.coordinates, imageWidth, imageHeight);
      var updatedCoordinates;
      if (currentHotspot.coordinates.length === 2) {
        var lastCoordinate = _this2.transformCoordinates([currentHotspot.coordinates[1]], imageWidth, imageHeight);
        updatedCoordinates = transformedCoordinates.concat(lastCoordinate);
      } else {
        updatedCoordinates = transformedCoordinates.concat(currentPolygonCoordinates);
      }
      convertCoordinates(updatedCoordinates, true, true);
      _this2.setState({
        currentPolygonCoordinates: null
      });
    });
    (0, _defineProperty2["default"])(_this2, "OpenShortcutsModal", function () {
      if (_this2.isBankOrOutcomesModalOpen()) {
        return;
      }
      _this2.props.onOpenShortcutsModal();
    });
    (0, _defineProperty2["default"])(_this2, "handleCloseShape", function () {
      var _this2$canvas3;
      var currentType = _this2.props.currentType;
      var _this2$state2 = _this2.state,
        imageWidth = _this2$state2.imageWidth,
        imageHeight = _this2$state2.imageHeight;
      var currentHotspot = _this2.getCurrentHotspot();
      if (currentType !== 'polygon' && !_this2.canvas.isDrawing()) {
        return;
      }
      var transformedCoordinates = _this2.transformCoordinates(currentHotspot.coordinates, imageWidth, imageHeight);
      var finalCoordinates = transformedCoordinates.concat(transformedCoordinates[0]);
      (_this2$canvas3 = _this2.canvas) === null || _this2$canvas3 === void 0 || _this2$canvas3.stopDrawing(finalCoordinates);
    });
    (0, _defineProperty2["default"])(_this2, "handleKeyPress", function (event) {
      var key = event.key,
        shiftKey = event.shiftKey,
        altKey = event.altKey;
      var normalizedKey = _this2.isLetterKey(key) ? key.toLowerCase() : key;
      var activeElement = document.activeElement;
      var isInputElement = activeElement.tagName === 'INPUT';
      var isTextAreaElement = activeElement.tagName === 'TEXTAREA';
      var hasHotspots = _this2.props.hotspots.length > 0;
      var isImageUploaded = _this2.isImageUploaded();
      var controlKeyAction = {
        b: function b() {
          return _this2.triggerFileUpload();
        },
        i: function i() {
          return _this2.props.onOpenShortcutsModal();
        }
      };
      if (isInputElement || isTextAreaElement) {
        return;
      }
      if (!isImageUploaded) {
        var _handleHotkey = controlKeyAction[normalizedKey];
        if (_handleHotkey) {
          event.preventDefault();
          _handleHotkey();
          return;
        }
      }
      var imageKeyActions = {
        Delete: function Delete() {
          return _this2.deleteSelectedHotspot();
        },
        Backspace: function Backspace() {
          return _this2.deleteSelectedHotspot();
        },
        ArrowUp: function ArrowUp() {
          return _this2.moveOrResizeHotspot(normalizedKey, shiftKey, altKey);
        },
        ArrowDown: function ArrowDown() {
          return _this2.moveOrResizeHotspot(normalizedKey, shiftKey, altKey);
        },
        ArrowLeft: function ArrowLeft() {
          return _this2.moveOrResizeHotspot(normalizedKey, shiftKey, altKey);
        },
        ArrowRight: function ArrowRight() {
          return _this2.moveOrResizeHotspot(normalizedKey, shiftKey, altKey);
        },
        i: function i() {
          return _this2.OpenShortcutsModal();
        },
        f: function f() {
          return _this2.handleExpandImage();
        },
        r: function r() {
          return _this2.addSquareHotspot();
        },
        o: function o() {
          return _this2.addOvalHotspot();
        },
        p: function p() {
          return _this2.drawPolygonHotspot();
        },
        d: function d() {
          return _this2.props.onRemoveImage();
        },
        e: function e() {
          return _this2.handleCloseShape();
        },
        Enter: function Enter() {
          return _this2.addPolygonPoint();
        },
        Escape: function Escape() {
          return _this2.handleCloseModal();
        }
      };
      if (_this2.isArrowKey(normalizedKey) && hasHotspots) {
        event.preventDefault();
      }
      var handleHotkey = imageKeyActions[normalizedKey];
      if (handleHotkey) {
        event.preventDefault();
        handleHotkey();
      }
    });
    (0, _defineProperty2["default"])(_this2, "deleteSelectedHotspot", function () {
      _this2.props.onRemoveHotspot(_this2.props.currentHotspotId);
    });
    (0, _defineProperty2["default"])(_this2, "triggerFileUpload", function () {
      _this2.fileDrop.fileInputEl.click();
    });
    (0, _defineProperty2["default"])(_this2, "moveOrResizeHotspot", function (key, shiftKey, altKey) {
      var currentHotspot = _this2.getCurrentHotspot();
      if (currentHotspot.coordinates.length === 0) return;
      if (_this2.props.currentType === 'polygon') {
        _this2.moveOrResizePolygon(key, shiftKey, altKey);
      } else {
        var coordinates = _this2.transformCoordinates(currentHotspot.coordinates, _this2.state.imageWidth, _this2.state.imageHeight);
        var increment = 10; // Move or resize by 10px
        var updatedCoordinates = _this2.updateCoordinates(coordinates, key, increment, _this2.state.imageWidth, _this2.state.imageHeight, shiftKey, altKey);
        _this2.props.convertCoordinates(updatedCoordinates, true, true);
      }
    });
    (0, _defineProperty2["default"])(_this2, "convertCoordinatesForRendering", function (coordinates) {
      return coordinates.map(function (item) {
        var x = item.x * _this2.state.imageWidth;
        var y = item.y * _this2.state.imageHeight;
        return {
          x: x,
          y: y
        };
      });
    });
    // ===========
    //   RENDER
    // ===========
    (0, _defineProperty2["default"])(_this2, "renderCanvas", function () {
      var _this2$props2 = _this2.props,
        hotspots = _this2$props2.hotspots,
        tempHotspot = _this2$props2.tempHotspot,
        isUploading = _this2$props2.isUploading;
      if (!hotspots.length && !tempHotspot || isUploading) {
        return null;
      }

      // Create an array that includes all hotspots and tempHotspot if it exists
      var hotspotsToRender = tempHotspot ? [].concat((0, _toConsumableArray2["default"])(hotspots), [tempHotspot]) : hotspots;
      return hotspotsToRender.map(function (hotspot, index) {
        var SelectedType = _this2.getSelectedTypeComponent(hotspot.type);
        var coordinates = _this2.convertCoordinatesForRendering(hotspot.coordinates || []);
        return (0, _emotion.jsx)(SelectedType, {
          key: hotspot.id || index,
          ref: _this2.handleCanvasRef,
          handleSetCoordinates: _this2.props.convertCoordinates,
          coordinates: coordinates,
          width: _this2.state.imageWidth,
          height: _this2.state.imageHeight,
          hotspotId: hotspot.id
        });
      });
    });
    return _this2;
  }
  (0, _inherits2["default"])(DrawingContainer, _Component);
  return (0, _createClass2["default"])(DrawingContainer, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      window.addEventListener('resize', this.updateSize);
      window.addEventListener('keydown', this.handleKeyPress);
      this.updateSize();
      this.props.makeStyles({
        isModal: this.state.isModalOpen
      });
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(lastProps, lastState) {
      if (lastProps.url && this.props.url === void 0) {
        this.fileDrop.fileInputEl.focus();
      }
      if (lastState.imageWidth !== this.state.imageWidth || lastState.imageHeight !== this.state.imageHeight) {
        this.updateSize();
      }
      this.props.makeStyles({
        isModal: this.state.isModalOpen
      });
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener('resize', this.updateSize);
      window.removeEventListener('keydown', this.handleKeyPress);
      this.updateSize.cancel();
    }
  }, {
    key: "getSelectedTypeComponent",
    value: function getSelectedTypeComponent(currentType) {
      var type = this.props.drawTypes.find(function (item) {
        return item.type === currentType;
      });
      return type === null || type === void 0 ? void 0 : type.component;
    }
  }, {
    key: "renderTypes",
    value: function renderTypes() {
      var _this3 = this;
      return (0, _emotion.jsx)("div", {
        className: "mainContainerType",
        css: this.props.styles.mainContainerType
      }, this.props.drawTypes.map(function (item) {
        var TypeIcon = item.icon;
        var onButtonClick = function onButtonClick() {
          return _this3.handleSelectDrawOption(item.type);
        };
        var color = 'secondary';
        var wrapperStyle = _this3.props.styles.mainContainerTypeUnselected;
        if (item.type === (_this3.props.currentType || 'square')) {
          onButtonClick = null;
          color = 'primary-inverse';
          wrapperStyle = _this3.props.styles.mainContainerTypeSelected;
        }
        return (0, _emotion.jsx)(_uiPopover.Popover, {
          key: item.type,
          color: "primary-inverse",
          onClick: onButtonClick,
          renderTrigger: (0, _emotion.jsx)("div", {
            css: wrapperStyle
          }, (0, _emotion.jsx)(_uiButtons.IconButton, {
            color: color,
            withBackground: false,
            withBorder: false,
            screenReaderLabel: item.title,
            renderIcon: (0, _emotion.jsx)(TypeIcon, {
              title: item.title
            })
          }))
        }, (0, _emotion.jsx)("div", {
          css: _this3.props.styles.popoverContent
        }, item.title));
      }));
    }
  }, {
    key: "renderActionButton",
    value: function renderActionButton(onClick, label, Icon) {
      var automationData = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
      return (0, _emotion.jsx)(_uiPopover.Popover, {
        onClick: onClick,
        color: "primary-inverse",
        renderTrigger: (0, _emotion.jsx)(_uiButtons.IconButton, Object.assign({
          renderIcon: Icon,
          withBackground: false,
          withBorder: false,
          screenReaderLabel: label
        }, automationData && {
          'data-automation': automationData
        }))
      }, (0, _emotion.jsx)("div", {
        css: this.props.styles.popoverContent
      }, label));
    }
  }, {
    key: "renderActions",
    value: function renderActions() {
      return (0, _emotion.jsx)("div", {
        css: this.props.styles.mainContainerActions
      }, this.renderActionButton(this.handleExpandImage, (0, _formatMessage["default"])('Expand Image'), _uiIcons.IconExpandItemsLine), (0, _emotion.jsx)("div", {
        css: this.props.styles.mainContainerActionsRemove
      }, this.renderActionButton(this.props.onRemoveImage, (0, _formatMessage["default"])('Remove Image'), _uiIcons.IconTrashLine, 'sdk-remove-image-button')));
    }
  }, {
    key: "renderHeaderText",
    value: function renderHeaderText(isModal) {
      var _this$props = this.props,
        styles = _this$props.styles,
        currentType = _this$props.currentType,
        hotspots = _this$props.hotspots;
      if (currentType === 'polygon' && hotspots.length > 0) {
        return (0, _emotion.jsx)("div", {
          css: styles.headerText
        }, _formatMessage["default"].rich('<0>Double click to</0> <1>close shape</1>', [function (_ref2) {
          var children = _ref2.children;
          return (0, _emotion.jsx)(_uiText.Text, {
            key: "1"
          }, children);
        }, function (_ref3) {
          var children = _ref3.children;
          return (0, _emotion.jsx)(_uiButtons.CondensedButton, {
            key: "2",
            size: "large",
            margin: "0 0 0 x-small",
            themeOverride: {
              largePadding: styles.headerText.condensedButton.padding,
              largeFontSize: styles.headerText.condensedButton.fontSize,
              largeHeight: styles.headerText.condensedButton.height
            }
          }, children);
        }]));
      }
      return (0, _emotion.jsx)(_uiText.Text, {
        color: "primary"
      }, (0, _formatMessage["default"])("Draw the hot spot's shape"));
    }
  }, {
    key: "renderImage",
    value: function renderImage() {
      return (0, _emotion.jsx)("div", {
        css: this.props.styles.imageHolder
      }, (0, _emotion.jsx)("img", {
        alt: (0, _formatMessage["default"])('Uploaded Image'),
        css: this.props.styles.mainContainerContentImage,
        onLoad: this.handleImageLoad,
        ref: this.handleImageRef,
        src: this.props.url
      }), !this.props.isUploading ? null : (0, _emotion.jsx)("div", {
        css: this.props.styles.spinnerWrapper
      }, (0, _emotion.jsx)("div", {
        css: this.props.styles.spinner
      }, (0, _emotion.jsx)(_uiSpinner.Spinner, {
        renderTitle: (0, _formatMessage["default"])('Loading'),
        size: "large",
        variant: "inverse"
      }))), this.renderCanvas());
    }
  }, {
    key: "renderDrawingContainer",
    value: function renderDrawingContainer() {
      return (0, _emotion.jsx)("div", {
        css: this.props.styles.mainContainer,
        ref: this.drawingContainerRef
      }, this.props.isUploading ? null : (0, _emotion.jsx)("div", {
        css: this.props.styles.mainContainerHeader
      }, (0, _emotion.jsx)(_quizCommon.FormFieldGroup, {
        description: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Hot Spot editor')),
        messages: this.props.typeErrors
      }, (0, _emotion.jsx)("div", {
        css: this.props.styles.mainContainerHeader
      }, (0, _emotion.jsx)("div", null, this.renderHeaderText()), this.renderTypes())), this.renderActions()), (0, _emotion.jsx)("div", {
        css: this.props.styles.mainContainerContentWrapper
      }, this.renderImage()));
    }
  }, {
    key: "renderFileDropContent",
    value: function renderFileDropContent() {
      var _this4 = this;
      return (0, _emotion.jsx)("div", {
        css: this.props.styles.fileDropContent
      }, (0, _emotion.jsx)("div", {
        css: this.props.styles.fileDropContentIcon
      }, (0, _emotion.jsx)(_uiIcons.IconUploadLine, null)), (0, _emotion.jsx)("div", {
        css: this.props.styles.fileDropContentLabel
      }, _formatMessage["default"].rich("Drag n' Drop here or <0>Browse</0>", [function (_ref4) {
        var children = _ref4.children;
        return (0, _emotion.jsx)("div", {
          key: "1",
          css: _this4.props.styles.fileDropContentLabelBrowse
        }, children);
      }])));
    }
  }, {
    key: "renderFileDrop",
    value: function renderFileDrop() {
      return (0, _emotion.jsx)("div", {
        css: this.props.styles.fileDropWrapper
      }, (0, _emotion.jsx)(_quizCommon.FileDrop, {
        accept: "image/*",
        renderLabel: this.renderFileDropContent(),
        onDropAccepted: this.props.onDropAccepted,
        ref: this.handleFileDropRef,
        messages: this.props.fileDropErrors
      }));
    }
  }, {
    key: "renderModal",
    value: function renderModal() {
      return (0, _emotion.jsx)(_quizCommon.SimpleModal, {
        footerContent: (0, _emotion.jsx)(_uiButtons.Button, {
          onClick: this.handleCloseModal,
          color: "primary"
        }, (0, _formatMessage["default"])('Done')),
        isModalOpen: this.state.isModalOpen,
        onModalDismiss: this.handleCloseModal,
        size: "fullscreen",
        title: this.renderHeaderText(true),
        label: (0, _formatMessage["default"])('Modal Dialog: Draw a hot spot')
      }, (0, _emotion.jsx)("div", {
        css: this.props.styles.modalContent,
        ref: this.modalDrawingContainerRef
      }, (0, _emotion.jsx)("div", {
        css: this.props.styles.modalContentTypes
      }, this.renderTypes()), (0, _emotion.jsx)("div", {
        css: this.props.styles.modalContentImage
      }, this.renderImage())));
    }
  }, {
    key: "render",
    value: function render() {
      if (!this.props.url) {
        return (0, _emotion.jsx)("div", null, this.renderFileDrop());
      } else if (this.state.isModalOpen === true) {
        return (0, _emotion.jsx)("div", null, this.renderModal());
      } else {
        return (0, _emotion.jsx)(_quizCommon.FormFieldGroup, {
          required: true,
          messages: this.props.canvasErrors,
          description: (0, _formatMessage["default"])('Hot Spot')
        }, this.renderDrawingContainer());
      }
    }
  }]);
}(_react.Component), (0, _defineProperty2["default"])(_DrawingContainer, "displayName", 'DrawingContainer'), (0, _defineProperty2["default"])(_DrawingContainer, "componentId", "Quizzes".concat(_DrawingContainer.displayName)), (0, _defineProperty2["default"])(_DrawingContainer, "propTypes", {
  canvasErrors: _propTypes["default"].array,
  convertCoordinates: _propTypes["default"].func,
  currentType: _propTypes["default"].string,
  drawTypes: _propTypes["default"].array,
  fileDropErrors: _propTypes["default"].array,
  isUploading: _propTypes["default"].bool,
  onModalOpen: _propTypes["default"].func,
  onModalClose: _propTypes["default"].func,
  onDropAccepted: _propTypes["default"].func,
  onSetType: _propTypes["default"].func,
  onRemoveImage: _propTypes["default"].func,
  onRemoveHotspot: _propTypes["default"].func,
  typeErrors: _propTypes["default"].array,
  url: _propTypes["default"].string,
  makeStyles: _propTypes["default"].func,
  styles: _propTypes["default"].object,
  onOpenShortcutsModal: _propTypes["default"].func,
  onCloseShortcutsModal: _propTypes["default"].func,
  isShortcutsModalOpen: _propTypes["default"].bool,
  hotspots: _propTypes["default"].array,
  tempHotspot: _propTypes["default"].object,
  currentHotspotId: _propTypes["default"].number,
  setTempHotspot: _propTypes["default"].func,
  setCanvasRef: _propTypes["default"].func,
  canvasRef: _propTypes["default"].object,
  multipleHotSpotEnabled: _propTypes["default"].bool
}), (0, _defineProperty2["default"])(_DrawingContainer, "defaultProps", {
  onModalOpen: Function.prototype,
  onModalClose: Function.prototype,
  canvasErrors: void 0,
  convertCoordinates: void 0,
  currentType: void 0,
  drawTypes: void 0,
  fileDropErrors: void 0,
  isUploading: void 0,
  onDropAccepted: void 0,
  onSetType: void 0,
  onRemoveImage: void 0,
  typeErrors: void 0,
  url: void 0,
  hotspots: void 0,
  tempHotspot: void 0,
  multipleHotSpotEnabled: false
}), _DrawingContainer)) || _class);