@instructure/quiz-interactions/lib/components/hotspot/Edit/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;
exports.drawTypes = drawTypes;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
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 = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
var _pick = _interopRequireDefault(require("lodash/fp/pick"));
var _find2 = _interopRequireDefault(require("lodash/fp/find"));
var _uiText = require("@instructure/ui-text");
var _uiAlerts = require("@instructure/ui-alerts");
var _uiButtons = require("@instructure/ui-buttons");
var _uiIcons = require("@instructure/ui-icons");
var _uiView = require("@instructure/ui-view");
var _emotion = require("@instructure/emotion");
var _quizCommon = require("@instructure/quiz-common");
var _hotspot = _interopRequireDefault(require("../../../records/interactions/hotspot"));
var _QuestionSettingsContainer = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsContainer"));
var _QuestionContainer = _interopRequireDefault(require("../../common/edit/components/QuestionContainer"));
var _RemoveChoiceButton = _interopRequireDefault(require("../../common/edit/components/RemoveChoiceButton"));
var _DrawingContainer = _interopRequireDefault(require("./DrawingContainer"));
var _Oval = _interopRequireDefault(require("../common/Oval"));
var _Polygon = _interopRequireDefault(require("../common/Polygon"));
var _Square = _interopRequireDefault(require("../common/Square"));
var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _withEditTools = _interopRequireDefault(require("../../../util/withEditTools"));
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _QuestionSettingsPanel = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsPanel"));
var _CalculatorOptionWithOqaatAlert = _interopRequireDefault(require("../../common/edit/components/CalculatorOptionWithOqaatAlert"));
var _uiA11yContent = require("@instructure/ui-a11y-content");
var _uiRadioInput = require("@instructure/ui-radio-input");
var _castArray = _interopRequireDefault(require("lodash/castArray"));
var _dec, _class, _HotSpotEdit;
/** @jsx jsx */
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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));
}
function drawTypes() {
  return [{
    type: 'square',
    title: (0, _formatMessage["default"])('Square'),
    icon: _uiIcons.IconBoxLine,
    component: _Square["default"]
  }, {
    type: 'oval',
    title: (0, _formatMessage["default"])('Oval'),
    icon: _uiIcons.IconEmptyLine,
    component: _Oval["default"]
  }, {
    type: 'polygon',
    title: (0, _formatMessage["default"])('Polygon'),
    icon: _uiIcons.IconMarkerLine,
    component: _Polygon["default"]
  }];
}
var ALL_OR_NOTHING = 'AllOrNothing';

