@pie-element/drawing-response 3.7.3-next.133 → 3.7.3-next.1335

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/image-container.jsx"],"names":["isImage","file","imageType","type","match","ImageContainer","props","onImageUpload","reader","FileReader","onloadend","result","readAsDataURL","e","preventDefault","target","files","handleFileRead","setState","dropzoneActive","dataTransfer","items","kind","getAsFile","makeDropzoneInactive","state","makeDropzoneActive","dragEnabled","input","click","offsetHeight","offsetWidth","onUpdateImageDimension","resizeHandle","resize","dimensions","height","width","addEventListener","initialiseResize","window","startResizing","stopResizing","handleEnableDrag","removeEventListener","box","image","maxImageWidth","bounds","getBoundingClientRect","x","clientX","left","y","clientY","top","fitsContainer","hasMinimumWidth","style","handleDisableDrag","maxImageHeight","imageSection","positionInfo","label","classes","handleInputClick","handleUploadImage","ref","imageUrl","base","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","toolbar","renderUploadControl","drawableHeight","imageContainer","handleOnImageLoad","maxWidth","maxHeight","centered","Component","styles","theme","marginTop","spacing","unit","border","borderRadius","alignItems","display","flexDirection","justifyContent","minHeight","position","borderBottom","borderRight","bottom","cursor","right","backgroundColor","borderTopLeftRadius","borderTopRightRadius","padding","propTypes","PropTypes","object","isRequired","string","func"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Button from './button';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n  return file.type.match(imageType);\n};\n\nexport class ImageContainer extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      maxImageWidth: 0,\n      maxImageHeight: 0,\n      dragEnabled: true,\n      dropzoneActive: false,\n    }\n  }\n\n  componentDidMount() {\n    if (this.imageSection) {\n      const positionInfo = this.imageSection.getBoundingClientRect();\n      const { height, width } = positionInfo;\n      this.setState({\n        maxImageWidth: width,\n        maxImageHeight: height\n      });\n    }\n  }\n\n  handleFileRead = (file) => {\n    const { onImageUpload } = this.props;\n    const reader = new FileReader();\n    reader.onloadend = () => {\n      onImageUpload(reader.result);\n    };\n    reader.readAsDataURL(file);\n  };\n\n  handleUploadImage = (e) => {\n    e.preventDefault();\n    const file = e.target.files[0];\n    this.handleFileRead(file);\n  };\n\n  makeDropzoneActive= () => this.setState({ dropzoneActive: true });\n\n  makeDropzoneInactive = () => this.setState({ dropzoneActive: false });\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.makeDropzoneInactive();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.makeDropzoneActive();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n    this.makeDropzoneInactive();\n  };\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n  handleInputClick = () => this.input.click();\n\n  handleOnImageLoad = ({ target: { offsetHeight, offsetWidth } }) => {\n    const { onUpdateImageDimension } = this.props;\n    const resizeHandle = this.resize;\n\n    const dimensions = {\n      height: offsetHeight,\n      width: offsetWidth\n    };\n\n    this.setState({ dimensions });\n    onUpdateImageDimension(dimensions);\n\n    resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n  };\n\n  initialiseResize = () => {\n    window.addEventListener('mousemove', this.startResizing, false);\n    window.addEventListener('mouseup', this.stopResizing, false);\n  };\n\n  stopResizing = () => {\n    const { onUpdateImageDimension } = this.props;\n    const { dimensions } = this.state;\n\n    this.handleEnableDrag();\n    onUpdateImageDimension(dimensions);\n\n    window.removeEventListener('mousemove', this.startResizing, false);\n    window.removeEventListener('mouseup', this.stopResizing, false);\n  };\n\n  startResizing = (e) => {\n    const box = this.image;\n    const { maxImageWidth } = this.state;\n\n    const bounds = e.target.getBoundingClientRect();\n    const x = e.clientX - bounds.left;\n    const y = e.clientY - bounds.top;\n\n    const fitsContainer = x <= maxImageWidth + 5;\n    const hasMinimumWidth = x > 150 && y > 150;\n\n    if (fitsContainer && hasMinimumWidth) {\n      box.style.width = `${x}px`;\n      box.style.height = `${y}px`;\n\n      this.setState({ dimensions: { height: y, width: x }});\n    }\n\n    this.handleDisableDrag();\n  };\n\n  renderUploadControl(label) {\n    const { classes } = this.props;\n\n    return (\n      <div>\n        <Button\n          label={label}\n          onClick={this.handleInputClick}\n        />\n        <input\n          accept=\"image/*\"\n          className={classes.input}\n          onChange={this.handleUploadImage}\n          ref={ref => { this.input = ref; }}\n          type=\"file\"\n        />\n      </div>\n    )\n  }\n\n  render() {\n    const {\n      classes,\n      imageUrl\n    } = this.props;\n    const {\n      dropzoneActive,\n      dragEnabled,\n      maxImageHeight,\n      maxImageWidth\n    } = this.state;\n\n    return (\n      <div className={classes.base} >\n        <div className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}\n             {...dragEnabled ? {\n               onDragExit: this.handleOnDragExit,\n               onDragLeave: this.handleOnDragExit,\n               onDragOver: this.handleOnDragOver ,\n               onDrop: this.handleOnDrop\n             } : {}}\n        >\n          <div className={classes.toolbar}>\n            {this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}\n          </div>\n\n          <div ref={ref => { this.imageSection = ref; }} className={classes.drawableHeight}>\n            {imageUrl ? (\n              <div className={classes.imageContainer}>\n                <img\n                  className={classes.image}\n                  height=\"auto\"\n                  onLoad={this.handleOnImageLoad}\n                  ref={ref => { this.image = ref; }}\n                  src={imageUrl}\n                  style={{ maxWidth: maxImageWidth, maxHeight: maxImageHeight }}\n                  alt=''\n                />\n                <div ref={ref => { this.resize = ref; }} className={classes.resize} />\n              </div>\n            ) : (\n              <div className={`${classes.drawableHeight} ${classes.centered}`}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                {this.renderUploadControl('Upload Image')}\n              </div>\n            )}\n          </div>\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  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content'\n  },\n  resize: {\n    borderBottom: '1px solid #727272',\n    borderRight: '1px solid #727272',\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px'\n  },\n  input: {\n    display: 'none'\n  },\n  toolbar: {\n    backgroundColor: '#ECEDF1',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    padding: '12px 8px'\n  }\n});\n\nImageContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired\n};\n\nexport default withStyles(styles)(ImageContainer);\n"],"file":"image-container.js"}
+{"version":3,"sources":["../src/image-container.jsx"],"names":["isImage","file","imageType","type","match","ImageContainer","props","onImageUpload","reader","FileReader","onloadend","result","readAsDataURL","e","preventDefault","target","files","handleFileRead","setState","dropzoneActive","dataTransfer","items","kind","getAsFile","makeDropzoneInactive","state","makeDropzoneActive","dragEnabled","input","click","offsetHeight","offsetWidth","naturalHeight","naturalWidth","onUpdateImageDimension","imageDimensions","resizeHandle","resize","dimensions","height","width","imageAspectRatio","addEventListener","initialiseResize","window","startResizing","stopResizing","handleEnableDrag","removeEventListener","box","image","maxImageWidth","maxImageHeight","bounds","getBoundingClientRect","x","clientX","left","y","clientY","top","fitsContainer","hasMinimumWidth","style","handleDisableDrag","imageSection","positionInfo","label","classes","handleInputClick","handleUploadImage","ref","imageUrl","base","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","toolbar","renderUploadControl","drawableHeight","imageContainer","handleOnImageLoad","undefined","maxWidth","maxHeight","centered","Component","styles","theme","marginTop","spacing","unit","border","borderRadius","alignItems","display","flexDirection","justifyContent","minHeight","position","borderBottom","borderRight","bottom","cursor","right","backgroundColor","borderTopLeftRadius","borderTopRightRadius","padding","propTypes","PropTypes","object","isRequired","string","func"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAACC,IAAD,EAAU;AACxB,MAAMC,SAAS,GAAG,SAAlB;AACA,SAAOD,IAAI,CAACE,IAAL,CAAUC,KAAV,CAAgBF,SAAhB,CAAP;AACD,CAHD;;IAKaG,c;;;;;AACX,0BAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,uGAqBF,UAACL,IAAD,EAAU;AACzB,UAAQM,aAAR,GAA0B,MAAKD,KAA/B,CAAQC,aAAR;AACA,UAAMC,MAAM,GAAG,IAAIC,UAAJ,EAAf;;AACAD,MAAAA,MAAM,CAACE,SAAP,GAAmB,YAAM;AACvBH,QAAAA,aAAa,CAACC,MAAM,CAACG,MAAR,CAAb;AACD,OAFD;;AAGAH,MAAAA,MAAM,CAACI,aAAP,CAAqBX,IAArB;AACD,KA5BkB;AAAA,0GA8BC,UAACY,CAAD,EAAO;AACzBA,MAAAA,CAAC,CAACC,cAAF;AACA,UAAMb,IAAI,GAAGY,CAAC,CAACE,MAAF,CAASC,KAAT,CAAe,CAAf,CAAb;;AACA,YAAKC,cAAL,CAAoBhB,IAApB;AACD,KAlCkB;AAAA,2GAoCE;AAAA,aAAM,MAAKiB,QAAL,CAAc;AAAEC,QAAAA,cAAc,EAAE;AAAlB,OAAd,CAAN;AAAA,KApCF;AAAA,6GAsCI;AAAA,aAAM,MAAKD,QAAL,CAAc;AAAEC,QAAAA,cAAc,EAAE;AAAlB,OAAd,CAAN;AAAA,KAtCJ;AAAA,qGAwCJ,UAACN,CAAD,EAAO;AACpBA,MAAAA,CAAC,CAACC,cAAF;AACA,4BAAyBD,CAAC,CAACO,YAA3B;AAAA,UAAQC,KAAR,mBAAQA,KAAR;AAAA,UAAeL,KAAf,mBAAeA,KAAf;;AAEA,UAAIK,KAAK,IAAIA,KAAK,CAAC,CAAD,CAAL,CAASC,IAAT,KAAkB,MAA/B,EAAuC;AACrC,YAAMrB,IAAI,GAAGoB,KAAK,CAAC,CAAD,CAAL,CAASE,SAAT,EAAb;;AACA,YAAIvB,OAAO,CAACC,IAAD,CAAX,EAAmB;AACjB,gBAAKgB,cAAL,CAAoBhB,IAApB;AACD;AACF,OALD,MAKO,IAAID,OAAO,CAACgB,KAAK,CAAC,CAAD,CAAN,CAAX,EAAuB;AAC5B,cAAKC,cAAL,CAAoBD,KAAK,CAAC,CAAD,CAAzB;AACD;;AAED,YAAKQ,oBAAL;AACD,KAtDkB;AAAA,yGAwDA,UAACX,CAAD,EAAO;AACxBA,MAAAA,CAAC,CAACC,cAAF;AACA,UAAQK,cAAR,GAA2B,MAAKM,KAAhC,CAAQN,cAAR;;AAEA,UAAI,CAACA,cAAL,EAAqB;AACnB,cAAKO,kBAAL;AACD;AACF,KA/DkB;AAAA,yGAiEA,UAACb,CAAD,EAAO;AACxBA,MAAAA,CAAC,CAACC,cAAF;;AACA,YAAKU,oBAAL;AACD,KApEkB;AAAA,yGAsEA;AAAA,aAAM,MAAKN,QAAL,CAAc;AAAES,QAAAA,WAAW,EAAE;AAAf,OAAd,CAAN;AAAA,KAtEA;AAAA,0GAuEC;AAAA,aAAM,MAAKT,QAAL,CAAc;AAAES,QAAAA,WAAW,EAAE;AAAf,OAAd,CAAN;AAAA,KAvED;AAAA,yGAwEA;AAAA,aAAM,MAAKC,KAAL,CAAWC,KAAX,EAAN;AAAA,KAxEA;AAAA,0GA0EC,gBAA4E;AAAA,6BAAzEd,MAAyE;AAAA,UAA/De,YAA+D,eAA/DA,YAA+D;AAAA,UAAjDC,WAAiD,eAAjDA,WAAiD;AAAA,UAApCC,aAAoC,eAApCA,aAAoC;AAAA,UAArBC,YAAqB,eAArBA,YAAqB;AAC9F,wBAAoD,MAAK3B,KAAzD;AAAA,UAAQ4B,sBAAR,eAAQA,sBAAR;AAAA,UAAgCC,eAAhC,eAAgCA,eAAhC;AACA,UAAMC,YAAY,GAAG,MAAKC,MAA1B;AAEA,UAAMC,UAAU,GAAG;AACjBC,QAAAA,MAAM,EAAGJ,eAAe,IAAIA,eAAe,CAACI,MAApC,IAA+CT,YAA/C,IAA+DE,aADtD;AAEjBQ,QAAAA,KAAK,EAAGL,eAAe,IAAIA,eAAe,CAACK,KAApC,IAA8CT,WAA9C,IAA6DE;AAFnD,OAAnB,CAJ8F,CAS9F;;AACA,UAAMQ,gBAAgB,GAAGR,YAAY,GAAGD,aAAxC;;AAEA,UAAIM,UAAU,CAACE,KAAX,KAAqBF,UAAU,CAACC,MAAX,GAAoBE,gBAA7C,EAA+D;AAC7DH,QAAAA,UAAU,CAACE,KAAX,GAAmBF,UAAU,CAACC,MAAX,GAAoBE,gBAAvC;AACD;;AAED,YAAKvB,QAAL,CAAc;AAAEoB,QAAAA,UAAU,EAAVA;AAAF,OAAd;;AACAJ,MAAAA,sBAAsB,CAACI,UAAD,CAAtB;AAEAF,MAAAA,YAAY,CAACM,gBAAb,CAA8B,WAA9B,EAA2C,MAAKC,gBAAhD,EAAkE,KAAlE;AACD,KA9FkB;AAAA,yGAgGA,YAAM;AACvBC,MAAAA,MAAM,CAACF,gBAAP,CAAwB,WAAxB,EAAqC,MAAKG,aAA1C,EAAyD,KAAzD;AACAD,MAAAA,MAAM,CAACF,gBAAP,CAAwB,SAAxB,EAAmC,MAAKI,YAAxC,EAAsD,KAAtD;AACD,KAnGkB;AAAA,qGAqGJ,YAAM;AACnB,UAAQZ,sBAAR,GAAmC,MAAK5B,KAAxC,CAAQ4B,sBAAR;AACA,UAAQI,UAAR,GAAuB,MAAKb,KAA5B,CAAQa,UAAR;;AAEA,YAAKS,gBAAL;;AACAb,MAAAA,sBAAsB,CAACI,UAAD,CAAtB;AAEAM,MAAAA,MAAM,CAACI,mBAAP,CAA2B,WAA3B,EAAwC,MAAKH,aAA7C,EAA4D,KAA5D;AACAD,MAAAA,MAAM,CAACI,mBAAP,CAA2B,SAA3B,EAAsC,MAAKF,YAA3C,EAAyD,KAAzD;AACD,KA9GkB;AAAA,sGAgHH,UAACjC,CAAD,EAAO;AACrB,UAAMoC,GAAG,GAAG,MAAKC,KAAjB;AACA,wBAAsD,MAAKzB,KAA3D;AAAA,UAAQ0B,aAAR,eAAQA,aAAR;AAAA,UAAuBC,cAAvB,eAAuBA,cAAvB;AAAA,UAAuCd,UAAvC,eAAuCA,UAAvC;AAEA,UAAMe,MAAM,GAAGxC,CAAC,CAACE,MAAF,CAASuC,qBAAT,EAAf;AACA,UAAMC,CAAC,GAAG1C,CAAC,CAAC2C,OAAF,GAAYH,MAAM,CAACI,IAA7B;AACA,UAAMC,CAAC,GAAG7C,CAAC,CAAC8C,OAAF,GAAYN,MAAM,CAACO,GAA7B;AAEA,UAAMnB,gBAAgB,GAAGH,UAAU,CAACE,KAAX,GAAmBF,UAAU,CAACC,MAAvD;AACA,UAAMsB,aAAa,GAAGN,CAAC,IAAIJ,aAAa,GAAG,CAArB,IAA2BI,CAAC,GAAGd,gBAAL,IAA0BW,cAAc,GAAG,CAA3F;AACA,UAAMU,eAAe,GAAGP,CAAC,GAAG,GAAJ,IAAWG,CAAC,GAAG,GAAvC;;AAEA,UAAIG,aAAa,IAAIC,eAAjB,IAAoCb,GAAxC,EAA6C;AAC3CA,QAAAA,GAAG,CAACc,KAAJ,CAAUvB,KAAV,aAAqBe,CAArB;AACAN,QAAAA,GAAG,CAACc,KAAJ,CAAUxB,MAAV,aAAsBgB,CAAC,GAAGd,gBAA1B;;AAEA,cAAKvB,QAAL,CAAc;AACZoB,UAAAA,UAAU,EAAE;AACVE,YAAAA,KAAK,EAAEe,CADG;AAEVhB,YAAAA,MAAM,EAAEgB,CAAC,GAAGd;AAFF;AADA,SAAd;AAMD;;AAED,YAAKuB,iBAAL;AACD,KAzIkB;AAEjB,UAAKvC,KAAL,GAAa;AACX0B,MAAAA,aAAa,EAAE,MADJ;AAEXC,MAAAA,cAAc,EAAE,MAFL;AAGXzB,MAAAA,WAAW,EAAE,IAHF;AAIXR,MAAAA,cAAc,EAAE;AAJL,KAAb;AAFiB;AAQlB;;;;WAED,6BAAoB;AAClB,UAAI,KAAK8C,YAAT,EAAuB;AACrB,YAAMC,YAAY,GAAG,KAAKD,YAAL,CAAkBX,qBAAlB,EAArB;AACA,YAAQf,MAAR,GAA0B2B,YAA1B,CAAQ3B,MAAR;AAAA,YAAgBC,KAAhB,GAA0B0B,YAA1B,CAAgB1B,KAAhB;AACA,aAAKtB,QAAL,CAAc;AACZiC,UAAAA,aAAa,EAAEX,KADH;AAEZY,UAAAA,cAAc,EAAEb;AAFJ,SAAd;AAID;AACF;;;WAwHD,6BAAoB4B,KAApB,EAA2B;AAAA;;AACzB,UAAQC,OAAR,GAAoB,KAAK9D,KAAzB,CAAQ8D,OAAR;AAEA,0BACE,0DACE,gCAAC,kBAAD;AAAQ,QAAA,KAAK,EAAED,KAAf;AAAsB,QAAA,OAAO,EAAE,KAAKE;AAApC,QADF,eAEE;AACE,QAAA,MAAM,EAAC,SADT;AAEE,QAAA,SAAS,EAAED,OAAO,CAACxC,KAFrB;AAGE,QAAA,QAAQ,EAAE,KAAK0C,iBAHjB;AAIE,QAAA,GAAG,EAAE,aAACC,KAAD,EAAS;AACZ,UAAA,MAAI,CAAC3C,KAAL,GAAa2C,KAAb;AACD,SANH;AAOE,QAAA,IAAI,EAAC;AAPP,QAFF,CADF;AAcD;;;WAED,kBAAS;AAAA;;AACP,yBAA+C,KAAKjE,KAApD;AAAA,UAAQ8D,OAAR,gBAAQA,OAAR;AAAA,UAAiBI,QAAjB,gBAAiBA,QAAjB;AAAA,UAA2BrC,eAA3B,gBAA2BA,eAA3B;AACA,yBAKI,KAAKV,KALT;AAAA,UACEN,cADF,gBACEA,cADF;AAAA,UAEEQ,WAFF,gBAEEA,WAFF;AAAA,UAGEyB,cAHF,gBAGEA,cAHF;AAAA,UAIED,aAJF,gBAIEA,aAJF;AAOA,0BACE;AAAK,QAAA,SAAS,EAAEiB,OAAO,CAACK;AAAxB,sBACE;AACE,QAAA,SAAS,YAAKL,OAAO,CAACnB,GAAb,cACP9B,cAAc,GAAGiD,OAAO,CAACM,SAAX,GAAuB,EAD9B;AADX,SAIO/C,WAAW,GACZ;AACEgD,QAAAA,UAAU,EAAE,KAAKC,gBADnB;AAEEC,QAAAA,WAAW,EAAE,KAAKD,gBAFpB;AAGEE,QAAAA,UAAU,EAAE,KAAKC,gBAHnB;AAIEC,QAAAA,MAAM,EAAE,KAAKC;AAJf,OADY,GAOZ,EAXN,gBAaE;AAAK,QAAA,SAAS,EAAEb,OAAO,CAACc;AAAxB,SACG,KAAKC,mBAAL,CACCX,QAAQ,GAAG,eAAH,GAAqB,cAD9B,CADH,CAbF,eAmBE;AACE,QAAA,GAAG,EAAE,aAACD,KAAD,EAAS;AACZ,UAAA,MAAI,CAACN,YAAL,GAAoBM,KAApB;AACD,SAHH;AAIE,QAAA,SAAS,EAAEH,OAAO,CAACgB;AAJrB,SAMGZ,QAAQ,gBACP;AAAK,QAAA,SAAS,EAAEJ,OAAO,CAACiB;AAAxB,sBACE;AACE,QAAA,SAAS,EAAEjB,OAAO,CAAClB,KADrB;AAEE,QAAA,MAAM,EAAC,MAFT;AAGE,QAAA,MAAM,EAAE,KAAKoC,iBAHf;AAIE,QAAA,GAAG,EAAE,aAACf,KAAD,EAAS;AACZ,UAAA,MAAI,CAACrB,KAAL,GAAaqB,KAAb;AACD,SANH;AAOE,QAAA,GAAG,EAAEC,QAPP;AAQE,QAAA,KAAK,EAAE;AACLhC,UAAAA,KAAK,EAAEL,eAAe,IAAIA,eAAe,CAACK,KAAnC,GAA2CL,eAAe,CAACK,KAA3D,GAAmE+C,SADrE;AAELC,UAAAA,QAAQ,EAAErC,aAFL;AAGLsC,UAAAA,SAAS,EAAErC;AAHN,SART;AAaE,QAAA,GAAG,EAAC;AAbN,QADF,eAgBE;AACE,QAAA,GAAG,EAAE,aAACmB,KAAD,EAAS;AACZ,UAAA,MAAI,CAAClC,MAAL,GAAckC,KAAd;AACD,SAHH;AAIE,QAAA,SAAS,EAAEH,OAAO,CAAC/B;AAJrB,QAhBF,CADO,gBAyBP;AAAK,QAAA,SAAS,YAAK+B,OAAO,CAACgB,cAAb,cAA+BhB,OAAO,CAACsB,QAAvC;AAAd,sBACE,6FADF,eAEE,2CAFF,EAGG,KAAKP,mBAAL,CAAyB,cAAzB,CAHH,CA/BJ,CAnBF,CADF,CADF;AA8DD;;;EAtOiCQ,gB;;;;AAyOpC,IAAMC,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBpB,IAAAA,IAAI,EAAE;AACJqB,MAAAA,SAAS,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB;AAD5B,KADmB;AAIzB/C,IAAAA,GAAG,EAAE;AACHgD,MAAAA,MAAM,EAAE,mBADL;AAEHC,MAAAA,YAAY,EAAE;AAFX,KAJoB;AAQzBxB,IAAAA,SAAS,EAAE;AACTuB,MAAAA,MAAM,EAAE;AADC,KARc;AAWzBP,IAAAA,QAAQ,EAAE;AACRS,MAAAA,UAAU,EAAE,QADJ;AAERC,MAAAA,OAAO,EAAE,MAFD;AAGRC,MAAAA,aAAa,EAAE,QAHP;AAIRC,MAAAA,cAAc,EAAE;AAJR,KAXe;AAiBzBlB,IAAAA,cAAc,EAAE;AACdmB,MAAAA,SAAS,EAAE;AADG,KAjBS;AAoBzBrD,IAAAA,KAAK,EAAE;AACLiD,MAAAA,UAAU,EAAE,QADP;AAELC,MAAAA,OAAO,EAAE,MAFJ;AAGLE,MAAAA,cAAc,EAAE;AAHX,KApBkB;AAyBzBjB,IAAAA,cAAc,EAAE;AACdmB,MAAAA,QAAQ,EAAE,UADI;AAEdhE,MAAAA,KAAK,EAAE;AAFO,KAzBS;AA6BzBH,IAAAA,MAAM,EAAE;AACNoE,MAAAA,YAAY,EAAE,mBADR;AAENC,MAAAA,WAAW,EAAE,mBAFP;AAGNC,MAAAA,MAAM,EAAE,OAHF;AAINC,MAAAA,MAAM,EAAE,WAJF;AAKNrE,MAAAA,MAAM,EAAE,MALF;AAMNiE,MAAAA,QAAQ,EAAE,UANJ;AAONK,MAAAA,KAAK,EAAE,OAPD;AAQNrE,MAAAA,KAAK,EAAE;AARD,KA7BiB;AAuCzBZ,IAAAA,KAAK,EAAE;AACLwE,MAAAA,OAAO,EAAE;AADJ,KAvCkB;AA0CzBlB,IAAAA,OAAO,EAAE;AACP4B,MAAAA,eAAe,EAAE,SADV;AAEPL,MAAAA,YAAY,EAAE,mBAFP;AAGPM,MAAAA,mBAAmB,EAAE,KAHd;AAIPC,MAAAA,oBAAoB,EAAE,KAJf;AAKPZ,MAAAA,OAAO,EAAE,MALF;AAMPa,MAAAA,OAAO,EAAE;AANF;AA1CgB,GAAZ;AAAA,CAAf;;AAoDA5G,cAAc,CAAC6G,SAAf,GAA2B;AACzB9C,EAAAA,OAAO,EAAE+C,sBAAUC,MAAV,CAAiBC,UADD;AAEzB7C,EAAAA,QAAQ,EAAE2C,sBAAUG,MAAV,CAAiBD,UAFF;AAGzB9G,EAAAA,aAAa,EAAE4G,sBAAUI,IAAV,CAAeF,UAHL;AAIzBnF,EAAAA,sBAAsB,EAAEiF,sBAAUI,IAAV,CAAeF;AAJd,CAA3B;;eAOe,wBAAWzB,MAAX,EAAmBvF,cAAnB,C","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Button from './button';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n  return file.type.match(imageType);\n};\n\nexport class ImageContainer extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      maxImageWidth: \"100%\",\n      maxImageHeight: \"auto\",\n      dragEnabled: true,\n      dropzoneActive: false,\n    };\n  }\n\n  componentDidMount() {\n    if (this.imageSection) {\n      const positionInfo = this.imageSection.getBoundingClientRect();\n      const { height, width } = positionInfo;\n      this.setState({\n        maxImageWidth: width,\n        maxImageHeight: height,\n      });\n    }\n  }\n\n  handleFileRead = (file) => {\n    const { onImageUpload } = this.props;\n    const reader = new FileReader();\n    reader.onloadend = () => {\n      onImageUpload(reader.result);\n    };\n    reader.readAsDataURL(file);\n  };\n\n  handleUploadImage = (e) => {\n    e.preventDefault();\n    const file = e.target.files[0];\n    this.handleFileRead(file);\n  };\n\n  makeDropzoneActive = () => this.setState({ dropzoneActive: true });\n\n  makeDropzoneInactive = () => this.setState({ dropzoneActive: false });\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.makeDropzoneInactive();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.makeDropzoneActive();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n    this.makeDropzoneInactive();\n  };\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n  handleInputClick = () => this.input.click();\n\n  handleOnImageLoad = ({ target: { offsetHeight, offsetWidth, naturalHeight, naturalWidth } }) => {\n    const { onUpdateImageDimension, imageDimensions } = this.props;\n    const resizeHandle = this.resize;\n\n    const dimensions = {\n      height: (imageDimensions && imageDimensions.height) || offsetHeight || naturalHeight,\n      width: (imageDimensions && imageDimensions.width) || offsetWidth || naturalWidth,\n    };\n\n    // check if aspect ratio is not respected on replacing image\n    const imageAspectRatio = naturalWidth / naturalHeight;\n\n    if (dimensions.width !== dimensions.height * imageAspectRatio) {\n      dimensions.width = dimensions.height * imageAspectRatio;\n    }\n\n    this.setState({ dimensions });\n    onUpdateImageDimension(dimensions);\n\n    resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n  };\n\n  initialiseResize = () => {\n    window.addEventListener('mousemove', this.startResizing, false);\n    window.addEventListener('mouseup', this.stopResizing, false);\n  };\n\n  stopResizing = () => {\n    const { onUpdateImageDimension } = this.props;\n    const { dimensions } = this.state;\n\n    this.handleEnableDrag();\n    onUpdateImageDimension(dimensions);\n\n    window.removeEventListener('mousemove', this.startResizing, false);\n    window.removeEventListener('mouseup', this.stopResizing, false);\n  };\n\n  startResizing = (e) => {\n    const box = this.image;\n    const { maxImageWidth, maxImageHeight, dimensions } = this.state;\n\n    const bounds = e.target.getBoundingClientRect();\n    const x = e.clientX - bounds.left;\n    const y = e.clientY - bounds.top;\n\n    const imageAspectRatio = dimensions.width / dimensions.height;\n    const fitsContainer = x <= maxImageWidth + 5 && (x / imageAspectRatio) <= maxImageHeight + 5;\n    const hasMinimumWidth = x > 150 && y > 150;\n\n    if (fitsContainer && hasMinimumWidth && box) {\n      box.style.width = `${x}px`;\n      box.style.height = `${x / imageAspectRatio}px`;\n\n      this.setState({\n        dimensions: {\n          width: x,\n          height: x / imageAspectRatio,\n        },\n      });\n    }\n\n    this.handleDisableDrag();\n  };\n\n  renderUploadControl(label) {\n    const { classes } = this.props;\n\n    return (\n      <div>\n        <Button label={label} onClick={this.handleInputClick} />\n        <input\n          accept=\"image/*\"\n          className={classes.input}\n          onChange={this.handleUploadImage}\n          ref={(ref) => {\n            this.input = ref;\n          }}\n          type=\"file\"\n        />\n      </div>\n    );\n  }\n\n  render() {\n    const { classes, imageUrl, imageDimensions } = this.props;\n    const {\n      dropzoneActive,\n      dragEnabled,\n      maxImageHeight,\n      maxImageWidth\n    } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={`${classes.box} ${\n            dropzoneActive ? classes.boxActive : ''\n          }`}\n          {...(dragEnabled\n            ? {\n                onDragExit: this.handleOnDragExit,\n                onDragLeave: this.handleOnDragExit,\n                onDragOver: this.handleOnDragOver,\n                onDrop: this.handleOnDrop,\n              }\n            : {})}\n        >\n          <div className={classes.toolbar}>\n            {this.renderUploadControl(\n              imageUrl ? 'Replace Image' : 'Upload Image'\n            )}\n          </div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <div className={classes.imageContainer}>\n                <img\n                  className={classes.image}\n                  height=\"auto\"\n                  onLoad={this.handleOnImageLoad}\n                  ref={(ref) => {\n                    this.image = ref;\n                  }}\n                  src={imageUrl}\n                  style={{\n                    width: imageDimensions && imageDimensions.width ? imageDimensions.width : undefined,\n                    maxWidth: maxImageWidth,\n                    maxHeight: maxImageHeight\n                  }}\n                  alt=\"\"\n                />\n                <div\n                  ref={(ref) => {\n                    this.resize = ref;\n                  }}\n                  className={classes.resize}\n                />\n              </div>\n            ) : (\n              <div className={`${classes.drawableHeight} ${classes.centered}`}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                {this.renderUploadControl('Upload Image')}\n              </div>\n            )}\n          </div>\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  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  resize: {\n    borderBottom: '1px solid #727272',\n    borderRight: '1px solid #727272',\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n  input: {\n    display: 'none',\n  },\n  toolbar: {\n    backgroundColor: '#ECEDF1',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    padding: '12px 8px',\n  },\n});\n\nImageContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(ImageContainer);\n"],"file":"image-container.js"}

