@pie-element/hotspot 6.8.1-next.42 → 6.8.1-next.45

package/configure/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.js"],"names":["log","HotspotConfigure","c","_configuration","_render","m","propertyType","_model","shapes","rectangles","polygons","circles","map","shape","correct","onModelChanged","colorType","color","prompt","rationale","teacherInstructions","dimensions","imageUrl","handler","dispatchEvent","InsertImageEvent","src","done","DeleteImageEvent","createDefaultModel","sensibleDefaults","configuration","bind","s","newConfiguration","language","enabled","languageChoices","options","length","value","settings","find","option","push","label","reset","resetValue","ModelUpdatedEvent","dispatchModelUpdated","InsertSoundEvent","DeleteSoundEvent","element","React","createElement","Root","model","onColorChanged","onImageUpload","onRationaleChanged","onConfigurationChanged","onPromptChanged","onUpdateImageDimension","imageSupport","add","insertImage","onDeleteImage","uploadSoundSupport","insertSound","onDeleteSound","onUpdateShapes","onModelChangedByConfig","onTeacherInstructionsChanged","ReactDOM","render","HTMLElement","hotspotList","hotspotColor","outlineList","outlineColor"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\nimport {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\n\nimport Root from './root';\nimport sensibleDefaults from './defaults';\n\nconst log = debug('hotspot:configure');\n\nexport default class HotspotConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}) => ({\n    ...sensibleDefaults.model,\n    ...model,\n    hotspotList: model.hotspotList || [model.hotspotColor] || sensibleDefaults.model.hotspotList,\n    outlineList: model.outlineList || [model.outlineColor] || sensibleDefaults.model.outlineList,\n    shapes: model.shapes || sensibleDefaults.model.shapes || {},\n  });\n\n  constructor() {\n    super();\n    this._model = HotspotConfigure.createDefaultModel();\n    this._configuration = sensibleDefaults.configuration;\n    this.onModelChanged = this.onModelChanged.bind(this);\n  }\n\n  set model(s) {\n    this._model = HotspotConfigure.createDefaultModel(s);\n    this._render();\n  }\n\n  set configuration(c) {\n    const newConfiguration = {\n      ...sensibleDefaults.configuration,\n      ...c,\n    };\n\n    this._configuration = newConfiguration;\n\n    // if language:enabled is true, then the corresponding default item model should include a language value;\n    // if it is false, then the language field should be omitted from the item model.\n    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,\n    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).\n    if (newConfiguration?.language?.enabled) {\n      if (newConfiguration?.languageChoices?.options?.length) {\n        this._model.language = newConfiguration?.languageChoices.options[0].value;\n      }\n    } else if (newConfiguration.language.settings && this._model.language) {\n      this._configuration.language.enabled = true;\n\n      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {\n        this._configuration.languageChoices.options = [];\n      }\n\n      // check if the language is already included in the languageChoices.options array\n      // and if not, then add it.\n      if (!this._configuration.languageChoices.options.find((option) => option.value === this._model.language)) {\n        this._configuration.languageChoices.options.push({\n          value: this._model.language,\n          label: this._model.language,\n        });\n      }\n    } else {\n      delete this._model.language;\n    }\n\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged(m, reset) {\n    this._model = m;\n    this.dispatchModelUpdated(reset);\n    this._render();\n  }\n\n  onConfigurationChanged = (c) => {\n    this._configuration = c;\n    this._render();\n  };\n\n  onModelChangedByConfig = (m, propertyType) => {\n    const _model = m;\n\n    if (propertyType === 'multipleCorrect') {\n      const { rectangles = [], polygons = [], circles = [] } = _model.shapes || {};\n\n      _model.shapes.rectangles = rectangles.map((shape) => ({ ...shape, correct: false }));\n      _model.shapes.polygons = polygons.map((shape) => ({ ...shape, correct: false }));\n      _model.shapes.circles = circles.map((shape) => ({ ...shape, correct: false }));\n    }\n\n    this.onModelChanged(_model);\n  };\n\n  onColorChanged = (colorType, color) => {\n    this.onModelChanged({\n      ...this._model,\n      [colorType]: color,\n    });\n  };\n\n  onPromptChanged = (prompt) => {\n    this.onModelChanged({\n      ...this._model,\n      prompt,\n    });\n  };\n\n  onRationaleChanged = (rationale) => {\n    this.onModelChanged({\n      ...this._model,\n      rationale,\n    });\n  };\n\n  onTeacherInstructionsChanged = (teacherInstructions) => {\n    this.onModelChanged({\n      ...this._model,\n      teacherInstructions,\n    });\n  };\n\n  onUpdateImageDimension = (dimensions) => {\n    this.onModelChanged({\n      ...this._model,\n      dimensions,\n    });\n  };\n\n  onUpdateShapes = (shapes) => {\n    this.onModelChanged({\n      ...this._model,\n      shapes,\n    });\n  };\n\n  onImageUpload = (imageUrl) => {\n    this.onModelChanged({\n      ...this._model,\n      imageUrl,\n    });\n  };\n\n  insertImage = (handler) => {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  };\n\n  onDeleteImage = (src, done) => {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  };\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  _render() {\n    log('_render');\n    let element = React.createElement(Root, {\n      configuration: this._configuration,\n      model: this._model,\n      onColorChanged: this.onColorChanged,\n      onImageUpload: this.onImageUpload,\n      onRationaleChanged: this.onRationaleChanged,\n      onConfigurationChanged: this.onConfigurationChanged,\n      onPromptChanged: this.onPromptChanged,\n      onUpdateImageDimension: this.onUpdateImageDimension,\n      imageSupport: {\n        add: this.insertImage,\n        delete: this.onDeleteImage,\n      },\n      uploadSoundSupport: {\n        add: this.insertSound.bind(this),\n        delete: this.onDeleteSound.bind(this),\n      },\n      onUpdateShapes: this.onUpdateShapes,\n      onModelChangedByConfig: this.onModelChangedByConfig,\n      onTeacherInstructionsChanged: this.onTeacherInstructionsChanged,\n    });\n\n    ReactDOM.render(element, this);\n  }\n}\n"],"file":"index.js"}

