@pie-element/hotspot 5.5.2-next.31 → 5.5.2-next.83

package/configure/lib/defaults.js

@@ -46,6 +46,7 @@ var _default = {
       settings: true,
       label: 'Prompt'
     },
+    settingsPanelDisabled: false,
     spellCheck: {
       label: 'Spellcheck',
       settings: false,

package/configure/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["model","prompt","toolbarEditorPosition","promptEnabled","imageUrl","shapes","rectangles","polygons","multipleCorrect","partialScoring","dimensions","height","width","hotspotColor","hotspotList","outlineColor","outlineList","rationaleEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","strokeWidth","configuration","settings","label","rationale","spellCheck","enabled","teacherInstructions","preserveAspectRatio","minShapes","maxImageWidth","maxImageHeight","withRubric"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,6BADH;AAELC,IAAAA,qBAAqB,EAAE,QAFlB;AAGLC,IAAAA,aAAa,EAAE,IAHV;AAILC,IAAAA,QAAQ,EAAE,EAJL;AAKLC,IAAAA,MAAM,EAAE;AACNC,MAAAA,UAAU,EAAE,EADN;AAENC,MAAAA,QAAQ,EAAE;AAFJ,KALH;AASLC,IAAAA,eAAe,EAAE,IATZ;AAULC,IAAAA,cAAc,EAAE,KAVX;AAWLC,IAAAA,UAAU,EAAE;AACVC,MAAAA,MAAM,EAAE,CADE;AAEVC,MAAAA,KAAK,EAAE;AAFG,KAXP;AAeLC,IAAAA,YAAY,EAAE,2BAfT;AAgBLC,IAAAA,WAAW,EAAE,CAAC,2BAAD,CAhBR;AAiBLC,IAAAA,YAAY,EAAE,MAjBT;AAkBLC,IAAAA,WAAW,EAAE,CAAC,MAAD,CAlBR;AAmBLC,IAAAA,gBAAgB,EAAE,IAnBb;AAoBLC,IAAAA,0BAA0B,EAAE,IApBvB;AAqBLC,IAAAA,0BAA0B,EAAE,IArBvB;AAsBLC,IAAAA,WAAW,EAAE;AAtBR,GADM;AAyBbC,EAAAA,aAAa,EAAE;AACbb,IAAAA,eAAe,EAAE;AACfc,MAAAA,QAAQ,EAAE,IADK;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KADJ;AAKbd,IAAAA,cAAc,EAAE;AACda,MAAAA,QAAQ,EAAE,KADI;AAEdC,MAAAA,KAAK,EAAE;AAFO,KALH;AASbC,IAAAA,SAAS,EAAE;AACTF,MAAAA,QAAQ,EAAE,IADD;AAETC,MAAAA,KAAK,EAAE;AAFE,KATE;AAabtB,IAAAA,MAAM,EAAE;AACNqB,MAAAA,QAAQ,EAAE,IADJ;AAENC,MAAAA,KAAK,EAAE;AAFD,KAbK;AAiBbE,IAAAA,UAAU,EAAE;AACVF,MAAAA,KAAK,EAAE,YADG;AAEVD,MAAAA,QAAQ,EAAE,KAFA;AAGVI,MAAAA,OAAO,EAAE;AAHC,KAjBC;AAsBbC,IAAAA,mBAAmB,EAAE;AACnBL,MAAAA,QAAQ,EAAE,IADS;AAEnBC,MAAAA,KAAK,EAAE;AAFY,KAtBR;AA0BbK,IAAAA,mBAAmB,EAAE;AACnBN,MAAAA,QAAQ,EAAE,KADS;AAEnBI,MAAAA,OAAO,EAAE,IAFU;AAGnBH,MAAAA,KAAK,EAAE;AAHY,KA1BR;AA+BbM,IAAAA,SAAS,EAAE,CA/BE;AAgCbC,IAAAA,aAAa,EAAE;AACbH,MAAAA,mBAAmB,EAAE,GADR;AAEb1B,MAAAA,MAAM,EAAE,GAFK;AAGbuB,MAAAA,SAAS,EAAE;AAHE,KAhCF;AAqCbO,IAAAA,cAAc,EAAE;AACdJ,MAAAA,mBAAmB,EAAE,GADP;AAEd1B,MAAAA,MAAM,EAAE,GAFM;AAGduB,MAAAA,SAAS,EAAE;AAHG,KArCH;AA0CbQ,IAAAA,UAAU,EAAE;AACVV,MAAAA,QAAQ,EAAE,KADA;AAEVC,MAAAA,KAAK,EAAE;AAFG;AA1CC;AAzBF,C","sourcesContent":["export default {\n  model: {\n    prompt: 'This is the question prompt',\n    toolbarEditorPosition: 'bottom',\n    promptEnabled: true,\n    imageUrl: '',\n    shapes: {\n      rectangles: [],\n      polygons: [],\n    },\n    multipleCorrect: true,\n    partialScoring: false,\n    dimensions: {\n      height: 0,\n      width: 0,\n    },\n    hotspotColor: 'rgba(137, 183, 244, 0.65)',\n    hotspotList: ['rgba(137, 183, 244, 0.65)'],\n    outlineColor: 'blue',\n    outlineList: ['blue'],\n    rationaleEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true,\n    strokeWidth: 5,\n  },\n  configuration: {\n    multipleCorrect: {\n      settings: true,\n      label: 'Multiple Correct Responses',\n    },\n    partialScoring: {\n      settings: false,\n      label: 'Allow Partial Scoring',\n    },\n    rationale: {\n      settings: true,\n      label: 'Rationale',\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt',\n    },\n    spellCheck: {\n      label: 'Spellcheck',\n      settings: false,\n      enabled: true,\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n    },\n    preserveAspectRatio: {\n      settings: false,\n      enabled: true,\n      label: 'Preserve aspect ratio',\n    },\n    minShapes: 2,\n    maxImageWidth: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    withRubric: {\n      settings: false,\n      label: 'Add Rubric',\n    },\n  },\n};\n"],"file":"defaults.js"}
+{"version":3,"sources":["../src/defaults.js"],"names":["model","prompt","toolbarEditorPosition","promptEnabled","imageUrl","shapes","rectangles","polygons","multipleCorrect","partialScoring","dimensions","height","width","hotspotColor","hotspotList","outlineColor","outlineList","rationaleEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","strokeWidth","configuration","settings","label","rationale","settingsPanelDisabled","spellCheck","enabled","teacherInstructions","preserveAspectRatio","minShapes","maxImageWidth","maxImageHeight","withRubric"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,6BADH;AAELC,IAAAA,qBAAqB,EAAE,QAFlB;AAGLC,IAAAA,aAAa,EAAE,IAHV;AAILC,IAAAA,QAAQ,EAAE,EAJL;AAKLC,IAAAA,MAAM,EAAE;AACNC,MAAAA,UAAU,EAAE,EADN;AAENC,MAAAA,QAAQ,EAAE;AAFJ,KALH;AASLC,IAAAA,eAAe,EAAE,IATZ;AAULC,IAAAA,cAAc,EAAE,KAVX;AAWLC,IAAAA,UAAU,EAAE;AACVC,MAAAA,MAAM,EAAE,CADE;AAEVC,MAAAA,KAAK,EAAE;AAFG,KAXP;AAeLC,IAAAA,YAAY,EAAE,2BAfT;AAgBLC,IAAAA,WAAW,EAAE,CAAC,2BAAD,CAhBR;AAiBLC,IAAAA,YAAY,EAAE,MAjBT;AAkBLC,IAAAA,WAAW,EAAE,CAAC,MAAD,CAlBR;AAmBLC,IAAAA,gBAAgB,EAAE,IAnBb;AAoBLC,IAAAA,0BAA0B,EAAE,IApBvB;AAqBLC,IAAAA,0BAA0B,EAAE,IArBvB;AAsBLC,IAAAA,WAAW,EAAE;AAtBR,GADM;AAyBbC,EAAAA,aAAa,EAAE;AACbb,IAAAA,eAAe,EAAE;AACfc,MAAAA,QAAQ,EAAE,IADK;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KADJ;AAKbd,IAAAA,cAAc,EAAE;AACda,MAAAA,QAAQ,EAAE,KADI;AAEdC,MAAAA,KAAK,EAAE;AAFO,KALH;AASbC,IAAAA,SAAS,EAAE;AACTF,MAAAA,QAAQ,EAAE,IADD;AAETC,MAAAA,KAAK,EAAE;AAFE,KATE;AAabtB,IAAAA,MAAM,EAAE;AACNqB,MAAAA,QAAQ,EAAE,IADJ;AAENC,MAAAA,KAAK,EAAE;AAFD,KAbK;AAiBbE,IAAAA,qBAAqB,EAAE,KAjBV;AAkBbC,IAAAA,UAAU,EAAE;AACVH,MAAAA,KAAK,EAAE,YADG;AAEVD,MAAAA,QAAQ,EAAE,KAFA;AAGVK,MAAAA,OAAO,EAAE;AAHC,KAlBC;AAuBbC,IAAAA,mBAAmB,EAAE;AACnBN,MAAAA,QAAQ,EAAE,IADS;AAEnBC,MAAAA,KAAK,EAAE;AAFY,KAvBR;AA2BbM,IAAAA,mBAAmB,EAAE;AACnBP,MAAAA,QAAQ,EAAE,KADS;AAEnBK,MAAAA,OAAO,EAAE,IAFU;AAGnBJ,MAAAA,KAAK,EAAE;AAHY,KA3BR;AAgCbO,IAAAA,SAAS,EAAE,CAhCE;AAiCbC,IAAAA,aAAa,EAAE;AACbH,MAAAA,mBAAmB,EAAE,GADR;AAEb3B,MAAAA,MAAM,EAAE,GAFK;AAGbuB,MAAAA,SAAS,EAAE;AAHE,KAjCF;AAsCbQ,IAAAA,cAAc,EAAE;AACdJ,MAAAA,mBAAmB,EAAE,GADP;AAEd3B,MAAAA,MAAM,EAAE,GAFM;AAGduB,MAAAA,SAAS,EAAE;AAHG,KAtCH;AA2CbS,IAAAA,UAAU,EAAE;AACVX,MAAAA,QAAQ,EAAE,KADA;AAEVC,MAAAA,KAAK,EAAE;AAFG;AA3CC;AAzBF,C","sourcesContent":["export default {\n  model: {\n    prompt: 'This is the question prompt',\n    toolbarEditorPosition: 'bottom',\n    promptEnabled: true,\n    imageUrl: '',\n    shapes: {\n      rectangles: [],\n      polygons: [],\n    },\n    multipleCorrect: true,\n    partialScoring: false,\n    dimensions: {\n      height: 0,\n      width: 0,\n    },\n    hotspotColor: 'rgba(137, 183, 244, 0.65)',\n    hotspotList: ['rgba(137, 183, 244, 0.65)'],\n    outlineColor: 'blue',\n    outlineList: ['blue'],\n    rationaleEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true,\n    strokeWidth: 5,\n  },\n  configuration: {\n    multipleCorrect: {\n      settings: true,\n      label: 'Multiple Correct Responses',\n    },\n    partialScoring: {\n      settings: false,\n      label: 'Allow Partial Scoring',\n    },\n    rationale: {\n      settings: true,\n      label: 'Rationale',\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt',\n    },\n    settingsPanelDisabled: false,\n    spellCheck: {\n      label: 'Spellcheck',\n      settings: false,\n      enabled: true,\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n    },\n    preserveAspectRatio: {\n      settings: false,\n      enabled: true,\n      label: 'Preserve aspect ratio',\n    },\n    minShapes: 2,\n    maxImageWidth: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    withRubric: {\n      settings: false,\n      label: 'Add Rubric',\n    },\n  },\n};\n"],"file":"defaults.js"}

package/configure/lib/hotspot-container.js

@@ -29,6 +29,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _index = require("@material-ui/core/styles/index");
 
 var _Help = _interopRequireDefault(require("@material-ui/icons/Help"));
@@ -188,11 +190,13 @@ var Container = /*#__PURE__*/function (_Component) {
   (0, _createClass2["default"])(Container, [{
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _classNames,
+          _this2 = this;
 
       var _this$props = this.props,
           classes = _this$props.classes,
           dimensions = _this$props.dimensions,
+          hasErrors = _this$props.hasErrors,
           hotspotColor = _this$props.hotspotColor,
           imageUrl = _this$props.imageUrl,
           multipleCorrect = _this$props.multipleCorrect,
@@ -208,7 +212,7 @@ var Container = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.base
       }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-        className: "".concat(classes.box, " ").concat(dropzoneActive ? classes.boxActive : '')
+        className: (0, _classnames["default"])(classes.box, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.boxError, hasErrors && !dropzoneActive), (0, _defineProperty2["default"])(_classNames, classes.boxActive, dropzoneActive), _classNames))
       }, dragEnabled ? {
         onDragExit: this.handleOnDragExit,
         onDragLeave: this.handleOnDragExit,
@@ -253,7 +257,7 @@ var Container = /*#__PURE__*/function (_Component) {
         strokeWidth: strokeWidth,
         preserveAspectRatioEnabled: preserveAspectRatioEnabled
       }) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(classes.drawableHeight, " ").concat(classes.centered)
+        className: (0, _classnames["default"])(classes.drawableHeight, classes.centered)
       }, /*#__PURE__*/_react["default"].createElement("label", null, "Drag and drop or upload image from computer"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_uploadControl["default"], {
         label: "Upload Image",
         onInputClick: this.handleInputClick,
@@ -299,6 +303,9 @@ var styles = function styles(theme) {
     boxActive: {
       border: '1px solid #0032C2'
     },
+    boxError: {
+      border: '1px solid red'
+    },
     centered: {
       alignItems: 'center',
       display: 'flex',
@@ -307,8 +314,8 @@ var styles = function styles(theme) {
     },
     drawableHeight: {
       minHeight: 350,
-      paddingBottom: '40px',
-      paddingRight: '40px'
+      paddingBottom: theme.spacing.unit * 5,
+      paddingRight: theme.spacing.unit * 5
     },
     icon: {
       '&:hover': {
@@ -330,21 +337,21 @@ var styles = function styles(theme) {
       borderTopRightRadius: '5px',
       display: 'flex',
       justifyContent: 'flex-end',
-      padding: '12px 8px'
+      padding: theme.spacing.unit
     },
     tooltip: {
       position: 'relative',
       textAlign: 'right',
-      padding: '5px 9px'
+      padding: theme.spacing.unit
     },
     tooltipContent: {
       background: '#333131',
       borderRadius: '4px',
       color: '#FFFFFF',
-      fontSize: '14px',
+      fontSize: theme.typography.fontSize,
       lineHeight: '18px',
-      marginTop: '-70px',
-      padding: '7px 16px',
+      marginTop: '-60px',
+      padding: theme.spacing.unit,
       position: 'absolute',
       right: '5px',
       textAlign: 'left',
@@ -357,7 +364,7 @@ var styles = function styles(theme) {
       borderRight: '10px solid transparent',
       borderTop: '10px solid #333131',
       marginBottom: -10,
-      marginTop: '2px',
+      marginTop: '4px',
       position: 'absolute',
       right: '5px'
     }

package/configure/lib/hotspot-container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","Blob","onImageUpload","reader","FileReader","onloadend","result","readAsDataURL","e","preventDefault","handleFileRead","target","files","setState","dropzoneActive","clipboardData","dataTransfer","items","kind","getAsFile","disableDropzone","state","enableDropzone","newShapes","onUpdateShapes","shapes","length","sort","a","b","parseInt","index","slice","dragEnabled","input","click","showTooltip","classes","dimensions","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","base","box","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onPaste","handleOnPaste","toolbar","replaceButton","replaceSection","handleInputClick","handleUploadImage","ref","handleUndo","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","centered","tooltip","tooltipContent","tooltipArrow","icon","toggleTooltip","nextProps","prevState","Component","styles","theme","marginTop","spacing","unit","border","borderRadius","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","color","cursor","marginLeft","marginRight","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","position","textAlign","background","fontSize","lineHeight","right","width","height","borderLeft","borderRight","borderTop","marginBottom","propTypes","PropTypes","object","isRequired","string","bool","func","shape","rectangles","array","polygons","number","defaultProps"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport Help from '@material-ui/icons/Help';\n\nimport Drawable from './hotspot-drawable';\nimport Button from './button';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n  return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    // always transform shapes map into shapes array at this level\n    return {\n      ...prevState,\n      shapes: getAllShapes(nextProps.shapes),\n    };\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      dragEnabled: true,\n      // always transform shapes map into shapes array at this level\n      shapes: getAllShapes(props.shapes),\n    };\n  }\n\n  handleFileRead = (file) => {\n    if (file instanceof Blob) {\n      const { onImageUpload } = this.props;\n      const reader = new FileReader();\n\n      reader.onloadend = () => onImageUpload(reader.result);\n      reader.readAsDataURL(file);\n    }\n  };\n\n  handleUploadImage = (e) => {\n    e.preventDefault();\n\n    this.handleFileRead(e.target.files[0]);\n  };\n\n  enableDropzone = () => this.setState({ dropzoneActive: true });\n  disableDropzone = () => this.setState({ dropzoneActive: false });\n\n  handleOnPaste = (e) => {\n    const { files } = e.clipboardData;\n\n    if (files && isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n  };\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n    this.disableDropzone();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.enableDropzone();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n\n    this.disableDropzone();\n  };\n\n  onUpdateShapes = (newShapes) => {\n    const { onUpdateShapes } = this.props;\n\n    this.setState(\n      { shapes: newShapes },\n      // always transform shapes array back into shapes map when saving changes\n      () => onUpdateShapes(groupShapes(newShapes)),\n    );\n  };\n\n  handleUndo = () => {\n    const { shapes } = this.state;\n\n    if (shapes && shapes.length) {\n      // sort by index value\n      let newShapes = shapes.sort((a, b) => parseInt(a.index) - parseInt(b.index));\n\n      newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];\n\n      this.onUpdateShapes(newShapes);\n    }\n  };\n\n  handleClearAll = () => this.onUpdateShapes([]);\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n  handleInputClick = () => this.input.click();\n\n  toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });\n\n  render() {\n    const {\n      classes,\n      dimensions,\n      hotspotColor,\n      imageUrl,\n      multipleCorrect,\n      onUpdateImageDimension,\n      outlineColor,\n      strokeWidth,\n      preserveAspectRatioEnabled,\n    } = this.props;\n    const { dropzoneActive, dragEnabled, showTooltip } = this.state;\n    const { shapes } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}\n          {...(dragEnabled\n            ? {\n                onDragExit: this.handleOnDragExit,\n                onDragLeave: this.handleOnDragExit,\n                onDragOver: this.handleOnDragOver,\n                onDrop: this.handleOnDrop,\n                onPaste: this.handleOnPaste,\n              }\n            : {})}\n        >\n          <div className={classes.toolbar}>\n            {imageUrl && (\n              <UploadControl\n                classNameButton={classes.replaceButton}\n                classNameSection={classes.replaceSection}\n                label=\"Replace Image\"\n                onInputClick={this.handleInputClick}\n                onUploadImage={this.handleUploadImage}\n                setRef={(ref) => {\n                  this.input = ref;\n                }}\n              />\n            )}\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleUndo} label=\"Undo\" />\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label=\"Clear all\" />\n          </div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <Drawable\n                dimensions={dimensions}\n                disableDrag={this.handleDisableDrag}\n                enableDrag={this.handleEnableDrag}\n                imageUrl={imageUrl}\n                hotspotColor={hotspotColor}\n                multipleCorrect={multipleCorrect}\n                onUpdateImageDimension={onUpdateImageDimension}\n                onUpdateShapes={this.onUpdateShapes}\n                outlineColor={outlineColor}\n                shapes={shapes}\n                strokeWidth={strokeWidth}\n                preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n              />\n            ) : (\n              <div className={`${classes.drawableHeight} ${classes.centered}`}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                <UploadControl\n                  label=\"Upload Image\"\n                  onInputClick={this.handleInputClick}\n                  onUploadImage={this.handleUploadImage}\n                  setRef={(ref) => {\n                    this.input = ref;\n                  }}\n                />\n              </div>\n            )}\n          </div>\n\n          {imageUrl && (\n            <div className={classes.tooltip}>\n              {showTooltip && (\n                <div className={classes.tooltipContent}>\n                  <label>\n                    Click and drag to create a hotspot. Click the hotspot to mark correct. Click again to unmark.\n                  </label>\n                  <div className={classes.tooltipArrow} />\n                </div>\n              )}\n              <Help className={classes.icon} onMouseOut={this.toggleTooltip} onMouseOver={this.toggleTooltip} />\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n  },\n  boxActive: {\n    border: '1px solid #0032C2',\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    paddingBottom: '40px',\n    paddingRight: '40px',\n  },\n  icon: {\n    '&:hover': {\n      color: '#333131',\n      cursor: 'help',\n    },\n    color: '#C1C1C1',\n  },\n  replaceButton: {\n    marginLeft: 0,\n  },\n  replaceSection: {\n    marginRight: 'auto',\n  },\n  toolbar: {\n    backgroundColor: '#ECEDF1',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    justifyContent: 'flex-end',\n    padding: '12px 8px',\n  },\n  tooltip: {\n    position: 'relative',\n    textAlign: 'right',\n    padding: '5px 9px',\n  },\n  tooltipContent: {\n    background: '#333131',\n    borderRadius: '4px',\n    color: '#FFFFFF',\n    fontSize: '14px',\n    lineHeight: '18px',\n    marginTop: '-70px',\n    padding: '7px 16px',\n    position: 'absolute',\n    right: '5px',\n    textAlign: 'left',\n    width: '300px',\n  },\n  tooltipArrow: {\n    width: 0,\n    height: 0,\n    borderLeft: '10px solid transparent',\n    borderRight: '10px solid transparent',\n    borderTop: '10px solid #333131',\n    marginBottom: -10,\n    marginTop: '2px',\n    position: 'absolute',\n    right: '5px',\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.shape({\n    rectangles: PropTypes.array,\n    polygons: PropTypes.array,\n  }).isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n};\nContainer.defaultProps = {\n  strokeWidth: 5,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}
+{"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","Blob","onImageUpload","reader","FileReader","onloadend","result","readAsDataURL","e","preventDefault","handleFileRead","target","files","setState","dropzoneActive","clipboardData","dataTransfer","items","kind","getAsFile","disableDropzone","state","enableDropzone","newShapes","onUpdateShapes","shapes","length","sort","a","b","parseInt","index","slice","dragEnabled","input","click","showTooltip","classes","dimensions","hasErrors","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","base","box","boxError","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onPaste","handleOnPaste","toolbar","replaceButton","replaceSection","handleInputClick","handleUploadImage","ref","handleUndo","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","centered","tooltip","tooltipContent","tooltipArrow","icon","toggleTooltip","nextProps","prevState","Component","styles","theme","marginTop","spacing","unit","border","borderRadius","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","color","cursor","marginLeft","marginRight","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","position","textAlign","background","fontSize","typography","lineHeight","right","width","height","borderLeft","borderRight","borderTop","marginBottom","propTypes","PropTypes","object","isRequired","string","bool","func","shape","rectangles","array","polygons","number","defaultProps"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport Help from '@material-ui/icons/Help';\n\nimport Drawable from './hotspot-drawable';\nimport Button from './button';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n\n  return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    // always transform shapes map into shapes array at this level\n    return {\n      ...prevState,\n      shapes: getAllShapes(nextProps.shapes),\n    };\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      dragEnabled: true,\n      // always transform shapes map into shapes array at this level\n      shapes: getAllShapes(props.shapes),\n    };\n  }\n\n  handleFileRead = (file) => {\n    if (file instanceof Blob) {\n      const { onImageUpload } = this.props;\n      const reader = new FileReader();\n\n      reader.onloadend = () => onImageUpload(reader.result);\n      reader.readAsDataURL(file);\n    }\n  };\n\n  handleUploadImage = (e) => {\n    e.preventDefault();\n\n    this.handleFileRead(e.target.files[0]);\n  };\n\n  enableDropzone = () => this.setState({ dropzoneActive: true });\n\n  disableDropzone = () => this.setState({ dropzoneActive: false });\n\n  handleOnPaste = (e) => {\n    const { files } = e.clipboardData;\n\n    if (files && isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n  };\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.disableDropzone();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.enableDropzone();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n\n    this.disableDropzone();\n  };\n\n  onUpdateShapes = (newShapes) => {\n    const { onUpdateShapes } = this.props;\n\n    this.setState(\n      { shapes: newShapes },\n      // always transform shapes array back into shapes map when saving changes\n      () => onUpdateShapes(groupShapes(newShapes)),\n    );\n  };\n\n  handleUndo = () => {\n    const { shapes } = this.state;\n\n    if (shapes && shapes.length) {\n      // sort by index value\n      let newShapes = shapes.sort((a, b) => parseInt(a.index) - parseInt(b.index));\n\n      newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];\n\n      this.onUpdateShapes(newShapes);\n    }\n  };\n\n  handleClearAll = () => this.onUpdateShapes([]);\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n\n  handleInputClick = () => this.input.click();\n\n  toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });\n\n  render() {\n    const {\n      classes,\n      dimensions,\n      hasErrors,\n      hotspotColor,\n      imageUrl,\n      multipleCorrect,\n      onUpdateImageDimension,\n      outlineColor,\n      strokeWidth,\n      preserveAspectRatioEnabled,\n    } = this.props;\n    const { dropzoneActive, dragEnabled, showTooltip } = this.state;\n    const { shapes } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={classNames(classes.box, {\n            [classes.boxError]: hasErrors && !dropzoneActive,\n            [classes.boxActive]: dropzoneActive,\n          })}\n          {...(dragEnabled\n            ? {\n                onDragExit: this.handleOnDragExit,\n                onDragLeave: this.handleOnDragExit,\n                onDragOver: this.handleOnDragOver,\n                onDrop: this.handleOnDrop,\n                onPaste: this.handleOnPaste,\n              }\n            : {})}\n        >\n          <div className={classes.toolbar}>\n            {imageUrl && (\n              <UploadControl\n                classNameButton={classes.replaceButton}\n                classNameSection={classes.replaceSection}\n                label=\"Replace Image\"\n                onInputClick={this.handleInputClick}\n                onUploadImage={this.handleUploadImage}\n                setRef={(ref) => {\n                  this.input = ref;\n                }}\n              />\n            )}\n\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleUndo} label=\"Undo\" />\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label=\"Clear all\" />\n          </div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <Drawable\n                dimensions={dimensions}\n                disableDrag={this.handleDisableDrag}\n                enableDrag={this.handleEnableDrag}\n                imageUrl={imageUrl}\n                hotspotColor={hotspotColor}\n                multipleCorrect={multipleCorrect}\n                onUpdateImageDimension={onUpdateImageDimension}\n                onUpdateShapes={this.onUpdateShapes}\n                outlineColor={outlineColor}\n                shapes={shapes}\n                strokeWidth={strokeWidth}\n                preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n              />\n            ) : (\n              <div className={classNames(classes.drawableHeight, classes.centered)}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                <UploadControl\n                  label=\"Upload Image\"\n                  onInputClick={this.handleInputClick}\n                  onUploadImage={this.handleUploadImage}\n                  setRef={(ref) => {\n                    this.input = ref;\n                  }}\n                />\n              </div>\n            )}\n          </div>\n\n          {imageUrl && (\n            <div className={classes.tooltip}>\n              {showTooltip && (\n                <div className={classes.tooltipContent}>\n                  <label>\n                    Click and drag to create a hotspot. Click the hotspot to mark correct. Click again to unmark.\n                  </label>\n                  <div className={classes.tooltipArrow} />\n                </div>\n              )}\n\n              <Help className={classes.icon} onMouseOut={this.toggleTooltip} onMouseOver={this.toggleTooltip} />\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n  },\n  boxActive: {\n    border: '1px solid #0032C2',\n  },\n  boxError: {\n    border: '1px solid red',\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    paddingBottom: theme.spacing.unit * 5,\n    paddingRight: theme.spacing.unit * 5,\n  },\n  icon: {\n    '&:hover': {\n      color: '#333131',\n      cursor: 'help',\n    },\n    color: '#C1C1C1',\n  },\n  replaceButton: {\n    marginLeft: 0,\n  },\n  replaceSection: {\n    marginRight: 'auto',\n  },\n  toolbar: {\n    backgroundColor: '#ECEDF1',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    justifyContent: 'flex-end',\n    padding: theme.spacing.unit,\n  },\n  tooltip: {\n    position: 'relative',\n    textAlign: 'right',\n    padding: theme.spacing.unit,\n  },\n  tooltipContent: {\n    background: '#333131',\n    borderRadius: '4px',\n    color: '#FFFFFF',\n    fontSize: theme.typography.fontSize,\n    lineHeight: '18px',\n    marginTop: '-60px',\n    padding: theme.spacing.unit,\n    position: 'absolute',\n    right: '5px',\n    textAlign: 'left',\n    width: '300px',\n  },\n  tooltipArrow: {\n    width: 0,\n    height: 0,\n    borderLeft: '10px solid transparent',\n    borderRight: '10px solid transparent',\n    borderTop: '10px solid #333131',\n    marginBottom: -10,\n    marginTop: '4px',\n    position: 'absolute',\n    right: '5px',\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.shape({\n    rectangles: PropTypes.array,\n    polygons: PropTypes.array,\n  }).isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  strokeWidth: 5,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}

package/configure/lib/root.js

@@ -122,74 +122,69 @@ var Root = /*#__PURE__*/function (_React$Component) {
           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$teacherInstructi = _ref.teacherInstructions,
-          teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi,
           _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$preserveAspectRa = _ref.preserveAspectRatio,
-          preserveAspectRatio = _ref$preserveAspectRa === void 0 ? {} : _ref$preserveAspectRa,
-          _ref$maxImageWidth = _ref.maxImageWidth,
-          maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
-          _ref$maxImageHeight = _ref.maxImageHeight,
-          maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight,
+          _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 || {},
-          teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
+          errors = _ref2.errors,
           promptEnabled = _ref2.promptEnabled,
           rationaleEnabled = _ref2.rationaleEnabled,
           spellCheckEnabled = _ref2.spellCheckEnabled,
-          errors = _ref2.errors,
-          rubricEnabled = _ref2.rubricEnabled;
+          teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
+          toolbarEditorPosition = _ref2.toolbarEditorPosition;
 
       var _ref3 = errors || {},
           shapesError = _ref3.shapesError,
           selectionsError = _ref3.selectionsError;
 
-      var toolbarOpts = {};
       var validationMessage = (0, _utils.generateValidationMessage)(configuration);
       var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
       var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
-
-      switch (model.toolbarEditorPosition) {
-        case 'top':
-          toolbarOpts.position = 'top';
-          break;
-
-        default:
-          toolbarOpts.position = 'bottom';
-          break;
-      }
-
+      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: {
-              multipleCorrect: multipleCorrect.settings && toggle(multipleCorrect.label),
-              partialScoring: partialScoring.settings && toggle(partialScoring.label),
-              promptEnabled: prompt.settings && toggle(prompt.label)
-            },
-            Properties: {
-              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)
-            }
+            Settings: panelSettings,
+            Properties: panelProperties
           }
         })
       }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -266,11 +261,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
         style: {
           "float": 'right'
         }
-      }))), shapesError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, shapesError), selectionsError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, selectionsError), /*#__PURE__*/_react["default"].createElement(_hotspotPalette["default"], {
+      }))), /*#__PURE__*/_react["default"].createElement(_hotspotPalette["default"], {
         hotspotColor: model.hotspotColor,
         hotspotList: model.hotspotList,
         outlineColor: model.outlineColor,
@@ -285,6 +276,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
         dimensions: model.dimensions,
         imageUrl: model.imageUrl,
         multipleCorrect: model.multipleCorrect,
+        hasErrors: !!shapesError || !!selectionsError,
         hotspotColor: model.hotspotColor,
         outlineColor: model.outlineColor,
         onUpdateImageDimension: onUpdateImageDimension,
@@ -293,7 +285,11 @@ var Root = /*#__PURE__*/function (_React$Component) {
         shapes: model.shapes,
         strokeWidth: model.strokeWidth,
         preserveAspectRatioEnabled: preserveAspectRatio.enabled
-      }), model.imageUrl && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      }), 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", {
@@ -350,7 +346,7 @@ var styles = function styles(theme) {
       width: '100%'
     },
     subheading: {
-      marginRight: '5px'
+      marginRight: theme.spacing.unit
     },
     regular: {
       marginBottom: theme.spacing.unit * 3
@@ -371,7 +367,7 @@ var styles = function styles(theme) {
     errorText: {
       fontSize: '12px',
       color: 'red',
-      padding: '5px 0'
+      paddingTop: theme.spacing.unit
     }
   };
 };

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","uploadSoundSupport","onConfigurationChanged","onImageUpload","onModelChangedByConfig","onPromptChanged","onRationaleChanged","onTeacherInstructionsChanged","multipleCorrect","partialScoring","prompt","teacherInstructions","rationale","spellCheck","maxImageWidth","maxImageHeight","withRubric","teacherInstructionsEnabled","promptEnabled","rationaleEnabled","spellCheckEnabled","errors","rubricEnabled","shapesError","selectionsError","toolbarOpts","validationMessage","defaultImageMaxWidth","defaultImageMaxHeight","toolbarEditorPosition","position","base","Settings","label","Properties","regular","language","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 { 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      multipleCorrect = {},\n      partialScoring = {},\n      prompt = {},\n      teacherInstructions = {},\n      rationale = {},\n      spellCheck = {},\n      preserveAspectRatio = {},\n      maxImageWidth = {},\n      maxImageHeight = {},\n      withRubric = {},\n    } = configuration || {};\n    const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled, spellCheckEnabled, errors, rubricEnabled } =\n      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: multipleCorrect.settings && toggle(multipleCorrect.label),\n                  partialScoring: partialScoring.settings && toggle(partialScoring.label),\n                  promptEnabled: prompt.settings && toggle(prompt.label),\n                },\n                Properties: {\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            />\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            {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            {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) => 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              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  uploadSoundSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func,\n  }),\n  onImageUpload: PropTypes.func.isRequired,\n  onColorChanged: PropTypes.func.isRequired,\n  onPromptChanged: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  onModelChangedByConfig: PropTypes.func.isRequired,\n  onRationaleChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: PropTypes.func.isRequired,\n  onTeacherInstructionsChanged: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(Root);\n"],"file":"root.js"}
+{"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","uploadSoundSupport","onConfigurationChanged","onImageUpload","onModelChangedByConfig","onPromptChanged","onRationaleChanged","onTeacherInstructionsChanged","maxImageWidth","maxImageHeight","multipleCorrect","partialScoring","prompt","rationale","settingsPanelDisabled","spellCheck","teacherInstructions","withRubric","errors","promptEnabled","rationaleEnabled","spellCheckEnabled","teacherInstructionsEnabled","toolbarEditorPosition","shapesError","selectionsError","validationMessage","defaultImageMaxWidth","defaultImageMaxHeight","toolbarOpts","position","panelSettings","label","panelProperties","rubricEnabled","base","Settings","Properties","regular","language","flexContainer","subheading","tooltip","hotspotColor","hotspotList","outlineColor","outlineList","handleColorChange","imageUrl","strokeWidth","errorText","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","propTypes","PropTypes","object","isRequired","shape","add","func"],"mappings":"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","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: 'red',\n    paddingTop: theme.spacing.unit,\n  },\n});\n\nRoot.propTypes = {\n  classes: PropTypes.object.isRequired,\n  configuration: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  imageSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func,\n  }),\n  uploadSoundSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func,\n  }),\n  onImageUpload: PropTypes.func.isRequired,\n  onColorChanged: PropTypes.func.isRequired,\n  onPromptChanged: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  onModelChangedByConfig: PropTypes.func.isRequired,\n  onRationaleChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: PropTypes.func.isRequired,\n  onTeacherInstructionsChanged: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(Root);\n"],"file":"root.js"}

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