package/configure/lib/index.js

@@ -35,13 +35,13 @@ var _root = _interopRequireDefault(require("./root"));
 
 var _defaults = _interopRequireDefault(require("./defaults"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function 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 = 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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var log = (0, _debug["default"])('hotspot:configure');
 
@@ -63,12 +63,6 @@ var DrawableResponseConfigure = /*#__PURE__*/function (_HTMLElement) {
       _this._render();
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onConfigurationChanged", function (c) {
-      if (!c.backgroundImage.enabled) {
-        _this.onModelChanged(_objectSpread(_objectSpread({}, _this._model), {}, {
-          imageUrl: ''
-        }));
-      }
-
       _this._configuration = c;
 
       _this._render();
@@ -105,6 +99,16 @@ var DrawableResponseConfigure = /*#__PURE__*/function (_HTMLElement) {
       var resetValue = !!reset;
       this.dispatchEvent(new _pieConfigureEvents.ModelUpdatedEvent(this._model, resetValue));
     }
+  }, {
+    key: "insertSound",
+    value: function insertSound(handler) {
+      this.dispatchEvent(new _pieConfigureEvents.InsertSoundEvent(handler));
+    }
+  }, {
+    key: "onDeleteSound",
+    value: function onDeleteSound(src, done) {
+      this.dispatchEvent(new _pieConfigureEvents.DeleteSoundEvent(src, done));
+    }
   }, {
     key: "_render",
     value: function _render() {
@@ -118,6 +122,10 @@ var DrawableResponseConfigure = /*#__PURE__*/function (_HTMLElement) {
         imageSupport: {
           add: this.insertImage,
           "delete": this.onDeleteImage
+        },
+        uploadSoundSupport: {
+          add: this.insertSound.bind(this),
+          "delete": this.onDeleteSound.bind(this)
         }
       });
 

package/configure/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","DrawableResponseConfigure","m","reset","_model","dispatchModelUpdated","_render","c","backgroundImage","enabled","onModelChanged","imageUrl","_configuration","handler","dispatchEvent","InsertImageEvent","src","done","DeleteImageEvent","createDefaultModel","sensibleDefaults","configuration","bind","s","resetValue","ModelUpdatedEvent","element","React","createElement","Root","model","onConfigurationChanged","imageSupport","add","insertImage","onDeleteImage","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAMA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,mBAAN,CAAZ;;IAEqBC,yB;;;;;AAMnB,uCAAc;AAAA;;AAAA;AACZ;AADY,uGAuBG,UAACC,CAAD,EAAIC,KAAJ,EAAc;AAC7B,YAAKC,MAAL,GAAcF,CAAd;;AACA,YAAKG,oBAAL,CAA0BF,KAA1B;;AACA,YAAKG,OAAL;AACD,KA3Ba;AAAA,+GA6BW,UAACC,CAAD,EAAO;AAC9B,UAAI,CAACA,CAAC,CAACC,eAAF,CAAkBC,OAAvB,EAAgC;AAC9B,cAAKC,cAAL,iCACK,MAAKN,MADV;AAEEO,UAAAA,QAAQ,EAAE;AAFZ;AAID;;AACD,YAAKC,cAAL,GAAsBL,CAAtB;;AACA,YAAKD,OAAL;AACD,KAtCa;AAAA,oGAwCA,UAACO,OAAD,EAAa;AACzB,YAAKC,aAAL,CAAmB,IAAIC,oCAAJ,CAAqBF,OAArB,CAAnB;AACD,KA1Ca;AAAA,sGA4CE,UAACG,GAAD,EAAMC,IAAN,EAAe;AAC7B,YAAKH,aAAL,CAAmB,IAAII,oCAAJ,CAAqBF,GAArB,EAA0BC,IAA1B,CAAnB;AACD,KA9Ca;AAEZ,UAAKb,MAAL,GAAcH,yBAAyB,CAACkB,kBAA1B,EAAd;AACA,UAAKP,cAAL,GAAsBQ,qBAAiBC,aAAvC;AACA,UAAKX,cAAL,GAAsB,MAAKA,cAAL,CAAoBY,IAApB,gDAAtB;AAJY;AAKb;;;;SAED,aAAUC,CAAV,EAAa;AACX,WAAKnB,MAAL,GAAcH,yBAAyB,CAACkB,kBAA1B,CAA6CI,CAA7C,CAAd;;AACA,WAAKjB,OAAL;AACD;;;SAED,aAAkBC,CAAlB,EAAqB;AACnB,WAAKK,cAAL,GAAsBL,CAAtB;;AACA,WAAKD,OAAL;AACD;;;WAED,8BAAqBH,KAArB,EAA4B;AAC1B,UAAMqB,UAAU,GAAG,CAAC,CAACrB,KAArB;AAEA,WAAKW,aAAL,CAAmB,IAAIW,qCAAJ,CAAsB,KAAKrB,MAA3B,EAAmCoB,UAAnC,CAAnB;AACD;;;WA2BD,mBAAU;AACRxB,MAAAA,GAAG,CAAC,SAAD,CAAH;;AACA,UAAI0B,OAAO,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACtCC,QAAAA,KAAK,EAAE,KAAK1B,MAD0B;AAEtCiB,QAAAA,aAAa,EAAE,KAAKT,cAFkB;AAGtCF,QAAAA,cAAc,EAAE,KAAKA,cAHiB;AAItCqB,QAAAA,sBAAsB,EAAE,KAAKA,sBAJS;AAKtCC,QAAAA,YAAY,EAAE;AACZC,UAAAA,GAAG,EAAE,KAAKC,WADE;AAEZ,oBAAQ,KAAKC;AAFD;AALwB,OAA1B,CAAd;;AAUAC,2BAASC,MAAT,CAAgBX,OAAhB,EAAyB,IAAzB;AACD;;;kDAnEoDY,W;;;iCAAlCrC,yB,wBACS;AAAA,MAAC6B,KAAD,uEAAS,EAAT;AAAA,yCACvBV,qBAAiBU,KADM,GAEvBA,KAFuB;AAAA,C","sourcesContent":["import {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n} from '@pie-framework/pie-configure-events';\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\n\nimport Root from './root';\nimport sensibleDefaults from './defaults';\n\nconst log = debug('hotspot:configure');\n\nexport default class DrawableResponseConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}) => ({\n    ...sensibleDefaults.model,\n    ...model,\n  });\n\n  constructor() {\n    super();\n    this._model = DrawableResponseConfigure.createDefaultModel();\n    this._configuration = sensibleDefaults.configuration;\n    this.onModelChanged = this.onModelChanged.bind(this);\n  }\n\n  set model(s) {\n    this._model = DrawableResponseConfigure.createDefaultModel(s);\n    this._render();\n  }\n\n  set configuration(c) {\n    this._configuration = c;\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged = (m, reset) => {\n    this._model = m;\n    this.dispatchModelUpdated(reset);\n    this._render();\n  };\n\n  onConfigurationChanged = (c) => {\n    if (!c.backgroundImage.enabled) {\n      this.onModelChanged({\n        ...this._model,\n        imageUrl: ''\n      });\n    }\n    this._configuration = c;\n    this._render();\n  };\n\n  insertImage = (handler) => {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  };\n\n  onDeleteImage = (src, done) => {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  };\n\n  _render() {\n    log('_render');\n    let element = React.createElement(Root, {\n      model: this._model,\n      configuration: this._configuration,\n      onModelChanged: this.onModelChanged,\n      onConfigurationChanged: this.onConfigurationChanged,\n      imageSupport: {\n        add: this.insertImage,\n        delete: this.onDeleteImage\n      }\n    });\n    ReactDOM.render(element, this);\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","DrawableResponseConfigure","m","reset","_model","dispatchModelUpdated","_render","c","_configuration","handler","dispatchEvent","InsertImageEvent","src","done","DeleteImageEvent","createDefaultModel","sensibleDefaults","configuration","onModelChanged","bind","s","resetValue","ModelUpdatedEvent","InsertSoundEvent","DeleteSoundEvent","element","React","createElement","Root","model","onConfigurationChanged","imageSupport","add","insertImage","onDeleteImage","uploadSoundSupport","insertSound","onDeleteSound","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAQA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,mBAAN,CAAZ;;IAEqBC,yB;;;;;AAMnB,uCAAc;AAAA;;AAAA;AACZ;AADY,uGAuBG,UAACC,CAAD,EAAIC,KAAJ,EAAc;AAC7B,YAAKC,MAAL,GAAcF,CAAd;;AACA,YAAKG,oBAAL,CAA0BF,KAA1B;;AACA,YAAKG,OAAL;AACD,KA3Ba;AAAA,+GA6BW,UAACC,CAAD,EAAO;AAC9B,YAAKC,cAAL,GAAsBD,CAAtB;;AACA,YAAKD,OAAL;AACD,KAhCa;AAAA,oGAkCA,UAACG,OAAD,EAAa;AACzB,YAAKC,aAAL,CAAmB,IAAIC,oCAAJ,CAAqBF,OAArB,CAAnB;AACD,KApCa;AAAA,sGAsCE,UAACG,GAAD,EAAMC,IAAN,EAAe;AAC7B,YAAKH,aAAL,CAAmB,IAAII,oCAAJ,CAAqBF,GAArB,EAA0BC,IAA1B,CAAnB;AACD,KAxCa;AAEZ,UAAKT,MAAL,GAAcH,yBAAyB,CAACc,kBAA1B,EAAd;AACA,UAAKP,cAAL,GAAsBQ,qBAAiBC,aAAvC;AACA,UAAKC,cAAL,GAAsB,MAAKA,cAAL,CAAoBC,IAApB,gDAAtB;AAJY;AAKb;;;;SAED,aAAUC,CAAV,EAAa;AACX,WAAKhB,MAAL,GAAcH,yBAAyB,CAACc,kBAA1B,CAA6CK,CAA7C,CAAd;;AACA,WAAKd,OAAL;AACD;;;SAED,aAAkBC,CAAlB,EAAqB;AACnB,WAAKC,cAAL,GAAsBD,CAAtB;;AACA,WAAKD,OAAL;AACD;;;WAED,8BAAqBH,KAArB,EAA4B;AAC1B,UAAMkB,UAAU,GAAG,CAAC,CAAClB,KAArB;AAEA,WAAKO,aAAL,CAAmB,IAAIY,qCAAJ,CAAsB,KAAKlB,MAA3B,EAAmCiB,UAAnC,CAAnB;AACD;;;WAqBD,qBAAYZ,OAAZ,EAAqB;AACnB,WAAKC,aAAL,CAAmB,IAAIa,oCAAJ,CAAqBd,OAArB,CAAnB;AACD;;;WAED,uBAAcG,GAAd,EAAmBC,IAAnB,EAAyB;AACvB,WAAKH,aAAL,CAAmB,IAAIc,oCAAJ,CAAqBZ,GAArB,EAA0BC,IAA1B,CAAnB;AACD;;;WAED,mBAAU;AACRb,MAAAA,GAAG,CAAC,SAAD,CAAH;;AACA,UAAIyB,OAAO,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACtCC,QAAAA,KAAK,EAAE,KAAKzB,MAD0B;AAEtCa,QAAAA,aAAa,EAAE,KAAKT,cAFkB;AAGtCU,QAAAA,cAAc,EAAE,KAAKA,cAHiB;AAItCY,QAAAA,sBAAsB,EAAE,KAAKA,sBAJS;AAKtCC,QAAAA,YAAY,EAAE;AACZC,UAAAA,GAAG,EAAE,KAAKC,WADE;AAEZ,oBAAQ,KAAKC;AAFD,SALwB;AAStCC,QAAAA,kBAAkB,EAAE;AAClBH,UAAAA,GAAG,EAAE,KAAKI,WAAL,CAAiBjB,IAAjB,CAAsB,IAAtB,CADa;AAElB,oBAAQ,KAAKkB,aAAL,CAAmBlB,IAAnB,CAAwB,IAAxB;AAFU;AATkB,OAA1B,CAAd;;AAcAmB,2BAASC,MAAT,CAAgBd,OAAhB,EAAyB,IAAzB;AACD;;;kDAzEoDe,W;;;iCAAlCvC,yB,wBACS;AAAA,MAAC4B,KAAD,uEAAS,EAAT;AAAA,yCACvBb,qBAAiBa,KADM,GAEvBA,KAFuB;AAAA,C","sourcesContent":["import {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent\n} from '@pie-framework/pie-configure-events';\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\n\nimport Root from './root';\nimport sensibleDefaults from './defaults';\n\nconst log = debug('hotspot:configure');\n\nexport default class DrawableResponseConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}) => ({\n    ...sensibleDefaults.model,\n    ...model,\n  });\n\n  constructor() {\n    super();\n    this._model = DrawableResponseConfigure.createDefaultModel();\n    this._configuration = sensibleDefaults.configuration;\n    this.onModelChanged = this.onModelChanged.bind(this);\n  }\n\n  set model(s) {\n    this._model = DrawableResponseConfigure.createDefaultModel(s);\n    this._render();\n  }\n\n  set configuration(c) {\n    this._configuration = c;\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged = (m, reset) => {\n    this._model = m;\n    this.dispatchModelUpdated(reset);\n    this._render();\n  };\n\n  onConfigurationChanged = (c) => {\n    this._configuration = c;\n    this._render();\n  };\n\n  insertImage = (handler) => {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  };\n\n  onDeleteImage = (src, done) => {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  };\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  _render() {\n    log('_render');\n    let element = React.createElement(Root, {\n      model: this._model,\n      configuration: this._configuration,\n      onModelChanged: this.onModelChanged,\n      onConfigurationChanged: this.onConfigurationChanged,\n      imageSupport: {\n        add: this.insertImage,\n        delete: this.onDeleteImage\n      },\n      uploadSoundSupport: {\n        add: this.insertSound.bind(this),\n        delete: this.onDeleteSound.bind(this)\n      }\n    });\n    ReactDOM.render(element, this);\n  }\n}\n"],"file":"index.js"}

package/configure/lib/root.js

@@ -37,13 +37,13 @@ var _imageContainer = _interopRequireDefault(require("./image-container"));
 
 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; }
