@pie-element/hotspot 4.8.1 → 4.8.4-next.1014

package/configure/lib/root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/root.jsx"],"names":["Panel","settings","toggle","Root","fieldType","color","onColorChanged","props","cType","value","resizeType","model","dimensions","shapes","configuration","preserveAspectRatio","onUpdateImageDimension","onUpdateShapes","nextImageDimensions","updatedDimensions","enabled","shapesArray","updatedShapes","classes","imageSupport","onConfigurationChanged","onImageUpload","onModelChangedByConfig","onPromptChanged","onRationaleChanged","onTeacherInstructionsChanged","multipleCorrect","partialScoring","prompt","teacherInstructions","rationale","teacherInstructionsEnabled","promptEnabled","rationaleEnabled","base","label","Properties","regular","hotspotColor","hotspotList","outlineColor","outlineList","handleColorChange","imageUrl","strokeWidth","width","e","handleOnUpdateImageDimensions","field","height","React","Component","styles","theme","marginTop","spacing","unit","container","display","flex","paddingTop","marginBottom","switchElement","justifyContent","margin","propTypes","PropTypes","object","isRequired","shape","add","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  settings,\n  layout,\n  InputContainer,\n  NumberTextField\n} from '@pie-lib/config-ui';\nimport PropTypes from 'prop-types';\nimport EditableHtml from '@pie-lib/editable-html';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport HotspotPalette from './hotspot-palette';\nimport HotspotContainer from './hotspot-container';\nimport { updateImageDimensions, 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      onConfigurationChanged,\n      onImageUpload,\n      onModelChangedByConfig,\n      onPromptChanged,\n      onRationaleChanged,\n      onUpdateImageDimension,\n      onTeacherInstructionsChanged,\n      onUpdateShapes\n    } = this.props;\n    const {\n      multipleCorrect = {},\n      partialScoring = {},\n      prompt = {},\n      teacherInstructions = {},\n      rationale = {},\n      preserveAspectRatio = {}\n    } = configuration || {};\n    const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled } = model || {};\n\n    return (\n      <div className={classes.base}>\n        <layout.ConfigLayout\n          settings={\n            <Panel\n              model={model}\n              onChangeModel={onModelChangedByConfig}\n              configuration={configuration}\n              onChangeConfiguration={onConfigurationChanged}\n              groups={{\n                'Settings': {\n                  multipleCorrect:\n                    multipleCorrect.settings && toggle(multipleCorrect.label),\n                  partialScoring:\n                    partialScoring.settings && toggle(partialScoring.label),\n                  promptEnabled:\n                    prompt.settings && toggle(prompt.label),\n                },\n                Properties: {\n                  teacherInstructionsEnabled:\n                    teacherInstructions.settings && toggle(teacherInstructions.label),\n                  rationaleEnabled: rationale.settings && toggle(rationale.label)\n                }\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                />\n              </InputContainer>\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                />\n              </InputContainer>\n            )}\n\n            {rationaleEnabled && (\n              <InputContainer\n                label={rationale.label}\n                className={classes.prompt}\n              >\n                <EditableHtml\n                  markup={model.rationale || ''}\n                  onChange={onRationaleChanged}\n                  imageSupport={imageSupport}\n                />\n              </InputContainer>\n            )}\n\n            <Typography className={classes.label} variant=\"subheading\">\n              Define Hotspot\n            </Typography>\n\n            <HotspotPalette\n              hotspotColor={model.hotspotColor}\n              hotspotList={model.hotspotList}\n              outlineColor={model.outlineColor}\n              outlineList={model.outlineList}\n              onHotspotColorChange={color =>\n                this.handleColorChange('hotspot', color)\n              }\n              onOutlineColorChange={color =>\n                this.handleColorChange('outline', color)\n              }\n            />\n\n            <HotspotContainer\n              dimensions={model.dimensions}\n              imageUrl={model.imageUrl}\n              multipleCorrect={model.multipleCorrect}\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\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                  <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  regular: {\n    marginBottom: theme.spacing.unit * 3\n  },\n  switchElement: {\n    justifyContent: 'space-between',\n    margin: 0\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  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"}
+{"version":3,"sources":["../src/root.jsx"],"names":["Panel","settings","toggle","Root","fieldType","color","onColorChanged","props","cType","value","resizeType","model","dimensions","shapes","configuration","preserveAspectRatio","onUpdateImageDimension","onUpdateShapes","nextImageDimensions","updatedDimensions","enabled","shapesArray","updatedShapes","classes","imageSupport","onConfigurationChanged","onImageUpload","onModelChangedByConfig","onPromptChanged","onRationaleChanged","onTeacherInstructionsChanged","multipleCorrect","partialScoring","prompt","teacherInstructions","rationale","spellCheck","maxImageWidth","maxImageHeight","teacherInstructionsEnabled","promptEnabled","rationaleEnabled","spellCheckEnabled","errors","shapesError","selectionsError","toolbarOpts","validationMessage","defaultImageMaxWidth","defaultImageMaxHeight","toolbarEditorPosition","position","base","label","Properties","regular","flexContainer","subheading","tooltip","errorText","hotspotColor","hotspotList","outlineColor","outlineList","handleColorChange","imageUrl","strokeWidth","width","e","handleOnUpdateImageDimensions","field","height","React","Component","styles","theme","marginTop","spacing","unit","container","display","flex","paddingTop","marginRight","marginBottom","switchElement","justifyContent","margin","alignItems","fontSize","whiteSpace","maxWidth","padding","propTypes","PropTypes","object","isRequired","shape","add","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  settings,\n  layout,\n  InputContainer,\n  NumberTextField\n} 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 {\n  updateImageDimensions,\n  generateValidationMessage,\n  getUpdatedShapes,\n  getAllShapes,\n  groupShapes\n} 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      onConfigurationChanged,\n      onImageUpload,\n      onModelChangedByConfig,\n      onPromptChanged,\n      onRationaleChanged,\n      onUpdateImageDimension,\n      onTeacherInstructionsChanged,\n      onUpdateShapes\n    } = this.props;\n    const {\n      multipleCorrect = {},\n      partialScoring = {},\n      prompt = {},\n      teacherInstructions = {},\n      rationale = {},\n      spellCheck = {},\n      preserveAspectRatio = {},\n      maxImageWidth = {},\n      maxImageHeight = {}\n    } = configuration || {};\n    const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled, spellCheckEnabled, errors } = model || {};\n    const { shapesError, selectionsError } = errors || {};\n    const toolbarOpts = {};\n\n    const validationMessage = generateValidationMessage(configuration);\n\n    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;\n    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;\n\n    switch (model.toolbarEditorPosition) {\n      case 'top':\n        toolbarOpts.position = 'top';\n        break;\n      default:\n        toolbarOpts.position = 'bottom';\n        break;\n    }\n\n    return (\n      <div className={classes.base}>\n        <layout.ConfigLayout\n          settings={\n            <Panel\n              model={model}\n              onChangeModel={onModelChangedByConfig}\n              configuration={configuration}\n              onChangeConfiguration={onConfigurationChanged}\n              groups={{\n                'Settings': {\n                  multipleCorrect:\n                    multipleCorrect.settings && toggle(multipleCorrect.label),\n                  partialScoring:\n                    partialScoring.settings && toggle(partialScoring.label),\n                  promptEnabled:\n                    prompt.settings && toggle(prompt.label),\n                },\n                Properties: {\n                  teacherInstructionsEnabled:\n                    teacherInstructions.settings && toggle(teacherInstructions.label),\n                  rationaleEnabled: rationale.settings && toggle(rationale.label),\n                  spellCheckEnabled:\n                    spellCheck.settings && toggle(spellCheck.label),\n                }\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                />\n              </InputContainer>\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                />\n              </InputContainer>\n            )}\n\n            {rationaleEnabled && (\n              <InputContainer\n                label={rationale.label}\n                className={classes.prompt}\n              >\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                />\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            {shapesError && <div className={classes.errorText}>{shapesError}</div>}\n            {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}\n\n            <HotspotPalette\n              hotspotColor={model.hotspotColor}\n              hotspotList={model.hotspotList}\n              outlineColor={model.outlineColor}\n              outlineList={model.outlineList}\n              onHotspotColorChange={color =>\n                this.handleColorChange('hotspot', color)\n              }\n              onOutlineColorChange={color =>\n                this.handleColorChange('outline', color)\n              }\n            />\n\n            <HotspotContainer\n              dimensions={model.dimensions}\n              imageUrl={model.imageUrl}\n              multipleCorrect={model.multipleCorrect}\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\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                  <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: '5px'\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: 'red',\n    padding: '5px 0'\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  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/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getUpdatedPlygon = exports.getUpdatedRectangle = exports.groupShapes = exports.getAllShapes = exports.getUpdatedShapes = exports.updateImageDimensions = void 0;
+exports.updateImageDimensions = exports.groupShapes = exports.getUpdatedShapes = exports.getUpdatedRectangle = exports.getUpdatedPlygon = exports.getAllShapes = exports.generateValidationMessage = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -15,9 +15,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+var _excluded = ["group"];
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function 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
@@ -133,7 +135,7 @@ var groupShapes = function groupShapes(shapesArray) {
   if (shapesArray.length) {
     return shapesArray.reduce(function (acc, _ref) {
       var group = _ref.group,
-          shapeProps = (0, _objectWithoutProperties2["default"])(_ref, ["group"]);
+          shapeProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
       acc[group] = [].concat((0, _toConsumableArray2["default"])(acc[group] || []), [shapeProps]);
       return acc;
     }, shapesMap);
@@ -143,4 +145,16 @@ var groupShapes = function groupShapes(shapesArray) {
 };
 
 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

package/configure/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils.js"],"names":["updateImageDimensions","initialDim","nextDim","keepAspectRatio","resizeType","imageAspectRatio","width","height","getDelta","referenceInitialValue","referenceNextValue","currentValue","getUpdatedRectangle","shape","x","y","getUpdatedPlygon","points","map","point","getUpdatedShapes","shapes","group","getAllShapes","shapesMap","shapesArray","shapesKeys","Object","keys","length","reduce","acc","currentShapeKey","concat","index","groupShapes","rectangles","polygons","shapeProps"],"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;AAEA,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,UAAD,EAAaC,OAAb,EAAsBC,eAAtB,EAAuCC,UAAvC,EAAsD;AAClF;AACA,MAAID,eAAJ,EAAqB;AACnB,QAAME,gBAAgB,GAAGJ,UAAU,CAACK,KAAX,GAAmBL,UAAU,CAACM,MAAvD;;AAEA,QAAIH,UAAU,KAAK,QAAnB,EAA6B;AAC3B;AACA,aAAO;AACLE,QAAAA,KAAK,EAAEJ,OAAO,CAACK,MAAR,GAAiBF,gBADnB;AAELE,QAAAA,MAAM,EAAEL,OAAO,CAACK;AAFX,OAAP;AAID,KATkB,CAWnB;;;AACA,WAAO;AACLD,MAAAA,KAAK,EAAEJ,OAAO,CAACI,KADV;AAELC,MAAAA,MAAM,EAAEL,OAAO,CAACI,KAAR,GAAgBD;AAFnB,KAAP;AAID,GAlBiF,CAoBlF;;;AACA,SAAO;AACLC,IAAAA,KAAK,EAAEJ,OAAO,CAACI,KADV;AAELC,IAAAA,MAAM,EAAEL,OAAO,CAACK;AAFX,GAAP;AAID,CAzBD,C,CA2BA;AACA;AACA;;;;;AACA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,qBAAD,EAAwBC,kBAAxB,EAA4CC,YAA5C;AAAA,SAA8DD,kBAAkB,GAAGD,qBAAtB,GAA+CE,YAA5G;AAAA,CAAjB;;AAEA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACX,UAAD,EAAaC,OAAb,EAAsBW,KAAtB;AAAA,yCACvBA,KADuB;AAE1BP,IAAAA,KAAK,EAAEE,QAAQ,CAACP,UAAU,CAACK,KAAZ,EAAmBJ,OAAO,CAACI,KAA3B,EAAkCO,KAAK,CAACP,KAAxC,CAFW;AAG1BC,IAAAA,MAAM,EAAEC,QAAQ,CAACP,UAAU,CAACM,MAAZ,EAAoBL,OAAO,CAACK,MAA5B,EAAoCM,KAAK,CAACN,MAA1C,CAHU;AAI1BO,IAAAA,CAAC,EAAEN,QAAQ,CAACP,UAAU,CAACK,KAAZ,EAAmBJ,OAAO,CAACI,KAA3B,EAAkCO,KAAK,CAACC,CAAxC,CAJe;AAK1BC,IAAAA,CAAC,EAAEP,QAAQ,CAACP,UAAU,CAACM,MAAZ,EAAoBL,OAAO,CAACK,MAA5B,EAAoCM,KAAK,CAACE,CAA1C;AALe;AAAA,CAA5B;;;;AAQA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACf,UAAD,EAAaC,OAAb,EAAsBW,KAAtB;AAAA,yCACpBA,KADoB;AAEvBI,IAAAA,MAAM,EAAEJ,KAAK,CAACI,MAAN,CAAaC,GAAb,CAAiB,UAAAC,KAAK;AAAA,aAAK;AACjCL,QAAAA,CAAC,EAAEN,QAAQ,CAACP,UAAU,CAACK,KAAZ,EAAmBJ,OAAO,CAACI,KAA3B,EAAkCa,KAAK,CAACL,CAAxC,CADsB;AAEjCC,QAAAA,CAAC,EAAEP,QAAQ,CAACP,UAAU,CAACM,MAAZ,EAAoBL,OAAO,CAACK,MAA5B,EAAoCY,KAAK,CAACJ,CAA1C;AAFsB,OAAL;AAAA,KAAtB;AAFe;AAAA,CAAzB,C,CAQA;AACA;AACA;;;;;AACA,IAAMK,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACnB,UAAD,EAAaC,OAAb,EAAsBmB,MAAtB,EAAiC;AACxD,SAAOA,MAAM,CAACH,GAAP,CAAW,UAAAL,KAAK,EAAI;AACzB,QAAIA,KAAK,CAACS,KAAN,KAAgB,YAApB,EAAkC;AAChC,aAAOV,mBAAmB,CAACX,UAAD,EAAaC,OAAb,EAAsBW,KAAtB,CAA1B;AACD;;AAED,QAAIA,KAAK,CAACS,KAAN,KAAgB,UAApB,EAAgC;AAC9B,aAAON,gBAAgB,CAACf,UAAD,EAAaC,OAAb,EAAsBW,KAAtB,CAAvB;AACD;AACF,GARM,CAAP;AASD,CAVD,C,CAYA;AACA;AACA;AACA;AACA;AACA;;;;;AACA,IAAMU,YAAY,GAAG,SAAfA,YAAe,CAACC,SAAD,EAAe;AAClCA,EAAAA,SAAS,GAAGA,SAAS,IAAI,EAAzB;AACA,MAAMC,WAAW,GAAG,EAApB;AACA,MAAMC,UAAU,GAAGC,MAAM,CAACC,IAAP,CAAYJ,SAAZ,CAAnB;AAEA,SAAOE,UAAU,CAACG,MAAX,GACHH,UAAU,CAACI,MAAX,CAAkB,UAACC,GAAD,EAAMC,eAAN;AAAA,WAChBD,GAAG,CAACE,MAAJ,CACET,SAAS,CAACQ,eAAD,CAAT,GACIR,SAAS,CAACQ,eAAD,CAAT,CAA2Bd,GAA3B,CAA+B,UAACL,KAAD,EAAQqB,KAAR;AAAA,6CAC5BrB,KAD4B;AAE/BS,QAAAA,KAAK,EAAEU,eAFwB;AAG/BE,QAAAA,KAAK,EAAErB,KAAK,CAACqB,KAAN,IAAeH,GAAG,CAACF,MAAJ,GAAaK;AAHJ;AAAA,KAA/B,CADJ,GAMI,EAPN,CADgB;AAAA,GAAlB,EASAT,WATA,CADG,GAWHA,WAXJ;AAYD,CAjBD,C,CAmBA;AACA;AACA;AACA;AACA;;;;;AACA,IAAMU,WAAW,GAAG,SAAdA,WAAc,CAACV,WAAD,EAAiB;AACnCA,EAAAA,WAAW,GAAGA,WAAW,IAAI,EAA7B;AACA,MAAMD,SAAS,GAAG;AAChBY,IAAAA,UAAU,EAAE,EADI;AAEhBC,IAAAA,QAAQ,EAAE;AAFM,GAAlB;;AAKA,MAAIZ,WAAW,CAACI,MAAhB,EAAwB;AACtB,WAAOJ,WAAW,CAACK,MAAZ,CAAmB,UAACC,GAAD,QAAmC;AAAA,UAA3BT,KAA2B,QAA3BA,KAA2B;AAAA,UAAjBgB,UAAiB;AAC3DP,MAAAA,GAAG,CAACT,KAAD,CAAH,iDAAkBS,GAAG,CAACT,KAAD,CAAH,IAAc,EAAhC,IAAqCgB,UAArC;AACA,aAAOP,GAAP;AACD,KAHM,EAGJP,SAHI,CAAP;AAID;;AAED,SAAO,2BAAUA,SAAV,CAAP;AACD,CAfD","sourcesContent":["import cloneDeep from 'lodash/cloneDeep';\n\nconst updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {\n  // if we want to keep image aspect ratio\n  if (keepAspectRatio) {\n    const imageAspectRatio = initialDim.width / initialDim.height;\n\n    if (resizeType === 'height') {\n      // if we want to change image height => we update the width accordingly\n      return {\n        width: nextDim.height * imageAspectRatio,\n        height: nextDim.height\n      }\n    }\n\n    // if we want to change image width => we update the height accordingly\n    return {\n      width: nextDim.width,\n      height: nextDim.width / imageAspectRatio\n    }\n  }\n\n  // if we don't want to keep aspect ratio, we just update both values\n  return {\n    width: nextDim.width,\n    height: nextDim.height\n  }\n};\n\n// referenceInitialValue = the initial value of the Stage\n// referenceNextValue = the next value of the Stage\n// currentValue = the value that has to be re-sized influenced by the changes that were made on the Stage\nconst getDelta = (referenceInitialValue, referenceNextValue, currentValue) => (referenceNextValue / referenceInitialValue) * currentValue;\n\nconst getUpdatedRectangle = (initialDim, nextDim, shape) => ({\n  ...shape,\n  width: getDelta(initialDim.width, nextDim.width, shape.width),\n  height: getDelta(initialDim.height, nextDim.height, shape.height),\n  x: getDelta(initialDim.width, nextDim.width, shape.x),\n  y: getDelta(initialDim.height, nextDim.height, shape.y),\n});\n\nconst getUpdatedPlygon = (initialDim, nextDim, shape) => ({\n  ...shape,\n  points: shape.points.map(point => ({\n    x: getDelta(initialDim.width, nextDim.width, point.x),\n    y: getDelta(initialDim.height, nextDim.height, point.y),\n  }))\n});\n\n// initialDim = the initial dimensions: { width, height } of the Stage\n// nextDim = the next dimensions: { width, height } of the Stage\n// shapes = array of shapes that have to be re-sized and re-positioned\nconst getUpdatedShapes = (initialDim, nextDim, shapes) => {\n  return shapes.map(shape => {\n    if (shape.group === 'rectangles') {\n      return getUpdatedRectangle(initialDim, nextDim, shape);\n    }\n\n    if (shape.group === 'polygons') {\n      return getUpdatedPlygon(initialDim, nextDim, shape);\n    }\n  });\n};\n\n// converts shapes map to shapes array\n// example:\n// from: { rectangles: [r1], polygons: [p1, p2]}\n// to: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]\n// if a shape has index defined, keep it, otherwise initialize it\n// index is used for the UNDO function\nconst getAllShapes = (shapesMap) => {\n  shapesMap = shapesMap || {};\n  const shapesArray = [];\n  const shapesKeys = Object.keys(shapesMap);\n\n  return shapesKeys.length\n    ? shapesKeys.reduce((acc, currentShapeKey) =>\n        acc.concat(\n          shapesMap[currentShapeKey]\n            ? shapesMap[currentShapeKey].map((shape, index) => ({\n              ...shape,\n              group: currentShapeKey,\n              index: shape.index || acc.length + index\n            }))\n            : []),\n      shapesArray)\n    : shapesArray;\n};\n\n// converts shapes array to shapes map\n// is the reverse of getAllShapes function\n// example:\n// from: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]\n// to: { rectangles: [r1], polygons: [p1, p2]}\nconst groupShapes = (shapesArray) => {\n  shapesArray = shapesArray || [];\n  const shapesMap = {\n    rectangles: [],\n    polygons: []\n  };\n\n  if (shapesArray.length) {\n    return shapesArray.reduce((acc, { group, ...shapeProps }) => {\n      acc[group] = [...(acc[group] || []), shapeProps];\n      return acc;\n    }, shapesMap);\n  }\n\n  return cloneDeep(shapesMap);\n};\n\n\nexport { updateImageDimensions, getUpdatedShapes, getAllShapes, groupShapes, getUpdatedRectangle, getUpdatedPlygon };\n"],"file":"utils.js"}
+{"version":3,"sources":["../src/utils.js"],"names":["updateImageDimensions","initialDim","nextDim","keepAspectRatio","resizeType","imageAspectRatio","width","height","getDelta","referenceInitialValue","referenceNextValue","currentValue","getUpdatedRectangle","shape","x","y","getUpdatedPlygon","points","map","point","getUpdatedShapes","shapes","group","getAllShapes","shapesMap","shapesArray","shapesKeys","Object","keys","length","reduce","acc","currentShapeKey","concat","index","groupShapes","rectangles","polygons","shapeProps","generateValidationMessage","config","minShapes","maxShapes","maxSelections","shapesMessage","selectionsMessage","message"],"mappings":"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","sourcesContent":["import cloneDeep from 'lodash/cloneDeep';\n\nconst updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {\n  // if we want to keep image aspect ratio\n  if (keepAspectRatio) {\n    const imageAspectRatio = initialDim.width / initialDim.height;\n\n    if (resizeType === 'height') {\n      // if we want to change image height => we update the width accordingly\n      return {\n        width: nextDim.height * imageAspectRatio,\n        height: nextDim.height\n      }\n    }\n\n    // if we want to change image width => we update the height accordingly\n    return {\n      width: nextDim.width,\n      height: nextDim.width / imageAspectRatio\n    }\n  }\n\n  // if we don't want to keep aspect ratio, we just update both values\n  return {\n    width: nextDim.width,\n    height: nextDim.height\n  }\n};\n\n// referenceInitialValue = the initial value of the Stage\n// referenceNextValue = the next value of the Stage\n// currentValue = the value that has to be re-sized influenced by the changes that were made on the Stage\nconst getDelta = (referenceInitialValue, referenceNextValue, currentValue) => (referenceNextValue / referenceInitialValue) * currentValue;\n\nconst getUpdatedRectangle = (initialDim, nextDim, shape) => ({\n  ...shape,\n  width: getDelta(initialDim.width, nextDim.width, shape.width),\n  height: getDelta(initialDim.height, nextDim.height, shape.height),\n  x: getDelta(initialDim.width, nextDim.width, shape.x),\n  y: getDelta(initialDim.height, nextDim.height, shape.y),\n});\n\nconst getUpdatedPlygon = (initialDim, nextDim, shape) => ({\n  ...shape,\n  points: shape.points.map(point => ({\n    x: getDelta(initialDim.width, nextDim.width, point.x),\n    y: getDelta(initialDim.height, nextDim.height, point.y),\n  }))\n});\n\n// initialDim = the initial dimensions: { width, height } of the Stage\n// nextDim = the next dimensions: { width, height } of the Stage\n// shapes = array of shapes that have to be re-sized and re-positioned\nconst getUpdatedShapes = (initialDim, nextDim, shapes) => {\n  return shapes.map(shape => {\n    if (shape.group === 'rectangles') {\n      return getUpdatedRectangle(initialDim, nextDim, shape);\n    }\n\n    if (shape.group === 'polygons') {\n      return getUpdatedPlygon(initialDim, nextDim, shape);\n    }\n  });\n};\n\n// converts shapes map to shapes array\n// example:\n// from: { rectangles: [r1], polygons: [p1, p2]}\n// to: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]\n// if a shape has index defined, keep it, otherwise initialize it\n// index is used for the UNDO function\nconst getAllShapes = (shapesMap) => {\n  shapesMap = shapesMap || {};\n  const shapesArray = [];\n  const shapesKeys = Object.keys(shapesMap);\n\n  return shapesKeys.length\n    ? shapesKeys.reduce((acc, currentShapeKey) =>\n        acc.concat(\n          shapesMap[currentShapeKey]\n            ? shapesMap[currentShapeKey].map((shape, index) => ({\n              ...shape,\n              group: currentShapeKey,\n              index: shape.index || acc.length + index\n            }))\n            : []),\n      shapesArray)\n    : shapesArray;\n};\n\n// converts shapes array to shapes map\n// is the reverse of getAllShapes function\n// example:\n// from: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]\n// to: { rectangles: [r1], polygons: [p1, p2]}\nconst groupShapes = (shapesArray) => {\n  shapesArray = shapesArray || [];\n  const shapesMap = {\n    rectangles: [],\n    polygons: []\n  };\n\n  if (shapesArray.length) {\n    return shapesArray.reduce((acc, { group, ...shapeProps }) => {\n      acc[group] = [...(acc[group] || []), shapeProps];\n      return acc;\n    }, shapesMap);\n  }\n\n  return cloneDeep(shapesMap);\n};\n\nconst generateValidationMessage = config => {\n  const { minShapes, maxShapes, maxSelections } = config;\n\n  const shapesMessage = `\\nThere should be at least ${minShapes} ` +\n    (maxShapes ? `and at most ${maxShapes} ` : '') + 'shapes defined.';\n\n  const selectionsMessage = `\\nThere should be at least 1 ` +\n    (maxSelections ? `and at most ${maxSelections} ` : '') + 'shape' +\n    (maxSelections ? 's' : '') +  ' selected.';\n\n  const message = 'Validation requirements:' + shapesMessage + selectionsMessage;\n\n  return message;\n};\n\nexport {\n  updateImageDimensions,\n  generateValidationMessage,\n  getUpdatedShapes,\n  getAllShapes,\n  groupShapes,\n  getUpdatedRectangle,\n  getUpdatedPlygon\n};\n"],"file":"utils.js"}

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "4.4.23",
+  "version": "4.6.15",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -10,8 +10,8 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@pie-framework/pie-configure-events": "^1.2.0",
-    "@pie-lib/config-ui": "^10.9.2",
-    "@pie-lib/editable-html": "^7.16.19",
+    "@pie-lib/config-ui": "^10.13.3",
+    "@pie-lib/editable-html": "^7.22.6",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "konva": "^3.2.4",

package/configure/src/__tests__/__snapshots__/hotspot-container.test.js.snap

@@ -8,6 +8,7 @@ exports[`HotspotContainer render renders 1`] = `
     onDragLeave={[Function]}
     onDragOver={[Function]}
     onDrop={[Function]}
+    onPaste={[Function]}
   >
     <div>
       <WithStyles(UploadControl)

package/configure/src/__tests__/__snapshots__/root.test.js.snap

@@ -7,6 +7,17 @@ exports[`Root render renders 1`] = `
       <Panel
         configuration={
           Object {
+            "maxImageHeight": Object {
+              "prompt": 300,
+              "rationale": 300,
+              "teacherInstructions": 300,
+            },
+            "maxImageWidth": Object {
+              "prompt": 300,
+              "rationale": 300,
+              "teacherInstructions": 300,
+            },
+            "minShapes": 2,
             "multipleCorrect": Object {
               "label": "Multiple Correct Responses",
               "settings": true,
@@ -28,6 +39,11 @@ exports[`Root render renders 1`] = `
               "label": "Rationale",
               "settings": true,
             },
+            "spellCheck": Object {
+              "enabled": true,
+              "label": "Spellcheck",
+              "settings": false,
+            },
             "teacherInstructions": Object {
               "label": "Teacher Instructions",
               "settings": true,
@@ -38,6 +54,7 @@ exports[`Root render renders 1`] = `
           Object {
             "Properties": Object {
               "rationaleEnabled": undefined,
+              "spellCheckEnabled": false,
               "teacherInstructionsEnabled": undefined,
             },
             "Settings": Object {
@@ -170,11 +187,38 @@ exports[`Root render renders 1`] = `
     }
   >
     <div>
-      <WithStyles(Typography)
-        variant="subheading"
+      <div
+        className=""
       >
-        Define Hotspot
-      </WithStyles(Typography)>
+        <WithStyles(Typography)
+          variant="subheading"
+        >
+          Define Hotspot
+        </WithStyles(Typography)>
+        <WithStyles(Tooltip)
+          classes={
+            Object {
+              "tooltip": undefined,
+            }
+          }
+          disableFocusListener={true}
+          disableTouchListener={true}
+          placement="left"
+          title="Validation requirements:
+There should be at least 2 shapes defined.
+There should be at least 1 shape selected."
+        >
+          <pure(InfoIcon)
+            color="primary"
+            fontSize="small"
+            style={
+              Object {
+                "float": "right",
+              }
+            }
+          />
+        </WithStyles(Tooltip)>
+      </div>
       <WithStyles(Palette)
         hotspotColor="rgba(137, 183, 244, 0.65)"
         hotspotList={

package/configure/src/defaults.js

@@ -1,6 +1,7 @@
 export default {
   model: {
     prompt: 'This is the question prompt',
+    toolbarEditorPosition: 'bottom',
     promptEnabled: true,
     imageUrl: '',
     shapes: {
@@ -43,6 +44,11 @@ export default {
       settings: true,
       label: 'Prompt'
     },
+    spellCheck: {
+      label: 'Spellcheck',
+      settings:false,
+      enabled:true
+    },
     teacherInstructions: {
       settings: true,
       label: 'Teacher Instructions'
@@ -51,6 +57,17 @@ export default {
       settings: false,
       enabled: true,
       label: 'Preserve aspect ratio'
+    },
+    minShapes: 2,
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
     }
   }
 };

package/configure/src/hotspot-container.jsx

@@ -49,6 +49,14 @@ export class Container extends Component {
   enableDropzone = () => this.setState({ dropzoneActive: true });
   disableDropzone = () => this.setState({ dropzoneActive: false });
 
+  handleOnPaste = (e) => {
+    const { files } = e.clipboardData;
+
+    if (files && isImage(files[0])) {
+      this.handleFileRead(files[0]);
+    }
+  };
+
   handleOnDrop = (e) => {
     e.preventDefault();
 
@@ -139,7 +147,8 @@ export class Container extends Component {
                onDragExit: this.handleOnDragExit,
                onDragLeave: this.handleOnDragExit,
                onDragOver: this.handleOnDragOver,
-               onDrop: this.handleOnDrop
+               onDrop: this.handleOnDrop,
+               onPaste: this.handleOnPaste
              } : {}}
         >
           <div className={classes.toolbar}>

package/configure/src/hotspot-drawable.jsx

@@ -9,6 +9,8 @@ import Rectangle from './hotspot-rectangle';
 import Polygon from './hotspot-polygon';
 import { updateImageDimensions, getUpdatedShapes } from './utils';
 
+const IMAGE_MAX_WIDTH = 800;
+
 export class Drawable extends React.Component {
   static getDerivedStateFromProps(nextProps, prevState) {
     let dimensions = nextProps.dimensions;
@@ -153,8 +155,12 @@ export class Drawable extends React.Component {
     const elementStyle = getComputedStyle(target);
     const newHeight = parseFloat(elementStyle.height);
     const newWidth = parseFloat(elementStyle.width);
+    const aspectWidth = newWidth / IMAGE_MAX_WIDTH;
 
-    const dimensions = {
+    const dimensions = newWidth > IMAGE_MAX_WIDTH ? {
+      height: newHeight / aspectWidth,
+      width: IMAGE_MAX_WIDTH
+    } : {
       height: newHeight,
       width: newWidth
     };
@@ -209,7 +215,7 @@ export class Drawable extends React.Component {
     const resizeValid = this.checkIfResizeValid(width, height);
     const hasMinimumWidth = width > 150 && height > 150;
 
-    if (resizeValid && hasMinimumWidth) {
+    if (resizeValid && hasMinimumWidth && box) {
       box.style.width = `${width}px`;
       box.style.height = `${height}px`;
 

package/configure/src/root.jsx

@@ -7,12 +7,20 @@ import {
 } from '@pie-lib/config-ui';
 import PropTypes from 'prop-types';
 import EditableHtml from '@pie-lib/editable-html';
-import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
-
+import Typography from '@material-ui/core/Typography';
+import Info from '@material-ui/icons/Info';
+import Tooltip from '@material-ui/core/Tooltip';
 import HotspotPalette from './hotspot-palette';
 import HotspotContainer from './hotspot-container';
-import { updateImageDimensions, getUpdatedShapes, getAllShapes, groupShapes } from './utils';
+import classNames from 'classnames';
+import {
+  updateImageDimensions,
+  generateValidationMessage,
+  getUpdatedShapes,
+  getAllShapes,
+  groupShapes
+} from './utils';
 
 const { Panel, toggle } = settings;
 
@@ -72,9 +80,28 @@ export class Root extends React.Component {
       prompt = {},
       teacherInstructions = {},
       rationale = {},
-      preserveAspectRatio = {}
+      spellCheck = {},
+      preserveAspectRatio = {},
+      maxImageWidth = {},
+      maxImageHeight = {}
     } = configuration || {};
-    const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled } = model || {};
+    const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled, spellCheckEnabled, errors } = model || {};
+    const { shapesError, selectionsError } = errors || {};
+    const toolbarOpts = {};
+
+    const validationMessage = generateValidationMessage(configuration);
+
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+
+    switch (model.toolbarEditorPosition) {
+      case 'top':
+        toolbarOpts.position = 'top';
+        break;
+      default:
+        toolbarOpts.position = 'bottom';
+        break;
+    }
 
     return (
       <div className={classes.base}>
@@ -97,7 +124,9 @@ export class Root extends React.Component {
                 Properties: {
                   teacherInstructionsEnabled:
                     teacherInstructions.settings && toggle(teacherInstructions.label),
-                  rationaleEnabled: rationale.settings && toggle(rationale.label)
+                  rationaleEnabled: rationale.settings && toggle(rationale.label),
+                  spellCheckEnabled:
+                    spellCheck.settings && toggle(spellCheck.label),
                 }
               }}
             />
@@ -111,6 +140,10 @@ export class Root extends React.Component {
                   onChange={onTeacherInstructionsChanged}
                   imageSupport={imageSupport}
                   nonEmpty={false}
+                  toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheckEnabled}
+                  maxImageWidth={maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth}
+                  maxImageHeight={maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight}
                 />
               </InputContainer>
             )}
@@ -121,6 +154,10 @@ export class Root extends React.Component {
                   onChange={onPromptChanged}
                   imageSupport={imageSupport}
                   nonEmpty={false}
+                  toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheckEnabled}
+                  maxImageWidth={defaultImageMaxWidth}
+                  maxImageHeight={defaultImageMaxHeight}
                 />
               </InputContainer>
             )}
@@ -134,13 +171,30 @@ export class Root extends React.Component {
                   markup={model.rationale || ''}
                   onChange={onRationaleChanged}
                   imageSupport={imageSupport}
+                  toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheckEnabled}
+                  maxImageWidth={maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth}
+                  maxImageHeight={maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight}
                 />
               </InputContainer>
             )}
 
-            <Typography className={classes.label} variant="subheading">
-              Define Hotspot
-            </Typography>
+            <div className={classNames(classes.label, classes.flexContainer)}>
+              <Typography className={classes.subheading} variant="subheading">
+                Define Hotspot
+              </Typography>
+              <Tooltip
+                classes={{ tooltip: classes.tooltip }}
+                disableFocusListener
+                disableTouchListener
+                placement={'left'}
+                title={validationMessage}
+              >
+                <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }}/>
+              </Tooltip>
+            </div>
+            {shapesError && <div className={classes.errorText}>{shapesError}</div>}
+            {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}
 
             <HotspotPalette
               hotspotColor={model.hotspotColor}
@@ -226,12 +280,29 @@ const styles = theme => ({
     paddingTop: theme.spacing.unit * 2,
     width: '100%'
   },
+  subheading: {
+    marginRight: '5px'
+  },
   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: 'red',
+    padding: '5px 0'
   }
 });
 

package/configure/src/utils.js

@@ -110,5 +110,27 @@ const groupShapes = (shapesArray) => {
   return cloneDeep(shapesMap);
 };
 
+const generateValidationMessage = config => {
+  const { minShapes, maxShapes, maxSelections } = config;
 
-export { updateImageDimensions, getUpdatedShapes, getAllShapes, groupShapes, getUpdatedRectangle, getUpdatedPlygon };
+  const shapesMessage = `\nThere should be at least ${minShapes} ` +
+    (maxShapes ? `and at most ${maxShapes} ` : '') + 'shapes defined.';
+
+  const selectionsMessage = `\nThere should be at least 1 ` +
+    (maxSelections ? `and at most ${maxSelections} ` : '') + 'shape' +
+    (maxSelections ? 's' : '') +  ' selected.';
+
+  const message = 'Validation requirements:' + shapesMessage + selectionsMessage;
+
+  return message;
+};
+
+export {
+  updateImageDimensions,
+  generateValidationMessage,
+  getUpdatedShapes,
+  getAllShapes,
+  groupShapes,
+  getUpdatedRectangle,
+  getUpdatedPlygon
+};

package/controller/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.4.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@3.4.3...@pie-element/hotspot-controller@3.4.5) (2021-11-11)
+
+**Note:** Version bump only for package @pie-element/hotspot-controller
+
+
+
+
+
+## [3.4.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@3.4.3...@pie-element/hotspot-controller@3.4.4) (2021-11-11)
+
+**Note:** Version bump only for package @pie-element/hotspot-controller
+
+
+
+
+
+## [3.4.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@3.4.1...@pie-element/hotspot-controller@3.4.3) (2021-08-05)
+
+
+### Bug Fixes
+
+* force bump ([5ea7295](https://github.com/pie-framework/pie-elements/commit/5ea7295e4755fbc492a76e7ec69e5fc35b196919))
+
+
+
+
+
 ## [3.4.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@3.4.0...@pie-element/hotspot-controller@3.4.1) (2021-06-29)