@pie-element/hotspot 5.7.1-beta.1 → 5.7.1-beta.4

package/configure/lib/root.js

@@ -0,0 +1,359 @@
+"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/config-ui");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _editableHtml = _interopRequireDefault(require("@pie-lib/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 _classnames = _interopRequireDefault(require("classnames"));
+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;
+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$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;
+      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)
+      };
+      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("div", {
+        className: classes.base
+      }, /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
+        hideSettings: settingsPanelDisabled,
+        settings: /*#__PURE__*/_react["default"].createElement(Panel, {
+          model: model,
+          onChangeModel: onModelChangedByConfig,
+          configuration: configuration,
+          onChangeConfiguration: onConfigurationChanged,
+          groups: {
+            Settings: panelSettings,
+            Properties: panelProperties
+          }
+        })
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.regular
+      }, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: teacherInstructions.label,
+        className: classes.prompt
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+        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'
+        }]
+      })), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: prompt.label,
+        className: classes.prompt
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+        markup: model.prompt || '',
+        onChange: onPromptChanged,
+        imageSupport: imageSupport,
+        nonEmpty: false,
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: defaultImageMaxWidth,
+        maxImageHeight: defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }]
+      })), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: rationale.label,
+        className: classes.prompt
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+        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'
+        }]
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.label, 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
+      }), 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("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: classes.label,
+        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
+      }))))));
+    }
+  }]);
+  return Root;
+}(_react["default"].Component);
+exports.Root = Root;
+var styles = function styles(theme) {
+  return {
+    base: {
+      marginTop: theme.spacing.unit * 3
+    },
+    container: {
+      display: 'flex',
+      marginTop: theme.spacing.unit
+    },
+    dimensions: {
+      display: 'flex'
+    },
+    field: {
+      flex: 1,
+      width: '90%'
+    },
+    label: {
+      marginTop: theme.spacing.unit * 4
+    },
+    prompt: {
+      paddingTop: theme.spacing.unit * 2,
+      width: '100%'
+    },
+    subheading: {
+      marginRight: theme.spacing.unit
+    },
+    regular: {
+      marginBottom: theme.spacing.unit * 3
+    },
+    switchElement: {
+      justifyContent: 'space-between',
+      margin: 0
+    },
+    flexContainer: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    tooltip: {
+      fontSize: '12px',
+      whiteSpace: 'pre',
+      maxWidth: '500px'
+    },
+    errorText: {
+      fontSize: '12px',
+      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,"file":"root.js","names":["_react","_interopRequireDefault","require","_configUi","_propTypes","_editableHtml","_styles","_Typography","_Info","_Tooltip","_hotspotPalette","_hotspotContainer","_classnames","_utils","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","Panel","settings","toggle","Root","_React$Component","_inherits2","_super","_this","_classCallCheck2","_len","args","Array","_key","concat","_assertThisInitialized2","fieldType","color","onColorChanged","props","cType","value","resizeType","_this$props","_this$props$model","model","dimensions","shapes","_this$props$configura","configuration","preserveAspectRatio","onUpdateImageDimension","onUpdateShapes","nextImageDimensions","updatedDimensions","updateImageDimensions","enabled","shapesArray","getAllShapes","updatedShapes","getUpdatedShapes","groupShapes","_createClass2","render","_this2","_this$props2","classes","imageSupport","uploadSoundSupport","onConfigurationChanged","onImageUpload","onModelChangedByConfig","onPromptChanged","onRationaleChanged","onTeacherInstructionsChanged","_ref","_ref$maxImageWidth","maxImageWidth","_ref$maxImageHeight","maxImageHeight","_ref$multipleCorrect","multipleCorrect","_ref$partialScoring","partialScoring","_ref$preserveAspectRa","_ref$prompt","prompt","_ref$rationale","rationale","settingsPanelDisabled","_ref$spellCheck","spellCheck","_ref$teacherInstructi","teacherInstructions","_ref$withRubric","withRubric","_ref2","errors","promptEnabled","rationaleEnabled","spellCheckEnabled","teacherInstructionsEnabled","toolbarEditorPosition","_ref3","shapesError","selectionsError","validationMessage","generateValidationMessage","defaultImageMaxWidth","defaultImageMaxHeight","toolbarOpts","position","panelSettings","label","panelProperties","rubricEnabled","createElement","className","base","layout","ConfigLayout","hideSettings","onChangeModel","onChangeConfiguration","groups","Settings","Properties","regular","InputContainer","markup","onChange","nonEmpty","languageCharactersProps","language","classNames","flexContainer","subheading","variant","tooltip","disableFocusListener","disableTouchListener","placement","title","fontSize","style","hotspotColor","hotspotList","outlineColor","outlineList","onHotspotColorChange","handleColorChange","onOutlineColorChange","imageUrl","hasErrors","strokeWidth","preserveAspectRatioEnabled","errorText","NumberTextField","width","min","handleOnUpdateImageDimensions","showErrorWhenOutsideRange","field","height","React","Component","exports","styles","theme","marginTop","spacing","unit","container","display","flex","paddingTop","marginRight","marginBottom","switchElement","justifyContent","margin","alignItems","whiteSpace","maxWidth","palette","error","main","propTypes","PropTypes","isRequired","shape","add","func","_default","withStyles"],"sources":["../src/root.jsx"],"sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer, NumberTextField } from '@pie-lib/config-ui';\nimport PropTypes from 'prop-types';\nimport EditableHtml from '@pie-lib/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 classNames from 'classnames';\nimport { updateImageDimensions, generateValidationMessage, getUpdatedShapes, getAllShapes, groupShapes } from './utils';\n\nconst { Panel, toggle } = 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      maxImageWidth = {},\n      maxImageHeight = {},\n      multipleCorrect = {},\n      partialScoring = {},\n      preserveAspectRatio = {},\n      prompt = {},\n      rationale = {},\n      settingsPanelDisabled,\n      spellCheck = {},\n      teacherInstructions = {},\n      withRubric = {},\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    };\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      <div className={classes.base}>\n        <layout.ConfigLayout\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          <div className={classes.regular}>\n            {teacherInstructionsEnabled && (\n              <InputContainer label={teacherInstructions.label} className={classes.prompt}>\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                />\n              </InputContainer>\n            )}\n\n            {promptEnabled && (\n              <InputContainer label={prompt.label} className={classes.prompt}>\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                />\n              </InputContainer>\n            )}\n\n            {rationaleEnabled && (\n              <InputContainer label={rationale.label} className={classes.prompt}>\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                />\n              </InputContainer>\n            )}\n\n            <div className={classNames(classes.label, 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            />\n            {shapesError && <div className={classes.errorText}>{shapesError}</div>}\n            {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}\n\n            {model.imageUrl && (\n              <div>\n                <Typography className={classes.label} variant=\"subheading\">\n                  Image Dimensions\n                </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              </div>\n            )}\n          </div>\n        </layout.ConfigLayout>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 3,\n  },\n  container: {\n    display: 'flex',\n    marginTop: theme.spacing.unit,\n  },\n  dimensions: {\n    display: 'flex',\n  },\n  field: {\n    flex: 1,\n    width: '90%',\n  },\n  label: {\n    marginTop: theme.spacing.unit * 4,\n  },\n  prompt: {\n    paddingTop: theme.spacing.unit * 2,\n    width: '100%',\n  },\n  subheading: {\n    marginRight: theme.spacing.unit,\n  },\n  regular: {\n    marginBottom: theme.spacing.unit * 3,\n  },\n  switchElement: {\n    justifyContent: 'space-between',\n    margin: 0,\n  },\n  flexContainer: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  tooltip: {\n    fontSize: '12px',\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n  errorText: {\n    fontSize: '12px',\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"],"mappings":"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"}

package/configure/lib/upload-control.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _index = require("@material-ui/core/styles/index");
+var _button = _interopRequireDefault(require("./button"));
+var UploadControl = function UploadControl(_ref) {
+  var classNameButton = _ref.classNameButton,
+    classNameSection = _ref.classNameSection,
+    classes = _ref.classes,
+    label = _ref.label,
+    onInputClick = _ref.onInputClick,
+    onUploadImage = _ref.onUploadImage,
+    setRef = _ref.setRef;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classNameSection
+  }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    className: classNameButton,
+    label: label,
+    onClick: onInputClick
+  }), /*#__PURE__*/_react["default"].createElement("input", {
+    accept: "image/*",
+    className: classes.input,
+    onChange: onUploadImage,
+    ref: function ref(_ref2) {
+      setRef(_ref2);
+    },
+    type: "file"
+  }));
+};
+var styles = function styles() {
+  return {
+    input: {
+      display: 'none'
+    }
+  };
+};
+UploadControl.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  classNameButton: _propTypes["default"].string,
+  classNameSection: _propTypes["default"].string,
+  label: _propTypes["default"].string.isRequired,
+  onInputClick: _propTypes["default"].func.isRequired,
+  onUploadImage: _propTypes["default"].func.isRequired,
+  setRef: _propTypes["default"].func.isRequired
+};
+UploadControl.defaultProps = {
+  classNameButton: '',
+  classNameSection: ''
+};
+var _default = (0, _index.withStyles)(styles)(UploadControl);
+exports["default"] = _default;
+//# sourceMappingURL=upload-control.js.map