+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 = 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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var Panel = _configUi.settings.Panel,
     toggle = _configUi.settings.toggle;
@@ -107,6 +107,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
           configuration = _this$props5.configuration,
           model = _this$props5.model,
           imageSupport = _this$props5.imageSupport,
+          uploadSoundSupport = _this$props5.uploadSoundSupport,
           onConfigurationChanged = _this$props5.onConfigurationChanged,
           onModelChanged = _this$props5.onModelChanged;
 
@@ -116,13 +117,25 @@ var Root = /*#__PURE__*/function (_React$Component) {
           _ref$prompt = _ref.prompt,
           prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
           _ref$teacherInstructi = _ref.teacherInstructions,
-          teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi;
+          teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi,
+          _ref$spellCheck = _ref.spellCheck,
+          spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
+          _ref$maxImageWidth = _ref.maxImageWidth,
+          maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
+          _ref$maxImageHeight = _ref.maxImageHeight,
+          maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight,
+          withRubric = _ref.withRubric;
 
       var _ref2 = model || {},
           teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
-          promptEnabled = _ref2.promptEnabled;
+          promptEnabled = _ref2.promptEnabled,
+          spellCheckEnabled = _ref2.spellCheckEnabled,
+          backgroundImageEnabled = _ref2.backgroundImageEnabled,
+          rubricEnabled = _ref2.rubricEnabled;
 
       var toolbarOpts = {};
+      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
 
       switch (model.toolbarEditorPosition) {
         case 'top':
@@ -144,11 +157,13 @@ var Root = /*#__PURE__*/function (_React$Component) {
           onChangeConfiguration: onConfigurationChanged,
           groups: {
             Settings: {
-              'backgroundImage.enabled': backgroundImage.settings && toggle(backgroundImage.label, true),
+              backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.label),
               promptEnabled: prompt.settings && toggle(prompt.label)
             },
             Properties: {
-              teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label)
+              teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+              spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+              rubricEnabled: withRubric.settings && toggle(withRubric.label)
             }
           }
         })