package/configure/lib/root.js

@@ -0,0 +1,395 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Root = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _configUi = require("@pie-lib/pie-toolbox/config-ui");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _editableHtml = require("@pie-lib/pie-toolbox/editable-html");
+
+var _styles = require("@material-ui/core/styles");
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _hotspotPalette = _interopRequireDefault(require("./hotspot-palette"));
+
+var _hotspotContainer = _interopRequireDefault(require("./hotspot-container"));
+
+var _utils = require("./utils");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var Panel = _configUi.settings.Panel,
+    toggle = _configUi.settings.toggle,
+    dropdown = _configUi.settings.dropdown;
+
+var Root = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Root, _React$Component);
+
+  var _super = _createSuper(Root);
+
+  function Root() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Root);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleColorChange", function (fieldType, color) {
+      var onColorChanged = _this.props.onColorChanged;
+      var cType = "".concat(fieldType, "Color");
+      onColorChanged(cType, color);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnUpdateImageDimensions", function (value, resizeType) {
+      var _this$props = _this.props,
+          _this$props$model = _this$props.model,
+          dimensions = _this$props$model.dimensions,
+          shapes = _this$props$model.shapes,
+          _this$props$configura = _this$props.configuration.preserveAspectRatio,
+          preserveAspectRatio = _this$props$configura === void 0 ? {} : _this$props$configura,
+          onUpdateImageDimension = _this$props.onUpdateImageDimension,
+          onUpdateShapes = _this$props.onUpdateShapes;
+
+      var nextImageDimensions = _objectSpread(_objectSpread({}, dimensions), {}, (0, _defineProperty2["default"])({}, resizeType, value)); // if preserveAspectRatio.enabled, updateImageDimensions function makes sure aspect ratio is kept
+
+
+      var updatedDimensions = (0, _utils.updateImageDimensions)(dimensions, nextImageDimensions, preserveAspectRatio.enabled, resizeType); // transform shapes map into shapes array
+
+      var shapesArray = (0, _utils.getAllShapes)(shapes); // transform all the shapes to fit the re-sized image
+
+      var updatedShapes = (0, _utils.getUpdatedShapes)(dimensions, updatedDimensions, shapesArray); // transform shapes array back into shapes map
+
+      onUpdateShapes((0, _utils.groupShapes)(updatedShapes));
+      onUpdateImageDimension(updatedDimensions);
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Root, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          classes = _this$props2.classes,
+          configuration = _this$props2.configuration,
+          model = _this$props2.model,
+          imageSupport = _this$props2.imageSupport,
+          uploadSoundSupport = _this$props2.uploadSoundSupport,
+          onConfigurationChanged = _this$props2.onConfigurationChanged,
+          onImageUpload = _this$props2.onImageUpload,
+          onModelChangedByConfig = _this$props2.onModelChangedByConfig,
+          onPromptChanged = _this$props2.onPromptChanged,
+          onRationaleChanged = _this$props2.onRationaleChanged,
+          onUpdateImageDimension = _this$props2.onUpdateImageDimension,
+          onTeacherInstructionsChanged = _this$props2.onTeacherInstructionsChanged,
+          onUpdateShapes = _this$props2.onUpdateShapes;
+
+      var _ref = configuration || {},
+          _ref$contentDimension = _ref.contentDimensions,
+          contentDimensions = _ref$contentDimension === void 0 ? {} : _ref$contentDimension,
+          _ref$maxImageWidth = _ref.maxImageWidth,
+          maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
+          _ref$maxImageHeight = _ref.maxImageHeight,
+          maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight,
+          _ref$multipleCorrect = _ref.multipleCorrect,
+          multipleCorrect = _ref$multipleCorrect === void 0 ? {} : _ref$multipleCorrect,
+          _ref$partialScoring = _ref.partialScoring,
+          partialScoring = _ref$partialScoring === void 0 ? {} : _ref$partialScoring,
+          _ref$preserveAspectRa = _ref.preserveAspectRatio,
+          preserveAspectRatio = _ref$preserveAspectRa === void 0 ? {} : _ref$preserveAspectRa,
+          _ref$prompt = _ref.prompt,
+          prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
+          _ref$rationale = _ref.rationale,
+          rationale = _ref$rationale === void 0 ? {} : _ref$rationale,
+          settingsPanelDisabled = _ref.settingsPanelDisabled,
+          _ref$spellCheck = _ref.spellCheck,
+          spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
+          _ref$teacherInstructi = _ref.teacherInstructions,
+          teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi,
+          _ref$withRubric = _ref.withRubric,
+          withRubric = _ref$withRubric === void 0 ? {} : _ref$withRubric,
+          _ref$mathMlOptions = _ref.mathMlOptions,
+          mathMlOptions = _ref$mathMlOptions === void 0 ? {} : _ref$mathMlOptions,
+          _ref$language = _ref.language,
+          language = _ref$language === void 0 ? {} : _ref$language,
+          _ref$languageChoices = _ref.languageChoices,
+          languageChoices = _ref$languageChoices === void 0 ? {} : _ref$languageChoices;
+
+      var _ref2 = model || {},
+          errors = _ref2.errors,
+          promptEnabled = _ref2.promptEnabled,
+          rationaleEnabled = _ref2.rationaleEnabled,
+          spellCheckEnabled = _ref2.spellCheckEnabled,
+          teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
+          toolbarEditorPosition = _ref2.toolbarEditorPosition;
+
+      var _ref3 = errors || {},
+          shapesError = _ref3.shapesError,
+          selectionsError = _ref3.selectionsError;
+
+      var validationMessage = (0, _utils.generateValidationMessage)(configuration);
+      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+      var toolbarOpts = {
+        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+      };
+      var panelSettings = {
+        multipleCorrect: multipleCorrect.settings && toggle(multipleCorrect.label),
+        partialScoring: partialScoring.settings && toggle(partialScoring.label),
+        promptEnabled: prompt.settings && toggle(prompt.label),
+        'language.enabled': language.settings && toggle(language.label, true),
+        language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
+      };
+      var panelProperties = {
+        teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+        rationaleEnabled: rationale.settings && toggle(rationale.label),
+        spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+        rubricEnabled: (withRubric === null || withRubric === void 0 ? void 0 : withRubric.settings) && toggle(withRubric === null || withRubric === void 0 ? void 0 : withRubric.label)
+      };
+      return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
+        dimensions: contentDimensions,
+        hideSettings: settingsPanelDisabled,
+        settings: /*#__PURE__*/_react["default"].createElement(Panel, {
+          model: model,
+          onChangeModel: onModelChangedByConfig,
+          configuration: configuration,
+          onChangeConfiguration: onConfigurationChanged,
+          groups: {
+            Settings: panelSettings,
+            Properties: panelProperties
+          }
+        })
+      }, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: teacherInstructions.label,
+        className: classes.promptContainer
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        markup: model.teacherInstructions || '',
+        onChange: onTeacherInstructionsChanged,
+        imageSupport: imageSupport,
+        nonEmpty: false,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }],
+        mathMlOptions: mathMlOptions
+      })), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: prompt.label,
+        className: classes.promptContainer
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        markup: model.prompt || '',
+        onChange: onPromptChanged,
+        imageSupport: imageSupport,
+        nonEmpty: false,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: defaultImageMaxWidth,
+        maxImageHeight: defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }],
+        mathMlOptions: mathMlOptions
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.flexContainer
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: classes.subheading,
+        variant: "subheading"
+      }, "Define Hotspot"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+        classes: {
+          tooltip: classes.tooltip
+        },
+        disableFocusListener: true,
+        disableTouchListener: true,
+        placement: 'left',
+        title: validationMessage
+      }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
+        fontSize: 'small',
+        color: 'primary',
+        style: {
+          "float": 'right'
+        }
+      }))), /*#__PURE__*/_react["default"].createElement(_hotspotPalette["default"], {
+        hotspotColor: model.hotspotColor,
+        hotspotList: model.hotspotList,
+        outlineColor: model.outlineColor,
+        outlineList: model.outlineList,
+        onHotspotColorChange: function onHotspotColorChange(color) {
+          return _this2.handleColorChange('hotspot', color);
+        },
+        onOutlineColorChange: function onOutlineColorChange(color) {
+          return _this2.handleColorChange('outline', color);
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_hotspotContainer["default"], {
+        dimensions: model.dimensions,
+        imageUrl: model.imageUrl,
+        multipleCorrect: model.multipleCorrect,
+        hasErrors: !!shapesError || !!selectionsError,
+        hotspotColor: model.hotspotColor,
+        outlineColor: model.outlineColor,
+        onUpdateImageDimension: onUpdateImageDimension,
+        onUpdateShapes: onUpdateShapes,
+        onImageUpload: onImageUpload,
+        shapes: model.shapes,
+        strokeWidth: model.strokeWidth,
+        preserveAspectRatioEnabled: preserveAspectRatio.enabled,
+        insertImage: imageSupport && imageSupport.add
+      }), shapesError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, shapesError), selectionsError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, selectionsError), model.imageUrl && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        variant: "subheading"
+      }, "Image Dimensions"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.dimensions
+      }, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextField, {
+        key: "hotspot-manual-width",
+        label: "Width",
+        value: model.dimensions.width,
+        min: 0,
+        onChange: function onChange(e, value) {
+          return _this2.handleOnUpdateImageDimensions(value, 'width');
+        },
+        showErrorWhenOutsideRange: true,
+        className: classes.field
+      }), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextField, {
+        key: "hotspot-manual-height",
+        label: "Height",
+        value: model.dimensions.height,
+        min: 0,
+        onChange: function onChange(e, value) {
+          return _this2.handleOnUpdateImageDimensions(value, 'height');
+        },
+        showErrorWhenOutsideRange: true,
+        className: classes.field
+      }))), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: rationale.label,
+        className: classes.promptContainer
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+        markup: model.rationale || '',
+        onChange: onRationaleChanged,
+        imageSupport: imageSupport,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }],
+        mathMlOptions: mathMlOptions
+      })));
+    }
+  }]);
+  return Root;
+}(_react["default"].Component);
+
+exports.Root = Root;
+
+var styles = function styles(theme) {
+  return {
+    dimensions: {
+      display: 'flex',
+      marginBottom: theme.spacing.unit * 1.5
+    },
+    field: {
+      flex: 1,
+      width: '90%'
+    },
+    promptContainer: {
+      paddingTop: theme.spacing.unit * 2,
+      marginBottom: theme.spacing.unit * 2,
+      width: '100%'
+    },
+    subheading: {
+      marginRight: theme.spacing.unit
+    },
+    flexContainer: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    tooltip: {
+      fontSize: theme.typography.fontSize - 2,
+      whiteSpace: 'pre',
+      maxWidth: '500px'
+    },
+    errorText: {
+      fontSize: theme.typography.fontSize - 2,
+      color: theme.palette.error.main,
+      paddingTop: theme.spacing.unit
+    }
+  };
+};
+
+Root.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  configuration: _propTypes["default"].object,
+  model: _propTypes["default"].object.isRequired,
+  imageSupport: _propTypes["default"].shape({
+    add: _propTypes["default"].func,
+    "delete": _propTypes["default"].func
+  }),
+  uploadSoundSupport: _propTypes["default"].shape({
+    add: _propTypes["default"].func,
+    "delete": _propTypes["default"].func
+  }),
+  onImageUpload: _propTypes["default"].func.isRequired,
+  onColorChanged: _propTypes["default"].func.isRequired,
+  onPromptChanged: _propTypes["default"].func.isRequired,
+  onUpdateImageDimension: _propTypes["default"].func.isRequired,
+  onUpdateShapes: _propTypes["default"].func.isRequired,
+  onModelChangedByConfig: _propTypes["default"].func.isRequired,
+  onRationaleChanged: _propTypes["default"].func.isRequired,
+  onConfigurationChanged: _propTypes["default"].func.isRequired,
+  onTeacherInstructionsChanged: _propTypes["default"].func.isRequired
+};
+
+var _default = (0, _styles.withStyles)(styles)(Root);
+
+exports["default"] = _default;
+//# sourceMappingURL=root.js.map