package/configure/lib/upload-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-control.js","names":["_react","_interopRequireDefault","require","_propTypes","_index","_button","UploadControl","_ref","classNameButton","classNameSection","classes","label","onInputClick","onUploadImage","setRef","createElement","className","onClick","accept","input","onChange","ref","type","styles","display","propTypes","PropTypes","object","isRequired","string","func","defaultProps","_default","withStyles","exports"],"sources":["../src/upload-control.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles/index';\n\nimport Button from './button';\n\nconst UploadControl = ({ classNameButton, classNameSection, classes, label, onInputClick, onUploadImage, setRef }) => (\n  <div className={classNameSection}>\n    <Button className={classNameButton} label={label} onClick={onInputClick} />\n    <input\n      accept=\"image/*\"\n      className={classes.input}\n      onChange={onUploadImage}\n      ref={(ref) => {\n        setRef(ref);\n      }}\n      type=\"file\"\n    />\n  </div>\n);\n\nconst styles = () => ({\n  input: {\n    display: 'none',\n  },\n});\n\nUploadControl.propTypes = {\n  classes: PropTypes.object.isRequired,\n  classNameButton: PropTypes.string,\n  classNameSection: PropTypes.string,\n  label: PropTypes.string.isRequired,\n  onInputClick: PropTypes.func.isRequired,\n  onUploadImage: PropTypes.func.isRequired,\n  setRef: PropTypes.func.isRequired,\n};\n\nUploadControl.defaultProps = {\n  classNameButton: '',\n  classNameSection: '',\n};\n\nexport default withStyles(styles)(UploadControl);\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEA,IAAMI,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA;EAAA,IAAMC,eAAe,GAAAD,IAAA,CAAfC,eAAe;IAAEC,gBAAgB,GAAAF,IAAA,CAAhBE,gBAAgB;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAEC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAEC,YAAY,GAAAL,IAAA,CAAZK,YAAY;IAAEC,aAAa,GAAAN,IAAA,CAAbM,aAAa;IAAEC,MAAM,GAAAP,IAAA,CAANO,MAAM;EAAA,oBAC7Gd,MAAA,YAAAe,aAAA;IAAKC,SAAS,EAAEP;EAAiB,gBAC/BT,MAAA,YAAAe,aAAA,CAACV,OAAA,WAAM;IAACW,SAAS,EAAER,eAAgB;IAACG,KAAK,EAAEA,KAAM;IAACM,OAAO,EAAEL;EAAa,CAAE,CAAC,eAC3EZ,MAAA,YAAAe,aAAA;IACEG,MAAM,EAAC,SAAS;IAChBF,SAAS,EAAEN,OAAO,CAACS,KAAM;IACzBC,QAAQ,EAAEP,aAAc;IACxBQ,GAAG,EAAE,SAAAA,IAACA,KAAG,EAAK;MACZP,MAAM,CAACO,KAAG,CAAC;IACb,CAAE;IACFC,IAAI,EAAC;EAAM,CACZ,CACE,CAAC;AAAA,CACP;AAED,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAA;EAAA,OAAU;IACpBJ,KAAK,EAAE;MACLK,OAAO,EAAE;IACX;EACF,CAAC;AAAA,CAAC;AAEFlB,aAAa,CAACmB,SAAS,GAAG;EACxBf,OAAO,EAAEgB,qBAAS,CAACC,MAAM,CAACC,UAAU;EACpCpB,eAAe,EAAEkB,qBAAS,CAACG,MAAM;EACjCpB,gBAAgB,EAAEiB,qBAAS,CAACG,MAAM;EAClClB,KAAK,EAAEe,qBAAS,CAACG,MAAM,CAACD,UAAU;EAClChB,YAAY,EAAEc,qBAAS,CAACI,IAAI,CAACF,UAAU;EACvCf,aAAa,EAAEa,qBAAS,CAACI,IAAI,CAACF,UAAU;EACxCd,MAAM,EAAEY,qBAAS,CAACI,IAAI,CAACF;AACzB,CAAC;AAEDtB,aAAa,CAACyB,YAAY,GAAG;EAC3BvB,eAAe,EAAE,EAAE;EACnBC,gBAAgB,EAAE;AACpB,CAAC;AAAC,IAAAuB,QAAA,GAEa,IAAAC,iBAAU,EAACV,MAAM,CAAC,CAACjB,aAAa,CAAC;AAAA4B,OAAA,cAAAF,QAAA"}