@@ -162,21 +177,41 @@ var Root = /*#__PURE__*/function (_React$Component) {
         onChange: this.onTeacherInstructionsChanged,
         imageSupport: imageSupport,
         nonEmpty: false,
-        toolbarOpts: toolbarOpts
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }]
       })), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: "Item Stem",
         className: classes.prompt
       }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
         markup: model.prompt,
         onChange: this.onPromptChanged,
-        toolbarOpts: toolbarOpts
-      })), backgroundImage.enabled && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        toolbarOpts: toolbarOpts,
+        spellCheck: spellCheckEnabled,
+        imageSupport: imageSupport,
+        maxImageWidth: defaultImageMaxWidth,
+        maxImageHeight: defaultImageMaxHeight,
+        uploadSoundSupport: uploadSoundSupport,
+        languageCharactersProps: [{
+          language: 'spanish'
+        }, {
+          language: 'special'
+        }]
+      })), backgroundImageEnabled && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: classes.label,
         variant: "subheading"
       }, "Define Background Image"), /*#__PURE__*/_react["default"].createElement(_imageContainer["default"], {
         imageUrl: model.imageUrl,
         onUpdateImageDimension: this.onUpdateImageDimension,
-        onImageUpload: this.onImageUpload
+        onImageUpload: this.onImageUpload,
+        imageDimensions: model.imageDimensions
       })))));
     }
   }]);