/**
---
category: HotSpot
---
  HotSpot Edit component

   ```jsx_example
   function Example (props) {
    const exampleProps = {
      itemBody: 'Which of these players is David Ferrer',
      interactionData: {
        imageUrl: 'https://i.ytimg.com/vi/LgkAebhJ7iE/maxresdefault.jpg'
      },
      scoringData: {
        value: {
          type: 'oval',
          coordinates: [
            { x: 0.6, y: 0.13 },
            { x: 0.7, y: 0.2 }
          ]
        }
      }
    }

    return (
      <HotSpotEdit {...exampleProps} {...props} />
    )
  }

  <SettingsSwitcher locales={LOCALES}>
    <EditStateProvider>
      <Example />
    </EditStateProvider>
  </SettingsSwitcher>
  ```
**/
var HotSpotEdit = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), (0, _withEditTools["default"])(_class = _dec(_class = (_HotSpotEdit = /*#__PURE__*/function (_Component) {
  function HotSpotEdit() {
    var _this2;
    (0, _classCallCheck2["default"])(this, HotSpotEdit);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this2 = _callSuper(this, HotSpotEdit, [].concat(args));
    (0, _defineProperty2["default"])(_this2, "drawingContainer", null);
    (0, _defineProperty2["default"])(_this2, "state", {
      file: null,
      isShortcutsModalOpen: false,
      currentId: null,
      currentShapeType: 'square',
      tempHotspot: null,
      isModalOpen: false,
      canvasRef: null
    });
    (0, _defineProperty2["default"])(_this2, "handleCanvasRef", function (ref) {
      _this2.setState({
        canvasRef: ref
      });
    });
    // ===========
    //   HELPERS
    // ===========
    (0, _defineProperty2["default"])(_this2, "updateProps", function (newProps) {
      var propsToUpdate = (0, _pick["default"])(['interactionData', 'scoringData', 'properties'], _this2.props);
      _this2.props.changeItemState((0, _immutabilityHelper["default"])(propsToUpdate, newProps));
    });
    (0, _defineProperty2["default"])(_this2, "getConvertedCoordinates", function (coordinatesArray) {
      return coordinatesArray.map(function (_ref) {
        var x = _ref.x,
          y = _ref.y;
        return {
          x: x / _this2.drawingContainer.currentImageWidth(),
          y: y / _this2.drawingContainer.currentImageHeight()
        };
      });
    });
    (0, _defineProperty2["default"])(_this2, "addNewHotspot", function (convertedCoordinates) {
      _this2.updateProps({
        interactionData: {
          hotspotsCount: {
            $set: _this2.props.scoringData.value.length + 1
          }
        },
        scoringData: {
          value: {
            $push: [_objectSpread(_objectSpread({}, _this2.state.tempHotspot), {}, {
              coordinates: convertedCoordinates
            })]
          }
        }
      });
      _this2.setState({
        tempHotspot: null,
        currentId: _this2.state.tempHotspot.id
      });
    });
    (0, _defineProperty2["default"])(_this2, "updateExistingHotspot", function (lastHotspotIndex, convertedCoordinates) {
      _this2.updateProps({
        scoringData: {
          value: (0, _defineProperty2["default"])({}, lastHotspotIndex, {
            coordinates: {
              $set: convertedCoordinates
            }
          })
        }
      });
    });
    (0, _defineProperty2["default"])(_this2, "finalizeHotspot", function (lastHotspotIndex, convertedCoordinates) {
      _this2.updateProps({
        interactionData: {
          hotspotsCount: {
            $set: _this2.props.scoringData.value.length
          }
        },
        scoringData: {
          value: (0, _defineProperty2["default"])({}, lastHotspotIndex, {
            coordinates: {
              $set: convertedCoordinates
            }
          })
        }
      });
    });
    (0, _defineProperty2["default"])(_this2, "prepareNewTempHotspot", function () {
      var newId = _this2.props.scoringData.value.length + 1;
      _this2.setState({
        tempHotspot: {
          type: _this2.state.currentShapeType,
          coordinates: [],
          id: newId
        }
      });
    });
    (0, _defineProperty2["default"])(_this2, "convertCoordinates", function (coordinatesArray, isDrawing) {
      var isKeyboard = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
      var convertedCoordinates = _this2.getConvertedCoordinates(coordinatesArray);
      if (!_this2.props.multipleHotSpotEnabled) {
        _this2.updateProps({
          scoringData: {
            value: {
              coordinates: {
                $set: convertedCoordinates
              }
            }
          }
        });
        return;
      }
      var value = _this2.props.scoringData.value;
      var hotspots = (0, _castArray["default"])(value);
      var lastHotspotIndex = hotspots === null || hotspots === void 0 ? void 0 : hotspots.findIndex(function (hotspot) {
        return (hotspot === null || hotspot === void 0 ? void 0 : hotspot.id) === _this2.state.currentId;
      });
      if (isDrawing) {
        if (_this2.state.tempHotspot && !isKeyboard) {
          _this2.addNewHotspot(convertedCoordinates);
        } else {
          _this2.updateExistingHotspot(lastHotspotIndex, convertedCoordinates);
        }
      } else {
        _this2.finalizeHotspot(lastHotspotIndex, convertedCoordinates);
        _this2.prepareNewTempHotspot();
      }
    });
    // ===========
    //   HANDLERS
    // ===========
    (0, _defineProperty2["default"])(_this2, "handleCalculatorTypeChange", function (e, value) {
      _this2.props.changeItemState({
        calculatorType: value
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleTypeChange", function (newType) {
      var _lastHotspot$coordina;
      var coordinates = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
      if (!_this2.props.multipleHotSpotEnabled) {
        _this2.updateProps({
          scoringData: {
            value: {
              $set: {
                type: newType,
                coordinates: coordinates || []
              }
            }
          }
        });
        _this2.setState({
          currentShapeType: newType,
          tempHotspot: null
        });
        return;
      }
      var value = _this2.props.scoringData.value;
      var hotspots = (0, _castArray["default"])(value);
      var lastHotspotIndex = hotspots === null || hotspots === void 0 ? void 0 : hotspots.findIndex(function (hotspot) {
        return (hotspot === null || hotspot === void 0 ? void 0 : hotspot.id) === _this2.state.currentId;
      });
      var lastHotspot = hotspots[lastHotspotIndex];
      if ((lastHotspot === null || lastHotspot === void 0 || (_lastHotspot$coordina = lastHotspot.coordinates) === null || _lastHotspot$coordina === void 0 ? void 0 : _lastHotspot$coordina.length) > 0 || !_this2.state.currentId) {
        // Generate the next available sequential ID based on the current number of hotspots
        var newId = hotspots.length + 1;
        var tempHotspot = {
          type: newType,
          coordinates: [],
          id: newId
        };
        _this2.setState({
          currentShapeType: newType,
          tempHotspot: tempHotspot
        });
      } else {
        _this2.updateProps({
          scoringData: {
            value: (0, _defineProperty2["default"])({}, lastHotspotIndex, {
              type: {
                $set: newType
              } // Only update the type of the existing hotspot
            })
          }
        });
        _this2.setState({
          currentShapeType: newType,
          tempHotspot: null
        });
      }
    });
    (0, _defineProperty2["default"])(_this2, "handleRemoveImage", function () {
      _this2.updateProps({
        interactionData: {
          $set: {}
        },
        scoringData: {
          value: {
            $set: []
          }
        }
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleUpload", function (url) {
      var hotSpot = {
        type: 'square',
        coordinates: [],
        id: 1
      };
      _this2.updateProps({
        interactionData: {
          imageUrl: {
            $set: url
          },
          hotspotsCount: {
            $set: 0
          }
        },
        scoringData: {
          value: {
            $set: !_this2.props.multipleHotSpotEnabled ? hotSpot : [hotSpot]
          }
        }
      });
      _this2.setState({
        tempHotspot: null,
        currentId: 1,
        file: null,
        currentShapeType: 'square'
      });
    });
    (0, _defineProperty2["default"])(_this2, "openShortcutsModal", function () {
      _this2.setState({
        isShortcutsModalOpen: true
      });
    });
    (0, _defineProperty2["default"])(_this2, "closeShortcutsModal", function () {
      _this2.setState({
        isShortcutsModalOpen: false
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleDropAccepted", function (_ref2) {
      var _ref3 = (0, _slicedToArray2["default"])(_ref2, 1),
        file = _ref3[0];
      if (file instanceof Blob) {
        var reader = new FileReader();
        reader.onload = function (e) {
          _this2.setState({
            file: {
              url: e.target.result
            }
          });
        };
        reader.readAsDataURL(file);
      }
      _this2.setState({
        file: {}
      });
      _this2.props.mediaUpload(file, _this2.handleUpload);
    });
    (0, _defineProperty2["default"])(_this2, "handleDrawingRemove", function (hotspotId) {
      if (!_this2.props.multipleHotSpotEnabled) {
        var _this2$props$scoringD;
        _this2.drawingContainer.canvas.clearCanvas();
        _this2.drawingContainer.canvas.focus();
        _this2.handleTypeChange(((_this2$props$scoringD = _this2.props.scoringData) === null || _this2$props$scoringD === void 0 || (_this2$props$scoringD = _this2$props$scoringD.value) === null || _this2$props$scoringD === void 0 ? void 0 : _this2$props$scoringD.type) || _this2.state.currentShapeType);
        return;
      }
      var indexToRemove = _this2.props.scoringData.value.findIndex(function (hotspot) {
        return hotspot.id === hotspotId;
      });
      if (indexToRemove !== -1 && _this2.props.scoringData.value.length > 1) {
        var updatedHotspots = (0, _immutabilityHelper["default"])(_this2.props.scoringData.value, {
          $splice: [[indexToRemove, 1]]
        });
        // Reassign IDs sequentially
        var reorderedHotspots = updatedHotspots.map(function (hotspot, idx) {
          return _objectSpread(_objectSpread({}, hotspot), {}, {
            id: idx + 1 // Reassign sequential ID
          });
        });
        _this2.updateProps({
          interactionData: {
            hotspotsCount: {
              $set: reorderedHotspots.length
            }
          },
          scoringData: {
            value: {
              $set: reorderedHotspots
            }
          }
        });
        var newCurrentId = reorderedHotspots.length > 0 ? reorderedHotspots[0].id : null;
        _this2.setState({
          currentId: newCurrentId,
          tempHotspot: {
            type: _this2.state.currentShapeType,
            coordinates: [],
            id: reorderedHotspots.length + 1
          }
        }, function () {
          var _this3;
          (_this3 = _this2) === null || _this3 === void 0 || (_this3 = _this3.drawingContainer) === null || _this3 === void 0 || (_this3 = _this3.canvas) === null || _this3 === void 0 || _this3.focus();
        });
      } else {
        _this2.updateProps({
          interactionData: {
            hotspotsCount: {
              $set: 1
            }
          },
          scoringData: {
            value: (0, _defineProperty2["default"])({}, indexToRemove, {
              coordinates: {
                $set: []
              },
              type: {
                $set: _this2.state.currentShapeType || 'square'
              }
            })
          }
        });
        _this2.setState({
          currentId: 1,
          tempHotspot: null
        });
      }
    });
    (0, _defineProperty2["default"])(_this2, "handleDescriptionChange", function (itemBody) {
      return _this2.props.changeItemState({
        itemBody: itemBody
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleDrawingContainerRef", function (node) {
      _this2.drawingContainer = node;
    });
    (0, _defineProperty2["default"])(_this2, "handleCloseModal", function () {
      _this2.setState({
        isModalOpen: false
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleOpenModal", function () {
      _this2.setState({
        isModalOpen: true
      });
    });
    return _this2;
  }
  (0, _inherits2["default"])(HotSpotEdit, _Component);
  return (0, _createClass2["default"])(HotSpotEdit, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props = this.props,
        interactionData = _this$props.interactionData,
        multipleHotSpotEnabled = _this$props.multipleHotSpotEnabled,
        scoringData = _this$props.scoringData;
      if (interactionData !== null && interactionData !== void 0 && interactionData.imageUrl) {
        if (multipleHotSpotEnabled) {
          this.handleTypeChange(this.state.currentShapeType);
        } else {
          var _scoringData$value;
          this.setState({
            currentShapeType: (scoringData === null || scoringData === void 0 || (_scoringData$value = scoringData.value) === null || _scoringData$value === void 0 ? void 0 : _scoringData$value.type) || 'square'
          });
        }
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var multipleHotSpotEnabled = this.props.multipleHotSpotEnabled;
      if (multipleHotSpotEnabled) {
        this.ensureScoringDataIsArray();
      } else {
        this.handleSingleHotSpotUpdate();
      }
    }
  }, {
    key: "ensureScoringDataIsArray",
    value: function ensureScoringDataIsArray() {
      var scoringData = this.props.scoringData;
      if (scoringData !== null && scoringData !== void 0 && scoringData.value && !Array.isArray(scoringData.value)) {
        var normalizedValue = [_objectSpread(_objectSpread({}, scoringData.value), {}, {
          id: 1
        })];
        this.updateProps({
          scoringData: {
            value: {
              $set: normalizedValue
            }
          }
        });
      }
    }
  }, {
    key: "handleSingleHotSpotUpdate",
    value: function handleSingleHotSpotUpdate() {
      var _scoringData$value2, _scoringData$value4;
      var scoringData = this.props.scoringData;
      if ((scoringData === null || scoringData === void 0 || (_scoringData$value2 = scoringData.value) === null || _scoringData$value2 === void 0 ? void 0 : _scoringData$value2.length) === 1) {
        var _scoringData$value3 = (0, _slicedToArray2["default"])(scoringData.value, 1),
          hotSpot = _scoringData$value3[0];
        this.handleTypeChange(hotSpot.type, hotSpot.coordinates);
      } else if ((scoringData === null || scoringData === void 0 || (_scoringData$value4 = scoringData.value) === null || _scoringData$value4 === void 0 ? void 0 : _scoringData$value4.length) > 1) {
        this.handleDrawingRemove();
      }
    }
  }, {
    key: "renderFooter",
    value:
    // ===========
    //   RENDER
    // ===========

    function renderFooter() {
      var _this4 = this;
      var value = this.props.scoringData.value;
      var url = this.props.interactionData.imageUrl;
      var hotspots = (0, _castArray["default"])(value);
      if (url && hotspots.length > 0) {
        return (0, _emotion.jsx)(_react["default"].Fragment, null, hotspots.map(function (hotspot) {
          var _find = (0, _find2["default"])({
              type: hotspot.type
            }, drawTypes()),
            title = _find.title;
          var mainText = (0, _formatMessage["default"])('{title} Hot Spot', {
            title: title
          });
          if (hotspot.coordinates.length < 2) {
            return null;
          }
          return (0, _emotion.jsx)("div", {
            key: hotspot.id,
            css: _this4.props.styles.footerContainer
          }, (0, _emotion.jsx)("div", {
            css: _this4.props.styles.footerContainerText
          }, (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiText.Text, {
            weight: "bold"
          }, mainText)), (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiText.Text, {
            color: "primary"
          }, (0, _formatMessage["default"])('Clicks within the hot spot will be considered correct')))), (0, _emotion.jsx)(_RemoveChoiceButton["default"], {
            onRemoveChoice: function onRemoveChoice() {
              return _this4.handleDrawingRemove(hotspot.id);
            },
            screenReaderText: (0, _formatMessage["default"])('Remove Drawing'),
            automationData: "sdk-remove-hotspot-area-button"
          }));
        }));
      }
      return null;
    }
  }, {
    key: "renderOptionsDescription",
    value: function renderOptionsDescription() {
      return (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Hotspot options'));
    }
  }, {
    key: "renderShortcutsModal",
    value: function renderShortcutsModal() {
      return (0, _emotion.jsx)(_quizCommon.SimpleModal, {
        footerContent: (0, _emotion.jsx)(_uiButtons.Button, {
          onClick: this.closeShortcutsModal,
          color: "primary"
        }, (0, _formatMessage["default"])('Close')),
        isModalOpen: this.state.isShortcutsModalOpen,
        onModalDismiss: this.closeShortcutsModal,
        size: "medium",
        title: (0, _formatMessage["default"])('Hotspot Controls & Shortcuts'),
        label: (0, _formatMessage["default"])('Hotspot Controls & Shortcuts')
      }, (0, _emotion.jsx)("div", {
        css: this.props.styles.modalContent
      }, (0, _emotion.jsx)(_uiText.Text, null, (0, _formatMessage["default"])('Hotspot Controls')), (0, _emotion.jsx)("ul", null, (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('Use the Arrow keys to move the hotspot')), (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('Hold Shift and use the Arrow keys to resize the hotspot')), (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('Hold Shift + Alt and use the Arrow keys to shrink the hotspot')), (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('Press the Escape key to close the modal'))), (0, _emotion.jsx)(_uiText.Text, null, (0, _formatMessage["default"])('Shortcuts')), (0, _emotion.jsx)("ul", null, (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('F: Expand Image')), (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('D: Remove Image')), (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('B: Browse for Image')), (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('I: Open Shortcuts Modal')), (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('C or ESC: Close Shortcuts Modal')), (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('R: Add Square Hotspot')), (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('O: Add Oval Hotspot')), (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('P: Draw Polygon Hotspot')), (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('E: Close Polygon Shape')), (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('Delete or Backspace: Remove Current Hotspot')), (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('Enter: Add Polygon Point')))));
    }

    // these are added for a way to let the user know that the current supported grading options is exact match
    // as partial grading is to be added in the future
  }, {
    key: "renderGradingOptionsModal",
    value: function renderGradingOptionsModal() {
      return (0, _emotion.jsx)(_quizCommon.SimpleModal, {
        size: "small",
        title: (0, _formatMessage["default"])('Grading'),
        label: (0, _formatMessage["default"])('Grading'),
        isModalOpen: this.state.isModalOpen,
        onModalDismiss: this.handleCloseModal,
        "data-automation": "sdk-hotspot-grading-options"
      }, (0, _emotion.jsx)(_uiText.Text, {
        weight: "bold",
        lineHeight: "double"
      }, (0, _formatMessage["default"])('Exact match')), (0, _emotion.jsx)("br", null), (0, _emotion.jsx)(_uiText.Text, null, (0, _formatMessage["default"])('Students are awarded full credit if all correct answers are selected and no incorrect answers are selected.')));
    }
  }, {
    key: "renderGradingOptions",
    value: function renderGradingOptions() {
      var value = this.props.scoringData.value;
      var hotspots = (0, _castArray["default"])(value);
      var eligibleHotspots = hotspots.filter(function (hotspot) {
        var _hotspot$coordinates;
        return (hotspot === null || hotspot === void 0 || (_hotspot$coordinates = hotspot.coordinates) === null || _hotspot$coordinates === void 0 ? void 0 : _hotspot$coordinates.length) > 1;
      });
      if (eligibleHotspots.length < 2) return null;
      return (0, _emotion.jsx)(_uiView.View, {
        as: "div",
        margin: "medium 0",
        position: "relative"
      }, (0, _emotion.jsx)(_uiRadioInput.RadioInputGroup, {
        onChange: function onChange() {},
        name: (0, _formatMessage["default"])('Grading'),
        value: ALL_OR_NOTHING,
        description: (0, _emotion.jsx)("span", null, (0, _formatMessage["default"])('Grading'), (0, _emotion.jsx)(_uiButtons.IconButton, {
          size: "small",
          withBackground: false,
          withBorder: false,
          renderIcon: _uiIcons.IconQuestionLine,
          onClick: this.handleOpenModal,
          screenReaderLabel: (0, _formatMessage["default"])('Open grading option information')
        }))
      }, (0, _emotion.jsx)(_uiRadioInput.RadioInput, {
        value: ALL_OR_NOTHING,
        label: (0, _formatMessage["default"])('Exact Match'),
        "data-automation": "sdk-hotspot-exact"
      })));
    }
  }, {
    key: "render",
    value: function render() {
      var _this5 = this;
      var hotspots = (0, _castArray["default"])(this.props.scoringData.value);
      var canvasErrors = this.props.multipleHotSpotEnabled ? 'scoringData.value[0].coordinates' : 'scoringData.value.coordinates';
      var typeErrors = this.props.multipleHotSpotEnabled ? 'scoringData.value[0].type' : 'scoringData.value.type';
      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
        className: "accessibilityInfo",
        css: this.props.styles.accessibilityInfo
      }, (0, _emotion.jsx)(_uiText.Text, {
        color: "secondary"
      }, (0, _emotion.jsx)(_uiIcons.IconInfoLine, {
        size: "x-small",
        css: this.props.styles.accessibilityInfoIcon
      }), (0, _formatMessage["default"])('This question type is not accessible to users requiring screen readers.'))), (0, _emotion.jsx)(_uiAlerts.Alert, {
        variant: "info"
      }, (0, _emotion.jsx)(_uiText.Text, {
        id: "hotspot-oqaat-info"
      }, _formatMessage["default"].rich("Keyboard controls are available while using the hotspot. Click<0>here</0> or press <1>i</1> for a list of shortcuts.\n              Just make sure no input field is focused to use these controls.", [function (_ref4) {
        var children = _ref4.children;
        return (
          // eslint-disable-next-line jsx-a11y/click-events-have-key-events
          (0, _emotion.jsx)("span", {
            key: "1",
            role: "button",
            tabIndex: "0",
            css: _this5.props.styles.keyboardControlsList,
            onClick: _this5.openShortcutsModal
          }, children)
        );
      }, function (_ref5) {
        var children = _ref5.children;
        return (0, _emotion.jsx)("strong", {
          key: "2"
        }, children);
      }]))), (0, _emotion.jsx)(_QuestionContainer["default"], {
        disabled: this.props.overrideEditableForRegrading,
        enableRichContentEditor: this.props.enableRichContentEditor,
        itemBody: this.props.itemBody,
        onDescriptionChange: this.handleDescriptionChange,
        onModalClose: this.props.onModalClose,
        onModalOpen: this.props.onModalOpen,
        openImportModal: this.props.openImportModal,
        stemErrors: this.props.getErrors('itemBody')
      }, (0, _emotion.jsx)(_DrawingContainer["default"], {
        ref: this.handleDrawingContainerRef,
        canvasErrors: this.props.getErrors(canvasErrors),
        hotspots: hotspots,
        currentType: this.state.currentShapeType,
        drawTypes: drawTypes(),
        fileDropErrors: this.props.getErrors('interactionData.imageUrl'),
        onModalOpen: this.props.onModalOpen,
        onModalClose: this.props.onModalClose,
        onDropAccepted: this.handleDropAccepted,
        onSetType: this.handleTypeChange,
        convertCoordinates: this.convertCoordinates,
        onRemoveImage: this.handleRemoveImage,
        typeErrors: this.props.getErrors(typeErrors),
        url: this.props.interactionData.imageUrl || this.state.file && this.state.file.url,
        isUploading: this.state.file !== null,
        onRemoveHotspot: this.handleDrawingRemove,
        onOpenShortcutsModal: this.openShortcutsModal,
        onCloseShortcutsModal: this.closeShortcutsModal,
        isShortcutsModalOpen: this.state.isShortcutsModalOpen,
        tempHotspot: this.state.tempHotspot,
        currentHotspotId: this.state.currentId,
        setCanvasRef: this.handleCanvasRef,
        canvasRef: this.state.canvasRef,
        multipleHotSpotEnabled: this.props.multipleHotSpotEnabled
      }), this.renderFooter()), (0, _emotion.jsx)(_QuestionSettingsContainer["default"], {
        additionalOptions: this.props.additionalOptions
      }, this.props.showCalculatorOption && (0, _emotion.jsx)(_QuestionSettingsPanel["default"], {
        label: (0, _formatMessage["default"])('Options'),
        defaultExpanded: true
      }, (0, _emotion.jsx)(_quizCommon.FormFieldGroup, {
        rowSpacing: "small",
        description: this.renderOptionsDescription()
      }, (0, _emotion.jsx)(_CalculatorOptionWithOqaatAlert["default"], {
        disabled: this.props.overrideEditableForRegrading,
        calculatorValue: this.props.calculatorType,
        onCalculatorTypeChange: this.handleCalculatorTypeChange,
        oqaatChecked: this.props.oneQuestionAtATime,
        onOqaatChange: this.props.setOneQuestionAtATime
      })))), this.state.isShortcutsModalOpen && this.renderShortcutsModal(), this.renderGradingOptionsModal());
    }
  }]);
}(_react.Component), (0, _defineProperty2["default"])(_HotSpotEdit, "displayName", 'HotSpotEdit'), (0, _defineProperty2["default"])(_HotSpotEdit, "componentId", "Quizzes".concat(_HotSpotEdit.displayName)), (0, _defineProperty2["default"])(_HotSpotEdit, "interactionType", _hotspot["default"]), (0, _defineProperty2["default"])(_HotSpotEdit, "propTypes", _objectSpread(_objectSpread({
  additionalOptions: _propTypes["default"].array,
  calculatorType: _propTypes["default"].string,
  changeItemState: _propTypes["default"].func.isRequired,
  enableRichContentEditor: _propTypes["default"].bool,
  errors: _propTypes["default"].shape({
    itemBody: _propTypes["default"].arrayOf(_propTypes["default"].string),
    interactionData: _propTypes["default"].shape({
      imageUrl: _propTypes["default"].arrayOf(_propTypes["default"].string)
    }),
    scoringData: _propTypes["default"].shape({
      value: _propTypes["default"].arrayOf(_propTypes["default"].shape({
        type: _propTypes["default"].arrayOf(_propTypes["default"].string),
        coordinates: _propTypes["default"].arrayOf(_propTypes["default"].string)
      }))
    })
  }),
  interactionData: _propTypes["default"].shape({
    imageUrl: _propTypes["default"].string,
    hotspotsCount: _propTypes["default"].number
  }).isRequired,
  itemBody: _propTypes["default"].string,
  mediaUpload: _propTypes["default"].func.isRequired,
  onModalClose: _propTypes["default"].func,
  onModalOpen: _propTypes["default"].func,
  oneQuestionAtATime: _propTypes["default"].bool,
  openImportModal: _propTypes["default"].func,
  overrideEditableForRegrading: _propTypes["default"].bool,
  scoringData: _propTypes["default"].shape({
    value: _propTypes["default"].arrayOf(_propTypes["default"].shape({
      type: _propTypes["default"].oneOf(['square', 'oval', 'polygon']),
      coordinates: _propTypes["default"].arrayOf(_propTypes["default"].shape({
        x: _propTypes["default"].number.isRequired,
        y: _propTypes["default"].number.isRequired
      }))
    })).isRequired
  }).isRequired,
  setOneQuestionAtATime: _propTypes["default"].func
}, _withEditTools["default"].injectedProps), {}, {
  styles: _propTypes["default"].object,
  multipleHotSpotEnabled: _propTypes["default"].bool,
  showCalculatorOption: _propTypes["default"].bool
})), (0, _defineProperty2["default"])(_HotSpotEdit, "defaultProps", {
  calculatorType: 'none',
  enableRichContentEditor: true,
  oneQuestionAtATime: false,
  overrideEditableForRegrading: false,
  setOneQuestionAtATime: Function.prototype,
  additionalOptions: void 0,
  errors: void 0,
  itemBody: void 0,
  onModalClose: void 0,
  onModalOpen: void 0,
  openImportModal: void 0,
  multipleHotSpotEnabled: false,
  showCalculatorOption: true
}), _HotSpotEdit)) || _class) || _class);