package/configure/lib/utils.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateImageDimensions = exports.groupShapes = exports.getUpdatedShapes = exports.getUpdatedRectangle = exports.getUpdatedPlygon = exports.getAllShapes = exports.generateValidationMessage = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+var _excluded = ["group"];
+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 updateImageDimensions = function updateImageDimensions(initialDim, nextDim, keepAspectRatio, resizeType) {
+  // if we want to keep image aspect ratio
+  if (keepAspectRatio) {
+    var imageAspectRatio = initialDim.width / initialDim.height;
+    if (resizeType === 'height') {
+      // if we want to change image height => we update the width accordingly
+      return {
+        width: nextDim.height * imageAspectRatio,
+        height: nextDim.height
+      };
+    }
+
+    // if we want to change image width => we update the height accordingly
+    return {
+      width: nextDim.width,
+      height: nextDim.width / imageAspectRatio
+    };
+  }
+
+  // if we don't want to keep aspect ratio, we just update both values
+  return {
+    width: nextDim.width,
+    height: nextDim.height
+  };
+};
+
+// referenceInitialValue = the initial value of the Stage
+// referenceNextValue = the next value of the Stage
+// currentValue = the value that has to be re-sized influenced by the changes that were made on the Stage
+exports.updateImageDimensions = updateImageDimensions;
+var getDelta = function getDelta(referenceInitialValue, referenceNextValue, currentValue) {
+  return referenceNextValue / referenceInitialValue * currentValue;
+};
+var getUpdatedRectangle = function getUpdatedRectangle(initialDim, nextDim, shape) {
+  return _objectSpread(_objectSpread({}, shape), {}, {
+    width: getDelta(initialDim.width, nextDim.width, shape.width),
+    height: getDelta(initialDim.height, nextDim.height, shape.height),
+    x: getDelta(initialDim.width, nextDim.width, shape.x),
+    y: getDelta(initialDim.height, nextDim.height, shape.y)
+  });
+};
+exports.getUpdatedRectangle = getUpdatedRectangle;
+var getUpdatedPlygon = function getUpdatedPlygon(initialDim, nextDim, shape) {
+  return _objectSpread(_objectSpread({}, shape), {}, {
+    points: shape.points.map(function (point) {
+      return {
+        x: getDelta(initialDim.width, nextDim.width, point.x),
+        y: getDelta(initialDim.height, nextDim.height, point.y)
+      };
+    })
+  });
+};
+
+// initialDim = the initial dimensions: { width, height } of the Stage
+// nextDim = the next dimensions: { width, height } of the Stage
+// shapes = array of shapes that have to be re-sized and re-positioned
+exports.getUpdatedPlygon = getUpdatedPlygon;
+var getUpdatedShapes = function getUpdatedShapes(initialDim, nextDim, shapes) {
+  return shapes.map(function (shape) {
+    if (shape.group === 'rectangles') {
+      return getUpdatedRectangle(initialDim, nextDim, shape);
+    }
+    if (shape.group === 'polygons') {
+      return getUpdatedPlygon(initialDim, nextDim, shape);
+    }
+  });
+};
+
+// converts shapes map to shapes array
+// example:
+// from: { rectangles: [r1], polygons: [p1, p2]}
+// to: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]
+// if a shape has index defined, keep it, otherwise initialize it
+// index is used for the UNDO function
+exports.getUpdatedShapes = getUpdatedShapes;
+var getAllShapes = function getAllShapes(shapesMap) {
+  shapesMap = shapesMap || {};
+  var shapesArray = [];
+  var shapesKeys = Object.keys(shapesMap);
+  return shapesKeys.length ? shapesKeys.reduce(function (acc, currentShapeKey) {
+    return acc.concat(shapesMap[currentShapeKey] ? shapesMap[currentShapeKey].map(function (shape, index) {
+      return _objectSpread(_objectSpread({}, shape), {}, {
+        group: currentShapeKey,
+        index: shape.index || acc.length + index
+      });
+    }) : []);
+  }, shapesArray) : shapesArray;
+};
+
+// converts shapes array to shapes map
+// is the reverse of getAllShapes function
+// example:
+// from: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]
+// to: { rectangles: [r1], polygons: [p1, p2]}
+exports.getAllShapes = getAllShapes;
+var groupShapes = function groupShapes(shapesArray) {
+  shapesArray = shapesArray || [];
+  var shapesMap = {
+    rectangles: [],
+    polygons: []
+  };
+  if (shapesArray.length) {
+    return shapesArray.reduce(function (acc, _ref) {
+      var group = _ref.group,
+        shapeProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+      acc[group] = [].concat((0, _toConsumableArray2["default"])(acc[group] || []), [shapeProps]);
+      return acc;
+    }, shapesMap);
+  }
+  return (0, _cloneDeep["default"])(shapesMap);
+};
+exports.groupShapes = groupShapes;
+var generateValidationMessage = function generateValidationMessage(config) {
+  var minShapes = config.minShapes,
+    maxShapes = config.maxShapes,
+    maxSelections = config.maxSelections;
+  var shapesMessage = "\nThere should be at least ".concat(minShapes, " ") + (maxShapes ? "and at most ".concat(maxShapes, " ") : '') + 'shapes defined.';
+  var selectionsMessage = "\nThere should be at least 1 " + (maxSelections ? "and at most ".concat(maxSelections, " ") : '') + 'shape' + (maxSelections ? 's' : '') + ' selected.';
+  var message = 'Validation requirements:' + shapesMessage + selectionsMessage;
+  return message;
+};
+exports.generateValidationMessage = generateValidationMessage;
+//# sourceMappingURL=utils.js.map