@@ -211,6 +246,10 @@ Root.propTypes = {
     add: _propTypes["default"].func,
     "delete": _propTypes["default"].func
   }),
+  uploadSoundSupport: _propTypes["default"].shape({
+    add: _propTypes["default"].func,
+    "delete": _propTypes["default"].func
+  }),
   onModelChanged: _propTypes["default"].func.isRequired,
   onConfigurationChanged: _propTypes["default"].func.isRequired
 };

package/configure/lib/root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/root.jsx"],"names":["Panel","settings","toggle","Root","prompt","props","model","onModelChanged","update","teacherInstructions","dimensions","imageDimensions","imageUrl","classes","configuration","imageSupport","onConfigurationChanged","backgroundImage","teacherInstructionsEnabled","promptEnabled","toolbarOpts","toolbarEditorPosition","position","base","Settings","label","Properties","regular","onTeacherInstructionsChanged","onPromptChanged","enabled","onUpdateImageDimension","onImageUpload","React","Component","styles","theme","marginTop","spacing","unit","paddingTop","width","marginBottom","propTypes","PropTypes","object","isRequired","shape","add","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer } 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 ImageContainer from './image-container';\nimport cloneDeep from 'lodash/cloneDeep';\n\nconst { Panel, toggle } = settings;\n\nexport class Root extends React.Component {\n  onPromptChanged = prompt => {\n    const { model, onModelChanged } = this.props;\n    const update = cloneDeep(model);\n\n    onModelChanged({\n      ...update,\n      prompt\n    });\n  };\n\n  onTeacherInstructionsChanged = teacherInstructions => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      teacherInstructions\n    });\n  };\n\n  onUpdateImageDimension = (dimensions) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      imageDimensions: dimensions\n    });\n  };\n\n  onImageUpload = imageUrl => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      imageUrl\n    });\n  };\n\n  render() {\n    const {\n      classes,\n      configuration,\n      model,\n      imageSupport,\n      onConfigurationChanged,\n      onModelChanged\n    } = this.props;\n    const { backgroundImage = {}, prompt = {}, teacherInstructions = {} } =\n      configuration || {};\n    const { teacherInstructionsEnabled, promptEnabled } =\n      model || {};\n    const toolbarOpts = {};\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={onModelChanged}\n              configuration={configuration}\n              onChangeConfiguration={onConfigurationChanged}\n              groups={{\n                Settings: {\n                  'backgroundImage.enabled':\n                    backgroundImage.settings &&\n                    toggle(backgroundImage.label, true),\n                  promptEnabled: prompt.settings && toggle(prompt.label)\n                },\n                Properties: {\n                  teacherInstructionsEnabled:\n                    teacherInstructions.settings &&\n                    toggle(teacherInstructions.label)\n                }\n              }}\n            />\n          }\n        >\n          <div className={classes.regular}>\n            {teacherInstructionsEnabled && (\n              <InputContainer\n                label={teacherInstructions.label}\n                className={classes.prompt}\n              >\n                <EditableHtml\n                  markup={model.teacherInstructions || ''}\n                  onChange={this.onTeacherInstructionsChanged}\n                  imageSupport={imageSupport}\n                  nonEmpty={false}\n                  toolbarOpts={toolbarOpts}\n                />\n              </InputContainer>\n            )}\n\n            {promptEnabled && (\n              <InputContainer label=\"Item Stem\" className={classes.prompt}>\n                <EditableHtml\n                  markup={model.prompt}\n                  onChange={this.onPromptChanged}\n                  toolbarOpts={toolbarOpts}\n                />\n              </InputContainer>\n            )}\n\n            {backgroundImage.enabled && (\n              <div>\n                <Typography className={classes.label} variant=\"subheading\">\n                  Define Background Image\n                </Typography>\n\n                <ImageContainer\n                  imageUrl={model.imageUrl}\n                  onUpdateImageDimension={this.onUpdateImageDimension}\n                  onImageUpload={this.onImageUpload}\n                />\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  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});\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  onModelChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: 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","prompt","props","model","onModelChanged","update","teacherInstructions","dimensions","imageDimensions","imageUrl","classes","configuration","imageSupport","uploadSoundSupport","onConfigurationChanged","backgroundImage","spellCheck","maxImageWidth","maxImageHeight","withRubric","teacherInstructionsEnabled","promptEnabled","spellCheckEnabled","backgroundImageEnabled","rubricEnabled","toolbarOpts","defaultImageMaxWidth","defaultImageMaxHeight","toolbarEditorPosition","position","base","Settings","label","Properties","regular","onTeacherInstructionsChanged","language","onPromptChanged","onUpdateImageDimension","onImageUpload","React","Component","styles","theme","marginTop","spacing","unit","paddingTop","width","marginBottom","propTypes","PropTypes","object","isRequired","shape","add","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer } 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 ImageContainer from './image-container';\nimport cloneDeep from 'lodash/cloneDeep';\n\nconst { Panel, toggle } = settings;\n\nexport class Root extends React.Component {\n  onPromptChanged = (prompt) => {\n    const { model, onModelChanged } = this.props;\n    const update = cloneDeep(model);\n\n    onModelChanged({\n      ...update,\n      prompt,\n    });\n  };\n\n  onTeacherInstructionsChanged = (teacherInstructions) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      teacherInstructions,\n    });\n  };\n\n  onUpdateImageDimension = (dimensions) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      imageDimensions: dimensions,\n    });\n  };\n\n  onImageUpload = (imageUrl) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      imageUrl,\n    });\n  };\n\n  render() {\n    const {\n      classes,\n      configuration,\n      model,\n      imageSupport,\n      uploadSoundSupport,\n      onConfigurationChanged,\n      onModelChanged,\n    } = this.props;\n    const {\n      backgroundImage = {},\n      prompt = {},\n      teacherInstructions = {},\n      spellCheck = {},\n      maxImageWidth = {},\n      maxImageHeight = {},\n      withRubric,\n    } = configuration || {};\n    const {\n      teacherInstructionsEnabled,\n      promptEnabled,\n      spellCheckEnabled,\n      backgroundImageEnabled,\n      rubricEnabled\n    } = model || {};\n    const toolbarOpts = {};\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={onModelChanged}\n              configuration={configuration}\n              onChangeConfiguration={onConfigurationChanged}\n              groups={{\n                Settings: {\n                  backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.label),\n                  promptEnabled: prompt.settings && toggle(prompt.label)\n                },\n                Properties: {\n                  teacherInstructionsEnabled:\n                    teacherInstructions.settings &&\n                    toggle(teacherInstructions.label),\n                  spellCheckEnabled:\n                    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\n                label={teacherInstructions.label}\n                className={classes.prompt}\n              >\n                <EditableHtml\n                  markup={model.teacherInstructions || ''}\n                  onChange={this.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=\"Item Stem\" className={classes.prompt}>\n                <EditableHtml\n                  markup={model.prompt}\n                  onChange={this.onPromptChanged}\n                  toolbarOpts={toolbarOpts}\n                  spellCheck={spellCheckEnabled}\n                  imageSupport={imageSupport}\n                  maxImageWidth={defaultImageMaxWidth}\n                  maxImageHeight={defaultImageMaxHeight}\n                  uploadSoundSupport={uploadSoundSupport}\n                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n                />\n              </InputContainer>\n            )}\n\n            {backgroundImageEnabled && (\n              <div>\n                <Typography className={classes.label} variant=\"subheading\">\n                  Define Background Image\n                </Typography>\n\n                <ImageContainer\n                  imageUrl={model.imageUrl}\n                  onUpdateImageDimension={this.onUpdateImageDimension}\n                  onImageUpload={this.onImageUpload}\n                  imageDimensions={model.imageDimensions}\n                />\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  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});\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  onModelChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(Root);\n"],"file":"root.js"}