package/configure/lib/root.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/root.jsx"],"names":["Panel","settings","toggle","dropdown","Root","fieldType","color","onColorChanged","props","cType","value","resizeType","model","dimensions","shapes","configuration","preserveAspectRatio","onUpdateImageDimension","onUpdateShapes","nextImageDimensions","updatedDimensions","enabled","shapesArray","updatedShapes","classes","imageSupport","uploadSoundSupport","onConfigurationChanged","onImageUpload","onModelChangedByConfig","onPromptChanged","onRationaleChanged","onTeacherInstructionsChanged","contentDimensions","maxImageWidth","maxImageHeight","multipleCorrect","partialScoring","prompt","rationale","settingsPanelDisabled","spellCheck","teacherInstructions","withRubric","mathMlOptions","language","languageChoices","errors","promptEnabled","rationaleEnabled","spellCheckEnabled","teacherInstructionsEnabled","toolbarEditorPosition","shapesError","selectionsError","validationMessage","defaultImageMaxWidth","defaultImageMaxHeight","toolbarOpts","position","panelSettings","label","options","panelProperties","rubricEnabled","Settings","Properties","promptContainer","flexContainer","subheading","tooltip","hotspotColor","hotspotList","outlineColor","outlineList","handleColorChange","imageUrl","strokeWidth","add","errorText","width","e","handleOnUpdateImageDimensions","field","height","React","Component","styles","theme","display","marginBottom","spacing","unit","flex","paddingTop","marginRight","alignItems","fontSize","typography","whiteSpace","maxWidth","palette","error","main","propTypes","PropTypes","object","isRequired","shape","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer, NumberTextField } from '@pie-lib/pie-toolbox/config-ui';\nimport PropTypes from 'prop-types';\nimport {EditableHtml} from '@pie-lib/pie-toolbox/editable-html';\nimport { withStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Info from '@material-ui/icons/Info';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport HotspotPalette from './hotspot-palette';\nimport HotspotContainer from './hotspot-container';\nimport { updateImageDimensions, generateValidationMessage, getUpdatedShapes, getAllShapes, groupShapes } from './utils';\n\nconst { Panel, toggle, dropdown } = settings;\n\nexport class Root extends React.Component {\n  handleColorChange = (fieldType, color) => {\n    const { onColorChanged } = this.props;\n    const cType = `${fieldType}Color`;\n\n    onColorChanged(cType, color);\n  };\n\n  handleOnUpdateImageDimensions = (value, resizeType) => {\n    const {\n      model: { dimensions, shapes },\n      configuration: { preserveAspectRatio = {} },\n      onUpdateImageDimension,\n      onUpdateShapes,\n    } = this.props;\n\n    const nextImageDimensions = { ...dimensions, [resizeType]: value };\n\n    // if preserveAspectRatio.enabled, updateImageDimensions function makes sure aspect ratio is kept\n    const updatedDimensions = updateImageDimensions(\n      dimensions,\n      nextImageDimensions,\n      preserveAspectRatio.enabled,\n      resizeType,\n    );\n    // transform shapes map into shapes array\n    const shapesArray = getAllShapes(shapes);\n    // transform all the shapes to fit the re-sized image\n    const updatedShapes = getUpdatedShapes(dimensions, updatedDimensions, shapesArray);\n    // transform shapes array back into shapes map\n\n    onUpdateShapes(groupShapes(updatedShapes));\n    onUpdateImageDimension(updatedDimensions);\n  };\n\n  render() {\n    const {\n      classes,\n      configuration,\n      model,\n      imageSupport,\n      uploadSoundSupport,\n      onConfigurationChanged,\n      onImageUpload,\n      onModelChangedByConfig,\n      onPromptChanged,\n      onRationaleChanged,\n      onUpdateImageDimension,\n      onTeacherInstructionsChanged,\n      onUpdateShapes,\n    } = this.props;\n    const {\n      contentDimensions = {},\n      maxImageWidth = {},\n      maxImageHeight = {},\n      multipleCorrect = {},\n      partialScoring = {},\n      preserveAspectRatio = {},\n      prompt = {},\n      rationale = {},\n      settingsPanelDisabled,\n      spellCheck = {},\n      teacherInstructions = {},\n      withRubric = {},\n      mathMlOptions = {},\n      language = {},\n      languageChoices = {},\n    } = configuration || {};\n    const {\n      errors,\n      promptEnabled,\n      rationaleEnabled,\n      spellCheckEnabled,\n      teacherInstructionsEnabled,\n      toolbarEditorPosition,\n    } = model || {};\n    const { shapesError, selectionsError } = errors || {};\n    const validationMessage = generateValidationMessage(configuration);\n\n    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;\n    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;\n\n    const toolbarOpts = {\n      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',\n    };\n\n    const panelSettings = {\n      multipleCorrect: multipleCorrect.settings && toggle(multipleCorrect.label),\n      partialScoring: partialScoring.settings && toggle(partialScoring.label),\n      promptEnabled: prompt.settings && toggle(prompt.label),\n      'language.enabled': language.settings && toggle(language.label, true),\n      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),\n    };\n    const panelProperties = {\n      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),\n      rationaleEnabled: rationale.settings && toggle(rationale.label),\n      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),\n      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),\n    };\n\n    return (\n      <layout.ConfigLayout\n        dimensions={contentDimensions}\n        hideSettings={settingsPanelDisabled}\n        settings={\n          <Panel\n            model={model}\n            onChangeModel={onModelChangedByConfig}\n            configuration={configuration}\n            onChangeConfiguration={onConfigurationChanged}\n            groups={{\n              Settings: panelSettings,\n              Properties: panelProperties,\n            }}\n          />\n        }\n      >\n        {teacherInstructionsEnabled && (\n          <InputContainer label={teacherInstructions.label} className={classes.promptContainer}>\n            <EditableHtml\n              markup={model.teacherInstructions || ''}\n              onChange={onTeacherInstructionsChanged}\n              imageSupport={imageSupport}\n              nonEmpty={false}\n              toolbarOpts={toolbarOpts}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}\n              maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n          </InputContainer>\n        )}\n\n        {promptEnabled && (\n          <InputContainer label={prompt.label} className={classes.promptContainer}>\n            <EditableHtml\n              markup={model.prompt || ''}\n              onChange={onPromptChanged}\n              imageSupport={imageSupport}\n              nonEmpty={false}\n              toolbarOpts={toolbarOpts}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={defaultImageMaxWidth}\n              maxImageHeight={defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n          </InputContainer>\n        )}\n\n        <div className={classes.flexContainer}>\n          <Typography className={classes.subheading} variant=\"subheading\">\n            Define Hotspot\n          </Typography>\n          <Tooltip\n            classes={{ tooltip: classes.tooltip }}\n            disableFocusListener\n            disableTouchListener\n            placement={'left'}\n            title={validationMessage}\n          >\n            <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }} />\n          </Tooltip>\n        </div>\n\n        <HotspotPalette\n          hotspotColor={model.hotspotColor}\n          hotspotList={model.hotspotList}\n          outlineColor={model.outlineColor}\n          outlineList={model.outlineList}\n          onHotspotColorChange={(color) => this.handleColorChange('hotspot', color)}\n          onOutlineColorChange={(color) => this.handleColorChange('outline', color)}\n        />\n\n        <HotspotContainer\n          dimensions={model.dimensions}\n          imageUrl={model.imageUrl}\n          multipleCorrect={model.multipleCorrect}\n          hasErrors={!!shapesError || !!selectionsError}\n          hotspotColor={model.hotspotColor}\n          outlineColor={model.outlineColor}\n          onUpdateImageDimension={onUpdateImageDimension}\n          onUpdateShapes={onUpdateShapes}\n          onImageUpload={onImageUpload}\n          shapes={model.shapes}\n          strokeWidth={model.strokeWidth}\n          preserveAspectRatioEnabled={preserveAspectRatio.enabled}\n          insertImage={imageSupport && imageSupport.add}\n        />\n        {shapesError && <div className={classes.errorText}>{shapesError}</div>}\n        {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}\n\n        {model.imageUrl && (\n          <React.Fragment>\n            <Typography variant=\"subheading\">Image Dimensions</Typography>\n\n            <div className={classes.dimensions}>\n              <NumberTextField\n                key=\"hotspot-manual-width\"\n                label=\"Width\"\n                value={model.dimensions.width}\n                min={0}\n                onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'width')}\n                showErrorWhenOutsideRange\n                className={classes.field}\n              />\n\n              <NumberTextField\n                key=\"hotspot-manual-height\"\n                label=\"Height\"\n                value={model.dimensions.height}\n                min={0}\n                onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'height')}\n                showErrorWhenOutsideRange\n                className={classes.field}\n              />\n            </div>\n          </React.Fragment>\n        )}\n\n        {rationaleEnabled && (\n          <InputContainer label={rationale.label} className={classes.promptContainer}>\n            <EditableHtml\n              markup={model.rationale || ''}\n              onChange={onRationaleChanged}\n              imageSupport={imageSupport}\n              toolbarOpts={toolbarOpts}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={(maxImageWidth && maxImageWidth.rationale) || defaultImageMaxWidth}\n              maxImageHeight={(maxImageHeight && maxImageHeight.rationale) || defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n          </InputContainer>\n        )}\n      </layout.ConfigLayout>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  dimensions: {\n    display: 'flex',\n    marginBottom: theme.spacing.unit * 1.5,\n  },\n  field: {\n    flex: 1,\n    width: '90%',\n  },\n  promptContainer: {\n    paddingTop: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2,\n    width: '100%',\n  },\n  subheading: {\n    marginRight: theme.spacing.unit,\n  },\n  flexContainer: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  tooltip: {\n    fontSize: theme.typography.fontSize - 2,\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n  errorText: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingTop: theme.spacing.unit,\n  },\n});\n\nRoot.propTypes = {\n  classes: PropTypes.object.isRequired,\n  configuration: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  imageSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func,\n  }),\n  uploadSoundSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func,\n  }),\n  onImageUpload: PropTypes.func.isRequired,\n  onColorChanged: PropTypes.func.isRequired,\n  onPromptChanged: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  onModelChangedByConfig: PropTypes.func.isRequired,\n  onRationaleChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: PropTypes.func.isRequired,\n  onTeacherInstructionsChanged: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(Root);\n"],"file":"root.js"}

package/configure/lib/shapes/circle.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var CircleShape = /*#__PURE__*/function () {
+  function CircleShape() {
+    (0, _classCallCheck2["default"])(this, CircleShape);
+  }
+
+  (0, _createClass2["default"])(CircleShape, null, [{
+    key: "create",
+    value: function create(shapes, e) {
+      var newShapes = (0, _toConsumableArray2["default"])(shapes);
+      var highestId = Math.max.apply(Math, (0, _toConsumableArray2["default"])(newShapes.map(function (shape) {
+        return parseInt(shape.id);
+      })).concat([0]));
+      var newCircle = {
+        id: "".concat(highestId + 1),
+        radius: 0,
+        x: e.evt.layerX,
+        y: e.evt.layerY,
+        group: 'circles',
+        index: newShapes.length
+      };
+      newShapes.push(newCircle);
+      return {
+        shapes: newShapes,
+        isDrawing: true,
+        isDrawingShapeId: newCircle.id
+      };
+    }
+  }, {
+    key: "finalizeCreation",
+    value: function finalizeCreation(state, props) {
+      var currentShapeIndex = state.shapes.findIndex(function (shape) {
+        return shape.id === state.isDrawingShapeId;
+      });
+
+      if (currentShapeIndex !== -1) {
+        var currentShape = state.shapes[currentShapeIndex]; // Check if the shape is a valid circle (has more than 0 radius) before finalizing
+
+        if (currentShape.radius > 0) {
+          return _objectSpread(_objectSpread({}, state), {}, {
+            isDrawing: false,
+            stateShapes: false,
+            isDrawingShapeId: undefined
+          });
+        } else {
+          return _objectSpread(_objectSpread({}, state), {}, {
+            isDrawing: false,
+            stateShapes: false,
+            isDrawingShapeId: undefined,
+            shapes: state.shapes.filter(function (shape) {
+              return shape.id !== state.isDrawingShapeId;
+            })
+          });
+        }
+      }
+
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isDrawing: false,
+        stateShapes: false,
+        isDrawingShapeId: undefined
+      });
+    }
+  }, {
+    key: "handleMouseMove",
+    value: function handleMouseMove(state, e) {
+      var isDrawing = state.isDrawing,
+          isDrawingShapeId = state.isDrawingShapeId,
+          shapes = state.shapes;
+
+      if (isDrawing) {
+        var tempShapes = (0, _toConsumableArray2["default"])(shapes);
+        var resizingShapeIndex = tempShapes.findIndex(function (shape) {
+          return shape.id === isDrawingShapeId;
+        });
+
+        if (resizingShapeIndex !== -1) {
+          var resizingShape = tempShapes[resizingShapeIndex]; // Calculate radius based on mouse position
+
+          var dx = e.evt.layerX - resizingShape.x;
+          var dy = e.evt.layerY - resizingShape.y;
+          resizingShape.radius = Math.sqrt(dx * dx + dy * dy);
+          return {
+            shapes: tempShapes
+          };
+        }
+      }
+
+      return state;
+    }
+  }]);
+  return CircleShape;
+}();
+
+exports["default"] = CircleShape;
+//# sourceMappingURL=circle.js.map

package/configure/lib/shapes/circle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shapes/circle.js"],"names":["CircleShape","shapes","e","newShapes","highestId","Math","max","map","shape","parseInt","id","newCircle","radius","x","evt","layerX","y","layerY","group","index","length","push","isDrawing","isDrawingShapeId","state","props","currentShapeIndex","findIndex","currentShape","stateShapes","undefined","filter","tempShapes","resizingShapeIndex","resizingShape","dx","dy","sqrt"],"mappings":"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","sourcesContent":["export default class CircleShape {\n  static create(shapes, e) {\n    const newShapes = [...shapes];\n    const highestId = Math.max(...newShapes.map((shape) => parseInt(shape.id)), 0);\n    const newCircle = {\n      id: `${highestId + 1}`,\n      radius: 0,\n      x: e.evt.layerX,\n      y: e.evt.layerY,\n      group: 'circles',\n      index: newShapes.length,\n    };\n\n    newShapes.push(newCircle);\n\n    return {\n      shapes: newShapes,\n      isDrawing: true,\n      isDrawingShapeId: newCircle.id,\n    };\n  }\n\n  static finalizeCreation(state, props) {\n    const currentShapeIndex = state.shapes.findIndex((shape) => shape.id === state.isDrawingShapeId);\n\n    if (currentShapeIndex !== -1) {\n      const currentShape = state.shapes[currentShapeIndex];\n\n      // Check if the shape is a valid circle (has more than 0 radius) before finalizing\n      if (currentShape.radius > 0) {\n        return {\n          ...state,\n          isDrawing: false,\n          stateShapes: false,\n          isDrawingShapeId: undefined,\n        };\n      } else {\n        return {\n          ...state,\n          isDrawing: false,\n          stateShapes: false,\n          isDrawingShapeId: undefined,\n          shapes: state.shapes.filter((shape) => shape.id !== state.isDrawingShapeId),\n        };\n      }\n    }\n\n    return {\n      ...state,\n      isDrawing: false,\n      stateShapes: false,\n      isDrawingShapeId: undefined,\n    };\n  }\n\n  static handleMouseMove(state, e) {\n    const { isDrawing, isDrawingShapeId, shapes } = state;\n\n    if (isDrawing) {\n      const tempShapes = [...shapes];\n      const resizingShapeIndex = tempShapes.findIndex((shape) => shape.id === isDrawingShapeId);\n\n      if (resizingShapeIndex !== -1) {\n        const resizingShape = tempShapes[resizingShapeIndex];\n\n        // Calculate radius based on mouse position\n        const dx = e.evt.layerX - resizingShape.x;\n        const dy = e.evt.layerY - resizingShape.y;\n        resizingShape.radius = Math.sqrt(dx * dx + dy * dy);\n\n        return {\n          shapes: tempShapes,\n        };\n      }\n    }\n\n    return state;\n  }\n}\n"],"file":"circle.js"}