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

A React UI component Library for quiz interaction types.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _dec, _class, _HotSpotEdit;
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) { _defineProperty(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 = _getPrototypeOf(derived);
  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
}
/** @jsx jsx */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import update from 'immutability-helper';
import pick from 'lodash/fp/pick';
import find from 'lodash/fp/find';
import { Text } from '@instructure/ui-text';
import { Alert } from '@instructure/ui-alerts';
import { Button, IconButton } from '@instructure/ui-buttons';
import { IconBoxLine, IconEmptyLine, IconInfoLine, IconMarkerLine, IconQuestionLine } from '@instructure/ui-icons';
import { View } from '@instructure/ui-view';
import { jsx } from '@instructure/emotion';
import { SimpleModal, withStyleOverrides, FormFieldGroup } from '@instructure/quiz-common';
import HotSpotInteractionType from '../../../records/interactions/hotspot';
import QuestionSettingsContainer from '../../common/edit/components/QuestionSettingsContainer';
import QuestionContainer from '../../common/edit/components/QuestionContainer';
import RemoveChoiceButton from '../../common/edit/components/RemoveChoiceButton';
import DrawingContainer from './DrawingContainer';
import Oval from '../common/Oval';
import Polygon from '../common/Polygon';
import Square from '../common/Square';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import withEditTools from '../../../util/withEditTools';
import t from '@instructure/quiz-i18n/es/format-message';
import QuestionSettingsPanel from '../../common/edit/components/QuestionSettingsPanel';
import CalculatorOptionWithOqaatAlert from '../../common/edit/components/CalculatorOptionWithOqaatAlert';
import { ScreenReaderContent } from '@instructure/ui-a11y-content';
import { RadioInputGroup, RadioInput } from '@instructure/ui-radio-input';
import castArray from 'lodash/castArray';
export function drawTypes() {
  return [{
    type: 'square',
    title: t('Square'),
    icon: IconBoxLine,
    component: Square
  }, {
    type: 'oval',
    title: t('Oval'),
    icon: IconEmptyLine,
    component: Oval
  }, {
    type: 'polygon',
    title: t('Polygon'),
    icon: IconMarkerLine,
    component: Polygon
  }];
}
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 = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), withEditTools(_class = _dec(_class = (_HotSpotEdit = /*#__PURE__*/function (_Component) {
  function HotSpotEdit() {
    var _this2;
    _classCallCheck(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));
    _defineProperty(_this2, "drawingContainer", null);
    _defineProperty(_this2, "state", {
      file: null,
      isShortcutsModalOpen: false,
      currentId: null,
      currentShapeType: 'square',
      tempHotspot: null,
      isModalOpen: false,
      canvasRef: null
    });
    _defineProperty(_this2, "handleCanvasRef", function (ref) {
      _this2.setState({
        canvasRef: ref
      });
    });
    // ===========
    //   HELPERS
    // ===========
    _defineProperty(_this2, "updateProps", function (newProps) {
      var propsToUpdate = pick(['interactionData', 'scoringData', 'properties'], _this2.props);
      _this2.props.changeItemState(update(propsToUpdate, newProps));
    });
    _defineProperty(_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()
        };
      });
    });
    _defineProperty(_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
      });
    });
    _defineProperty(_this2, "updateExistingHotspot", function (lastHotspotIndex, convertedCoordinates) {
      _this2.updateProps({
        scoringData: {
          value: _defineProperty({}, lastHotspotIndex, {
            coordinates: {
              $set: convertedCoordinates
            }
          })
        }
      });
    });
    _defineProperty(_this2, "finalizeHotspot", function (lastHotspotIndex, convertedCoordinates) {
      _this2.updateProps({
        interactionData: {
          hotspotsCount: {
            $set: _this2.props.scoringData.value.length
          }
        },
        scoringData: {
          value: _defineProperty({}, lastHotspotIndex, {
            coordinates: {
              $set: convertedCoordinates
            }
          })
        }
      });
    });
    _defineProperty(_this2, "prepareNewTempHotspot", function () {
      var newId = _this2.props.scoringData.value.length + 1;
      _this2.setState({
        tempHotspot: {
          type: _this2.state.currentShapeType,
          coordinates: [],
          id: newId
        }
      });
    });
    _defineProperty(_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 = castArray(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
    // ===========
    _defineProperty(_this2, "handleCalculatorTypeChange", function (e, value) {
      _this2.props.changeItemState({
        calculatorType: value
      });
    });
    _defineProperty(_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 = castArray(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: _defineProperty({}, lastHotspotIndex, {
              type: {
                $set: newType
              } // Only update the type of the existing hotspot
            })
          }
        });
        _this2.setState({
          currentShapeType: newType,
          tempHotspot: null
        });
      }
    });
    _defineProperty(_this2, "handleRemoveImage", function () {
      _this2.updateProps({
        interactionData: {
          $set: {}
        },
        scoringData: {
          value: {
            $set: []
          }
        }
      });
    });
    _defineProperty(_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'
      });
    });
    _defineProperty(_this2, "openShortcutsModal", function () {
      _this2.setState({
        isShortcutsModalOpen: true
      });
    });
    _defineProperty(_this2, "closeShortcutsModal", function () {
      _this2.setState({
        isShortcutsModalOpen: false
      });
    });
    _defineProperty(_this2, "handleDropAccepted", function (_ref2) {
      var _ref3 = _slicedToArray(_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);
    });
    _defineProperty(_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 = update(_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: _defineProperty({}, indexToRemove, {
              coordinates: {
                $set: []
              },
              type: {
                $set: _this2.state.currentShapeType || 'square'
              }
            })
          }
        });
        _this2.setState({
          currentId: 1,
          tempHotspot: null
        });
      }
    });
    _defineProperty(_this2, "handleDescriptionChange", function (itemBody) {
      return _this2.props.changeItemState({
        itemBody: itemBody
      });
    });
    _defineProperty(_this2, "handleDrawingContainerRef", function (node) {
      _this2.drawingContainer = node;
    });
    _defineProperty(_this2, "handleCloseModal", function () {
      _this2.setState({
        isModalOpen: false
      });
    });
    _defineProperty(_this2, "handleOpenModal", function () {
      _this2.setState({
        isModalOpen: true
      });
    });
    return _this2;
  }
  _inherits(HotSpotEdit, _Component);
  return _createClass(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 = _slicedToArray(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 = castArray(value);
      if (url && hotspots.length > 0) {
        return jsx(React.Fragment, null, hotspots.map(function (hotspot) {
          var _find = find({
              type: hotspot.type
            }, drawTypes()),
            title = _find.title;
          var mainText = t('{title} Hot Spot', {
            title: title
          });
          if (hotspot.coordinates.length < 2) {
            return null;
          }
          return jsx("div", {
            key: hotspot.id,
            css: _this4.props.styles.footerContainer
          }, jsx("div", {
            css: _this4.props.styles.footerContainerText
          }, jsx("div", null, jsx(Text, {
            weight: "bold"
          }, mainText)), jsx("div", null, jsx(Text, {
            color: "primary"
          }, t('Clicks within the hot spot will be considered correct')))), jsx(RemoveChoiceButton, {
            onRemoveChoice: function onRemoveChoice() {
              return _this4.handleDrawingRemove(hotspot.id);
            },
            screenReaderText: t('Remove Drawing'),
            automationData: "sdk-remove-hotspot-area-button"
          }));
        }));
      }
      return null;
    }
  }, {
    key: "renderOptionsDescription",
    value: function renderOptionsDescription() {
      return jsx(ScreenReaderContent, null, t('Hotspot options'));
    }
  }, {
    key: "renderShortcutsModal",
    value: function renderShortcutsModal() {
      return jsx(SimpleModal, {
        footerContent: jsx(Button, {
          onClick: this.closeShortcutsModal,
          color: "primary"
        }, t('Close')),
        isModalOpen: this.state.isShortcutsModalOpen,
        onModalDismiss: this.closeShortcutsModal,
        size: "medium",
        title: t('Hotspot Controls & Shortcuts'),
        label: t('Hotspot Controls & Shortcuts')
      }, jsx("div", {
        css: this.props.styles.modalContent
      }, jsx(Text, null, t('Hotspot Controls')), jsx("ul", null, jsx("li", null, t('Use the Arrow keys to move the hotspot')), jsx("li", null, t('Hold Shift and use the Arrow keys to resize the hotspot')), jsx("li", null, t('Hold Shift + Alt and use the Arrow keys to shrink the hotspot')), jsx("li", null, t('Press the Escape key to close the modal'))), jsx(Text, null, t('Shortcuts')), jsx("ul", null, jsx("li", null, t('F: Expand Image')), jsx("li", null, t('D: Remove Image')), jsx("li", null, t('B: Browse for Image')), jsx("li", null, t('I: Open Shortcuts Modal')), jsx("li", null, t('C or ESC: Close Shortcuts Modal')), jsx("li", null, t('R: Add Square Hotspot')), jsx("li", null, t('O: Add Oval Hotspot')), jsx("li", null, t('P: Draw Polygon Hotspot')), jsx("li", null, t('E: Close Polygon Shape')), jsx("li", null, t('Delete or Backspace: Remove Current Hotspot')), jsx("li", null, t('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 jsx(SimpleModal, {
        size: "small",
        title: t('Grading'),
        label: t('Grading'),
        isModalOpen: this.state.isModalOpen,
        onModalDismiss: this.handleCloseModal,
        "data-automation": "sdk-hotspot-grading-options"
      }, jsx(Text, {
        weight: "bold",
        lineHeight: "double"
      }, t('Exact match')), jsx("br", null), jsx(Text, null, t('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 = castArray(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 jsx(View, {
        as: "div",
        margin: "medium 0",
        position: "relative"
      }, jsx(RadioInputGroup, {
        onChange: function onChange() {},
        name: t('Grading'),
        value: ALL_OR_NOTHING,
        description: jsx("span", null, t('Grading'), jsx(IconButton, {
          size: "small",
          withBackground: false,
          withBorder: false,
          renderIcon: IconQuestionLine,
          onClick: this.handleOpenModal,
          screenReaderLabel: t('Open grading option information')
        }))
      }, jsx(RadioInput, {
        value: ALL_OR_NOTHING,
        label: t('Exact Match'),
        "data-automation": "sdk-hotspot-exact"
      })));
    }
  }, {
    key: "render",
    value: function render() {
      var _this5 = this;
      var hotspots = castArray(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 jsx("div", null, jsx("div", {
        className: "accessibilityInfo",
        css: this.props.styles.accessibilityInfo
      }, jsx(Text, {
        color: "secondary"
      }, jsx(IconInfoLine, {
        size: "x-small",
        css: this.props.styles.accessibilityInfoIcon
      }), t('This question type is not accessible to users requiring screen readers.'))), jsx(Alert, {
        variant: "info"
      }, jsx(Text, {
        id: "hotspot-oqaat-info"
      }, t.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
          jsx("span", {
            key: "1",
            role: "button",
            tabIndex: "0",
            css: _this5.props.styles.keyboardControlsList,
            onClick: _this5.openShortcutsModal
          }, children)
        );
      }, function (_ref5) {
        var children = _ref5.children;
        return jsx("strong", {
          key: "2"
        }, children);
      }]))), jsx(QuestionContainer, {
        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')
      }, jsx(DrawingContainer, {
        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()), jsx(QuestionSettingsContainer, {
        additionalOptions: this.props.additionalOptions
      }, this.props.showCalculatorOption && jsx(QuestionSettingsPanel, {
        label: t('Options'),
        defaultExpanded: true
      }, jsx(FormFieldGroup, {
        rowSpacing: "small",
        description: this.renderOptionsDescription()
      }, jsx(CalculatorOptionWithOqaatAlert, {
        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());
    }
  }]);
}(Component), _defineProperty(_HotSpotEdit, "displayName", 'HotSpotEdit'), _defineProperty(_HotSpotEdit, "componentId", "Quizzes".concat(_HotSpotEdit.displayName)), _defineProperty(_HotSpotEdit, "interactionType", HotSpotInteractionType), _defineProperty(_HotSpotEdit, "propTypes", _objectSpread(_objectSpread({
  additionalOptions: PropTypes.array,
  calculatorType: PropTypes.string,
  changeItemState: PropTypes.func.isRequired,
  enableRichContentEditor: PropTypes.bool,
  errors: PropTypes.shape({
    itemBody: PropTypes.arrayOf(PropTypes.string),
    interactionData: PropTypes.shape({
      imageUrl: PropTypes.arrayOf(PropTypes.string)
    }),
    scoringData: PropTypes.shape({
      value: PropTypes.arrayOf(PropTypes.shape({
        type: PropTypes.arrayOf(PropTypes.string),
        coordinates: PropTypes.arrayOf(PropTypes.string)
      }))
    })
  }),
  interactionData: PropTypes.shape({
    imageUrl: PropTypes.string,
    hotspotsCount: PropTypes.number
  }).isRequired,
  itemBody: PropTypes.string,
  mediaUpload: PropTypes.func.isRequired,
  onModalClose: PropTypes.func,
  onModalOpen: PropTypes.func,
  oneQuestionAtATime: PropTypes.bool,
  openImportModal: PropTypes.func,
  overrideEditableForRegrading: PropTypes.bool,
  scoringData: PropTypes.shape({
    value: PropTypes.arrayOf(PropTypes.shape({
      type: PropTypes.oneOf(['square', 'oval', 'polygon']),
      coordinates: PropTypes.arrayOf(PropTypes.shape({
        x: PropTypes.number.isRequired,
        y: PropTypes.number.isRequired
      }))
    })).isRequired
  }).isRequired,
  setOneQuestionAtATime: PropTypes.func
}, withEditTools.injectedProps), {}, {
  styles: PropTypes.object,
  multipleHotSpotEnabled: PropTypes.bool,
  showCalculatorOption: PropTypes.bool
})), _defineProperty(_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);
export { HotSpotEdit as default };