package/configure/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@pie-element/drawing-response-configure",
   "private": true,
-  "version": "3.2.2",
+  "version": "4.1.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "author": "",
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-framework/pie-configure-events": "^1.2.0",
-    "@pie-lib/config-ui": "^10.10.2",
-    "@pie-lib/editable-html": "^7.17.2",
+    "@pie-framework/pie-configure-events": "^1.3.0",
+    "@pie-lib/config-ui": "^11.0.19",
+    "@pie-lib/editable-html": "^9.2.2",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",

package/configure/src/__tests__/__snapshots__/image-container.test.jsx.snap

@@ -31,8 +31,9 @@ exports[`ImageContainer snapshot renders 1`] = `
           src="url"
           style={
             Object {
-              "maxHeight": 0,
-              "maxWidth": 0,
+              "maxHeight": "auto",
+              "maxWidth": "100%",
+              "width": undefined,
             }
           }
         />

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

@@ -8,27 +8,45 @@ exports[`Root snapshot renders 1`] = `
         configuration={
           Object {
             "backgroundImage": Object {
-              "enabled": true,
               "label": "Background Image",
               "settings": true,
             },
+            "maxImageHeight": Object {
+              "prompt": 300,
+              "teacherInstructions": 300,
+            },
+            "maxImageWidth": Object {
+              "prompt": 300,
+              "teacherInstructions": 300,
+            },
             "prompt": Object {
               "label": "Prompt",
               "settings": true,
             },
+            "spellCheck": Object {
+              "enabled": true,
+              "label": "Spellcheck",
+              "settings": false,
+            },
             "teacherInstructions": Object {
               "label": "Teacher Instructions",
               "settings": true,
             },
+            "withRubric": Object {
+              "label": "Add Rubric",
+              "settings": true,
+            },
           }
         }
         groups={
           Object {
             "Properties": Object {
+              "rubricEnabled": undefined,
+              "spellCheckEnabled": false,
               "teacherInstructionsEnabled": undefined,
             },
             "Settings": Object {
-              "backgroundImage.enabled": undefined,
+              "backgroundImageEnabled": undefined,
               "promptEnabled": undefined,
             },
           }
@@ -54,7 +72,19 @@ exports[`Root snapshot renders 1`] = `
         label="Item Stem"
       >
         <EditableHtml
+          languageCharactersProps={
+            Array [
+              Object {
+                "language": "spanish",
+              },
+              Object {
+                "language": "special",
+              },
+            ]
+          }
           markup="Test Prompt"
+          maxImageHeight={300}
+          maxImageWidth={300}
           onChange={[Function]}
           toolbarOpts={
             Object {
@@ -63,18 +93,6 @@ exports[`Root snapshot renders 1`] = `
           }
         />
       </Component>
-      <div>
-        <WithStyles(Typography)
-          variant="subheading"
-        >
-          Define Background Image
-        </WithStyles(Typography)>
-        <WithStyles(ImageContainer)
-          imageUrl=""
-          onImageUpload={[Function]}
-          onUpdateImageDimension={[Function]}
-        />
-      </div>
     </div>
   </ConfigLayout>
 </div>

package/configure/src/__tests__/image-container.test.jsx

@@ -138,7 +138,7 @@ describe('ImageContainer', () => {
     });
 
     it('handleOnImageLoad calls onUpdateImageDimension', () => {
-      w.instance().handleOnImageLoad({ target: { offsetHeight: 50, offsetWidth: 50 }});
+      w.instance().handleOnImageLoad({ target: { offsetHeight: 50, offsetWidth: 50, naturalWidth: 50, naturalHeight: 50 }});
 
       expect(onUpdateImageDimension).toHaveBeenCalledWith({
         height: 50,
@@ -147,7 +147,7 @@ describe('ImageContainer', () => {
     });
 
     it('stopResizing calls onUpdateImageDimension', () => {
-      w.instance().handleOnImageLoad({ target: { offsetHeight: 50, offsetWidth: 50 }});
+      w.instance().handleOnImageLoad({ target: { offsetHeight: 50, offsetWidth: 50, naturalWidth: 50, naturalHeight: 50 }});
 
       expect(onUpdateImageDimension).toHaveBeenCalledWith(w.instance().state.dimensions);
     });

package/configure/src/defaults.js

@@ -9,13 +9,19 @@ export default {
     promptEnabled: true,
     teacherInstructionsEnabled: true,
     studentInstructionsEnabled: true,
+    backgroundImageEnabled: true,
+    spellCheckEnabled:true,
     toolbarEditorPosition: 'bottom',
   },
   configuration: {
+    spellCheck: {
+      label: 'Spellcheck',
+      settings:false,
+      enabled:true
+    },
     backgroundImage: {
       settings: true,
-      label: 'Background Image',
-      enabled: true
+      label: 'Background Image'
     },
     prompt: {
       settings: true,
@@ -24,6 +30,18 @@ export default {
     teacherInstructions: {
       settings: true,
       label: 'Teacher Instructions',
+    },
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300
+    },
+    withRubric: {
+      settings: true,
+      label: 'Add Rubric'
     }
   }
 };