@@ -3,7 +3,7 @@
 exports[`HotspotContainer render renders 1`] = `
 <div>
   <div
-    className="undefined "
+    className=""
     onDragExit={[Function]}
     onDragLeave={[Function]}
     onDragOver={[Function]}

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

@@ -3,6 +3,7 @@
 exports[`Root render renders 1`] = `
 <div>
   <ConfigLayout
+    hideSettings={false}
     settings={
       <Panel
         configuration={
@@ -39,6 +40,7 @@ exports[`Root render renders 1`] = `
               "label": "Rationale",
               "settings": true,
             },
+            "settingsPanelDisabled": false,
             "spellCheck": Object {
               "enabled": true,
               "label": "Spellcheck",
@@ -251,6 +253,7 @@ There should be at least 1 shape selected."
             "width": 400,
           }
         }
+        hasErrors={false}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         imageUrl="https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W"
         multipleCorrect={true}

package/configure/src/defaults.js

@@ -40,6 +40,7 @@ export default {
       settings: true,
       label: 'Prompt',
     },
+    settingsPanelDisabled: false,
     spellCheck: {
       label: 'Spellcheck',
       settings: false,

package/configure/src/hotspot-container.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles/index';
 import Help from '@material-ui/icons/Help';
 
@@ -10,6 +11,7 @@ import { getAllShapes, groupShapes } from './utils';
 
 const isImage = (file) => {
   const imageType = /image.*/;
+
   return file.type.match(imageType);
 };
 
@@ -49,6 +51,7 @@ export class Container extends Component {
   };
 
   enableDropzone = () => this.setState({ dropzoneActive: true });
+
   disableDropzone = () => this.setState({ dropzoneActive: false });
 
   handleOnPaste = (e) => {
@@ -73,6 +76,7 @@ export class Container extends Component {
     } else if (isImage(files[0])) {
       this.handleFileRead(files[0]);
     }
+
     this.disableDropzone();
   };
 
@@ -118,7 +122,9 @@ export class Container extends Component {
   handleClearAll = () => this.onUpdateShapes([]);
 
   handleEnableDrag = () => this.setState({ dragEnabled: true });
+
   handleDisableDrag = () => this.setState({ dragEnabled: false });
+
   handleInputClick = () => this.input.click();
 
   toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });
@@ -127,6 +133,7 @@ export class Container extends Component {
     const {
       classes,
       dimensions,
+      hasErrors,
       hotspotColor,
       imageUrl,
       multipleCorrect,
@@ -141,7 +148,10 @@ export class Container extends Component {
     return (
       <div className={classes.base}>
         <div
-          className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}
+          className={classNames(classes.box, {
+            [classes.boxError]: hasErrors && !dropzoneActive,
+            [classes.boxActive]: dropzoneActive,
+          })}
           {...(dragEnabled
             ? {
                 onDragExit: this.handleOnDragExit,
@@ -165,6 +175,7 @@ export class Container extends Component {
                 }}
               />
             )}
+
             <Button disabled={!(shapes && shapes.length)} onClick={this.handleUndo} label="Undo" />
             <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label="Clear all" />
           </div>
@@ -191,7 +202,7 @@ export class Container extends Component {
                 preserveAspectRatioEnabled={preserveAspectRatioEnabled}
               />
             ) : (
-              <div className={`${classes.drawableHeight} ${classes.centered}`}>
+              <div className={classNames(classes.drawableHeight, classes.centered)}>
                 <label>Drag and drop or upload image from computer</label>
                 <br />
                 <UploadControl
@@ -216,6 +227,7 @@ export class Container extends Component {
                   <div className={classes.tooltipArrow} />
                 </div>
               )}
+
               <Help className={classes.icon} onMouseOut={this.toggleTooltip} onMouseOver={this.toggleTooltip} />
             </div>
           )}
@@ -236,6 +248,9 @@ const styles = (theme) => ({
   boxActive: {
     border: '1px solid #0032C2',
   },
+  boxError: {
+    border: '1px solid red',
+  },
   centered: {
     alignItems: 'center',
     display: 'flex',
@@ -244,8 +259,8 @@ const styles = (theme) => ({
   },
   drawableHeight: {
     minHeight: 350,
-    paddingBottom: '40px',
-    paddingRight: '40px',
+    paddingBottom: theme.spacing.unit * 5,
+    paddingRight: theme.spacing.unit * 5,
   },
   icon: {
     '&:hover': {
@@ -267,21 +282,21 @@ const styles = (theme) => ({
     borderTopRightRadius: '5px',
     display: 'flex',
     justifyContent: 'flex-end',
-    padding: '12px 8px',
+    padding: theme.spacing.unit,
   },
   tooltip: {
     position: 'relative',
     textAlign: 'right',
-    padding: '5px 9px',
+    padding: theme.spacing.unit,
   },
   tooltipContent: {
     background: '#333131',
     borderRadius: '4px',
     color: '#FFFFFF',
-    fontSize: '14px',
+    fontSize: theme.typography.fontSize,
     lineHeight: '18px',
-    marginTop: '-70px',
-    padding: '7px 16px',
+    marginTop: '-60px',
+    padding: theme.spacing.unit,
     position: 'absolute',
     right: '5px',
     textAlign: 'left',
@@ -294,7 +309,7 @@ const styles = (theme) => ({
     borderRight: '10px solid transparent',
     borderTop: '10px solid #333131',
     marginBottom: -10,
-    marginTop: '2px',
+    marginTop: '4px',
     position: 'absolute',
     right: '5px',
   },
@@ -317,6 +332,7 @@ Container.propTypes = {
   strokeWidth: PropTypes.number,
   preserveAspectRatioEnabled: PropTypes.bool,
 };
+
 Container.defaultProps = {
   strokeWidth: 5,
 };

package/configure/src/root.jsx

@@ -65,39 +65,52 @@ export class Root extends React.Component {
       onUpdateShapes,
     } = this.props;
     const {
+      maxImageWidth = {},
+      maxImageHeight = {},
       multipleCorrect = {},
       partialScoring = {},
+      preserveAspectRatio = {},
       prompt = {},
-      teacherInstructions = {},
       rationale = {},
+      settingsPanelDisabled,
       spellCheck = {},
-      preserveAspectRatio = {},
-      maxImageWidth = {},
-      maxImageHeight = {},
+      teacherInstructions = {},
       withRubric = {},
     } = configuration || {};
-    const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled, spellCheckEnabled, errors, rubricEnabled } =
-      model || {};
+    const {
+      errors,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition,
+    } = 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;
-    }
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',
+    };
+
+    const panelSettings = {
+      multipleCorrect: multipleCorrect.settings && toggle(multipleCorrect.label),
+      partialScoring: partialScoring.settings && toggle(partialScoring.label),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+    };
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),
+    };
 
     return (
       <div className={classes.base}>
         <layout.ConfigLayout
+          hideSettings={settingsPanelDisabled}
           settings={
             <Panel
               model={model}
@@ -105,17 +118,8 @@ export class Root extends React.Component {
               configuration={configuration}
               onChangeConfiguration={onConfigurationChanged}
               groups={{
-                Settings: {
-                  multipleCorrect: multipleCorrect.settings && toggle(multipleCorrect.label),
-                  partialScoring: partialScoring.settings && toggle(partialScoring.label),
-                  promptEnabled: prompt.settings && toggle(prompt.label),
-                },
-                Properties: {
-                  teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-                  rationaleEnabled: rationale.settings && toggle(rationale.label),
-                  spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
-                  rubricEnabled: withRubric?.settings && toggle(withRubric?.label),
-                },
+                Settings: panelSettings,
+                Properties: panelProperties,
               }}
             />
           }
@@ -137,6 +141,7 @@ export class Root extends React.Component {
                 />
               </InputContainer>
             )}
+
             {promptEnabled && (
               <InputContainer label={prompt.label} className={classes.prompt}>
                 <EditableHtml
@@ -184,8 +189,6 @@ export class Root extends React.Component {
                 <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}
@@ -200,6 +203,7 @@ export class Root extends React.Component {
               dimensions={model.dimensions}
               imageUrl={model.imageUrl}
               multipleCorrect={model.multipleCorrect}
+              hasErrors={!!shapesError || !!selectionsError}
               hotspotColor={model.hotspotColor}
               outlineColor={model.outlineColor}
               onUpdateImageDimension={onUpdateImageDimension}
@@ -209,6 +213,8 @@ export class Root extends React.Component {
               strokeWidth={model.strokeWidth}
               preserveAspectRatioEnabled={preserveAspectRatio.enabled}
             />
+            {shapesError && <div className={classes.errorText}>{shapesError}</div>}
+            {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}
 
             {model.imageUrl && (
               <div>
@@ -226,6 +232,7 @@ export class Root extends React.Component {
                     showErrorWhenOutsideRange
                     className={classes.field}
                   />
+
                   <NumberTextField
                     key="hotspot-manual-height"
                     label="Height"
@@ -268,7 +275,7 @@ const styles = (theme) => ({
     width: '100%',
   },
   subheading: {
-    marginRight: '5px',
+    marginRight: theme.spacing.unit,
   },
   regular: {
     marginBottom: theme.spacing.unit * 3,
@@ -289,7 +296,7 @@ const styles = (theme) => ({
   errorText: {
     fontSize: '12px',
     color: 'red',
-    padding: '5px 0',
+    paddingTop: theme.spacing.unit,
   },
 });
 

package/docs/config-schema.json

@@ -51,6 +51,11 @@
         }
       }
     },
+    "settingsPanelDisabled": {
+      "description": "Indicates if the settings panel is not available",
+      "type": "boolean",
+      "title": "settingsPanelDisabled"
+    },
     "spellCheck": {
       "title": "ConfigureProp",
       "type": "object",

package/docs/config-schema.json.md

@@ -38,6 +38,10 @@ Indicates if the item has to be displayed in the Settings Panel
 
 Indicates the label for the item that has to be displayed in the Settings Panel
 
+# `settingsPanelDisabled` (boolean)
+
+Indicates if the settings panel is not available
+
 # `spellCheck` (object)
 
 Properties of the `spellCheck` object:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "5.5.2-next.31+80da0617c",
+  "version": "5.5.2-next.83+77cec3b4c",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -21,7 +21,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "80da0617ca8a9fe53b8b7cb8f64e635af84bf4be",
+  "gitHead": "77cec3b4c4c2c66cfe3896bde8ad8922b42790c2",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },